@digigov/form 0.10.6 → 0.10.7

package/src/types.tsx

@@ -0,0 +1,110 @@
+import { UseFormReturn, UseFormProps } from 'react-hook-form';
+import { GridProps } from '@digigov/ui/layouts/Grid';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldComponentRegistry } from '@digigov/form/Field/types';
+
+export type FieldError = {
+  message: string;
+};
+
+export type FieldLabelProps = {
+  primary?: string;
+  secondary?: string;
+};
+
+export interface FieldCondition {
+  is: string;
+  then?: Partial<FieldSpec>;
+  else?: Partial<FieldSpec>;
+}
+export interface FieldSpec {
+  key: string; // !TODO rename key to name;
+  type?:
+    | 'int'
+    | 'string'
+    | 'text'
+    | 'boolean'
+    | 'email'
+    | 'uuid4'
+    | 'choice:multiple'
+    | 'choice:single'
+    | 'mobile_phone'
+    | 'date'
+    | 'afm'
+    | 'iban'
+    | 'file'
+    | 'postal_code'
+    | 'phone_number'
+    | 'array'
+    | 'object';
+  component?: any;
+  condition?: Record<string, FieldCondition>;
+  controlled?: boolean;
+  label?: FieldLabelProps;
+  extra?: Record<string, any>;
+  editable?: boolean;
+  required?: boolean;
+  enabled?: boolean;
+  layout?: Record<
+    string,
+    | GridProps['xs']
+    | GridProps['sm']
+    | GridProps['md']
+    | GridProps['lg']
+    | GridProps['xl']
+  >;
+  validators?: ValidatorSchema[];
+  wrapper?: 'label' | 'fieldset';
+}
+
+export interface FieldsetSpec {
+  key: string;
+  fields: string[];
+  label?: FieldLabelProps;
+  body?: React.ReactNode;
+}
+
+export type FormData = UseFormProps['defaultValues'];
+
+export interface FormContextProps {
+  fieldsetsMap?: Record<string, FieldsetSpec>;
+  fieldsMap: Record<string, FieldSpec>;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  trigger: UseFormReturn['trigger'];
+  clearErrors: UseFormReturn['clearErrors'];
+  watch: UseFormReturn['watch'];
+  getFieldState: UseFormReturn['getFieldState'];
+  setValue: UseFormReturn['setValue'];
+  getValues: UseFormReturn['getValues'];
+  unregister: UseFormReturn['unregister'];
+  formState: UseFormReturn['formState'];
+  reset: UseFormReturn['reset'];
+  registerField: (field: FieldSpec) => void;
+  errors: UseFormReturn['formState']['errors'];
+  componentRegistry?: FieldComponentRegistry;
+}
+
+export interface FormBuilderProps {
+  fields?: FieldSpec[];
+  fieldsets?: FieldsetSpec[];
+  initial?: FormData;
+  onSubmit?: (data: FormData) => void | null | FieldError[];
+  mode?: UseFormProps['mode'];
+  reValidateMode?: UseFormProps['reValidateMode'];
+  criteriaMode?: UseFormProps['criteriaMode'];
+  children?: React.ReactNode;
+  shouldFocusError?: boolean;
+  auto?: boolean;
+  validatorRegistry?: Record<string, ValidatorSchema[]>;
+  componentRegistry?: FieldComponentRegistry;
+  grid?: boolean;
+}
+
+export interface FormBaseProps
+  extends Omit<FormBuilderProps, 'fields' | 'fieldsets' | 'auto'> {
+  fieldsetsMap?: Record<string, FieldsetSpec>;
+  fieldsMap: Record<string, FieldSpec>;
+  registerField: (field: FieldSpec) => void;
+  resolver: any;
+}

package/src/utils.ts

