@digigov/form 2.0.0-d57821ba → 2.0.0-e7d30530

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 = (_: any) => (
+  <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/{FormBuilder.mdx → doc.mdx}

@@ -4,15 +4,13 @@ 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:
 
-<Story
-  packageName="@digigov/form"
-  component="FormBuilder"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
 
 ### Importing and using FormBuilder Component
 
@@ -31,21 +29,17 @@ 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 (
     <BasicLayout>
-      .
-      .
+      /* code */
       <Container>
         <Main>
-          .
-          .
+          /* code */
           <FormBuilder></FormBuilder>
-          .
-          .
+          /* code */
         </Main>
       </Container>
       <Bottom>
@@ -54,7 +48,6 @@ export default function MyComponent({ props }) {
     </BasicLayout>
   );
 }
-}
 ```
 
 ### Props
@@ -81,9 +74,9 @@ 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.
 
-```javascript
+```jsx
 import React, { useState } from 'react';
 import BasicLayout, {
   Top,
@@ -91,7 +84,11 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Header, { HeaderTitle } 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';
@@ -99,8 +96,9 @@ import PageTitleContainer, {
   PageTitleCaption,
   PageTitleHeading,
 } from '@digigov/ui/app/PageTitleContainer';
-import BackButton from '@digigov/ui/form/Button/BackButton';
-import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
+import BackLink from '@digigov/ui/navigation/BackLink';
+import FormBuilder, { Fieldset, Field } from '@digigov/form';
+import { FieldsetLabel } from '@digigov/form/Fieldset';
 import { useTranslation } from '@digigov/ui/i18n';
 
 const FIELDS = [
@@ -203,30 +201,24 @@ const initialValues = {
   string: 'default content',
 };
 
-const useStyles = makeStyles(
-  {
-    top: { minHeight: '75px' },
-    main: {},
-    side: {},
-  },
-  { name: 'MuiSite' }
-);
-
 export default function Index() {
-  const styles = useStyles();
   const [data, setData] = useState(null);
   const { t } = useTranslation();
   return (
     <BasicLayout>
-      <Top className={styles.top}>
+      <Top>
         <Header>
-          <GovGRLogo />
-          <HeaderTitle>Service name</HeaderTitle>
+          <HeaderContent>
+            <HeaderSection>
+              <GovGRLogo />
+              <HeaderTitle>Service name</HeaderTitle>
+            </HeaderSection>
+          </HeaderContent>
         </Header>
       </Top>
       <Container>
-        <Main className={styles.main}>
-          <BackButton>{t('button.back')}</BackButton>
+        <Main>
+          <BackLink>Back</BackLink>
           <PageTitleContainer>
             <PageTitleCaption>Before we start</PageTitleCaption>
             <PageTitleHeading>Submit a form</PageTitleHeading>
@@ -237,7 +229,7 @@ export default function Index() {
             initial={initialValues}
           >
             <Fieldset>
-              <FieldsetLabel>This is a fieldset</FieldsetLabel>
+              <FieldsetLabel size="lg">This is a fieldset</FieldsetLabel>
               {FIELDS.map((field) => (
                 <Field key={field.key} name={field.key} />
               ))}

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,8 +1,270 @@
-import {
-  FormBuilder,
-  useFormContext,
-  useFormValues,
-  FormBase,
-} from '@digigov/form';
-export { useFormContext, useFormValues, FormBase };
+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 { 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(
+  {
+    onSubmit,
+    children,
+    registerField,
+    fieldsMap,
+    fieldsetsMap,
+    resolver,
+    mode,
+    initial,
+    reValidateMode,
+    shouldFocusError = true,
+    criteriaMode,
+    componentRegistry,
+    grid,
+    errors,
+    ...props
+  }: FormBaseProps,
+  ref: React.Ref<HTMLFormElement>
+) {
+  const form = useForm({
+    resolver,
+    mode,
+    defaultValues: initial,
+    reValidateMode,
+    shouldFocusError,
+    criteriaMode,
+  });
+
+  const handleSubmit = useCallback(
+    (data: FormData): void => {
+      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,
+    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 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();
+});