From 16b2136843f9bba868413ad3dde974e82351b57d Mon Sep 17 00:00:00 2001
From: etienne-doyon <etienne.doyon@bedrockstreaming.com>
Date: Wed, 13 Dec 2023 13:57:30 +0100
Subject: [PATCH] feat(meta): add option to display mandatory field hint

---
 .../dictionary/checkBox.component.tsx         |  6 +++++
 .../dictionary/date.component.tsx             |  6 +++++
 .../dictionary/password.component.tsx         |  6 +++++
 .../dictionary/select.component.tsx           |  6 +++++
 .../dictionary/text.component.tsx             |  6 +++++
 .../dictionary/checkBox.component.tsx         |  6 +++++
 .../dictionary/date.component.tsx             |  6 +++++
 .../dictionary/password.component.tsx         |  8 +++++++
 .../dictionary/select.component.tsx           |  6 +++++
 .../dictionary/submit.component.tsx           | 15 +++++++++++-
 .../dictionary/text.component.tsx             | 16 ++++++++++++-
 apps/demo/src/app/login.config.ts             |  3 +++
 apps/demo/src/app/register.config.ts          |  3 +++
 apps/docsite/docs/form-builder.md             |  3 +++
 libs/form-builder/README.md                   |  3 +++
 .../src/lib/__tests__/fixtures.tsx            |  1 +
 .../lib/components/formField.component.tsx    | 24 +++++++++++++++++--
 libs/form-builder/src/lib/formBuilder.tsx     |  3 ++-
 libs/form-builder/src/lib/types.ts            | 11 ++++++---
 .../__tests__/getSchemaInfo.util.spec.ts      |  1 +
 .../src/lib/utils/getSchemaInfo.util.ts       |  5 +++-
 21 files changed, 135 insertions(+), 9 deletions(-)

diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx
index 176ea16..73edcef 100644
--- a/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx
+++ b/apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx
@@ -16,6 +16,7 @@ export const Checkbox = ({
   onChange,
   propRef,
   value,
+  shouldDisplayRequiredHint,
 }: {
   'data-testid': string;
   errorMessage: string;
@@ -29,9 +30,14 @@ export const Checkbox = ({
   propRef: Ref<any>;
   type?: string;
   value?: boolean;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const inputProps = useMemo(() => ({ ref: propRef, 'aria-label': 'controlled' }), [propRef]);
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <Box sx={{ m: 2 }}>
       <FormGroup>
diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx
index 777ad0d..91ead9a 100644
--- a/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx
+++ b/apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx
@@ -27,6 +27,7 @@ export const DateInput = ({
   onChange,
   onBlur,
   propRef,
+  shouldDisplayRequiredHint,
 }: {
   'data-testid': string;
   errors: FieldErrors;
@@ -41,6 +42,7 @@ export const DateInput = ({
   value?: string | number;
   validation: Validations;
   setFieldValue: (id: Path<FieldValues>, value: any) => void;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
   const rules = getValidationRulesHints({
@@ -50,6 +52,10 @@ export const DateInput = ({
 
   const hasError = !!checkRules(value, rules).length;
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <div>
       <BirthdateInput
diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx
index 7a120a4..299eea9 100644
--- a/apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx
+++ b/apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx
@@ -25,6 +25,7 @@ export const Password = ({
   propRef,
   value,
   validation,
+  shouldDisplayRequiredHint,
 }: {
   'data-testid': string;
   errors: FieldErrors;
@@ -38,6 +39,7 @@ export const Password = ({
   type?: string;
   value?: string | number;
   validation: Validations;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
 
@@ -48,6 +50,10 @@ export const Password = ({
 
   const hasError = !!checkRules(value, rules).length;
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <ValidatedTextField
       type="password"
diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/select.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/select.component.tsx
index 854bb4d..2b89586 100644
--- a/apps/demo/src/app/examples/with-material-ui/dictionary/select.component.tsx
+++ b/apps/demo/src/app/examples/with-material-ui/dictionary/select.component.tsx
@@ -13,6 +13,7 @@ export const Select = ({
   value,
   choices,
   multiple,
+  shouldDisplayRequiredHint,
 }: {
   'data-testid': string;
   errorMessage: string;
@@ -28,9 +29,14 @@ export const Select = ({
   value?: string | number;
   choices: string[] | number[];
   multiple?: boolean;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <Box sx={{ m: 2 }}>
       <InputLabel id="label-id">{label}</InputLabel>
diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx
index 42fb89d..ea37678 100644
--- a/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx
+++ b/apps/demo/src/app/examples/with-material-ui/dictionary/text.component.tsx
@@ -17,6 +17,7 @@ export const Text = ({
   type,
   value,
   multiline,
+  shouldDisplayRequiredHint,
 }: {
   'data-testid': string;
   errorMessage: string;
@@ -31,10 +32,15 @@ export const Text = ({
   type?: string;
   value?: string | number;
   multiline?: boolean;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
   const error = errors && errors.type && errorMessage;
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <Box sx={{ m: 2 }}>
       <TextField
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/checkBox.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/checkBox.component.tsx
index 0220776..41b7d0e 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/checkBox.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/checkBox.component.tsx
@@ -2,11 +2,17 @@ export const Checkbox = ({
   onChange,
   value,
   label,
+  shouldDisplayRequiredHint,
 }: {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   value: boolean;
   label: string;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <div>
       <label>{label}</label>
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx
index b56b9a9..cd6969a 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx
@@ -12,6 +12,7 @@ import { RuleList } from '../atoms/rule-list.component';
 export const DateInput = ({
   errors,
   validation,
+  shouldDisplayRequiredHint,
   label,
   ...props
 }: {
@@ -23,6 +24,7 @@ export const DateInput = ({
   id: string;
   setFieldValue: (id: Path<FieldValues>, value: any) => void;
   onChange: (event: any) => void;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const rules = getValidationRulesHints({
     errors,
@@ -32,6 +34,10 @@ export const DateInput = ({
   const fieldError = errors && errors.type;
   const isValid = !!(props.value && !hasError && !fieldError);
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <TextFieldMarginWrapper>
       <BirthdateInput
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/password.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/password.component.tsx
index 6bb6da1..fd644b0 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/password.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/password.component.tsx
@@ -11,6 +11,8 @@ import { RuleList } from '../atoms/rule-list.component';
 export const Password = ({
   errors,
   validation,
+  shouldDisplayRequiredHint,
+  label,
   ...props
 }: {
   errors: FieldErrors;
@@ -18,6 +20,7 @@ export const Password = ({
   label: string;
   value?: string | number;
   validation: Validations;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const rules = getValidationRulesHints({
     errors,
@@ -27,11 +30,16 @@ export const Password = ({
   const fieldError = errors && errors.type;
   const isValid = !!(props.value && !hasError && !fieldError);
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <TextFieldTopMarginWrapper>
       <ValidatedPasswordTextField
         hasError={hasError}
         valid={isValid}
+        label={label}
         {...props}
         rules={rules}
         ruleComponent={RuleList}
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/select.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/select.component.tsx
index 9c83bc3..9a1c4ec 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/select.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/select.component.tsx
@@ -4,13 +4,19 @@ export const Select = ({
   label,
   choices,
   multiple,
+  shouldDisplayRequiredHint,
 }: {
   onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   value: string | number;
   label: string;
   choices: string[] | number[];
   multiple?: boolean;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <div style={{ margin: '24px' }}>
       <label>
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx
index 7d22e16..87dbff0 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx
@@ -20,7 +20,16 @@ const PreviousButton = styled.button`
   border: 1px solid rgba(150, 100, 255);
 `;
 
-export const Submit = ({ label, formId, ...props }: { label: string; formId: string }) => {
+export const Submit = ({
+  label,
+  formId,
+  shouldDisplayRequiredHint,
+  ...props
+}: {
+  label: string;
+  formId: string;
+  shouldDisplayRequiredHint?: boolean;
+}) => {
   const dispatch = useDispatch();
 
   const shouldDisplayPrevious = useSelector(getCurrentStepIndex(formId)) !== 0;
@@ -29,6 +38,10 @@ export const Submit = ({ label, formId, ...props }: { label: string; formId: str
     dispatch(setPreviousStep(formId));
   };
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <ActionsWrapper>
       {shouldDisplayPrevious && (
diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/text.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/text.component.tsx
index 149e574..5708f8a 100644
--- a/apps/demo/src/app/examples/with-styled-components/dictionary/text.component.tsx
+++ b/apps/demo/src/app/examples/with-styled-components/dictionary/text.component.tsx
@@ -9,6 +9,8 @@ export const Text = ({
   errors,
   errorMessage,
   validation,
+  shouldDisplayRequiredHint,
+  label,
   ...props
 }: {
   errors: FieldErrors;
@@ -16,12 +18,24 @@ export const Text = ({
   label: string;
   value?: string | number;
   validation: Validations;
+  shouldDisplayRequiredHint?: boolean;
 }) => {
   const error = errors && errors.type && errorMessage;
 
+  if (shouldDisplayRequiredHint) {
+    label += ' *';
+  }
+
   return (
     <TextFieldMarginWrapper>
-      <ValidatedTextField type="text" hasError={!!error} errorText={error} valid={!!props.value && !error} {...props} />
+      <ValidatedTextField
+        type="text"
+        hasError={!!error}
+        errorText={error}
+        valid={!!props.value && !error}
+        label={label}
+        {...props}
+      />
     </TextFieldMarginWrapper>
   );
 };
diff --git a/apps/demo/src/app/login.config.ts b/apps/demo/src/app/login.config.ts
index 6056345..40b6dd4 100644
--- a/apps/demo/src/app/login.config.ts
+++ b/apps/demo/src/app/login.config.ts
@@ -61,6 +61,9 @@ export const config = {
           },
         },
       },
+      formMeta: {
+        shouldDisplayRequiredHint: true,
+      },
       steps: {
         'login-step-0': {
           fieldsById: ['email'],
diff --git a/apps/demo/src/app/register.config.ts b/apps/demo/src/app/register.config.ts
index ec47343..0340c9c 100644
--- a/apps/demo/src/app/register.config.ts
+++ b/apps/demo/src/app/register.config.ts
@@ -170,6 +170,9 @@ export const config: Config = {
           },
         },
       },
+      formMeta: {
+        shouldDisplayRequiredHint: true,
+      },
       steps: {
         'register-step-0': {
           fieldsById: ['email', 'discloseGender', 'gender', 'firstName', 'lastName'],
diff --git a/apps/docsite/docs/form-builder.md b/apps/docsite/docs/form-builder.md
index 4d21067..e7e894c 100644
--- a/apps/docsite/docs/form-builder.md
+++ b/apps/docsite/docs/form-builder.md
@@ -66,6 +66,9 @@ export interface FormSchema {
         | Path<string>;
     };
   };
+  formMeta?: {
+    shouldDisplayRequiredHint?: boolean;
+  };
   steps: {
     [key: string]: {
       id: string;
diff --git a/libs/form-builder/README.md b/libs/form-builder/README.md
index deaeb8c..27843ac 100644
--- a/libs/form-builder/README.md
+++ b/libs/form-builder/README.md
@@ -63,6 +63,9 @@ export interface FormSchema {
         | Path<string>;
     };
   };
+  formMeta?: {
+    shouldDisplayRequiredHint?: boolean;
+  };
   steps: {
     [key: string]: {
       id: string;
diff --git a/libs/form-builder/src/lib/__tests__/fixtures.tsx b/libs/form-builder/src/lib/__tests__/fixtures.tsx
index 175cad3..ee02812 100644
--- a/libs/form-builder/src/lib/__tests__/fixtures.tsx
+++ b/libs/form-builder/src/lib/__tests__/fixtures.tsx
@@ -54,6 +54,7 @@ export const CORRECT_SCHEMA: FormSchema = {
       type: 'text',
     },
   },
+  formMeta: {},
   steps: { ...stepOne, ...stepTwo },
   stepsById: [stepOneId, stepTwoId],
 };
diff --git a/libs/form-builder/src/lib/components/formField.component.tsx b/libs/form-builder/src/lib/components/formField.component.tsx
index a304eee..9eaca84 100644
--- a/libs/form-builder/src/lib/components/formField.component.tsx
+++ b/libs/form-builder/src/lib/components/formField.component.tsx
@@ -16,12 +16,32 @@ export interface FormFieldProps {
   onClick?: (event: any) => void;
   isValidating?: boolean;
   formId?: string;
+  shouldDisplayRequiredHint?: boolean;
 }
 
-export function FormField({ id, fieldType, dictionary, ...props }: FormFieldProps) {
+export function FormField({
+  id,
+  fieldType,
+  dictionary,
+  shouldDisplayRequiredHint,
+  validation,
+  ...props
+}: FormFieldProps) {
   const Field = dictionary[fieldType];
 
   if (!Field) return null;
 
-  return <Field data-testid={id} id={id} {...props} />;
+  if (!validation || !validation?.required?.value) {
+    shouldDisplayRequiredHint = false;
+  }
+
+  return (
+    <Field
+      data-testid={id}
+      id={id}
+      shouldDisplayRequiredHint={shouldDisplayRequiredHint}
+      validation={validation}
+      {...props}
+    />
+  );
 }
diff --git a/libs/form-builder/src/lib/formBuilder.tsx b/libs/form-builder/src/lib/formBuilder.tsx
index 7d06d4a..3e9a9b8 100644
--- a/libs/form-builder/src/lib/formBuilder.tsx
+++ b/libs/form-builder/src/lib/formBuilder.tsx
@@ -77,7 +77,7 @@ export function FormBuilder({
 
   const typesAllowed = React.useMemo(() => Object.keys(dictionary || EMPTY_OBJECT), [dictionary]);
 
-  const { fields, fieldsById, stepsById, submitLabel } = React.useMemo(
+  const { fields, fieldsById, stepsById, submitLabel, formMeta } = React.useMemo(
     () => getSchemaInfo(schema, typesAllowed, currentStepIndex),
     [currentStepIndex, schema, typesAllowed],
   );
@@ -161,6 +161,7 @@ export function FormBuilder({
                           triggerValidationField={triggerValidationField}
                           propRef={ref}
                           isValidating={isValidating}
+                          {...formMeta}
                           {...meta}
                           {...fieldRest}
                         />
diff --git a/libs/form-builder/src/lib/types.ts b/libs/form-builder/src/lib/types.ts
index 506d0e4..c773b28 100644
--- a/libs/form-builder/src/lib/types.ts
+++ b/libs/form-builder/src/lib/types.ts
@@ -3,7 +3,7 @@ import { Path, PathValue, FieldValues, FieldNamesMarkedBoolean, UnpackNestedValu
 
 export type DirtyFields = FieldNamesMarkedBoolean<FieldValues>;
 
-export interface FormMeta {
+export interface StepMeta {
   [key: string]: unknown;
 }
 
@@ -28,7 +28,7 @@ export interface DependsOnObject {
 export interface FormField {
   id: string;
   type: string;
-  meta?: FormMeta | undefined;
+  meta?: StepMeta | undefined;
   dependsOn?: Array<string | DependsOnObject>;
   validation?: Validations | undefined;
   defaultValue?: UnpackNestedValue<PathValue<unknown, never>> | string | number | string[] | number[] | Path<string>;
@@ -44,15 +44,20 @@ export interface FormStep {
   submit: {
     label: string;
   };
-  meta?: FormMeta;
+  meta?: StepMeta;
 }
 
 export interface FormSteps {
   [key: string]: FormStep;
 }
 
+export interface FormMeta {
+  shouldDisplayRequiredHint?: boolean;
+}
+
 export interface FormSchema {
   fields: FormFields;
+  formMeta?: FormMeta;
   steps: FormSteps;
   stepsById: string[];
 }
diff --git a/libs/form-builder/src/lib/utils/__tests__/getSchemaInfo.util.spec.ts b/libs/form-builder/src/lib/utils/__tests__/getSchemaInfo.util.spec.ts
index 1e0bcd3..3358a65 100644
--- a/libs/form-builder/src/lib/utils/__tests__/getSchemaInfo.util.spec.ts
+++ b/libs/form-builder/src/lib/utils/__tests__/getSchemaInfo.util.spec.ts
@@ -9,6 +9,7 @@ describe('getSchemaInfo', () => {
     fieldsById: stepOne[stepOneId].fieldsById,
     stepsById: CORRECT_SCHEMA.stepsById,
     submitLabel: stepOne[stepOneId].submit.label,
+    formMeta: CORRECT_SCHEMA.formMeta,
   };
 
   it('should return all fields, current step fieldsByIds, submit label and stepsById', () => {
diff --git a/libs/form-builder/src/lib/utils/getSchemaInfo.util.ts b/libs/form-builder/src/lib/utils/getSchemaInfo.util.ts
index e87c4b6..cb902ef 100644
--- a/libs/form-builder/src/lib/utils/getSchemaInfo.util.ts
+++ b/libs/form-builder/src/lib/utils/getSchemaInfo.util.ts
@@ -1,5 +1,5 @@
 import { SUBMIT_FIELD_TYPE } from '../constants';
-import { FormFields, FormSchema } from '../types';
+import { FormFields, FormMeta, FormSchema } from '../types';
 
 const EMPTY_ARRAY = [] as const;
 const EMPTY_OBJECT = {} as const;
@@ -16,6 +16,7 @@ export interface SchemaInfo {
   fieldsById: string[];
   submitLabel: string;
   stepsById: string[];
+  formMeta: FormMeta;
 }
 
 export const getSchemaInfo = (schema: FormSchema, typesAllowed: string[], currentStepIndex: number): SchemaInfo => {
@@ -25,11 +26,13 @@ export const getSchemaInfo = (schema: FormSchema, typesAllowed: string[], curren
   const fieldsById = steps?.[stepId]?.fieldsById || EMPTY_ARRAY;
   const submitLabel = steps?.[stepId]?.submit?.label;
   const fields = schema?.fields || EMPTY_OBJECT;
+  const formMeta = schema?.formMeta || EMPTY_OBJECT;
 
   return {
     fields,
     fieldsById: sanitizeFieldsById(fieldsById, fields, typesAllowed),
     submitLabel,
     stepsById,
+    formMeta,
   };
 };