@@ -0,0 +1,78 @@
+import * as Yup from 'yup';
+import { validateFieldsNatively } from '@hookform/resolvers';
+import { appendErrors, FieldError } from 'react-hook-form';
+
+/**
+ * Why `path!` ? because it could be `undefined` in some case
+ * https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string
+ */
+const parseErrorSchema = (
+  error: Yup.ValidationError,
+  validateAllFieldCriteria: boolean
+) => {
+  return (error.inner || []).reduce<Record<string, FieldError>>(
+    (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
+            ? ([] as string[]).concat(messages as string[], error.message)
+            : error.message
+        ) as FieldError;
+      }
+
+      return previous;
+    },
+    {}
+  );
+};
+
+export const yupResolver = (
+  schema: any,
+  schemaOptions: any = {},
+  resolverOptions: any = {}
+) => async (values, context, options) => {
+  try {
+    if (schemaOptions.context && process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "You should not used the yup options context. Please, use the 'useForm' context object instead"
+      );
+    }
+
+    const result = await schema[
+      resolverOptions.mode === 'sync' ? 'validateSync' : 'validate'
+    ](values, Object.assign({ abortEarly: false }, schemaOptions, { context }));
+
+    options.shouldUseNativeValidation && validateFieldsNatively({}, options);
+
+    return {
+      values: resolverOptions.rawValues ? values : result,
+      errors: {},
+    };
+  } catch (e) {
+    if (!e.inner) {
+      throw e;
+    }
+
+    const parsed = parseErrorSchema(
+      e,
+      !options.shouldUseNativeValidation && options.criteriaMode === 'all'
+    );
+    return {
+      values: {},
+      errors: parsed,
+    };
+  }
+};

package/src/validators/index.ts

