@digigov/form 2.0.0-2a26e869 → 2.0.0-30d44ed9

package/src/inputs/Input/__stories__/String.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const String = () => (
+export const String = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/StringWithTrimValidation.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const StringWithTrimValidation = () => (
+export const StringWithTrimValidation = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/TextWithLimit.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form';
 
-export const TextWithLimit = () => (
+export const TextWithLimit = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/index.test.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+import { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 import { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
+import { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
 import { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
@@ -20,9 +22,15 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="AFM">
       <AFM />
     </TestVariant>
+    <TestVariant title="AMKA">
+      <AMKA />
+    </TestVariant>
     <TestVariant title="Boolean">
       <Boolean />
     </TestVariant>
+    <TestVariant title="Email">
+      <Email />
+    </TestVariant>
     <TestVariant title="IBAN">
       <IBAN />
     </TestVariant>
@@ -54,6 +62,10 @@ test('renders the All Input variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Input/index.tsx

@@ -8,12 +8,14 @@ import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
+  password: 'password',
   int: 'text',
   text: 'text',
   date: 'date',
 };
 
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface InputProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra?: {
     fullWidth?: boolean;
     multiline?: boolean;
@@ -25,10 +27,12 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       max?: number;
     };
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
+    delete props['Field'];
     // eslint-disable-next-line prefer-const
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
@@ -69,6 +73,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             className={className}
             rows={rows}
             ref={ref}
+            id={name}
             {...{
               ...props,
               reset: undefined,
@@ -97,7 +102,11 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           data-type={type}
           className={className}
           ref={ref}
-          {...{ ...props, reset: undefined, required: undefined }}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+          }}
         />
       );
     }

package/src/inputs/Label/Label.stories.js

@@ -1,7 +1,10 @@
 import Label from '@digigov/form/inputs/Label';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Label',
   component: Label,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Label',
 };
 export { Default } from '@digigov/form/inputs/Label/__stories__/Default';

package/src/inputs/Label/__stories__/Default.tsx

@@ -4,7 +4,7 @@ import Field from '@digigov/form/Field';
 import Label from '@digigov/form/inputs/Label';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Label/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Label variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/OtpInput/OtpInput.stories.js

@@ -1,7 +1,10 @@
 import OtpInput from '@digigov/form/inputs/OtpInput';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/OtpInput',
   component: OtpInput,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'OtpInput',
 };
 export { Default } from '@digigov/form/inputs/OtpInput/__stories__/Default';

package/src/inputs/OtpInput/__stories__/Default.tsx

@@ -14,7 +14,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

package/src/inputs/OtpInput/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All OtpInput variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/OtpInput/index.tsx

@@ -131,6 +131,7 @@ export const OtpInput = ({ name, maxLength = 6, ...props }) => {
       {otp.otpValues.map((digit, idx) => (
         <SingleCharacterInputPart
           name={`${name}-${idx}`}
+          id={`${name}-${idx}`}
           type="text"
           key={idx}
           autoComplete="one-time-code"

package/src/inputs/Radio/Radio.stories.js

@@ -1,7 +1,10 @@
 import Radio from '@digigov/form/inputs/Radio';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Radio',
   component: Radio,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Radio',
 };
 export { Default } from '@digigov/form/inputs/Radio/__stories__/Default';

package/src/inputs/Radio/__stories__/Conditional.tsx

@@ -85,7 +85,7 @@ const fields: FieldSpec[] = [
   },
 ];
 
-export const Conditional = () => (
+export const Conditional = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Radio/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Radio/__stories__/WithDivider.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const WithDivider = () => (
+export const WithDivider = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Radio/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All Radio variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Radio/index.tsx

@@ -118,6 +118,7 @@ export const ControlledRadioButtonsGroup: React.FC<
                 reset: undefined,
                 required: undefined,
                 error: undefined,
+                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'radio',
               }}

package/src/inputs/Select/Select.stories.js

@@ -1,7 +1,10 @@
 import Select from '@digigov/form/inputs/Select';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Select',
   component: Select,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Select',
 };
 export { Default } from '@digigov/form/inputs/Select/__stories__/Default';

package/src/inputs/Select/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Select/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Select variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Select/index.tsx

@@ -6,11 +6,13 @@ import {
   SelectOption,
 } from '@digigov/ui/form/SelectContainer';
 
-export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface SelectProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra: {
     className?: string;
     options: FieldOptionProps[];
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
@@ -18,16 +20,23 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
     { name, extra: { options, className }, disabled, ...props },
     ref: never
   ) {
+    delete props.Field;
     return (
       <SelectContainer
         className={className}
         ref={ref}
         name={name}
+        id={name}
         disabled={disabled}
-        {...{ ...props, reset: undefined, required: undefined }}
+        {...{
+          ...props,
+          reset: undefined,
+          error: undefined,
+          required: undefined,
+        }}
       >
-        {options.map(({ value, label }) => (
-          <SelectOption key={value} value={value}>
+        {options.map(({ value, label }, index) => (
+          <SelectOption key={index} value={value}>
             {label && label.primary ? label.primary : value}
           </SelectOption>
         ))}

package/src/inputs/inputsScenarios.ts

@@ -432,7 +432,7 @@ export const scenarios = [
         type: 'error',
         fieldKey: 'image',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 0.0003,
         },
         text: el.form.error.file_size,
       },
@@ -440,7 +440,7 @@ export const scenarios = [
         type: 'error',
         fieldKey: 'file',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 0.0003,
         },
         text: el.form.error.file_size,
       },

package/src/lazy.js

@@ -9,8 +9,12 @@ export default {
   'FieldBase': lazy(() => import('@digigov/form/Field/FieldBase').then((module) => ({ default: module['FieldBase'] }))),
   'FieldBaseContainer': lazy(() => import('@digigov/form/Field/FieldBaseContainer').then((module) => ({ default: module['FieldBaseContainer'] }))),
   'FieldConditional': lazy(() => import('@digigov/form/Field/FieldConditional').then((module) => ({ default: module['FieldConditional'] }))),
-  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
+  'FormDialog': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['FormDialog'] }))),
+  'ArrayItemModal': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemModal'] }))),
+  'ArrayItemHeader': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemHeader'] }))),
+  'ArrayItemDisplay': lazy(() => import('@digigov/form/FieldArray/FormDialog').then((module) => ({ default: module['ArrayItemDisplay'] }))),
   'FieldArray': lazy(() => import('@digigov/form/FieldArray').then((module) => ({ default: module['FieldArray'] }))),
+  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FieldsetWithContext': lazy(() => import('@digigov/form/Fieldset/FieldsetWithContext').then((module) => ({ default: module['FieldsetWithContext'] }))),
   'FieldsetLabel': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetLabel'] }))),
   'FieldsetCaption': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetCaption'] }))),
@@ -46,15 +50,20 @@ export default {
   'ALTERNATIVE_COMPONENTS': lazy(() => import('@digigov/form/Field/utils').then((module) => ({ default: module['ALTERNATIVE_COMPONENTS'] }))),
   'CONTROLLED_FIELD_COMPONENTS': lazy(() => import('@digigov/form/Field/utils').then((module) => ({ default: module['CONTROLLED_FIELD_COMPONENTS'] }))),
   'AutoCompleteInput': lazy(() => import('@digigov/form/inputs/AutoCompleteInput').then((module) => ({ default: module['AutoCompleteInput'] }))),
+  'DateTimeInput': lazy(() => import('@digigov/form/inputs/DateTimeInput').then((module) => ({ default: module['DateTimeInput'] }))),
   'Image': lazy(() => import('@digigov/form/inputs/ImageInput').then((module) => ({ default: module['Image'] }))),
   'RE_DIGIT': lazy(() => import('@digigov/form/inputs/OtpInput').then((module) => ({ default: module['RE_DIGIT'] }))),
   'REMOVE_SPACES': lazy(() => import('@digigov/form/inputs/OtpInput').then((module) => ({ default: module['REMOVE_SPACES'] }))),
   'RadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['RadioButtonsGroup'] }))),
   'ControlledRadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module) => ({ default: module['ControlledRadioButtonsGroup'] }))),
   'AFM_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AFM_VALIDATOR'] }))),
