mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(contacts-footer-hero-section): remove placeholder text from input fields for cleaner UI

Browse Source 
- Removed placeholder text from various input fields in ContactsStep, FooterStep, HeroStep, and SectionStep components to streamline the user interface.
- Updated MarketingForm to enhance form field handling and validation logic.
- Improved default values in useMarketingForm for better initial state management.
This commit is contained in:
AmirReza Jamali
2026-05-02 12:49:58 +03:30
parent 37c4053a6c
commit c82574af01
7 changed files with 122 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/marketing/_components/ContactsStep.tsx
-5
View File
@@ -45,14 +45,12 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
label="Description"
{...register("description")}
name="description"
placeholder="Enter Description"
/>
<InputGroup
{...register("submit_button_text")}
label="Submit Button Text"
name="submit_button_text"
type="text"
placeholder="Enter Submit Button Text"
/>
</div>
</ShowcaseSection>
@@ -67,7 +65,6 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
label="Field Name"
name={`fields.${index}.name`}
type="text"
placeholder="Field Name"
disabled
/>
<InputGroup
@@ -75,14 +72,12 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
label="Label"
name={`fields.${index}.label`}
type="text"
placeholder="Enter Label"
/>
<InputGroup
{...register(`fields.${index}.placeholder`)}
label="Placeholder"
name={`fields.${index}.placeholder`}
type="text"
placeholder="Enter Placeholder"
/>
<Checkbox
{...register(`fields.${index}.required`)}
src/app/marketing/_components/FooterStep.tsx
-4
View File
@@ -48,27 +48,23 @@ const FooterStep = forwardRef<unknown, FooterStepProps>(
label="Phone Number"
name="phone"
type="text"
placeholder="Enter Phone Number"
/>
<InputGroup
{...register("location")}
label="Location"
name="location"
type="text"
placeholder="Enter Location"
/>
<TextAreaGroup
label="Tagline"
{...register("tagline")}
name="tagline"
placeholder="Enter Tagline"
/>
<InputGroup
{...register("copyright")}
label="Copyright"
name="copyright"
type="text"
placeholder="Enter Copyright Text"
/>
</div>
</ShowcaseSection>
src/app/marketing/_components/HeroStep.tsx
-1
View File
@@ -61,7 +61,6 @@ const HeroStep = forwardRef<unknown, HeroStepProps>(({ initialData }, ref) => {
},
})}
name="description"
placeholder="Enter Description"
/>
{errors.description && (
<p className="mt-1 text-sm text-red-500">
src/app/marketing/_components/MarketingForm.tsx
+42 -24
View File
@@ -40,6 +40,7 @@ const MarketingForm = ({
handleStepChange,
handleSubmitAll,
registerPageType,
watchPageType,
pageTypeErrors,
isCompany,
setValue,
@@ -55,47 +56,56 @@ const MarketingForm = ({
<>
<Breadcrumb items={breadcrumbItems} />
<ShowcaseSection title={title}>
<div className="mb-6 rounded-xl bg-gray-1 p-6 dark:bg-gray-7">
<div className="mb-6 rounded-xl bg-gray-1 p-10 dark:bg-gray-7">
<h3 className="mb-4 text-lg font-semibold text-dark dark:text-white">
Page Configuration
</h3>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div>
<Select
{...registerPageType("type", {
required: { message: FormErrorMessages.required, value: true },
required: {
message: FormErrorMessages.required,
value: true,
},
})}
errors={pageTypeErrors}
name="type"
label="Page Type"
required
value={watchPageType("type")}
items={[
{ value: "company", label: "Company" },
{ value: "organization", label: "Organization" },
]}
/>
{pageTypeErrors.type && (
<p className="mt-1 text-sm text-red-500">
{pageTypeErrors.type.message}
</p>
)}
</div>
<div>
<Select
{...registerPageType("language")}
{...registerPageType("language", {
validate: (v) =>
!isCompany ||
(typeof v === "string" && v.length > 0) ||
FormErrorMessages.required,
})}
errors={pageTypeErrors}
label="Language"
name="language"
items={Languages}
defaultValue="en"
value={watchPageType("language")}
clearable
prefixIcon={<GlobeIcon />}
disabled={!isCompany}
required={isCompany}
placeholder="Please select language"
onClear={() => setValue("language", undefined)}
placeholder={
isCompany ? "Please select language" : undefined
}
onClear={() => setValue("language", "")}
/>
{pageTypeErrors.language && (
<p className="mt-1 text-sm text-red-500">
{pageTypeErrors.language.message}
</p>
)}
</div>
<div>
<InputGroup
{...registerPageType("company_name", {
required: isCompany
@@ -111,7 +121,7 @@ const MarketingForm = ({
label="Company Name"
name="company_name"
type="text"
placeholder="Enter Company Name"
placeholder={isCompany ? "Enter Company Name" : undefined}
disabled={!isCompany}
required={isCompany}
/>
@@ -120,24 +130,30 @@ const MarketingForm = ({
{pageTypeErrors.company_name.message}
</p>
)}
</div>
<div>
<Select
{...registerPageType("country")}
{...registerPageType("country", {
validate: (v) =>
!isCompany ||
(typeof v === "string" && v.length > 0) ||
FormErrorMessages.required,
})}
errors={pageTypeErrors}
name="country"
label="Country"
items={Countries}
defaultValue="USA"
value={watchPageType("country")}
clearable
prefixIcon={<GlobeIcon />}
disabled={!isCompany}
required={isCompany}
placeholder="Please select country"
onClear={() => setValue("country", undefined)}
placeholder={isCompany ? "Please select country" : undefined}
onClear={() => setValue("country", "")}
/>
{pageTypeErrors.country && (
<p className="mt-1 text-sm text-red-500">
{pageTypeErrors.country.message}
</p>
)}
</div>
<div className="sm:col-span-2">
<InputGroup
{...registerPageType("key", {
required: {
@@ -147,6 +163,7 @@ const MarketingForm = ({
})}
label="Page key"
name="key"
required
placeholder="Please enter page key"
type="text"
/>
@@ -157,6 +174,7 @@ const MarketingForm = ({
)}
</div>
</div>
</div>
<div style={{ display: step === 0 ? "block" : "none" }}>
<HeroStep ref={heroRef} initialData={formData.hero} />
src/app/marketing/_components/SectionStep.tsx
-2
View File
@@ -71,7 +71,6 @@ const SectionStep = <T extends FieldValues>({
label="Section Description"
{...register("description" as Path<T>)}
name="description"
placeholder="Enter Section Description"
/>
</ShowcaseSection>
<ShowcaseSection
@@ -117,7 +116,6 @@ const SectionStep = <T extends FieldValues>({
{...register(`cards.${index}.description` as Path<T>)}
label="Description"
name={`cards.${index}.description`}
placeholder="Enter Description"
className="sm:col-span-2"
/>
<button
src/app/marketing/_components/useMarketingForm.ts
+7 -2
View File
@@ -39,6 +39,10 @@ const useMarketingForm = (
} = useForm<IPageTypeFields>({
defaultValues: {
type: "company",
language: "en",
country: "USA",
company_name: "",
key: "",
},
});
@@ -46,9 +50,9 @@ const useMarketingForm = (
if (initialData) {
const formValues = {
type: initialData.type || "company",
language: initialData.language || "",
language: initialData.language ?? "en",
company_name: initialData.company_name || "",
country: initialData.country || "",
country: initialData.country ?? "USA",
key: initialData.key || "",
};
reset(formValues);
@@ -238,6 +242,7 @@ const useMarketingForm = (
handleStepChange,
handleSubmitAll,
registerPageType,
watchPageType,
pageTypeErrors,
isCompany,
setValue,
src/components/FormElements/InputGroup/index.tsx
+2 -3
View File
@@ -100,9 +100,8 @@ const InputGroup = <T extends FieldValues>({
})}
className={cn(
"w-full rounded-xl border border-stroke/70 bg-white/90 shadow-[0_1px_2px_rgba(16,24,40,0.04),0_8px_20px_rgba(16,24,40,0.04)] outline-none backdrop-blur-[1px] transition-all duration-200 focus:border-primary/70 focus:bg-white focus:shadow-[0_0_0_2px_rgba(59,130,246,0.14),0_10px_24px_rgba(59,130,246,0.08)] disabled:cursor-default disabled:bg-gray-2/70 data-[active=true]:border-primary/70 dark:border-dark-3/80 dark:bg-dark-2/85 dark:focus:border-primary/80 dark:focus:shadow-[0_0_0_2px_rgba(59,130,246,0.2),0_10px_24px_rgba(15,23,42,0.45)] dark:disabled:bg-dark dark:data-[active=true]:border-primary/80",
// Add error styles conditionally
error &&
"border-red/80 focus:border-red focus:shadow-[0_0_0_2px_rgba(239,68,68,0.16),0_10px_24px_rgba(239,68,68,0.1)] dark:border-red/80 dark:focus:shadow-[0_0_0_2px_rgba(239,68,68,0.24),0_10px_24px_rgba(127,29,29,0.45)]",
"focus:border-red border-none focus:shadow-[0_0_0_2px_rgba(239,68,68,0.16),0_10px_24px_rgba(239,68,68,0.1)] dark:border-none",
type === "file"
? getFileStyles(props.fileStyleVariant!)
: "px-5.5 py-3 text-dark placeholder:text-dark-6 dark:text-white",
@@ -117,7 +116,7 @@ const InputGroup = <T extends FieldValues>({
</div>
{error && (
<p className="text-red mt-1.5 text-sm font-medium">
<p className="mt-1.5 text-sm font-medium text-error">
{error.message as string}
</p>
)}