feat(libs/form-builder): add conditional fields

apps/demo/src/app/config.ts

@@ -14,13 +14,33 @@ export const config = {
             choices: ['male', 'female']
           },
           type: 'select',
-          defaultValue: 'male'
+          dependsOn: [
+            'email',
+            { fieldId: 'discloseGender', key: 'isTrue', validate: true }
+          ],
+          validation: {
+            required: {
+              key: 'required',
+              message: 'Required field',
+              value: true
+            }
+          }
+        },
+        discloseGender: {
+          id: 'discloseGender',
+          title: 'discloseGender checkbox',
+          meta: {
+            label: 'I agree to disclose my gender',
+            name: 'discloseGender'
+          },
+          type: 'checkbox',
+          dependsOn: ['email']
         },
         birthdate: {
           id: 'birthdate',
           meta: {
             errorMessage: 'Birth date invalid',
-            label: 'Birth date',
+            label: 'Birthdate',
             name: 'birthdate'
           },
           title: 'birthdate',
@@ -73,6 +93,7 @@ export const config = {
           },
           title: 'firstName',
           type: 'text',
+          dependsOn: ['email'],
           validation: {
             checkPattern: {
               key: 'checkPattern',
@@ -95,12 +116,18 @@ export const config = {
           },
           title: 'lastName',
           type: 'text',
+          dependsOn: ['firstName', 'gender', 'email'],
           validation: {
             maxLength: {
               key: 'checkMaxLength',
               message: 'Maximum input length',
               value: 20
             },
+            minLength: {
+              key: 'checkMinLength',
+              message: 'Minimum input length',
+              value: 2
+            },
             required: {
               key: 'required',
               message: 'Required field',
@@ -145,7 +172,13 @@ export const config = {
       },
       steps: {
         'register-step-0': {
-          fieldsById: ['email', 'gender'],
+          fieldsById: [
+            'email',
+            'discloseGender',
+            'gender',
+            'firstName',
+            'lastName'
+          ],
           id: 'register-step-0',
           meta: {
             subtitle: 'Email',
@@ -167,19 +200,8 @@ export const config = {
           }
         },
         'register-step-2': {
-          fieldsById: ['firstName', 'lastName'],
-          id: 'register-step-2',
-          meta: {
-            subtitle: 'First name and Last name',
-            title: 'First name and Last name'
-          },
-          submit: {
-            label: 'Next'
-          }
-        },
-        'register-step-3': {
           fieldsById: ['birthdate'],
-          id: 'register-step-3',
+          id: 'register-step-2',
           meta: {
             subtitle: 'Birthdate',
             title: 'Birthdate'
@@ -189,12 +211,7 @@ export const config = {
           }
         }
       },
-      stepsById: [
-        'register-step-0',
-        'register-step-1',
-        'register-step-2',
-        'register-step-3'
-      ]
+      stepsById: ['register-step-0', 'register-step-1', 'register-step-2']
     },
     single_step_register: {
       fields: {

apps/demo/src/app/examples/with-material-ui/dictionary.ts

@@ -4,12 +4,14 @@ import { DateInput } from './dictionary/date.component';
 import { Submit } from './dictionary/submit.component';
 import { Select } from './dictionary/select.component';
 import { Previous } from './dictionary/previous.component';
+import { Checkbox } from './dictionary/checkBox.component';
 
 export const dictionary = {
   text: Text,
   password: Password,
   date: DateInput,
   select: Select,
+  checkbox: Checkbox,
   submit: Submit,
   previous: Previous
 };

apps/demo/src/app/examples/with-material-ui/dictionary/checkBox.component.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Ref, useMemo } from 'react';
+import { FieldErrors } from 'react-hook-form';
+
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MUICheckbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
+
+export const Checkbox = ({
+  'data-testid': dataTestId,
+  errorMessage,
+  errors,
+  id,
+  label,
+  name,
+  onBlur,
+  onChange,
+  optionalText,
+  propRef,
+  value
+}: {
+  'data-testid': string;
+  errorMessage: string;
+  errors: FieldErrors;
+  id: string;
+  label: string;
+  name: string;
+  onBlur: (event: any) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  optionalText?: string;
+  propRef: Ref<any>;
+  type?: string;
+  value?: boolean;
+}) => {
+  const inputProps = useMemo(
+    () => ({ ref: propRef, 'aria-label': 'controlled' }),
+    [propRef]
+  );
+  const error = errors && errors.type && errorMessage;
+
+  return (
+    <Box sx={{ m: 2 }}>
+      <FormGroup>
+        <FormControlLabel
+          label={label}
+          control={
+            <MUICheckbox
+              checked={!!value}
+              id={id}
+              name={name}
+              onChange={onChange}
+              onBlur={onBlur}
+              inputProps={inputProps}
+              data-testid={dataTestId}
+            />
+          }
+        />
+      </FormGroup>
+    </Box>
+  );
+};

apps/demo/src/app/examples/with-material-ui/form.component.tsx

@@ -36,7 +36,9 @@ const defaultValues = {
   firstName: '',
   lastName: '',
   birthdate: '',
-  password: ''
+  password: '',
+  gender: '',
+  newsletter: true
 };
 
 const {

apps/demo/src/app/examples/with-styled-components/dictionary.ts

@@ -3,11 +3,15 @@ import { Password } from './dictionary/password.component';
 import { DateInput } from './dictionary/date.component';
 import { Submit } from './dictionary/submit.component';
 import { Previous } from './dictionary/previous.component';
+import { Checkbox } from './dictionary/checkBox.component';
+import { Select } from './dictionary/select.component';
 
 export const dictionary = {
   text: Text,
   password: Password,
   date: DateInput,
   submit: Submit,
-  previous: Previous
+  previous: Previous,
+  checkbox: Checkbox,
+  select: Select
 };

apps/demo/src/app/examples/with-styled-components/dictionary/checkBox.component.tsx

@@ -0,0 +1,17 @@
+export const Checkbox = ({
+  onChange,
+  value,
+  label,
+  ...props
+}: {
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: boolean;
+  label: string;
+}) => {
+  return (
+    <div>
+      <label>{label}</label>
+      <input type="checkbox" checked={value} onChange={onChange} />
+    </div>
+  );
+};

apps/demo/src/app/examples/with-styled-components/dictionary/select.component.tsx

@@ -0,0 +1,28 @@
+export const Select = ({
+  onChange,
+  value,
+  label,
+  choices,
+  multiple
+}: {
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  value: string | number;
+  label: string;
+  choices: string[] | number[];
+  multiple?: boolean;
+}) => {
+  return (
+    <div style={{ margin: '24px' }}>
+      <label>
+        {label}
+        <select multiple={multiple} value={value} onChange={onChange}>
+          {choices.map((choice) => (
+            <option key={choice} value={choice}>
+              {choice}
+            </option>
+          ))}
+        </select>
+      </label>
+    </div>
+  );
+};

apps/demo/src/app/examples/with-styled-components/dictionary/styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const TextFieldMarginWrapper = styled.div`
   margin-top: 20px;
-  margin-bottom: 50px;
+  margin-bottom: 20px;
 `;
 
 export const TextFieldTopMarginWrapper = styled.div`

apps/demo/src/app/extraValidation.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 
 import { getUserAge, isDateValid } from '@forms/examples/birthdate';
+import { ExtraValidation } from '@bedrockstreaming/form-builder';
 
 const config = {
   onboarding: {
@@ -33,7 +34,8 @@ export const extraValidation = {
   checkForUpper: () => (input: string) => /[A-Z]+/g.test(input),
   checkForLower: () => (input: string) => /[a-z]+/g.test(input),
   checkForNumber: () => (input: string) => /\d+/g.test(input),
-  isChecked: () => (value?: string | number) => !!value,
+  isChecked: () => (value?: boolean) => !!value,
   checkPattern: (value: string) => (input: string) =>
-    new RegExp(value).test(input)
-};
+    new RegExp(value).test(input),
+  isTrue: () => (input: boolean) => input === true
+} as ExtraValidation;