+  'AMKA_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['AMKA_VALIDATOR'] }))),
   'LATER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['LATER_THAN_VALIDATOR'] }))),
   'EARLIER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['EARLIER_THAN_VALIDATOR'] }))),
   'DATE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['DATE_VALIDATOR'] }))),
+  'LATER_THAN_DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['LATER_THAN_DATETIME_VALIDATOR'] }))),
+  'EARLIER_THAN_DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['EARLIER_THAN_DATETIME_VALIDATOR'] }))),
+  'DATETIME_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['DATETIME_VALIDATOR'] }))),
   'FILE_MAX_SIZE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['FILE_MAX_SIZE_VALIDATOR'] }))),
   'IBAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['IBAN_VALIDATOR'] }))),
   'IMAGE_DIMENSION_VALIDATOR': lazy(() => import('@digigov/form/validators/utils').then((module) => ({ default: module['IMAGE_DIMENSION_VALIDATOR'] }))),

package/src/registry.js

@@ -10,8 +10,9 @@ import * as _digigov_form_Field_FieldBaseContainer from "@digigov/form/Field/Fie
 import * as _digigov_form_Field_FieldConditional from "@digigov/form/Field/FieldConditional";
 import * as _digigov_form_Field from "@digigov/form/Field";
 import * as _digigov_form_Field_types from "@digigov/form/Field/types";
