@digigov/form 2.0.0-298cfc51 → 2.0.0-2a26e869

package/src/Field/FieldBase.tsx

@@ -1,36 +1,46 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
+import { ErrorGroupContext } from '@digigov/form/Field/ErrorGroup';
 import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
 import { FieldBaseProps } from '@digigov/form/Field/types';
 
-export const FieldBase: React.FC<FieldBaseProps> = (props) => {
-  const {
-    required,
-    name,
-    component: Component,
-    wrapper,
-    control,
-    type,
-    controlled = false,
-    enabled = true,
-    editable,
-    defaultValue,
-    label,
-    extra = {},
-    layout,
-    error,
-    register,
-    ...componentProps
-  } = props;
+export const FieldBase: React.FC<FieldBaseProps> = ({
+  required,
+  name,
+  component: Component,
+  wrapper,
+  control,
+  type,
+  controlled = false,
+  enabled = true,
+  editable,
+  defaultValue,
+  label,
+  extra = {},
+  layout,
+  error,
+  register,
+  ...componentProps
+}) => {
+  const errorGroupContext = useContext(ErrorGroupContext);
+
+  useEffect(() => {
+    if (errorGroupContext) {
+      errorGroupContext.setError(name, label, error);
+    }
+  }, [error, name, errorGroupContext?.setError]);
+
   if (!enabled) {
     return null;
   }
+
   if (controlled) {
     return (
       <FieldBaseContainer
         label={label}
         layout={layout}
-        error={error}
+        error={errorGroupContext ? undefined : error}
+        hasError={!!error}
         wrapper={wrapper}
         name={name}
       >
@@ -64,7 +74,8 @@ export const FieldBase: React.FC<FieldBaseProps> = (props) => {
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={error}
+      error={errorGroupContext ? undefined : error}
+      hasError={!!error}
       wrapper={wrapper}
       name={name}
     >

package/src/Field/FieldBaseContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FieldContainerProps } from '@digigov/form/Field/types';
 import Label from '@digigov/form/inputs/Label';
-import {ErrorMessage} from '@digigov/react-core/ErrorMessage';
+import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
 import FieldContainer from '@digigov/react-core/FieldContainer';
 import CoreFieldset from '@digigov/react-core/Fieldset';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
@@ -15,6 +15,7 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
   label,
   children,
   error,
+  hasError,
   layout,
 }) => {
   const { t } = useTranslation();
@@ -24,7 +25,7 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
   const errorContext = error?.message.context || {};
   if (wrapper === 'fieldset') {
     return (
-      <FieldContainer error={!!error} {...layout}>
+      <FieldContainer error={hasError} {...layout}>
         <CoreFieldset>
           <FieldsetLegend size="sm">{label && label.primary}</FieldsetLegend>
           {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
@@ -39,7 +40,7 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
     );
   } else {
     return (
-      <FieldContainer error={!!error} {...layout}>
+      <FieldContainer error={hasError} {...layout}>
         <LabelContainer>
           {label && <Label label={label} />}
           {error && (

package/src/Field/FieldConditional.tsx

@@ -15,7 +15,7 @@ const ChildFieldMemo = React.memo(
     reset,
     register,
     error,
-    Field
+    Field,
   }: ChildFieldMemoProps) {
     const newField = evaluateFieldWithConditions(
       field,
@@ -55,7 +55,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
   register,
   reset,
   error,
-  Field
+  Field,
 }) => {
   const dependencyKeys = Object.keys(field.condition);
   const dependencyValues = useWatch({

package/src/Field/types.tsx

@@ -3,42 +3,41 @@ import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
 import { ValidatorSchema } from '@digigov/form/validators/types';
 import { GridProps } from '@digigov/ui/layouts/Grid';
 
-export type FieldLabelProps = {
+export interface FieldLabelProps {
   primary?: string;
   secondary?: string;
-};
+}
 
 export interface FieldSpec {
   key: string; // !TODO rename key to name;
   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';
+    | 'int'
+    | 'string'
+    | 'text'
+    | 'boolean'
+    | 'email'
+    | 'uuid4'
+    | 'choice:multiple'
+    | 'choice:single'
+    | 'mobile_phone'
+    | 'date'
+    | 'otp'
+    | 'afm'
+    | 'iban'
+    | 'file'
+    | 'image'
+    | 'postal_code'
+    | 'phone_number'
+    | 'array'
+    | 'object';
+  trim?: boolean;
   component?: any;
   autoComplete?: string;
   maxLength?: number;
   condition?: Record<string, FieldCondition>;
   controlled?: boolean;
   label?: FieldLabelProps;
-  extra?: {
-    [key: string]: any;
-  };
+  extra?: Record<string, any>;
   editable?: boolean;
   required?: boolean;
   enabled?: boolean;
@@ -81,18 +80,19 @@ export interface FieldConditionalProps {
   Field: React.FC<FieldProps>;
 }
 
-export type FieldComponentItem = {
+export interface FieldComponentItem {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
   controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
-};
+}
 
 export interface FieldContainerProps {
   name?: FieldSpec['key'];
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
+  hasError?: boolean;
   children?: React.ReactNode;
   wrapper?: FieldSpec['wrapper'];
 }

package/src/FieldArray/index.tsx

@@ -3,8 +3,7 @@ import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
 import { FieldObject } from '@digigov/form/FieldObject';
-import { FieldsetLabel } from '@digigov/form/Fieldset';
-import { Fieldset } from '@digigov/form/Fieldset';
+import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
 import { Card } from '@digigov/ui/content/Card';
 import { Button } from '@digigov/ui/form/Button';
 import { Hint } from '@digigov/ui/typography/Hint';
@@ -44,6 +43,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
     >

package/src/FormBuilder/FormBuilder.stories.js

@@ -5,3 +5,5 @@ export default {
   displayName: 'FormBuilder',
 };
 export { Default } from '@digigov/form/FormBuilder/__stories__/Default';
+export { ErrorGrouping } from '@digigov/form/FormBuilder/__stories__/ErrorGrouping';
+export { AutoErrorGrouping } from '@digigov/form/FormBuilder/__stories__/AutoErrorGrouping';

package/src/FormBuilder/__stories__/AutoErrorGrouping.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import FormBuilder, { FieldSpec } from '@digigov/form';
+
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'name',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Όνομα',
+    },
+  },
+  {
+    key: 'surname',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Επίθετο',
+    },
+  },
+  {
+    key: 'address',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 2, md: 6, xs: 6 },
+    label: {
+      primary: 'Διεύθυνση',
+    },
+  },
+  {
+    key: 'town',
+    type: 'string',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 6, xs: 6 },
+    label: {
+      primary: 'Πόλη',
+    },
+  },
+  {
+    key: 'country',
+    type: 'string',
+    required: true,
+    layout: { xs: 12 },
+    label: {
+      primary: 'Χώρα',
+    },
+  },
+];
+
+export const AutoErrorGrouping = () => (
+  <FormBuilder
+    grid={true}
+    auto={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    fields={FIELDS}
+  ></FormBuilder>
+);
+
+export default AutoErrorGrouping;

package/src/FormBuilder/__stories__/ErrorGrouping.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
+import { Button } from '@digigov/ui/form/Button';
+
+export const ErrorGrouping = () => (
+  <FormBuilder
+    grid={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <ErrorGroup>
+      <Field
+        key="name"
+        name="name"
+        type="string"
+        label={{ primary: 'Όνομα' }}
+        layout={{ xs: 4 }}
+        required
+      />
+      <Field
+        key="surname"
+        name="surname"
+        type="string"
+        label={{ primary: 'Επίθετο' }}
+        layout={{ xs: 4 }}
+        required
+      />
+      <Field
+        key="address"
+        name="address"
+        type="string"
+        label={{ primary: 'Διεύθυνση' }}
+        layout={{ xs: 4 }}
+        required
+      />
+    </ErrorGroup>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default ErrorGrouping;

package/src/FormBuilder/index.test.tsx

@@ -1,20 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
+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="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="AutoErrorGrouping">
+        <AutoErrorGrouping />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ErrorGrouping">
+        <ErrorGrouping />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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 { 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 { 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 { 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,32 @@
+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);
+  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);
+  await page.click('text="Συνέχεια"');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});