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" label="Description"
{...register("description")} {...register("description")}
name="description" name="description"
placeholder="Enter Description"
/> />
<InputGroup <InputGroup
{...register("submit_button_text")} {...register("submit_button_text")}
label="Submit Button Text" label="Submit Button Text"
name="submit_button_text" name="submit_button_text"
type="text" type="text"
placeholder="Enter Submit Button Text"
/> />
</div> </div>
</ShowcaseSection> </ShowcaseSection>
@@ -67,7 +65,6 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
label="Field Name" label="Field Name"
name={`fields.${index}.name`} name={`fields.${index}.name`}
type="text" type="text"
placeholder="Field Name"
disabled disabled
/> />
<InputGroup <InputGroup
@@ -75,14 +72,12 @@ const ContactsStep = forwardRef<unknown, ContactsStepProps>(
label="Label" label="Label"
name={`fields.${index}.label`} name={`fields.${index}.label`}
type="text" type="text"
placeholder="Enter Label"
/> />
<InputGroup <InputGroup
{...register(`fields.${index}.placeholder`)} {...register(`fields.${index}.placeholder`)}
label="Placeholder" label="Placeholder"
name={`fields.${index}.placeholder`} name={`fields.${index}.placeholder`}
type="text" type="text"
placeholder="Enter Placeholder"
/> />
<Checkbox <Checkbox
{...register(`fields.${index}.required`)} {...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" label="Phone Number"
name="phone" name="phone"
type="text" type="text"
placeholder="Enter Phone Number"
/> />
<InputGroup <InputGroup
{...register("location")} {...register("location")}
label="Location" label="Location"
name="location" name="location"
type="text" type="text"
placeholder="Enter Location"
/> />
<TextAreaGroup <TextAreaGroup
label="Tagline" label="Tagline"
{...register("tagline")} {...register("tagline")}
name="tagline" name="tagline"
placeholder="Enter Tagline"
/> />
<InputGroup <InputGroup
{...register("copyright")} {...register("copyright")}
label="Copyright" label="Copyright"
name="copyright" name="copyright"
type="text" type="text"
placeholder="Enter Copyright Text"
/> />
</div> </div>
</ShowcaseSection> </ShowcaseSection>
src/app/marketing/_components/HeroStep.tsx
-1
View File
@@ -61,7 +61,6 @@ const HeroStep = forwardRef<unknown, HeroStepProps>(({ initialData }, ref) => {
}, },
})} })}
name="description" name="description"
placeholder="Enter Description"
/> />
{errors.description && ( {errors.description && (
<p className="mt-1 text-sm text-red-500"> <p className="mt-1 text-sm text-red-500">
src/app/marketing/_components/MarketingForm.tsx
+113 -95
View File
@@ -40,6 +40,7 @@ const MarketingForm = ({
handleStepChange, handleStepChange,
handleSubmitAll, handleSubmitAll,
registerPageType, registerPageType,
watchPageType,
pageTypeErrors, pageTypeErrors,
isCompany, isCompany,
setValue, setValue,
@@ -55,106 +56,123 @@ const MarketingForm = ({
<> <>
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<ShowcaseSection title={title}> <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"> <h3 className="mb-4 text-lg font-semibold text-dark dark:text-white">
Page Configuration Page Configuration
</h3> </h3>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
<Select <div>
{...registerPageType("type", { <Select
required: { message: FormErrorMessages.required, value: true }, {...registerPageType("type", {
})} required: {
name="type" message: FormErrorMessages.required,
label="Page Type" value: true,
required },
items={[ })}
{ value: "company", label: "Company" }, errors={pageTypeErrors}
{ value: "organization", label: "Organization" }, name="type"
]} label="Page Type"
/> required
{pageTypeErrors.type && ( value={watchPageType("type")}
<p className="mt-1 text-sm text-red-500"> items={[
{pageTypeErrors.type.message} { value: "company", label: "Company" },
</p> { value: "organization", label: "Organization" },
)} ]}
/>
</div>
<Select <div>
{...registerPageType("language")} <Select
label="Language" {...registerPageType("language", {
name="language" validate: (v) =>
items={Languages} !isCompany ||
defaultValue="en" (typeof v === "string" && v.length > 0) ||
clearable FormErrorMessages.required,
prefixIcon={<GlobeIcon />} })}
disabled={!isCompany} errors={pageTypeErrors}
required={isCompany} label="Language"
placeholder="Please select language" name="language"
onClear={() => setValue("language", undefined)} items={Languages}
/> defaultValue="en"
{pageTypeErrors.language && ( value={watchPageType("language")}
<p className="mt-1 text-sm text-red-500"> clearable
{pageTypeErrors.language.message} prefixIcon={<GlobeIcon />}
</p> disabled={!isCompany}
)} required={isCompany}
<InputGroup placeholder={
{...registerPageType("company_name", { isCompany ? "Please select language" : undefined
required: isCompany }
? { message: FormErrorMessages.required, value: true } onClear={() => setValue("language", "")}
: false, />
minLength: isCompany </div>
? { value: 2, message: FormErrorMessages.minLength(2) } <div>
: undefined, <InputGroup
maxLength: isCompany {...registerPageType("company_name", {
? { value: 200, message: FormErrorMessages.maxLength(200) } required: isCompany
: undefined, ? { message: FormErrorMessages.required, value: true }
})} : false,
label="Company Name" minLength: isCompany
name="company_name" ? { value: 2, message: FormErrorMessages.minLength(2) }
type="text" : undefined,
placeholder="Enter Company Name" maxLength: isCompany
disabled={!isCompany} ? { value: 200, message: FormErrorMessages.maxLength(200) }
required={isCompany} : undefined,
/> })}
{pageTypeErrors.company_name && ( label="Company Name"
<p className="mt-1 text-sm text-red-500"> name="company_name"
{pageTypeErrors.company_name.message} type="text"
</p> placeholder={isCompany ? "Enter Company Name" : undefined}
)} disabled={!isCompany}
<Select required={isCompany}
{...registerPageType("country")} />
name="country" {pageTypeErrors.company_name && (
label="Country" <p className="mt-1 text-sm text-red-500">
items={Countries} {pageTypeErrors.company_name.message}
defaultValue="USA" </p>
clearable )}
prefixIcon={<GlobeIcon />} </div>
disabled={!isCompany} <div>
required={isCompany} <Select
placeholder="Please select country" {...registerPageType("country", {
onClear={() => setValue("country", undefined)} validate: (v) =>
/> !isCompany ||
{pageTypeErrors.country && ( (typeof v === "string" && v.length > 0) ||
<p className="mt-1 text-sm text-red-500"> FormErrorMessages.required,
{pageTypeErrors.country.message} })}
</p> errors={pageTypeErrors}
)} name="country"
<InputGroup label="Country"
{...registerPageType("key", { items={Countries}
required: { defaultValue="USA"
value: true, value={watchPageType("country")}
message: FormErrorMessages.required, clearable
}, prefixIcon={<GlobeIcon />}
})} disabled={!isCompany}
label="Page key" required={isCompany}
name="key" placeholder={isCompany ? "Please select country" : undefined}
placeholder="Please enter page key" onClear={() => setValue("country", "")}
type="text" />
/> </div>
{pageTypeErrors.key && ( <div className="sm:col-span-2">
<p className="mt-1 text-sm text-red-500"> <InputGroup
{pageTypeErrors.key.message} {...registerPageType("key", {
</p> required: {
)} value: true,
message: FormErrorMessages.required,
},
})}
label="Page key"
name="key"
required
placeholder="Please enter page key"
type="text"
/>
{pageTypeErrors.key && (
<p className="mt-1 text-sm text-red-500">
{pageTypeErrors.key.message}
</p>
)}
</div>
</div> </div>
</div> </div>
src/app/marketing/_components/SectionStep.tsx
-2
View File
@@ -71,7 +71,6 @@ const SectionStep = <T extends FieldValues>({
label="Section Description" label="Section Description"
{...register("description" as Path<T>)} {...register("description" as Path<T>)}
name="description" name="description"
placeholder="Enter Section Description"
/> />
</ShowcaseSection> </ShowcaseSection>
<ShowcaseSection <ShowcaseSection
@@ -117,7 +116,6 @@ const SectionStep = <T extends FieldValues>({
{...register(`cards.${index}.description` as Path<T>)} {...register(`cards.${index}.description` as Path<T>)}
label="Description" label="Description"
name={`cards.${index}.description`} name={`cards.${index}.description`}
placeholder="Enter Description"
className="sm:col-span-2" className="sm:col-span-2"
/> />
<button <button
src/app/marketing/_components/useMarketingForm.ts
+7 -2
View File
@@ -39,6 +39,10 @@ const useMarketingForm = (
} = useForm<IPageTypeFields>({ } = useForm<IPageTypeFields>({
defaultValues: { defaultValues: {
type: "company", type: "company",
language: "en",
country: "USA",
company_name: "",
key: "",
}, },
}); });
@@ -46,9 +50,9 @@ const useMarketingForm = (
if (initialData) { if (initialData) {
const formValues = { const formValues = {
type: initialData.type || "company", type: initialData.type || "company",
language: initialData.language || "", language: initialData.language ?? "en",
company_name: initialData.company_name || "", company_name: initialData.company_name || "",
country: initialData.country || "", country: initialData.country ?? "USA",
key: initialData.key || "", key: initialData.key || "",
}; };
reset(formValues); reset(formValues);
@@ -238,6 +242,7 @@ const useMarketingForm = (
handleStepChange, handleStepChange,
handleSubmitAll, handleSubmitAll,
registerPageType, registerPageType,
watchPageType,
pageTypeErrors, pageTypeErrors,
isCompany, isCompany,
setValue, setValue,
src/components/FormElements/InputGroup/index.tsx
+2 -3
View File
@@ -100,9 +100,8 @@ const InputGroup = <T extends FieldValues>({
})} })}
className={cn( 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", "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 && 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" type === "file"
? getFileStyles(props.fileStyleVariant!) ? getFileStyles(props.fileStyleVariant!)
: "px-5.5 py-3 text-dark placeholder:text-dark-6 dark:text-white", : "px-5.5 py-3 text-dark placeholder:text-dark-6 dark:text-white",
@@ -117,7 +116,7 @@ const InputGroup = <T extends FieldValues>({
</div> </div>
{error && ( {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} {error.message as string}
</p> </p>
)} )}