-import * as _digigov_form_FieldObject from "@digigov/form/FieldObject";
+import * as _digigov_form_FieldArray_FormDialog from "@digigov/form/FieldArray/FormDialog";
 import * as _digigov_form_FieldArray from "@digigov/form/FieldArray";
+import * as _digigov_form_FieldObject from "@digigov/form/FieldObject";
 import * as _digigov_form_Fieldset_FieldsetWithContext from "@digigov/form/Fieldset/FieldsetWithContext";
 import * as _digigov_form_Fieldset from "@digigov/form/Fieldset";
 import * as _digigov_form_Fieldset_types from "@digigov/form/Fieldset/types";
@@ -46,17 +47,19 @@ import * as _digigov_form_Questions_Step from "@digigov/form/Questions/Step";
 import * as _digigov_form_Questions_Step_types from "@digigov/form/Questions/Step/types";
 import * as _digigov_form_inputs_AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import * as _digigov_form_inputs_Checkboxes from "@digigov/form/inputs/Checkboxes";
-import * as _digigov_form_inputs_ImageInput from "@digigov/form/inputs/ImageInput";
 import * as _digigov_form_inputs_DateInput from "@digigov/form/inputs/DateInput";
+import * as _digigov_form_inputs_DateTimeInput from "@digigov/form/inputs/DateTimeInput";
 import * as _digigov_form_inputs_FileInput from "@digigov/form/inputs/FileInput";
+import * as _digigov_form_inputs_ImageInput from "@digigov/form/inputs/ImageInput";
 import * as _digigov_form_inputs_Input from "@digigov/form/inputs/Input";
-import * as _digigov_form_inputs_Input_inputsInputScenarios from "@digigov/form/inputs/Input/inputsInputScenarios";
 import * as _digigov_form_inputs_Label from "@digigov/form/inputs/Label";
 import * as _digigov_form_inputs_OtpInput from "@digigov/form/inputs/OtpInput";
 import * as _digigov_form_inputs_Radio from "@digigov/form/inputs/Radio";
 import * as _digigov_form_inputs_Select from "@digigov/form/inputs/Select";
 import * as _digigov_form_validators_utils_afm from "@digigov/form/validators/utils/afm";
+import * as _digigov_form_validators_utils_amka from "@digigov/form/validators/utils/amka";
 import * as _digigov_form_validators_utils_date from "@digigov/form/validators/utils/date";
+import * as _digigov_form_validators_utils_datetime from "@digigov/form/validators/utils/datetime";
 import * as _digigov_form_validators_utils_file from "@digigov/form/validators/utils/file";
 import * as _digigov_form_validators_utils_iban from "@digigov/form/validators/utils/iban";
 import * as _digigov_form_validators_utils_image from "@digigov/form/validators/utils/image";
