refactor Formbuilder to user placeholder and add placeholder to body

i18n.json

@@ -55,7 +55,7 @@
     "/reciters/[reciterId]": ["home", "radio", "reciter"],
     "/reciters/[reciterId]/[chapterId]": ["reciter"],
     "/reciters": ["reciter", "home"],
-    "/profile": ["home", "profile", "collection"],
+    "/profile": ["home", "profile", "collection", "quran-reader"],
     "/login": ["login"],
     "/about-the-quran": ["about-quran"],
     "/notes": ["notes"]

locales/en/notes.json

@@ -2,6 +2,7 @@
   "note": "Note",
   "empty": "No notes found",
   "delete-note": "Delete note",
+  "body-placeholder": "Write your note here",
   "save-success": "Note has been saved successfully",
   "update-success": "Note has been updated successfully",
   "delete-success": "Note has been deleted successfully",

server.js

@@ -18,8 +18,8 @@ app.prepare().then(() => {
       const parsedUrl = parse(req.url, true);
       handle(req, res, parsedUrl);
     },
-  ).listen(3000, (err) => {
+  ).listen(3005, (err) => {
     if (err) throw err;
-    console.log('> Server started on https://localhost:3000');
+    console.log('> Server started on https://localhost:3005');
   });
 });

src/components/Collection/RenameCollectionModal/RenameCollectionModal.tsx

@@ -38,7 +38,7 @@ const RenameCollectionModal = ({
             formFields={[
               {
                 field: 'name',
-                label: t('new-collection-name'),
+                placeholder: t('quran-reader:new-collection-name'),
                 defaultValue,
                 rules: [{ type: RuleType.Required, value: true, errorMessage: 'Required' }],
                 type: FormFieldType.Text,

src/components/Collection/SaveToCollectionModal/SaveToCollectionModal.tsx

@@ -111,7 +111,7 @@ const SaveToCollectionModal = ({
               formFields={[
                 {
                   field: 'name',
-                  label: t('quran-reader:new-collection-name'),
+                  placeholder: t('quran-reader:new-collection-name'),
                   rules: [{ type: RuleType.Required, value: true, errorMessage: 'Required' }],
                   type: FormFieldType.Text,
                 },

src/components/FormBuilder/FormBuider.stories.tsx

@@ -22,7 +22,7 @@ export const FormExample = () => {
       formFields={[
         {
           field: 'name',
-          label: 'Name',
+          placeholder: 'Name',
           type: FormFieldType.Text,
         },
       ]}
@@ -40,7 +40,7 @@ export const WithRequiredField = () => {
       formFields={[
         {
           field: 'name',
-          label: 'Name',
+          placeholder: 'Name',
           type: FormFieldType.Text,
           rules: [{ type: RuleType.Required, value: true, errorMessage: 'name is required' }],
         },
@@ -60,7 +60,7 @@ export const WithEmailValidation = () => {
         {
           field: 'email',
           type: FormFieldType.Text,
-          label: 'Email',
+          placeholder: 'Email',
           rules: [
             { type: RuleType.Required, value: true, errorMessage: 'email is required' },
             {
@@ -85,7 +85,7 @@ export const WithFailedOnSubmit = () => {
       formFields={[
         {
           field: 'code',
-          label: 'Verification Code',
+          placeholder: 'Verification Code',
           type: FormFieldType.Text,
           rules: [{ type: RuleType.Required, value: true, errorMessage: 'code is required' }],
         },

src/components/FormBuilder/FormBuilder.tsx

@@ -62,7 +62,8 @@ const FormBuilder = <T,>({
                 name: formField.field,
                 containerClassName: formField.containerClassName,
                 fieldSetLegend: formField.fieldSetLegend,
-                placeholder: formField.label,
+                label: formField.label,
+                placeholder: formField.placeholder,
                 onChange: (val) => {
                   field.onChange(val);
                   if (formField?.onChange) {

src/components/FormBuilder/FormBuilderTypes.ts

@@ -5,6 +5,7 @@ export type FormBuilderFieldRule = Pick<FieldRule, 'type' | 'value'> & { errorMe
 export type FormBuilderFormField = Pick<FormField, 'field' | 'type'> & {
   defaultValue?: any;
   label?: string;
+  placeholder?: string;
   rules?: FormBuilderFieldRule[];
   containerClassName?: string;
   fieldSetLegend?: string;

src/components/FormBuilder/buildFormBuilderFormField.ts

@@ -26,7 +26,6 @@ import FormField from 'types/FormField';
 const buildFormBuilderFormField = (formField: FormField, t: Translate): FormBuilderFormField => {
   return {
     ...formField,
-    label: t(`form.${formField.field}`),
     rules: formField.rules.map((rule) => ({
       type: rule.type,
       value: rule.value,
@@ -35,7 +34,9 @@ const buildFormBuilderFormField = (formField: FormField, t: Translate): FormBuil
         ...rule.errorExtraParams,
       }),
     })),
+    ...(formField.label && { label: t(`form.${formField.label}`) }),
     ...(formField.defaultValue && { defaultValue: formField.defaultValue }),
+    ...(formField.placeholder && { placeholder: formField.placeholder }),
   };
 };
 

src/components/Login/CompleteSignupForm.tsx

@@ -36,14 +36,23 @@ const CompleteSignupForm: React.FC<CompleteSignupFormProps> = ({ requiredFields
   const emailFormField = requiredFields.find((field) => field.field === 'email');
   const isEmailRequired = !!emailFormField;
   if (isEmailRequired) {
-    return <EmailVerificationForm emailFormField={buildFormBuilderFormField(emailFormField, t)} />;
+    return (
+      <EmailVerificationForm
+        emailFormField={buildFormBuilderFormField(
+          { ...emailFormField, placeholder: t(`form.email`) },
+          t,
+        )}
+      />
+    );
   }
 
   return (
     <div className={styles.container}>
       <h2 className={styles.title}>{t('complete-sign-up')}</h2>
       <FormBuilder
-        formFields={requiredFields.map((field) => buildFormBuilderFormField(field, t))}
+        formFields={requiredFields.map((field) =>
+          buildFormBuilderFormField({ ...field, placeholder: t(`form.${field.field}`) }, t),
+        )}
         onSubmit={onSubmit}
         actionText={t('submit')}
       />

src/components/Login/EmailLogin.tsx

@@ -35,7 +35,7 @@ const EmailLogin = ({ back, onSubmit }: EmailLoginProps) => {
           {
             field: fieldName,
             type: FormFieldType.Text,
-            label: t('form.email'),
+            placeholder: t('form.email'),
             rules: [
               {
                 type: RuleType.Required,

src/components/Login/EmailVerificationForm.tsx

@@ -46,7 +46,7 @@ const EmailVerificationForm = ({ emailFormField }: EmailVerificationFormProps) =
   const verificationCodeFormField: FormBuilderFormField = {
     field: 'code',
     type: FormFieldType.Number,
-    label: t('form.code'),
+    placeholder: t('form.code'),
     rules: [
       {
         type: RuleType.Required,

src/components/Notes/NoteModal/index.tsx

@@ -210,6 +210,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
                 formFields={[
                   {
                     field: 'body',
+                    placeholder: t('notes:body-placeholder'),
                     defaultValue: note?.body || '',
                     onChange: (val: string) => {
                       setNoteBody(val);

types/FormField.ts

@@ -10,6 +10,8 @@ export enum FormFieldType {
 
 type FormField = {
   field: string;
+  placeholder?: string;
+  label?: string;
   rules?: FieldRule[];
   type: FormFieldType;
   defaultValue?: unknown;