@digigov/form 2.0.0-13876dba → 2.0.0-16fbe090

package/src/validators/utils/datetime.ts

@@ -1,12 +1,13 @@
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 dayjs.extend(customParseFormat);
 
 const VALID_DATETIME_FORMATS = ['DD/MM/YYYY HH:mm'];
 const DATETIME_CACHE = {};
+const onlyNumbersRegex = /^\d+$/;
 
 const getDateTime = (v: string) => {
   return DATETIME_CACHE[v]
@@ -14,54 +15,145 @@ const getDateTime = (v: string) => {
     : dayjs(v, VALID_DATETIME_FORMATS, true);
 };
 
-// Function to check partial datetime completion
+const getDaysInMonth = (month: number, year: number): number => {
+  return dayjs(`${year}-${month}-01`).daysInMonth(); // e.g. 29 for Feb 2024
+};
+
 const checkPartialDateTime = (value: string) => {
   const [datePart, timePart] = value.split(' ');
-  const [day, month, year] = datePart.split('/');
-  const [hours, minutes] = timePart ? timePart.split(':') : [null, null];
+  const [day, month, year] = datePart?.split('/') ?? [];
+  const [hours, minutes] = timePart?.split(':') ?? [];
+
+  const hasDay = Boolean(day);
+  const hasMonth = Boolean(month);
+  const hasYear = Boolean(year);
+  const hasHours = Boolean(hours);
+  const hasMinutes = Boolean(minutes);
 
-  // Check date part first
-  if (day && !month && !year) {
+  if (hasDay && !hasMonth && !hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_month_year_hours_minutes';
+  }
+  if (!hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_year_hours_minutes';
+  }
+  if (!hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_hours_minutes';
+  }
+  if (hasDay && hasMonth && !hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_year_hours_minutes';
+  }
+  if (hasDay && !hasMonth && hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_month_hours_minutes';
+  }
+  if (!hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_hours_minutes';
+  }
+  if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid__hours_minutes';
+  }
+  if (hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_minutes';
+  }
+  if (hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_hours';
+  }
+  if (hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_month_year_minutes';
+  }
+  if (hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_month_year_hours';
+  }
+  if (hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_month_year';
   }
-  if (!day && month && !year) {
+  if (!hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_year_minutes';
+  }
+  if (!hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_day_year_hours';
+  }
+  if (!hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_day_year';
   }
-  if (!day && !month && year) {
+  if (!hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_minutes';
+  }
+  if (!hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_hours';
+  }
+  if (!hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_day_month';
   }
-  if (day && month && !year) {
+  if (!hasDay && !hasMonth && !hasYear && hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_year';
+  }
+  if (!hasDay && !hasMonth && !hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_year_hours';
+  }
+  if (hasDay && hasMonth && !hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_year_minutes';
+  }
+  if (hasDay && hasMonth && !hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_year_hours';
+  }
+  if (hasDay && hasMonth && !hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_year';
   }
-  if (day && !month && year) {
+  if (hasDay && !hasMonth && hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_month_minutes';
+  }
+  if (hasDay && !hasMonth && hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_month_hours';
+  }
+  if (hasDay && !hasMonth && hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_month';
   }
-  if (!day && month && year) {
+  if (!hasDay && hasMonth && hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_minutes';
+  }
+  if (!hasDay && hasMonth && hasYear && !hasHours && hasMinutes) {
+    return 'form.error.datetime.invalid_day_hours';
+  }
+  if (!hasDay && hasMonth && hasYear && hasHours && hasMinutes) {
     return 'form.error.datetime.invalid_day';
   }
-  // If date is complete, check time part
-  if (day && month && year) {
-    if (hours && !minutes) {
-      return 'form.error.datetime.invalid_minutes';
+  if (!hasDay && !hasMonth && !hasYear && hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_day_month_year_minutes';
+  }
+  if (hasDay && hasMonth && hasYear && !hasHours && !hasMinutes) {
+    return 'form.error.datetime.invalid_hours_minutes';
+  }
+  if (day && month) {
+    const dayNum = parseInt(day);
+    const monthNum = parseInt(month);
+    const validYear = onlyNumbersRegex.test(year) ? year : undefined;
+    if (!validYear || year.length < 4) {
+      return 'form.error.datetime.invalid';
     }
-    if (!hours && minutes) {
-      return 'form.error.datetime.invalid_hours';
+    const yearNum = parseInt(validYear);
+    const maxDay = getDaysInMonth(monthNum, yearNum);
+    if (dayNum < 1 || dayNum > maxDay) {
+      return {
+        key: 'form.error.datetime.invalid_day_range',
+        context: {
+          maxDay: maxDay,
+        },
+      };
     }
-    if (!hours && !minutes) {
-      return 'form.error.datetime.invalid';
+    if (monthNum < 1 || monthNum > 12) {
+      return 'form.error.datetime.invalid_month_range';
+    }
+  }
+  if (hours && minutes) {
+    const hoursNum = parseInt(hours);
+    const minutesNum = parseInt(minutes);
+    if (hoursNum < 0 || hoursNum > 23) {
+      return 'form.error.datetime.invalid_hours_range';
     }
-    if (hours && minutes) {
-      const hoursNum = parseInt(hours);
-      const minutesNum = parseInt(minutes);
-      if (hoursNum < 0 || hoursNum > 23) {
-        return 'form.error.datetime.invalid_hours_range';
-      }
-      if (minutesNum < 0 || minutesNum > 59) {
-        return 'form.error.datetime.invalid_minutes_range';
-      }
+    if (minutesNum < 0 || minutesNum > 59) {
+      return 'form.error.datetime.invalid_minutes_range';
     }
   }
-
   return 'form.error.datetime.invalid';
 };
 
@@ -119,7 +211,7 @@ export const EARLIER_THAN_DATETIME_VALIDATOR = (
 
 export const DATETIME_VALIDATOR = {
   name: 'datetime-validator',
-  message: (v): string => {
+  message: (v): string | object => {
     return checkPartialDateTime(v.value);
   },
   test: function (value: string) {

package/src/validators/utils/email.ts

@@ -0,0 +1,11 @@
+export const EMAIL_VALIDATOR = {
+  name: 'email-validator',
+  message: 'form.error.email',
+  test: (value: string): boolean => {
+    if (!value) return true;
+    const EMAIL_REGEX =
+      // eslint-disable-next-line no-useless-escape
+      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return EMAIL_REGEX.test(value);
+  },
+};

package/src/validators/utils/file.ts

@@ -1,27 +1,41 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 const DEFAULT_FILE_MAX_SIZE = 10000000;
 
-export const FILE_MAX_SIZE_VALIDATOR = (field: FieldSpec): ValidatorSchema => ({
-  name: 'file-max-size-validator',
-  message: {
-    key:
-      field.type === 'file' ? 'form.error.file_size' : 'form.error.image_size',
-    context: {
-      maxSizeToMb:
-        (field?.extra?.limit?.maxSize || DEFAULT_FILE_MAX_SIZE) / 1000000,
+export const FILE_MAX_SIZE_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  const maxSizeInBytes = field?.extra?.limit?.maxSize || DEFAULT_FILE_MAX_SIZE;
+  let maxSizeTransformed = maxSizeInBytes / (1024 * 1024); // In MB
+  let maxSizeText = 'MB';
+  if (Math.round(maxSizeTransformed) === 0) {
+    maxSizeTransformed = Math.round(maxSizeInBytes / 1024);
+    maxSizeText = 'KB';
+  }
+  if (Math.round(maxSizeTransformed) === 0) {
+    maxSizeTransformed = maxSizeInBytes;
+    maxSizeText = 'Bytes';
+  }
+  return {
+    name: 'file-max-size-validator',
+    message: {
+      key:
+        field.type === 'file'
+          ? 'form.error.file_size'
+          : 'form.error.image_size',
+      context: {
+        maxSize: `${maxSizeTransformed} ${maxSizeText}`,
+      },
     },
-  },
-  test: (value: File[]): boolean => {
-    if (value) {
-      for (const file of value) {
-        const maxSize = field?.extra?.limit?.maxSize || DEFAULT_FILE_MAX_SIZE;
-        if (file.size > maxSize) {
-          return false;
+    test: (value: File[]): boolean => {
+      if (value) {
+        for (const file of Array.from(value)) {
+          const maxSize = field?.extra?.limit?.maxSize || DEFAULT_FILE_MAX_SIZE;
+          if (file.size > maxSize) {
+            return false;
+          }
         }
       }
-    }
-    return true;
-  },
-});
+      return true;
+    },
+  };
+};

package/src/validators/utils/iban.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 export function validateIban(value: string, countryCode: string): boolean {
   value = value.replace(/\s/g, '').replace(/-/g, '');
   if (value.match(/^[0-9]*$/i)) {

package/src/validators/utils/image.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 const DEFAULT_IMAGE_MAX_HEIGHT_SIZE = 2000;
 const DEFAULT_IMAGE_MAX_WIDTH_SIZE = 2000;

package/src/validators/utils/index.ts

@@ -1,8 +1,9 @@
 import * as yup from 'yup';
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 export * from '@digigov/form/validators/utils/afm';
+export * from '@digigov/form/validators/utils/amka';
 export * from '@digigov/form/validators/utils/file';
 export * from '@digigov/form/validators/utils/iban';
 export * from '@digigov/form/validators/utils/otp';
@@ -64,9 +65,13 @@ export function computeShape(
       yupField = yupField.nullable().required('form.error.required');
     }
     if (validatorRegistry && field.type && validatorRegistry[field.type]) {
-      validatorRegistry[field.type].forEach((validator: any) => {
-        yupField = yupField.test(validator);
-      });
+      if (Array.isArray(validatorRegistry[field.type])) {
+        validatorRegistry[field.type].forEach((validator: any) => {
+          yupField = yupField.test(validator);
+        });
+      } else {
+        yupField = yupField.test(validatorRegistry[field.type]);
+      }
     }
     if (field.validators) {
       field.validators.forEach((validator) => {
@@ -98,7 +103,9 @@ export function getYupObjectShape(
 
   return yup.lazy(function () {
     const fieldSchemas = computeShape(
-      Object.values(fields.current),
+      Object.values(fields.current).filter(
+        (f: FieldSpec) => !f.key.includes('.')
+      ) as FieldSpec[],
       yupTypeMap,
       validatorRegistry
     );

package/src/validators/utils/int.ts

@@ -1,4 +1,4 @@
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 export function validateIntNumber(number: number): boolean {
   if (number === undefined) {

package/src/validators/utils/number.ts

@@ -1,4 +1,4 @@
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 export function validateNumber(number: number): boolean {
   return !Number.isNaN(number);

package/src/validators/utils/otp.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 export function validateOtp(value: string, maxLength: number): boolean {
   if (value.length === maxLength) {
     return true;

package/src/validators/utils/phone.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 export type PhoneNumberType = 'landline' | 'mobile' | null;
 // add more countries from here libphonenumber-js/metadata.full.json

package/src/validators/utils/postal_code.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 const CODE_REGEX = /^[12345678][0-9]{4}$/;
 export function validatePostalCode(

package/src/validators/utils/text_limit.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldSpec } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
 
 export function validateText(value: string, min: number, max: number): boolean {
   let validator;

package/types.d.ts

@@ -1,7 +1,8 @@
-import { UseFormReturn, UseFormProps } from 'react-hook-form';
-import { FieldComponentRegistry, FieldLabelProps, FieldSpec, FormData } from '@digigov/form/Field/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
-export * from '@digigov/form/Field/types';
+import type { UseFormReturn, UseFormProps, ErrorOption } from 'react-hook-form';
+import type { FieldLabelProps, FieldSpec, FormData } from './Field/types.js';
+import type { FieldComponentRegistry } from './inputs/registry.js';
+import type { ValidatorSchema } from './validators/types.js';
+export * from './Field/types.js';
 export interface FieldError {
     message: string;
 }
@@ -11,25 +12,29 @@ export interface FieldsetSpec {
     label?: FieldLabelProps;
     body?: React.ReactNode;
 }
+export type registerFieldFocus = (fieldName: string, element: HTMLElement) => (name: string) => void;
 export interface FormContextProps {
     fieldsetsMap?: Record<string, FieldsetSpec>;
     fieldsMap: Record<string, FieldSpec>;
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];
     trigger: UseFormReturn['trigger'];
+    setError: UseFormReturn['setError'];
     clearErrors: UseFormReturn['clearErrors'];
     watch: UseFormReturn['watch'];
     getFieldState: UseFormReturn['getFieldState'];
     setValue: UseFormReturn['setValue'];
     getValues: UseFormReturn['getValues'];
+    getValuesFromParentForm?: UseFormReturn['getValues'];
     unregister: UseFormReturn['unregister'];
     formState: UseFormReturn['formState'];
     reset: UseFormReturn['reset'];
     resetField: UseFormReturn['resetField'];
     registerField: (field: FieldSpec) => void;
+    registerFieldFocus: registerFieldFocus;
     errors: UseFormReturn['formState']['errors'];
     componentRegistry?: FieldComponentRegistry;
-    submit: () => Promise<void>;
+    submit: () => Promise<void> | void;
 }
 export interface FormBuilderProps {
     fields?: FieldSpec[];
@@ -46,6 +51,7 @@ export interface FormBuilderProps {
     componentRegistry?: FieldComponentRegistry;
     grid?: boolean;
     controlledFieldsOnly?: boolean;
+    errors?: ErrorOption;
 }
 export interface FormBaseProps extends Omit<FormBuilderProps, 'fields' | 'fieldsets' | 'auto'> {
     fieldsetsMap?: Record<string, FieldsetSpec>;

package/types.js

@@ -0,0 +1 @@
+export * from "./Field/types.js";

package/utils.d.ts

@@ -1,8 +1,11 @@
-import { FieldError } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
 export declare const yupResolver: (schema: any, schemaOptions?: any, resolverOptions?: any) => (values: any, context: any, options: any) => Promise<{
     values: any;
     errors: {};
+    options?: undefined;
 } | {
     values: {};
     errors: Record<string, FieldError>;
+    options: any;
 }>;
+export declare function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;

package/utils.js

@@ -0,0 +1,56 @@
+import { validateFieldsNatively } from "@hookform/resolvers";
+import { appendErrors } from "react-hook-form";
+const parseErrorSchema = (error, validateAllFieldCriteria)=>(error.inner || []).reduce((previous, error)=>{
+        error.path = error.path?.replace(/\[([0-9]+)\]/g, '.$1');
+        if (!previous[error.path]) previous[error.path] = {
+            message: error.message,
+            type: error.type
+        };
+        if (validateAllFieldCriteria) {
+            const types = previous[error.path].types;
+            const messages = types && types[error.type];
+            previous[error.path] = appendErrors(error.path, validateAllFieldCriteria, previous, error.type, messages ? [].concat(messages, error.message) : error.message);
+        }
+        return previous;
+    }, {});
+function isPlainObject(obj) {
+    return 'object' == typeof obj && null !== obj && '[object Object]' === Object.prototype.toString.call(obj);
+}
+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;
+    }, {});
+}
+const yupResolver = (schema, schemaOptions = {}, resolverOptions = {})=>async (values, context, options)=>{
+        try {
+            if (schemaOptions.context && 'development' === process.env.NODE_ENV) console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead");
+            const result = await schema['sync' === resolverOptions.mode ? 'validateSync' : 'validate'](flattenObject(values), Object.assign({
+                abortEarly: false
+            }, schemaOptions, {
+                context
+            }));
+            if (options.shouldUseNativeValidation) validateFieldsNatively({}, options);
+            return {
+                values: resolverOptions.rawValues ? values : result,
+                errors: {}
+            };
+        } catch (e) {
+            if (!e.inner) throw e;
+            return {
+                values: {},
+                errors: parseErrorSchema(e, !options.shouldUseNativeValidation && 'all' === options.criteriaMode),
+                options
+            };
+        }
+    };
+function omit(obj, keys) {
+    const result = {
+        ...obj
+    };
+    for (const key of keys)delete result[key];
+    return result;
+}
+export { omit, yupResolver };

package/validators/index.d.ts

@@ -1,9 +1,9 @@
-import { MutableRefObject } from 'react';
-import { AnyObjectSchema } from 'yup';
-import Lazy from 'yup/lib/Lazy';
-import { FieldSpec } from '@digigov/form/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
-export declare const getYUPTypeMap: () => Record<string, any>;
+import type { MutableRefObject } from 'react';
+import type { AnyObjectSchema } from 'yup';
+import type Lazy from 'yup/lib/Lazy';
+import type { FieldSpec } from '../types.js';
+import type { ValidatorSchema } from './types.js';
+export declare const getYUPTypeMap: (validatorRegistry?: Record<string, any>) => Record<string, any>;
 export interface MutableRefObjectProps {
 }
 export declare function useValidationSchema(fields: FieldSpec[] | MutableRefObject<MutableRefObjectProps>, validatorRegistry?: Record<string, ValidatorSchema[]>): Lazy<any, unknown> | AnyObjectSchema | void;