@digigov/form 2.0.0-6e3977bc → 2.0.0-76ec20a0

package/src/FormBuilder/index.tsx

@@ -1,15 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useContext, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import Field from '@digigov/form/Field';
+import { Field } from '@digigov/form/Field';
+import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
 import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
-import Fieldset from '@digigov/form/Fieldset';
+import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
 import { FormContext } from '@digigov/form/FormContext';
 import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
-import { Form } from '@digigov/react-core/Form';
 import { Button } from '@digigov/ui/form/Button';
+import { Form } from '@digigov/ui/form/Form';
+import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 
 const FormBase = React.forwardRef(function FormBase(
   {
@@ -41,7 +42,10 @@ const FormBase = React.forwardRef(function FormBase(
 
   const handleSubmit = useCallback(
     (data: FormData): void => {
-      onSubmit && onSubmit(data);
+      if (onSubmit) {
+        form.reset(data);
+        onSubmit(data);
+      }
     },
     [onSubmit]
   );
@@ -77,6 +81,43 @@ const FormBase = React.forwardRef(function FormBase(
   );
 });
 
+const DEFAULT_LAYOUT = {
+  xs: 12,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 12,
+};
+
+const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const groupFieldsByLayout = (fields) => {
+  return BREAKPOINTS.reduce((sizes, size) => {
+    sizes[size] = fields
+      .reduce((acc, item) => {
+        const layoutValue = item.layout?.[size] || 12;
+        if (layoutValue === 0) {
+          return [...acc, item];
+        }
+        const lastElement = acc[acc.length - 1];
+        const currentSum = Array.isArray(lastElement)
+          ? lastElement.reduce((sum, i) => sum + (i.layout?.[size] || 0), 0)
+          : 0;
+        if (!Array.isArray(lastElement) || currentSum + layoutValue > 12) {
+          return layoutValue === 12 ? [...acc, item] : [...acc, [item]];
+        }
+
+        return [...acc.slice(0, -1), [...lastElement, item]];
+      }, [])
+      .map((item) => {
+        if (Array.isArray(item) && item.length === 1) {
+          return item[0];
+        }
+        return item;
+      });
+    return sizes;
+  }, {});
+};
 const useFormContext = () => {
   return useContext(FormContext);
 };
@@ -103,6 +144,34 @@ const FormBuilder = React.forwardRef(function FormBuilder(
   }: FormBuilderProps,
   ref: React.Ref<HTMLFormElement>
 ): React.ReactElement {
+  const { screenSize } = useScreenSize();
+  fields = fields.map((field) => {
+    const layout = field.layout;
+    if (!layout) {
+      return {
+        ...field,
+        layout: DEFAULT_LAYOUT,
+      };
+    }
+    return {
+      ...field,
+      layout: BREAKPOINTS.reduce(
+        (expandedLayout, breakpoint, breakpointIndex) => {
+          if (field?.layout?.[breakpoint]) {
+            expandedLayout[breakpoint] = field?.layout[breakpoint];
+          } else if (expandedLayout[BREAKPOINTS[breakpointIndex - 1]]) {
+            expandedLayout[breakpoint] =
+              expandedLayout[BREAKPOINTS[breakpointIndex - 1]];
+          } else {
+            expandedLayout[breakpoint] = 12;
+          }
+          return expandedLayout;
+        },
+        {}
+      ),
+    };
+  });
+
   const fieldsState = useRef(fields);
   const setFieldsState = useCallback((newFields) => {
     fieldsState.current = newFields;
@@ -138,12 +207,28 @@ const FormBuilder = React.forwardRef(function FormBuilder(
     if (auto) {
       if (fieldsets) {
         fieldChildren = fieldsets.map((fieldset) => (
-          <Fieldset key={fieldset.key} />
+          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
         ));
       } else if (fields) {
-        fieldChildren = fields.map((field) => (
-          <Field key={field.key} name={field.key} />
-        ));
+        const fieldsByLayouts = groupFieldsByLayout(fields);
+        const fieldsByLayoutSize = fieldsByLayouts[screenSize];
+        fieldChildren = fieldsByLayoutSize.map((item, index) => {
+          if (Array.isArray(item)) {
+            return (
+              <ErrorGroup
+                key={index}
+                screenSize={screenSize}
+                fieldOrder={item.map((field) => field.key)}
+              >
+                {item.map((f) => {
+                  return <Field key={f.key} name={f.key} />;
+                })}
+              </ErrorGroup>
+            );
+          } else {
+            return <Field key={item.key} name={item.key} />;
+          }
+        });
       }
     }
   }

package/src/FormBuilder/interaction.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { AutoErrorGrouping } from '@digigov/form/FormBuilder/__stories__/AutoErrorGrouping';
+import { ErrorGrouping } from '@digigov/form/FormBuilder/__stories__/ErrorGrouping';
+
+test('renders the ErrorGrouping and click submit', async ({ mount, page }) => {
+  await mount(<ErrorGrouping />);
+  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);
+
+  await page.click('text="Συνέχεια"');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the AutoErrorGrouping and click submit', async ({
+  mount,
+  page,
+}) => {
+  await mount(<AutoErrorGrouping />);
+  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);
+
+  await page.click('text="Συνέχεια"');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

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}`,
@@ -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',
@@ -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,5 +1,4 @@
-import React from 'react';
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({

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'> {
@@ -51,7 +49,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   getValues,
   onStash,
   error,
-  Field
+  Field,
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -107,8 +105,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}