@digigov/form 2.0.0-d0adc9fb → 2.0.0-d4fe516b

package/src/Field/ErrorGroup.tsx

@@ -0,0 +1,84 @@
+import React, { createContext, useEffect, useState } from 'react';
+import { ErrorOption } from 'react-hook-form';
+import { FieldLabelProps } from '@digigov/form/Field/types';
+import { List, ListItem } from '@digigov/ui/content/List';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { useTranslation } from '@digigov/ui/i18n';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Base } from '@digigov/ui/utils/Base';
+import { Breakpoints } from '@digigov/ui/utils/hooks/useScreen';
+interface ErrorGroupContextType {
+  setError: (
+    name?: string,
+    label?: FieldLabelProps,
+    error?: ErrorOption
+  ) => void;
+}
+export const ErrorGroupContext = createContext<ErrorGroupContextType | null>(
+  null
+);
+
+export interface ErrorGroupProps {
+  children: React.ReactNode;
+  screenSize?: Breakpoints | undefined;
+  fieldOrder?: any[];
+}
+
+export const ErrorGroup: React.FC<ErrorGroupProps> = ({
+  children,
+  screenSize,
+  fieldOrder,
+}) => {
+  const [errors, setErrors] = useState<ErrorOption>({});
+  const { t } = useTranslation();
+  const setError = (name, label, error) => {
+    if (errors[name] !== error && errors[name]?.message !== error?.message) {
+      if (!error?.message) {
+        const updatedErrors = { ...errors };
+        delete updatedErrors[name];
+        setErrors(updatedErrors);
+      } else {
+        setErrors({
+          ...errors,
+          [name]: {
+            ...error,
+            label: label.primary,
+          },
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    setErrors({});
+  }, [screenSize]);
+  return (
+    <ErrorGroupContext.Provider value={{ setError }}>
+      {Object.keys(errors).length !== 0 && (
+        <ErrorSummary variant="error-group">
+          <Heading size="sm">
+            Τα παρακάτω πεδία της φόρμας ειναι λάθος.{' '}
+          </Heading>
+          <List listStyle="bullet">
+            {(fieldOrder || Object.keys(errors).reverse())
+              .filter((fieldName) => errors[fieldName])
+              .map((fieldName, index) => {
+                return (
+                  <ListItem key={index} id={`${fieldName}-error`}>
+                    <Base as="b">{t(errors[fieldName]?.label)}:</Base>{' '}
+                    <Link href={`#${fieldName}`}>
+                      {t(errors[fieldName]?.message)}
+                    </Link>
+                  </ListItem>
+                );
+              })}
+          </List>
+        </ErrorSummary>
+      )}
+      {children}
+    </ErrorGroupContext.Provider>
+  );
+};
+
+export default ErrorGroup;

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

@@ -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>}
@@ -40,7 +41,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/types.tsx

@@ -32,6 +32,7 @@ export interface FieldSpec {
     | 'phone_number'
     | 'array'
     | 'object';
+  trim?: boolean;
   component?: any;
   autoComplete?: string;
   maxLength?: number;
@@ -94,6 +95,7 @@ export interface FieldContainerProps {
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
+  hasError?: boolean;
   children?: React.ReactNode;
   wrapper?: FieldSpec['wrapper'];
 }

package/src/FieldArray/index.tsx

@@ -54,6 +54,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,14 +1,16 @@
 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(
   {
@@ -79,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);
 };
@@ -105,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;
@@ -140,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();
+});