@digigov/form 2.0.0-462194bf → 2.0.0-49de50c4

package/src/validators/utils/file.ts

@@ -3,23 +3,39 @@ import { 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: 'form.error.file_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/index.ts

@@ -3,6 +3,7 @@ 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/amka';
 export * from '@digigov/form/validators/utils/file';
 export * from '@digigov/form/validators/utils/iban';
 export * from '@digigov/form/validators/utils/otp';
@@ -11,6 +12,8 @@ export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';
 export * from '@digigov/form/validators/utils/text_limit';
+export * from '@digigov/form/validators/utils/date';
+export * from '@digigov/form/validators/utils/datetime';
 
 export function getYupField(field: FieldSpec, yupTypeMap: Record<string, any>) {
   const yupField = yupTypeMap[field?.type || 'string'] || yupTypeMap['string'];
@@ -96,7 +99,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

@@ -13,7 +13,7 @@ export const INT_VALIDATOR = (): ValidatorSchema => {
     name: 'int-validator',
     message: 'form.error.positive_integer_number',
     test: (value: number): boolean => {
-      if (value === null) {
+      if (value === undefined) {
         return true;
       }
       return validateIntNumber(value);

package/src/validators/utils/number.ts

@@ -9,7 +9,7 @@ export const NUMBER_VALIDATOR = (): ValidatorSchema => {
     name: 'number-validator',
     message: 'form.error.number',
     test: (value: number): boolean => {
-      if (value === null) {
+      if (value === undefined) {
         return true;
       }
       return validateNumber(value);

package/src/validators/utils/phone.ts

@@ -4,20 +4,20 @@ import { ValidatorSchema } from '@digigov/form/validators/types';
 export type PhoneNumberType = 'landline' | 'mobile' | null;
 // add more countries from here libphonenumber-js/metadata.full.json
 const countryPhoneData = {
-  "GR": [
-    "30",
-    "00",
-    "5005000\\d{3}|8\\d{9,11}|(?:[269]\\d|70)\\d{8}",
+  GR: [
+    '30',
+    '00',
+    '5005000\\d{3}|8\\d{9,11}|(?:[269]\\d|70)\\d{8}',
     [10, 11, 12],
     [
-      ["(\\d{2})(\\d{4})(\\d{4})", "$1 $2 $3", ["21|7"]],
+      ['(\\d{2})(\\d{4})(\\d{4})', '$1 $2 $3', ['21|7']],
       [
-        "(\\d{4})(\\d{6})",
-        "$1 $2",
-        ["2(?:2|3[2-57-9]|4[2-469]|5[2-59]|6[2-9]|7[2-69]|8[2-49])|5"]
+        '(\\d{4})(\\d{6})',
+        '$1 $2',
+        ['2(?:2|3[2-57-9]|4[2-469]|5[2-59]|6[2-9]|7[2-69]|8[2-49])|5'],
       ],
-      ["(\\d{3})(\\d{3})(\\d{4})", "$1 $2 $3", ["[2689]"]],
-      ["(\\d{3})(\\d{3,4})(\\d{5})", "$1 $2 $3", ["8"]]
+      ['(\\d{3})(\\d{3})(\\d{4})', '$1 $2 $3', ['[2689]']],
+      ['(\\d{3})(\\d{3,4})(\\d{5})', '$1 $2 $3', ['8']],
     ],
     0,
     0,
@@ -27,93 +27,77 @@ const countryPhoneData = {
     0,
     [
       [
-        "2(?:1\\d\\d|2(?:2[1-46-9]|[36][1-8]|4[1-7]|5[1-4]|7[1-5]|[89][1-9])|3(?:1\\d|2[1-57]|[35][1-3]|4[13]|7[1-7]|8[124-6]|9[1-79])|4(?:1\\d|2[1-8]|3[1-4]|4[13-5]|6[1-578]|9[1-5])|5(?:1\\d|[29][1-4]|3[1-5]|4[124]|5[1-6])|6(?:1\\d|[269][1-6]|3[1245]|4[1-7]|5[13-9]|7[14]|8[1-5])|7(?:1\\d|2[1-5]|3[1-6]|4[1-7]|5[1-57]|6[135]|9[125-7])|8(?:1\\d|2[1-5]|[34][1-4]|9[1-57]))\\d{6}",
-        [10]
+        '2(?:1\\d\\d|2(?:2[1-46-9]|[36][1-8]|4[1-7]|5[1-4]|7[1-5]|[89][1-9])|3(?:1\\d|2[1-57]|[35][1-3]|4[13]|7[1-7]|8[124-6]|9[1-79])|4(?:1\\d|2[1-8]|3[1-4]|4[13-5]|6[1-578]|9[1-5])|5(?:1\\d|[29][1-4]|3[1-5]|4[124]|5[1-6])|6(?:1\\d|[269][1-6]|3[1245]|4[1-7]|5[13-9]|7[14]|8[1-5])|7(?:1\\d|2[1-5]|3[1-6]|4[1-7]|5[1-57]|6[135]|9[125-7])|8(?:1\\d|2[1-5]|[34][1-4]|9[1-57]))\\d{6}',
+        [10],
       ],
-      ["68[57-9]\\d{7}|(?:69|94)\\d{8}", [10]],
-      ["800\\d{7,9}"],
-      ["90[19]\\d{7}", [10]],
-      ["70\\d{8}", [10]],
+      ['68[57-9]\\d{7}|(?:69|94)\\d{8}', [10]],
+      ['800\\d{7,9}'],
+      ['90[19]\\d{7}', [10]],
+      ['70\\d{8}', [10]],
       0,
-      ["5005000\\d{3}", [10]],
+      ['5005000\\d{3}', [10]],
       0,
       0,
-      ["8(?:0[16]|12|[27]5|50)\\d{7}", [10]]
-    ]
-  ]
-}
+      ['8(?:0[16]|12|[27]5|50)\\d{7}', [10]],
+    ],
+  ],
+};
 
 function expandPhoneNumberStructure(compressed) {
   const countries = Object.keys(compressed);
-  const expanded: any = {}
+  const expanded: any = {};
   for (const country of countries) {
     expanded[country] = {
       fixedLine: {
         possibleLengths: {
-          _national:
-            compressed[country][3].map(
-              String
-            ),
+          _national: compressed[country][3].map(String),
         },
-        nationalNumberPattern:
-          compressed[country][11][0][0],
+        nationalNumberPattern: compressed[country][11][0][0],
       },
       mobile: {
-        nationalNumberPattern:
-          compressed[country][11][1][0],
+        nationalNumberPattern: compressed[country][11][1][0],
       },
       tollFree: {
-        nationalNumberPattern:
-          compressed[country][11][2][0],
+        nationalNumberPattern: compressed[country][11][2][0],
       },
       premiumRate: {
-        nationalNumberPattern:
-          compressed[country][11][3][0],
+        nationalNumberPattern: compressed[country][11][3][0],
       },
       sharedCost: {
-        nationalNumberPattern:
-          compressed[country][11][9][0],
+        nationalNumberPattern: compressed[country][11][9][0],
       },
       personalNumber: {
-        nationalNumberPattern:
-          compressed[country][11][4][0],
+        nationalNumberPattern: compressed[country][11][4][0],
       },
       uan: {
-        nationalNumberPattern:
-          compressed[country][11][6][0],
+        nationalNumberPattern: compressed[country][11][6][0],
       },
       id: country,
-      countryCode:
-        compressed[country][0],
-      internationalPrefix:
-        compressed[country][1],
-
-    }
+      countryCode: compressed[country][0],
+      internationalPrefix: compressed[country][1],
+    };
   }
   return expanded;
 }
 const PHONENUMBER_SPEC = expandPhoneNumberStructure(countryPhoneData);
-export function discoverPhoneType(
-  phoneNumber: string,
-  config: any
-): string {
+export function discoverPhoneType(phoneNumber: string, config: any): string {
   const cleanNumber = phoneNumber
-    .replace(/\D/g, "")
-    .replace(/\s/g, "")
-    .replace(/^\+/, "")
-    .replace(new RegExp("^" + config.internationalPrefix, ""), "")
-    .replace(new RegExp("^" + config.countryCode, ""), "");
+    .replace(/\D/g, '')
+    .replace(/\s/g, '')
+    .replace(/^\+/, '')
+    .replace(new RegExp('^' + config.internationalPrefix, ''), '')
+    .replace(new RegExp('^' + config.countryCode, ''), '');
   const categories = {
-    "landline": config.fixedLine,
+    landline: config.fixedLine,
     mobile: config.mobile,
-    "toll-free": config.tollFree,
-    "premium-rate": config.premiumRate,
+    'toll-free': config.tollFree,
+    'premium-rate': config.premiumRate,
   };
 
   for (const [categoryName, categoryDetails] of Object.entries(categories)) {
     const pattern = new RegExp(
-      "^(" + categoryDetails.nationalNumberPattern.replace(/\s/g, "") + ")$",
-      ""
+      '^(' + categoryDetails.nationalNumberPattern.replace(/\s/g, '') + ')$',
+      ''
     );
     if (cleanNumber.match(pattern)) {
       return categoryName; // Returns the category name if the number matches the pattern
@@ -121,47 +105,54 @@ export function discoverPhoneType(
   }
 
   // If no category matches, return 'Unknown'
-  return "unknown";
+  return 'unknown';
 }
 function getNumberType(phoneNumber: string, country: string) {
   const spec = PHONENUMBER_SPEC[country.toUpperCase()];
-  if(!spec) {
+  if (!spec) {
     throw new Error(`Country ${country} is not supported`);
   }
   const type = discoverPhoneType(phoneNumber, spec);
   return type;
 }
 
-function isPhoneNumberValid(phoneNumber: string, countries: string[], types=['mobile', 'landline']) {
+function isPhoneNumberValid(
+  phoneNumber: string,
+  countries: string[],
+  types = ['mobile', 'landline']
+) {
   return countries.some((country) => {
     const numberType = getNumberType(phoneNumber, country);
     if (numberType && types.includes(numberType)) {
-      return true
+      return true;
     }
-    return false
-  })
+    return false;
+  });
 }
 function isNumberOfType(phoneNumber: string, country: string, type: string) {
   const numberType = getNumberType(phoneNumber, country);
   if (numberType === type) {
-    return true
+    return true;
   }
-  return false
+  return false;
 }
 export function validatePhoneNumber(
   phoneNumber: string,
-  countries: Array<string> = ['gr'],
+  countries: string[] = ['gr'],
   typeOfPhoneNumber?: PhoneNumberType
 ): boolean {
   if (!countries || countries.length === 0) {
     return true;
   }
-  return isPhoneNumberValid(phoneNumber, countries, typeOfPhoneNumber? [typeOfPhoneNumber] : undefined);
+  return isPhoneNumberValid(
+    phoneNumber,
+    countries,
+    typeOfPhoneNumber ? [typeOfPhoneNumber] : undefined
+  );
 }
 
-
 function validateMobile(value): boolean {
-  return isNumberOfType(value, 'gr','mobile');
+  return isNumberOfType(value, 'gr', 'mobile');
 }
 
 export const MOBILE_PHONE_VALIDATOR = {

package/src/validators/utils/postal_code.ts

@@ -4,7 +4,7 @@ import { ValidatorSchema } from '@digigov/form/validators/types';
 const CODE_REGEX = /^[12345678][0-9]{4}$/;
 export function validatePostalCode(
   number: string,
-  countries: Array<string>
+  countries: string[]
 ): boolean {
   if (!countries) {
     return false;

package/src/validators/utils/uuid4.ts

@@ -1,4 +1,5 @@
-const UUID4_PATTERN = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;
+const UUID4_PATTERN =
+  /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;
 
 export function validateUUID4(uuid4: string): boolean {
   if (uuid4.length !== 36) {

package/src/validators/validators.spec.ts

@@ -69,54 +69,20 @@ it('validates phone number type landline with greek country code', () => {
   expect(validatePhoneNumber('2102934896', ['GR'], 'landline')).toBe(true);
 });
 
-it('validates phone number type landline with ch country code', () => {
-  expect(validatePhoneNumber('2102934896', ['CH'], 'landline')).toBe(false);
-});
-
-it('validates phone number type landline with ch  and  gr countries code', () => {
-  expect(validatePhoneNumber('2102934896', ['GR', 'CH'], 'landline')).toBe(
-    true
-  );
-});
-
-it('validatesphone number type landline with ch  and  gr countries code', () => {
-  expect(validatePhoneNumber('41446681800', ['GR', 'CH'], 'landline')).toBe(
-    true
+it('throws if given country is not supported', () => {
+  expect(() => validatePhoneNumber('2102934896', ['CH'], 'landline')).toThrow(
+    'Country CH is not supported'
   );
 });
 
-it('validates phone number type landline with ch  and  gr countries code but phone number is mobile', () => {
-  expect(validatePhoneNumber('2102934896', ['GR', 'CH'], 'mobile')).toBe(false);
-});
-
-it('validates phone number type mobile with ch  and  gr countries code', () => {
-  expect(validatePhoneNumber('6934100982', ['GR', 'CH'], 'mobile')).toBe(true);
-});
-
-it('validates  phone number type mobile with gr country code', () => {
+it('validates phone number type mobile with gr country code', () => {
   expect(validatePhoneNumber('6934100982', ['GR'], 'mobile')).toBe(true);
 });
 
-it('validates  phone number type mobile with ch country code', () => {
-  expect(validatePhoneNumber('6934100982', ['CH'], 'mobile')).toBe(false);
-});
-
-it('validates  phone number with no type and ch country code', () => {
-  expect(validatePhoneNumber('6934100982', ['CH'], null)).toBe(false);
-});
-
-it('validates  phone number with no type and gr country code', () => {
+it('validates phone number with no type and gr country code', () => {
   expect(validatePhoneNumber('6934100982', ['gr'], null)).toBe(true);
 });
 
-it('validates  phone number with no type and ch country code', () => {
-  expect(validatePhoneNumber('41446681800', ['CH'], null)).toBe(true);
-});
-
-it('validates  phone number with no type and gr country code', () => {
+it('validates invalid phone number with no type and gr country code', () => {
   expect(validatePhoneNumber('41446681800', ['gr'], null)).toBe(false);
 });
-
-it('validates  phone number with no type and gr and ch countries code', () => {
-  expect(validatePhoneNumber('41446681800', ['gr', 'ch'], null)).toBe(true);
-});

package/types/index.js

@@ -1 +1,2 @@
-export {};
+export * from "@digigov/form/Field/types";
+//# sourceMappingURL=types.js.map

package/types.d.ts

@@ -1,40 +1,9 @@
-/// <reference types="react" />
-import { UseFormReturn, UseFormProps } from 'react-hook-form';
-import { FieldComponentRegistry } from '@digigov/form/Field/types';
+import { UseFormReturn, UseFormProps, ErrorOption } from 'react-hook-form';
+import { FieldComponentRegistry, FieldLabelProps, FieldSpec, FormData } from '@digigov/form/Field/types';
 import { ValidatorSchema } from '@digigov/form/validators/types';
-import { GridProps } from '@digigov/ui/layouts/Grid';
-export type FieldError = {
+export * from '@digigov/form/Field/types';
+export interface FieldError {
     message: string;
-};
-export type FieldLabelProps = {
-    primary?: string;
-    secondary?: string;
-};
-export interface FieldCondition {
-    is: string | string[] | number | number[] | boolean | boolean[];
-    then?: Partial<FieldSpec>;
-    else?: Partial<FieldSpec>;
-}
-export interface FieldSpec {
-    key: string;
-    type?: 'int' | 'string' | 'text' | 'boolean' | 'email' | 'uuid4' | 'choice:multiple' | 'choice:single' | 'mobile_phone' | 'date' | 'otp' | 'afm' | 'iban' | 'file' | 'image' | 'postal_code' | 'phone_number' | 'array' | 'object';
-    component?: any;
-    maxLength?: number;
-    condition?: Record<string, FieldCondition>;
-    controlled?: boolean;
-    label?: FieldLabelProps;
-    extra?: {
-        [key: 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';
-    maxWidth?: string;
-    maxHeight?: string;
-    width?: string;
 }
 export interface FieldsetSpec {
     key: string;
@@ -42,7 +11,6 @@ export interface FieldsetSpec {
     label?: FieldLabelProps;
     body?: React.ReactNode;
 }
-export type FormData = UseFormProps['defaultValues'];
 export interface FormContextProps {
     fieldsetsMap?: Record<string, FieldsetSpec>;
     fieldsMap: Record<string, FieldSpec>;
@@ -57,9 +25,11 @@ export interface FormContextProps {
     unregister: UseFormReturn['unregister'];
     formState: UseFormReturn['formState'];
     reset: UseFormReturn['reset'];
+    resetField: UseFormReturn['resetField'];
     registerField: (field: FieldSpec) => void;
     errors: UseFormReturn['formState']['errors'];
     componentRegistry?: FieldComponentRegistry;
+    submit: () => Promise<void>;
 }
 export interface FormBuilderProps {
     fields?: FieldSpec[];
@@ -75,6 +45,8 @@ export interface FormBuilderProps {
     validatorRegistry?: Record<string, ValidatorSchema[]>;
     componentRegistry?: FieldComponentRegistry;
     grid?: boolean;
+    controlledFieldsOnly?: boolean;
+    errors?: ErrorOption;
 }
 export interface FormBaseProps extends Omit<FormBuilderProps, 'fields' | 'fieldsets' | 'auto'> {
     fieldsetsMap?: Record<string, FieldsetSpec>;

package/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/types.tsx"],
+  "sourcesContent": ["import { UseFormReturn, UseFormProps, ErrorOption } from 'react-hook-form';\nimport {\n  FieldComponentRegistry,\n  FieldLabelProps,\n  FieldSpec,\n  FormData,\n} from '@digigov/form/Field/types';\nimport { ValidatorSchema } from '@digigov/form/validators/types';\nexport * from '@digigov/form/Field/types';\nexport interface FieldError {\n  message: string;\n}\n\nexport interface FieldsetSpec {\n  key: string;\n  fields: string[];\n  label?: FieldLabelProps;\n  body?: React.ReactNode;\n}\n\nexport interface FormContextProps {\n  fieldsetsMap?: Record<string, FieldsetSpec>;\n  fieldsMap: Record<string, FieldSpec>;\n  control: UseFormReturn['control'];\n  register: UseFormReturn['register'];\n  trigger: UseFormReturn['trigger'];\n  clearErrors: UseFormReturn['clearErrors'];\n  watch: UseFormReturn['watch'];\n  getFieldState: UseFormReturn['getFieldState'];\n  setValue: UseFormReturn['setValue'];\n  getValues: UseFormReturn['getValues'];\n  unregister: UseFormReturn['unregister'];\n  formState: UseFormReturn['formState'];\n  reset: UseFormReturn['reset'];\n  resetField: UseFormReturn['resetField'];\n  registerField: (field: FieldSpec) => void;\n  errors: UseFormReturn['formState']['errors'];\n  componentRegistry?: FieldComponentRegistry;\n  submit: () => Promise<void>;\n}\n\nexport interface FormBuilderProps {\n  fields?: FieldSpec[];\n  fieldsets?: FieldsetSpec[];\n  initial?: FormData;\n  onSubmit?: (data: FormData) => void | null | FieldError[];\n  mode?: UseFormProps['mode'];\n  reValidateMode?: UseFormProps['reValidateMode'];\n  criteriaMode?: UseFormProps['criteriaMode'];\n  children?: React.ReactNode;\n  shouldFocusError?: boolean;\n  auto?: boolean;\n  validatorRegistry?: Record<string, ValidatorSchema[]>;\n  componentRegistry?: FieldComponentRegistry;\n  grid?: boolean;\n  controlledFieldsOnly?: boolean;\n  errors?: ErrorOption;\n}\n\nexport interface FormBaseProps\n  extends Omit<FormBuilderProps, 'fields' | 'fieldsets' | 'auto'> {\n  fieldsetsMap?: Record<string, FieldsetSpec>;\n  fieldsMap: Record<string, FieldSpec>;\n  registerField: (field: FieldSpec) => void;\n  resolver: any;\n}\n"],
+  "mappings": "AAQA,cAAc;",
+  "names": []
+}