@digigov/form 2.0.0-d57821ba → 2.0.0-e7d30530

package/src/FormBuilder/scenarios.test.tsx

@@ -469,7 +469,11 @@ const expectErrorMessages = async (formBuilder, scenarioExpect, expect) => {
           );
         }
       }
-      await expect(labelLocator).toHaveText(expectText);
+      if (expectObj.textAssertion === 'toContainText') {
+        await expect(labelLocator).toContainText(expectText);
+      } else {
+        await expect(labelLocator).toHaveText(expectText);
+      }
     }
   }
 };
@@ -589,7 +593,7 @@ const generateScenarios = (
         };
         scenarioFill.push(finalScenarioFill);
         for (const multiplicityField of fillTemplate?.value?.of?.extra
-          ?.fields) {
+          ?.fields ?? []) {
           scenarioExpect.push({
             type: 'success',
             fieldKey: `${fillTemplate.fieldKey}\\.${i}\\.${multiplicityField.fieldKey}`,
@@ -648,9 +652,9 @@ const el = {
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -1118,15 +1122,15 @@ const inputsScenarios = [
         type: 'error',
         fieldKey: 'image',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 300,
         },
-        text: el.form.error.file_size,
+        text: el.form.error.image_size,
       },
       {
         type: 'error',
         fieldKey: 'file',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 300,
         },
         text: el.form.error.file_size,
       },
@@ -1289,6 +1293,54 @@ const INPUTS_INPUT_FIELDS = [
   },
 ];
 
+const ERROR_GROUPING_FIELDS = [
+  {
+    key: 'address',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Οδός',
+    },
+  },
+  {
+    key: 'address_number',
+    type: 'int',
+    required: true,
+    layout: { xl: 2, lg: 2, md: 2, xs: 6 },
+    label: {
+      primary: 'Αριθμός',
+    },
+  },
+  {
+    key: 'postal_code',
+    type: 'postal_code',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 4, xs: 6 },
+    label: {
+      primary: 'Ταχ. Κώδικας',
+    },
+  },
+  {
+    key: 'town',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Πόλη',
+    },
+  },
+  {
+    key: 'country',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Χώρα',
+    },
+  },
+];
+
 const inputsInputScenarios = [
   {
     title: 'success fill for inputs Input',
@@ -1410,7 +1462,8 @@ const inputsInputScenarios = [
   {
     title: 'empty fill for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    delay: 5_000,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [],
     expect: [
       {
@@ -1468,12 +1521,42 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.required,
       },
+      {
+        type: 'error',
+        fieldKey: 'address',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'town',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'country',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
     ],
   },
   {
     title: 'incorrect types for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [
       {
         fieldKey: 'age',
@@ -1481,7 +1564,7 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: '23232',
+        value: 'example@mail.',
       },
       {
         fieldKey: 'location',
@@ -1519,6 +1602,14 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         value: 'aaaaaa',
       },
+      {
+        fieldKey: 'address_number',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'postal_code',
+        value: 'aaaaa',
+      },
     ],
     expect: [
       {
@@ -1576,6 +1667,18 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.uuid4,
       },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.number,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.postalCode,
+        textAssertion: 'toContainText',
+      },
     ],
   },
 ];
@@ -1726,6 +1829,7 @@ const fieldArrayScenarioTitles = [
 const fieldArrayFieldsTemplate = {
   key: 'fieldArray',
   type: 'array',
+  editable: true,
   label: {
     primary: 'Εξαρτώμενα μέλη',
     secondary:
@@ -1744,6 +1848,7 @@ const fieldArrayFieldsTemplate = {
         no: 'Όχι',
       },
     },
+    border: 'border',
     of: {
       type: 'object',
       label: {
@@ -1842,16 +1947,25 @@ const scenarios = [
   ...inputsInputScenarios,
 ];
 
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 for (const scenario of scenarios) {
   test.describe(scenario.describe, () => {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
+        <FormBuilder
+          auto={true}
+          grid={true}
+          fields={scenario.fields}
+          onSubmit={() => { }}
+        />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);
-
+      if (scenario.delay) {
+        await delay(scenario.delay);
+      }
       const screenshot = await page.screenshot({
         fullPage: true,
         animations: 'disabled',

package/src/FormContext.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({
   fieldsMap: {},
   fieldsetsMap: {},
 } as FormContextProps);
+
+export const useFormContext = () => {
+  return useContext(FormContext);
+};

package/src/MultiplicityField/MultiplicityField.stories.js

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

package/src/MultiplicityField/__stories__/Default.tsx

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

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -61,7 +61,7 @@ const fields = [
   },
 ];
 
-export const PreviewDisplay = () => (
+export const PreviewDisplay = (_: any) => (
   <Layout>
     <Header>
       <HeaderContent>

package/src/MultiplicityField/__stories__/WithExactLength.tsx

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

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

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

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

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

package/src/MultiplicityField/__stories__/WithMinLength.tsx

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

package/src/MultiplicityField/add-objects.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
 import {
   ErrorOption,
@@ -14,16 +13,15 @@ import {
 } from '@digigov/form/Field/utils';
 import { calculateField } from '@digigov/form/Field/utils/calculateField';
 import { useField } from '@digigov/form/Field/utils/useField';
-
-import FieldObject from '@digigov/form/FieldObject';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
 import type {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
 import { FieldSpec } from '@digigov/form/types';
-import Fieldset from '@digigov/react-core/Fieldset';
-import RadioConditional from '@digigov/react-core/RadioConditional';
-import Button from '@digigov/ui/form/Button';
+import { Button } from '@digigov/ui/form/Button';
+import { RadioConditional } from '@digigov/ui/form/RadioContainer';
 
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
@@ -49,8 +47,10 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
+  resetField,
   onStash,
   error,
+  Field,
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -106,8 +106,10 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
                           (f) => `${currentName}.${f.key}`
                         );
                         const result = await trigger(nestedFields);
-                        result && setValue('needs-more', '');
-                        result && onStash(getValues(currentName));
+                        if (result) {
+                          setValue('needs-more', '');
+                          onStash(getValues(currentName));
+                        }
                       }}
                     >
                       {extra?.label.object.add}
@@ -186,6 +188,8 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        resetField={resetField}
+        Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||
           extra?.length - stashedObjects.length === 0