@@ -0,0 +1,203 @@
+import * as yup from 'yup';
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { MutableRefObject, useMemo } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import {
+  getYupObjectShape,
+  AFM_VALIDATOR,
+  FILE_MAX_SIZE_VALIDATOR,
+  IBAN_VALIDATOR,
+  MOBILE_PHONE_VALIDATOR,
+  PHONE_NUMBER_VALIDATOR,
+  POSTALCODE_VALIDATOR,
+  UUID4_VALIDATOR,
+} from '@digigov/form/validators/utils';
+import { MixedSchema } from 'yup/lib/mixed';
+import { RequiredArraySchema } from 'yup/lib/array';
+import { AnyObject } from 'yup/lib/types';
+import Lazy from 'yup/lib/Lazy';
+import { TypeOfShape, AssertsShape } from 'yup/lib/object';
+import { AnyObjectSchema, StringSchema } from 'yup';
+import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
+import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
+dayjs.extend(customParseFormat);
+
+const VALID_DATE_FORMATS = ['DD/MM/YYYY'];
+const DATE_CACHE = {};
+const getDate = (v) => {
+  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
+};
+
+export const getYUPTypeMap = (): Record<string, any> => {
+  const yupTypeMap = {
+    file: (field): MixedSchema => {
+      return yup
+        .mixed()
+        .transform((value) => {
+          if (!value.length) {
+            return null;
+          }
+          return value;
+        })
+        .nullable()
+        .test(FILE_MAX_SIZE_VALIDATOR(field));
+    },
+    string: yup.string,
+    text: yup.string,
+    boolean: yup.boolean,
+    object: (
+      field
+    ):
+      | yup.ObjectSchema<any, AnyObject, TypeOfShape<any>, AssertsShape<any>>
+      | Lazy<any, unknown> => {
+      return getYupObjectShape(field.extra.fields, yupTypeMap);
+    },
+    array: (
+      field
+    ):
+      | yup.ArraySchema<any, AnyObject, any[] | undefined>
+      | RequiredArraySchema<any, AnyObject, any[] | undefined> => {
+      if (typeof field.extra.of === 'object') {
+        // else if the field is an object then it is a scalar type
+        // eg. number, string etc.
+        let arrayValidator = yup
+          .array()
+          .of(yupTypeMap[field.extra.of.type](field.extra.of))
+          .required(field.required);
+        if (field.extra.length)
+          arrayValidator = arrayValidator.length(field.extra.length, {
+            key: 'form.error.array.length',
+            context: {
+              length: field.extra.length,
+            },
+          });
+        if (field.extra.min)
+          arrayValidator = arrayValidator.min(field.extra.min, {
+            key: 'form.error.array.min',
+            context: {
+              min: field.extra.min,
+            },
+          });
+        if (field.extra.max)
+          arrayValidator = arrayValidator.max(field.extra.max, {
+            key: 'form.error.array.max',
+            context: {
+              max: field.extra.max,
+            },
+          });
+        return arrayValidator;
+      } else if (typeof field.extra.of === 'string') {
+        return yup.array().of(yupTypeMap[field.extra.of]());
+      } else {
+        // in any other case it will be string
+        return yup.array().of(yup.string());
+      }
+    },
+    int: (): MixedSchema =>
+      yup
+        .mixed()
+        .transform((_, val) => (val !== '' ? Number(val) : null))
+        .test(NUMBER_VALIDATOR())
+        .test(INT_VALIDATOR()),
+    email: (): yup.StringSchema => yup.string().email('form.error.email'),
+    afm: (): yup.StringSchema => yup.string().test(AFM_VALIDATOR),
+    uuid4: (): yup.StringSchema => yup.string().test(UUID4_VALIDATOR),
+    iban: (field): yup.StringSchema => yup.string().test(IBAN_VALIDATOR(field)),
+    postal_code: (field): yup.StringSchema =>
+      yup.string().test(POSTALCODE_VALIDATOR(field)),
+    mobile_phone: (): yup.StringSchema =>
+      yup.string().test(MOBILE_PHONE_VALIDATOR),
+    phone_number: (field): yup.StringSchema =>
+      yup.string().test(PHONE_NUMBER_VALIDATOR(field)),
+    'choice:multiple': (): yup.ArraySchema<
+      yup.StringSchema<string | undefined, AnyObject, string | undefined>,
+      AnyObject,
+      (string | undefined)[] | null | undefined,
+      (string | undefined)[] | null | undefined
+    > => yup.array().of(yup.string()).nullable(),
+    'choice:single': (): StringSchema<
+      string | null | undefined,
+      AnyObject,
+      string | null | undefined
+    > => yup.string().nullable(),
+    date: (field) => {
+      let simpleDate = yup
+        .string()
+        .nullable(true)
+        .test('date', 'form.error.date.invalid', function (value) {
+          if (!value) return true;
+          const date = getDate(value);
+          return date.isValid();
+        });
+      const params = field.extra || {};
+      if (params.max) {
+        let maxDate;
+        if (params.max === 'now') {
+          const today = new Date();
+          maxDate = new Date(today);
+        } else {
+          maxDate = getDate(params.max).toDate();
+        }
+        const maxNextDate = new Date(maxDate);
+        maxNextDate.setDate(maxDate.getDate() + 1);
+        simpleDate = simpleDate.test({
+          name: 'earlier-than',
+          message: {
+            key: 'form.error.date.earlier_than',
+            context: {
+              maxDate: maxNextDate.toLocaleDateString(),
+            },
+          },
+          test: function (value) {
+            if (!value) return true;
+            const date = getDate(value);
+            const isValid = +date.toDate() < +maxDate;
+            return isValid;
+          },
+        });
+      }
+      if (params.min) {
+        let minDate;
+        if (params.min === 'now') {
+          const today = new Date();
+          minDate = new Date(today);
+        } else {
+          minDate = getDate(params.min).toDate();
+        }
+        const minPreviousDate = new Date(minDate);
+        minPreviousDate.setDate(minDate.getDate() - 1);
+        simpleDate = simpleDate.test({
+          name: 'later-than',
+          message: {
+            key: 'form.error.date.later_than',
+            context: {
+              minDate: minPreviousDate.toLocaleDateString(),
+            },
+          },
+          test: function (value) {
+            if (!value) return true;
+            const date = getDate(value);
+            const isValid = +date.toDate() > +minDate;
+            return isValid;
+          },
+        });
+      }
+      return simpleDate;
+    },
+  };
+  return yupTypeMap;
+};
+
+export interface MutableRefObjectProps {}
+// Create a yup validation schema from given fields input
+export function useValidationSchema(
+  fields: FieldSpec[] | MutableRefObject<MutableRefObjectProps>,
+  validatorRegistry?: Record<string, ValidatorSchema[]>
+): Lazy<any, unknown> | AnyObjectSchema | void {
+  return useMemo(() => {
+    const yupTypeMap = getYUPTypeMap();
+    return getYupObjectShape(fields, yupTypeMap, validatorRegistry);
+  }, []);
+}

package/src/validators/types.ts

@@ -0,0 +1,2 @@
+import * as yup from 'yup';
+export type ValidatorSchema = yup.TestConfig;

