@digigov/form 2.0.0-0edebf87 → 2.0.0-13876dba

package/src/FormBuilder/index.tsx

@@ -1,3 +1,265 @@
-import { FormBuilder } from '@digigov/form/FormBuilder/FormBuilder';
+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 { 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(
+  {
+    onSubmit,
+    children,
+    registerField,
+    fieldsMap,
+    fieldsetsMap,
+    resolver,
+    mode,
+    initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+    componentRegistry,
+    grid,
+    ...props
+  }: FormBaseProps,
+  ref: React.Ref<HTMLFormElement>
+) {
+  const form = useForm({
+    resolver,
+    mode,
+    defaultValues: initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+  });
+
+  const handleSubmit = useCallback(
+    (data: FormData): void => {
+      if (onSubmit) {
+        form.reset(data);
+        onSubmit(data);
+      }
+    },
+    [onSubmit]
+  );
+  const submit = form.handleSubmit(handleSubmit);
+  const ctx = {
+    fieldsMap,
+    fieldsetsMap,
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    resetField: form.resetField,
+    registerField: registerField,
+    errors: form.formState.errors,
+    formState: form.formState,
+    reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    unregister: form.unregister,
+    componentRegistry,
+    setError: form.setError,
+    formRef: ref,
+    submit,
+  };
+  return (
+    <FormContext.Provider value={ctx}>
+      <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
+        {children}
+      </Form>
+    </FormContext.Provider>
+  );
+});
+
+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);
+};
+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 { 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;
+  }, []);
+  const schema = useValidationSchema(fieldsState, validatorRegistry);
+  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);
+  }, []);
+  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(
+        (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
+        {}
+      );
+
+    if (auto) {
+      if (fieldsets) {
+        fieldChildren = fieldsets.map((fieldset) => (
+          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
+        ));
+      } else if (fields) {
+        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} />;
+          }
+        });
+      }
+    }
+  }
+  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>
+  );
+});
+export const ControlledFormBuilder = (props) => {
+  return (
+    <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />
+  );
+};
 export default FormBuilder;
+
+export { useFormContext, useFormValues, FormBase };

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