@digigov/form 2.0.0-298cfc51 → 2.0.0-32ae417f

package/src/FormBuilder/doc.mdx

@@ -4,13 +4,14 @@ title: FormBuilder
 sidebar_label: FormBuilder
 ---
 
+# FormBuilder
+
 `FormBuilder` is a React component that provides an easy way to efficiently create reusable form page. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, dropdowns and so on for submission to a server. Actually when we use `stepForm` for building step-forms all we do is to render `FormBuilder` component.
 
 `stepForm` component:
 
 <code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
 
-
 ### Importing and using FormBuilder Component
 
 To import `FormBuilder` component simply import it from `'@digigov/form`.
@@ -28,7 +29,7 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import {FormBuilder} from '@digigov/form';
+import { FormBuilder } from '@digigov/form';
 
 export default function MyComponent({ props }) {
   return (
@@ -73,7 +74,7 @@ Below are demostrated some examples for each type of field
 
 ### FormBuilder implementation
 
-The examples above are implemented by using the code below
+The example below are implemented by using the code above.
 
 ```jsx
 import React, { useState } from 'react';
@@ -83,7 +84,11 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Header, { HeaderTitle, HeaderContent, HeaderSection } from '@digigov/ui/app/Header';
+import Header, {
+  HeaderTitle,
+  HeaderContent,
+  HeaderSection,
+} from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import Button from '@digigov/ui/form/Button';

package/src/FormBuilder/index.test.tsx

@@ -1,19 +1,31 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AutoErrorGrouping } from '@digigov/form/FormBuilder/__stories__/AutoErrorGrouping';
 import { Default } from '@digigov/form/FormBuilder/__stories__/Default';
+import { ErrorGrouping } from '@digigov/form/FormBuilder/__stories__/ErrorGrouping';
 
 test('renders the All FormBuilder variants', async ({ mount, page }) => {
   await mount(
     
   <div>
+    <TestVariant title="AutoErrorGrouping">
+      <AutoErrorGrouping />
+    </TestVariant>
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="ErrorGrouping">
+      <ErrorGrouping />
+    </TestVariant>
   </div>
   )
   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);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/FormBuilder/index.tsx

@@ -1,15 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 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 { FormContext } from '@digigov/form/FormContext';
+import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
+import { FormContext, useFormContext } 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 { 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(
   {
@@ -22,10 +23,11 @@ const FormBase = React.forwardRef(function FormBase(
     mode,
     initial,
     reValidateMode,
-    shouldFocusError,
+    shouldFocusError = true,
     criteriaMode,
     componentRegistry,
     grid,
+    errors,
     ...props
   }: FormBaseProps,
   ref: React.Ref<HTMLFormElement>
@@ -41,10 +43,19 @@ const FormBase = React.forwardRef(function FormBase(
 
   const handleSubmit = useCallback(
     (data: FormData): void => {
-      onSubmit && onSubmit(data);
+      if (onSubmit) {
+        onSubmit(data);
+      }
     },
     [onSubmit]
   );
+  useEffect(() => {
+    if (errors) {
+      for (const fieldName in errors) {
+        form.setError(fieldName, errors[fieldName]);
+      }
+    }
+  }, [errors]);
   const submit = form.handleSubmit(handleSubmit);
   const ctx = {
     fieldsMap,
@@ -68,6 +79,7 @@ const FormBase = React.forwardRef(function FormBase(
     formRef: ref,
     submit,
   };
+
   return (
     <FormContext.Provider value={ctx}>
       <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
@@ -77,8 +89,42 @@ const FormBase = React.forwardRef(function FormBase(
   );
 });
 
-const useFormContext = () => {
-  return useContext(FormContext);
+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 useFormValues = () => {
   const ctx = useFormContext();
@@ -103,6 +149,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 +212,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();
+});