package/src/validators/utils/afm.ts

@@ -0,0 +1,37 @@
+export function validateAFM(afm: string): boolean {
+  if (afm.length !== 9) {
+    // "afm should be 9 digits"
+    return false;
+  }
+
+  if (!/^\d+$/.test(afm)) {
+    // "This is not a number"
+    return false;
+  }
+
+  if (afm === '0'.repeat(9)) {
+    // "This is zero number (000000000)"
+    return false;
+  }
+
+  const sum = afm
+    .substring(0, 8)
+    .split('')
+    .reduce((s, v, i) => s + (parseInt(v) << (8 - i)), 0);
+
+  const calc = sum % 11;
+  const d9 = parseInt(afm[8]);
+  const valid = calc % 10 === d9;
+  return valid;
+}
+
+export const AFM_VALIDATOR = {
+  name: 'afm-validator',
+  message: 'form.error.afm',
+  test: (value): boolean => {
+    if (value) {
+      return validateAFM(value);
+    }
+    return true;
+  },
+};

package/src/validators/utils/file.ts

@@ -0,0 +1,25 @@
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldSpec } from '@digigov/form/types';
+
+const DEFAULT_FILE_MAX_SIZE = 10000000;
+
+export const FILE_MAX_SIZE_VALIDATOR = (field: FieldSpec): ValidatorSchema => ({
+  name: 'file-max-size-validator',
+  message: 'form.error.file_size',
+  test: (value: File[]): boolean => {
+    if (field.extra && field.extra.maxSize && value) {
+      for (const file of value) {
+        if (file.size >= field.extra.maxSize) {
+          return false;
+        }
+      }
+    } else if (value) {
+      for (const file of value) {
+        if (file.size >= DEFAULT_FILE_MAX_SIZE) {
+          return false;
+        }
+      }
+    }
+    return true;
+  },
+});

package/src/validators/utils/iban.ts

@@ -0,0 +1,119 @@
+import { FieldSpec } from '@digigov/form/types';
+import { 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)) {
+    // this is for greek iban without the country code
+    if (value.length !== 25) {
+      return false;
+    }
+  } else {
+    value = value.toUpperCase();
+    if (countryCode) {
+      if (!value.startsWith(countryCode.toUpperCase())) {
+        return false;
+      }
+      if (value.length === ibanCountryCodesLengths[countryCode.toUpperCase()]) {
+        return true;
+      }
+    }
+    if (value.length !== 27) {
+      // this is for greek iban
+      return false;
+    }
+  }
+  return true;
+}
+
+export const IBAN_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  const countryCode = field?.extra?.country;
+  return {
+    name: 'iban-validator',
+    message: 'form.error.iban',
+    test: (value: string): boolean => {
+      if (!value) {
+        return true;
+      }
+      return validateIban(value, countryCode);
+    },
+  };
+};
+
+const ibanCountryCodesLengths = {
+  AD: 24,
+  AT: 20,
+  AZ: 28,
+  BH: 22,
+  BY: 28,
+  BE: 16,
+  BA: 20,
+  BR: 29,
+  BG: 22,
+  CR: 22,
+  HR: 21,
+  CY: 28,
+  CZ: 24,
+  DK: 18,
+  DO: 28,
+  EG: 29,
+  SV: 28,
+  EE: 20,
+  FO: 18,
+  FI: 18,
+  FR: 27,
+  GE: 22,
+  DE: 22,
+  GI: 23,
+  GR: 27,
+  GL: 18,
+  GT: 28,
+  VA: 22,
+  HU: 28,
+  IS: 26,
+  IQ: 23,
+  IE: 22,
+  IL: 23,
+  IT: 27,
+  JO: 30,
+  KZ: 20,
+  XK: 20,
+  KW: 30,
+  LV: 21,
+  LB: 28,
+  LI: 21,
+  LT: 20,
+  LU: 20,
+  MT: 31,
+  MR: 27,
+  MU: 30,
+  MD: 24,
+  MC: 27,
+  ME: 22,
+  NL: 18,
+  MK: 19,
+  NO: 15,
+  PK: 24,
+  PS: 29,
+  PL: 28,
+  PT: 25,
+  QA: 29,
+  RO: 24,
+  LC: 32,
+  SM: 27,
+  ST: 25,
+  SA: 24,
+  RS: 22,
+  SC: 31,
+  SK: 24,
+  SI: 19,
+  ES: 24,
+  SE: 24,
+  CH: 21,
+  TL: 23,
+  TN: 24,
+  TR: 26,
+  UA: 29,
+  AE: 23,
+  GB: 22,
+  VG: 24,
+};

