@digigov/form 2.0.0-2177f152 → 2.0.0-2271444d

package/src/FormBuilder/index.tsx

@@ -1,14 +1,22 @@
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { UseFormProps } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { Field } from '@digigov/form/Field';
-import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
-import { Fieldset } from '@digigov/form/Fieldset';
-import { FormContext } from '@digigov/form/FormContext';
-import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
+import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
+import { FormContext, useFormContext } from '@digigov/form/FormContext';
+import useFieldFocusManager from '@digigov/form/hooks/useFieldFocusManager';
+import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/inputs/registry';
+import type {
+  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(
   {
@@ -18,13 +26,14 @@ const FormBase = React.forwardRef(function FormBase(
     fieldsMap,
     fieldsetsMap,
     resolver,
-    mode,
     initial,
+    mode,
     reValidateMode,
     shouldFocusError,
     criteriaMode,
     componentRegistry,
     grid,
+    errors,
     ...props
   }: FormBaseProps,
   ref: React.Ref<HTMLFormElement>
@@ -34,17 +43,38 @@ const FormBase = React.forwardRef(function FormBase(
     mode,
     defaultValues: initial,
     reValidateMode,
-    shouldFocusError,
+    shouldFocusError: false, // we handle focusing manually
     criteriaMode,
   });
 
   const handleSubmit = useCallback(
     (data: FormData): void => {
-      if (onSubmit) onSubmit(data);
+      if (onSubmit) {
+        onSubmit(data);
+      }
     },
     [onSubmit]
   );
-  const submit = form.handleSubmit(handleSubmit);
+
+  const { setError } = form;
+
+  useEffect(() => {
+    if (errors) {
+      for (const fieldName in errors) {
+        setError(fieldName, errors[fieldName]);
+      }
+    }
+  }, [errors, setError]);
+
+  const { registerCustomFocusableElement: registerFieldFocus, focusOnError } =
+    useFieldFocusManager({
+      control: form.control,
+      subscribe: form.subscribe,
+      enabled: shouldFocusError,
+      setFocus: form.setFocus,
+    });
+
+  const submit = form.handleSubmit(handleSubmit, focusOnError);
   const ctx = {
     fieldsMap,
     fieldsetsMap,
@@ -53,6 +83,7 @@ const FormBase = React.forwardRef(function FormBase(
     watch: form.watch,
     resetField: form.resetField,
     registerField: registerField,
+    registerFieldFocus,
     errors: form.formState.errors,
     formState: form.formState,
     reset: form.reset,
@@ -67,6 +98,7 @@ const FormBase = React.forwardRef(function FormBase(
     formRef: ref,
     submit,
   };
+
   return (
     <FormContext.Provider value={ctx}>
       <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
@@ -76,99 +108,204 @@ const FormBase = React.forwardRef(function FormBase(
   );
 });
 
-const useFormContext = () => {
-  return useContext(FormContext);
-};
 const useFormValues = () => {
   const ctx = useFormContext();
   return ctx.getValues();
 };
-const FormBuilder = React.forwardRef(function FormBuilder(
-  {
-    fields = [],
-    fieldsets,
-    initial = {},
-    onSubmit,
-    children,
-    reValidateMode = 'onSubmit',
-    mode = 'onSubmit',
-    shouldFocusError = true,
-    criteriaMode = 'all',
-    auto = false,
-    validatorRegistry,
-    componentRegistry,
-    grid = false,
-    ...props
-  }: FormBuilderProps,
-  ref: React.Ref<HTMLFormElement>
-): React.ReactElement {
-  const fieldsState = useRef(fields);
-  const setFieldsState = useCallback((newFields) => {
-    fieldsState.current = newFields;
-  }, []);
-  const schema = useValidationSchema(fieldsState, validatorRegistry);
-  const registerField = useCallback((field) => {
-    const fieldIndex = fieldsState.current.findIndex(
-      (f) => f.key === field.key
+
+const FormBuilder = React.forwardRef<HTMLFormElement, FormBuilderProps>(
+  function FormBuilder(
+    {
+      fields = [],
+      fieldsets,
+      initial = {},
+      onSubmit,
+      children,
+      reValidateMode = 'onChange',
+      mode = 'onSubmit',
+      shouldFocusError = true,
+      criteriaMode = 'all',
+      auto = false,
+      validatorRegistry,
+      componentRegistry,
+      grid = false,
+      ...props
+    },
+    ref
+  ) {
+    const { screenSize } = useScreenSize();
+
+    const transformedFields = useMemo(
+      () =>
+        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;
+              },
+              {}
+            ),
+          };
+        }),
+      [fields]
     );
-    if (fieldIndex > -1) {
-      fieldsState.current[fieldIndex] = field;
-    } else {
-      fieldsState.current.push(field);
-    }
-    setFieldsState(fieldsState.current);
-  }, []);
-  let resolver;
-  let fieldsMap;
-  let fieldsetsMap;
-  let fieldChildren;
-  if (schema) {
-    resolver = yupResolver(schema);
-    fieldsMap = fields
-      ? fields.reduce((map, field) => ({ ...map, [field.key]: field }), {})
-      : {};
-    fieldsetsMap =
-      fieldsets &&
-      fieldsets.reduce(
+
+    const fieldsState = useRef(transformedFields);
+    const setFieldsState = useCallback((newFields) => {
+      fieldsState.current = newFields;
+    }, []);
+
+    const registerField = useCallback(
+      (field) => {
+        const fieldIndex = fieldsState.current.findIndex(
+          (f) => f.key === field.key
+        );
+        if (fieldIndex > -1) {
+          fieldsState.current[fieldIndex] = field;
+        } else {
+          fieldsState.current.push(field);
+        }
+        setFieldsState(fieldsState.current);
+      },
+      [setFieldsState]
+    );
+
+    const schema = useValidationSchema(fieldsState, validatorRegistry);
+
+    const resolver: UseFormProps['resolver'] = useMemo(() => {
+      if (!schema) return;
+
+      return yupResolver(schema);
+    }, [schema]);
+
+    const fieldsMap = useMemo(() => {
+      if (!schema || !transformedFields) return {};
+
+      return transformedFields.reduce(
+        (map, field) => ({ ...map, [field.key]: field }),
+        {}
+      );
+    }, [schema, transformedFields]);
+    const fieldsetsMap = useMemo(() => {
+      if (!schema || !fieldsets) return;
+
+      return fieldsets.reduce(
         (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
         {}
       );
+    }, [fieldsets, schema]);
+
+    const fieldChildren = useMemo(() => {
+      if (!schema || !auto) return;
 
-    if (auto) {
       if (fieldsets) {
-        fieldChildren = fieldsets.map((fieldset) => (
-          <Fieldset key={fieldset.key} />
-        ));
-      } else if (fields) {
-        fieldChildren = fields.map((field) => (
-          <Field key={field.key} name={field.key} />
+        return fieldsets.map((fieldset) => (
+          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
         ));
       }
-    }
+
+      if (transformedFields) {
+        const fieldsByLayouts = groupFieldsByLayout(transformedFields);
+        const fieldsByLayoutSize = fieldsByLayouts[screenSize];
+        return 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} />;
+          }
+        });
+      }
+    }, [auto, fieldsets, schema, screenSize, transformedFields]);
+
+    return (
+      <FormBase
+        resolver={resolver}
+        fieldsetsMap={fieldsetsMap}
+        fieldsMap={fieldsMap}
+        registerField={registerField}
+        initial={initial}
+        reValidateMode={reValidateMode}
+        mode={mode}
+        shouldFocusError={shouldFocusError}
+        criteriaMode={criteriaMode}
+        onSubmit={onSubmit}
+        componentRegistry={componentRegistry}
+        ref={ref}
+        grid={grid}
+        {...props}
+      >
+        {fieldChildren}
+        {auto && <Button type="submit">Συνέχεια</Button>}
+        {children}
+      </FormBase>
+    );
   }
-  return (
-    <FormBase
-      resolver={resolver}
-      fieldsetsMap={fieldsetsMap}
-      fieldsMap={fieldsMap}
-      registerField={registerField}
-      initial={initial}
-      reValidateMode={reValidateMode}
-      mode={mode}
-      shouldFocusError={shouldFocusError}
-      criteriaMode={criteriaMode}
-      onSubmit={onSubmit}
-      componentRegistry={componentRegistry}
-      ref={ref}
-      grid={grid}
-      {...props}
-    >
-      {fieldChildren}
-      {auto && <Button type="submit">Συνέχεια</Button>}
-      {children}
-    </FormBase>
-  );
-});
+);
+
+const DEFAULT_LAYOUT = {
+  xs: 12,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 12,
+};
+
+const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+function 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;
+  }, {});
+}
+
 export const ControlledFormBuilder = (props) => {
   return (
     <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />

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();
+});