@@ -98,8 +101,9 @@ export default {
   '@digigov/form/Field/FieldConditional': lazyImport(_digigov_form_Field_FieldConditional),
   '@digigov/form/Field': lazyImport(_digigov_form_Field),
   '@digigov/form/Field/types': lazyImport(_digigov_form_Field_types),
-  '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
+  '@digigov/form/FieldArray/FormDialog': lazyImport(_digigov_form_FieldArray_FormDialog),
   '@digigov/form/FieldArray': lazyImport(_digigov_form_FieldArray),
+  '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
   '@digigov/form/Fieldset/FieldsetWithContext': lazyImport(_digigov_form_Fieldset_FieldsetWithContext),
   '@digigov/form/Fieldset': lazyImport(_digigov_form_Fieldset),
   '@digigov/form/Fieldset/types': lazyImport(_digigov_form_Fieldset_types),
@@ -134,17 +138,19 @@ export default {
   '@digigov/form/Questions/Step/types': lazyImport(_digigov_form_Questions_Step_types),
   '@digigov/form/inputs/AutoCompleteInput': lazyImport(_digigov_form_inputs_AutoCompleteInput),
   '@digigov/form/inputs/Checkboxes': lazyImport(_digigov_form_inputs_Checkboxes),
-  '@digigov/form/inputs/ImageInput': lazyImport(_digigov_form_inputs_ImageInput),
   '@digigov/form/inputs/DateInput': lazyImport(_digigov_form_inputs_DateInput),
+  '@digigov/form/inputs/DateTimeInput': lazyImport(_digigov_form_inputs_DateTimeInput),
   '@digigov/form/inputs/FileInput': lazyImport(_digigov_form_inputs_FileInput),
+  '@digigov/form/inputs/ImageInput': lazyImport(_digigov_form_inputs_ImageInput),
   '@digigov/form/inputs/Input': lazyImport(_digigov_form_inputs_Input),
-  '@digigov/form/inputs/Input/inputsInputScenarios': lazyImport(_digigov_form_inputs_Input_inputsInputScenarios),
   '@digigov/form/inputs/Label': lazyImport(_digigov_form_inputs_Label),
   '@digigov/form/inputs/OtpInput': lazyImport(_digigov_form_inputs_OtpInput),
   '@digigov/form/inputs/Radio': lazyImport(_digigov_form_inputs_Radio),
   '@digigov/form/inputs/Select': lazyImport(_digigov_form_inputs_Select),
   '@digigov/form/validators/utils/afm': lazyImport(_digigov_form_validators_utils_afm),
+  '@digigov/form/validators/utils/amka': lazyImport(_digigov_form_validators_utils_amka),
   '@digigov/form/validators/utils/date': lazyImport(_digigov_form_validators_utils_date),
+  '@digigov/form/validators/utils/datetime': lazyImport(_digigov_form_validators_utils_datetime),
   '@digigov/form/validators/utils/file': lazyImport(_digigov_form_validators_utils_file),
   '@digigov/form/validators/utils/iban': lazyImport(_digigov_form_validators_utils_iban),
   '@digigov/form/validators/utils/image': lazyImport(_digigov_form_validators_utils_image),

package/src/types.tsx

@@ -1,4 +1,4 @@
-import { UseFormReturn, UseFormProps } from 'react-hook-form';
+import { UseFormReturn, UseFormProps, ErrorOption } from 'react-hook-form';
 import {
   FieldComponentRegistry,
   FieldLabelProps,
@@ -54,6 +54,7 @@ export interface FormBuilderProps {
   componentRegistry?: FieldComponentRegistry;
   grid?: boolean;
   controlledFieldsOnly?: boolean;
+  errors?: ErrorOption;
 }
 
 export interface FormBaseProps

package/src/utils.ts

@@ -13,6 +13,7 @@ const parseErrorSchema = (
   return (error.inner || []).reduce<Record<string, FieldError>>(
     (previous, error) => {
       error.path = error.path?.replace(/\[([0-9]+)\]/g, '.$1');
+      // error.path = error.path?.replace(/\["(.*?)"\]/g, '$1');
       if (!previous[error.path!]) {
         previous[error.path!] = { message: error.message, type: error.type! };
       }
@@ -37,6 +38,26 @@ const parseErrorSchema = (
     {}
   );
 };
+function isPlainObject(obj) {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    Object.prototype.toString.call(obj) === '[object Object]'
+  );
+}
+function flattenObject(obj, prefix = '') {
+  return Object.keys(obj).reduce((acc, key) => {
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+    if (isPlainObject(obj[key])) {
+      Object.assign(acc, flattenObject(obj[key], prefixedKey));
+    } else {
+      acc[prefixedKey] = obj[key];
+    }
+
+    return acc;
+  }, {});
+}
 
 export const yupResolver =
   (schema: any, schemaOptions: any = {}, resolverOptions: any = {}) =>
@@ -51,7 +72,7 @@ export const yupResolver =
       const result = await schema[
         resolverOptions.mode === 'sync' ? 'validateSync' : 'validate'
       ](
-        values,
+        flattenObject(values),
         Object.assign({ abortEarly: false }, schemaOptions, { context })
       );
 
@@ -67,13 +88,13 @@ export const yupResolver =
         throw e;
       }
 
-      const parsed = parseErrorSchema(
-        e,
-        !options.shouldUseNativeValidation && options.criteriaMode === 'all'
-      );
       return {
         values: {},
-        errors: parsed,
+        errors: parseErrorSchema(
+          e,
+          !options.shouldUseNativeValidation && options.criteriaMode === 'all'
+        ),
+        options,
       };
     }
   };

package/src/validators/index.ts

@@ -11,6 +11,7 @@ import { ValidatorSchema } from '@digigov/form/validators/types';
 import {
   getYupObjectShape,
   AFM_VALIDATOR,
+  AMKA_VALIDATOR,
   FILE_MAX_SIZE_VALIDATOR,
   IBAN_VALIDATOR,
   OTP_VALIDATOR,
@@ -23,17 +24,22 @@ import {
   DATE_VALIDATOR,
   LATER_THAN_VALIDATOR,
   EARLIER_THAN_VALIDATOR,
+  DATETIME_VALIDATOR,
+  LATER_THAN_DATETIME_VALIDATOR,
+  EARLIER_THAN_DATETIME_VALIDATOR,
 } from '@digigov/form/validators/utils';
 import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
 import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
 
-export const getYUPTypeMap = (): Record<string, any> => {
+export const getYUPTypeMap = (
+  validatorRegistry?: Record<string, any>
+): Record<string, any> => {
   const yupTypeMap = {
     file: (field): MixedSchema => {
       return yup
         .mixed()
         .transform((value) => {
-          if (!value.length) {
+          if (!value || value.length === 0) {
             return null;
           }
           return value;
@@ -43,7 +49,7 @@ export const getYUPTypeMap = (): Record<string, any> => {
     },
     string: (field): yup.StringSchema => {
       if (field.trim) {
-        return yup.string().trim().required(field.required);
+        return yup.string().trim();
       } else {
         return yup.string();
       }
@@ -78,10 +84,13 @@ export const getYUPTypeMap = (): Record<string, any> => {
       if (typeof field.extra.of === 'object') {
         // else if the field is an object then it is a scalar type
         // eg. number, string etc.
+        if (field.required) {
+          field.extra.min = 1;
+        }
         let arrayValidator = yup
           .array()
-          .of(yupTypeMap[field.extra.of.type](field.extra.of))
-          .required(field.required);
+          .nullable()
+          .of(yupTypeMap[field.extra.of.type](field.extra.of));
         if (field.extra.length)
           arrayValidator = arrayValidator.length(field.extra.length, {
             key: 'form.error.array.length',
@@ -130,6 +139,10 @@ export const getYUPTypeMap = (): Record<string, any> => {
       field.trim
         ? yup.string().trim().test(AFM_VALIDATOR)
         : yup.string().test(AFM_VALIDATOR),
+    amka: (field): yup.StringSchema =>
+      field.trim
+        ? yup.string().trim().test(AMKA_VALIDATOR)
+        : yup.string().test(AMKA_VALIDATOR),
     uuid4: (field): yup.StringSchema =>
       field.trim
         ? yup.string().trim().test(UUID4_VALIDATOR)
@@ -203,6 +216,16 @@ export const getYUPTypeMap = (): Record<string, any> => {
       }
       return schema;
     },
+    datetime: (field): yup.StringSchema => {
+      if (field?.extra?.min) {
+        return yup.string().test(LATER_THAN_DATETIME_VALIDATOR(field));
+      }
+      if (field?.extra?.max) {
+        return yup.string().test(EARLIER_THAN_DATETIME_VALIDATOR(field));
+      }
+      return yup.string().test(DATETIME_VALIDATOR);
+    },
+    ...validatorRegistry,
   };
   return yupTypeMap;
 };
@@ -214,7 +237,7 @@ export function useValidationSchema(
   validatorRegistry?: Record<string, ValidatorSchema[]>
 ): Lazy<any, unknown> | AnyObjectSchema | void {
   return useMemo(() => {
-    const yupTypeMap = getYUPTypeMap();
+    const yupTypeMap = getYUPTypeMap(validatorRegistry);
     return getYupObjectShape(fields, yupTypeMap, validatorRegistry);
-  }, []);
+  }, [fields, validatorRegistry]);
 }