package/src/validators/utils/index.ts

@@ -0,0 +1,94 @@
+import * as yup from 'yup';
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+
+export * from '@digigov/form/validators/utils/afm';
+export * from '@digigov/form/validators/utils/file';
+export * from '@digigov/form/validators/utils/iban';
+export * from '@digigov/form/validators/utils/phone';
+export * from '@digigov/form/validators/utils/postal_code';
+export * from '@digigov/form/validators/utils/uuid4';
+
+export function getYupField(field: FieldSpec, yupTypeMap: Record<string, any>) {
+  const yupField = yupTypeMap[field?.type || 'string'] || yupTypeMap['string'];
+  return yupField(field);
+}
+export function computeShape(
+  fields: FieldSpec[],
+  yupTypeMap: Record<string, ValidatorSchema>,
+  validatorRegistry: Record<string, ValidatorSchema[]> | undefined
+) {
+  const fieldSchemas = {};
+  const objectFields: Record<string, FieldSpec[]> = {};
+  fields.forEach((field) => {
+    let yupField = getYupField(field, yupTypeMap);
+    if (field.condition) {
+      for (const key in field.condition) {
+        let then: any, otherwise: any;
+        if (field.condition[key].then) {
+          if (field.condition[key].then?.required === false) {
+            then = yupField;
+          } else if (field.condition[key].then?.required === true) {
+            then = yupField.required('form.error.required');
+          }
+        }
+        if (field.condition[key].else) {
+          if (field.condition[key].else?.required === false) {
+            otherwise = yupField;
+          } else if (field.condition[key].else?.required === true) {
+            otherwise = yupField.required('form.error.required');
+          }
+        }
+        if (then || otherwise) {
+          yupField = yupField.when(key, {
+            is: field.condition[key].is,
+            then,
+            otherwise,
+          });
+        }
+      }
+    } else if (field.required) {
+      yupField = yupField.required('form.error.required');
+    }
+    if (validatorRegistry && field.type && validatorRegistry[field.type]) {
+      validatorRegistry[field.type].forEach((validator: any) => {
+        yupField = yupField.test(validator);
+      });
+    }
+    if (field.validators) {
+      field.validators.forEach((validator) => {
+        yupField = yupField.test(validator);
+      });
+    }
+    fieldSchemas[field.key] = yupField;
+  });
+  for (const objectKey in objectFields) {
+    fieldSchemas[objectKey] = getYupObjectShape(
+      objectFields[objectKey],
+      yupTypeMap,
+      validatorRegistry
+    );
+  }
+  return fieldSchemas;
+}
+
+export function getYupObjectShape(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fields: FieldSpec[] | any,
+  yupTypeMap: Record<string, any>,
+  validatorRegistry?: Record<string, ValidatorSchema[]>
+) {
+  if (!fields.current) {
+    const fieldSchemas = computeShape(fields, yupTypeMap, validatorRegistry);
+    return yup.object().shape(fieldSchemas);
+  }
+
+  return yup.lazy(function () {
+    const fieldSchemas = computeShape(
+      Object.values(fields.current),
+      yupTypeMap,
+      validatorRegistry
+    );
+    return yup.object().shape(fieldSchemas);
+  });
+}

package/src/validators/utils/int.ts

@@ -0,0 +1,22 @@
+import { ValidatorSchema } from '@digigov/form/validators/types';
+
+export function validateIntNumber(number: number): boolean {
+  if (number === undefined) {
+    return false;
+  } else {
+    return Number.isInteger(number) && Number(number) > 0;
+  }
+}
+
+export const INT_VALIDATOR = (): ValidatorSchema => {
+  return {
+    name: 'int-validator',
+    message: 'form.error.positive_integer_number',
+    test: (value: number): boolean => {
+      if (value === null) {
+        return true;
+      }
+      return validateIntNumber(value);
+    },
+  };
+};