@digigov/form 2.0.0-2445d5cb → 2.0.0-264e5fff

package/src/FieldArray/index.tsx

@@ -1,90 +1,111 @@
-import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer 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/react-core/Fieldset';
-import { Card } from '@digigov/ui/content/Card';
-import { Button } from '@digigov/ui/form/Button';
-import { Hint } from '@digigov/ui/typography/Hint';
+import React, { useEffect, useRef } from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
+import type { FieldProps } from '@digigov/form/Field/types';
+import BaseFieldArray from '@digigov/form/FieldArray/BaseFieldArray';
+import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
+import type { registerFieldFocus } from '@digigov/form/types';
+
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
+  trigger: UseFormReturn['trigger'];
   register: UseFormReturn['register'];
+  clearErrors: UseFormReturn['clearErrors'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  getValues: UseFormReturn['getValues'];
+  setValue: UseFormReturn['setValue'];
+  reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
+  Field: React.FC<FieldProps>;
+  registerFieldFocus: registerFieldFocus;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
+  trigger,
   register,
+  clearErrors,
   control,
   formState,
   error,
+  getValues,
+  setValue,
   layout,
+  reset,
+  resetField,
   label,
+  Field,
+  registerFieldFocus,
   ...customField
 }) => {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name,
-  });
+  /** The ref of the add-button */
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  // Register the button to be focusable
+  useEffect(() => {
+    let unregister: (name: string) => void = () => {};
+    if (buttonRef.current) {
+      unregister = registerFieldFocus(name, buttonRef.current);
+    }
+
+    return () => {
+      unregister(name);
+    };
+  }, [name, registerFieldFocus]);
+
+  // Clear container error when there are no item errors
+  const hasItemErrors: boolean =
+    !!error && Object.keys(error).some((key) => /^\d+$/.test(key));
+  useEffect(() => {
+    if (!hasItemErrors) clearErrors(name);
+  }, [clearErrors, hasItemErrors, name]);
 
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
+      register={register}
+      error={error?.message ? error : undefined}
+      hasError={!!error}
       wrapper="fieldset"
       name={name}
+      labelSize={customField.extra?.labelSize}
+      controlled={true}
     >
-      {fields.length === 0 && (
-        <Hint>{customField.extra?.label.object?.nothing_added}</Hint>
+      {customField.extra?.variant === 'dialog' ? (
+        <FormDialog
+          ref={buttonRef}
+          name={name}
+          trigger={trigger}
+          register={register}
+          clearErrors={clearErrors}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          setValue={setValue}
+          layout={layout}
+          label={label}
+          Field={Field}
+          reset={reset}
+          resetField={resetField}
+          sortable={customField.extra.sortable}
+          {...customField}
+        />
+      ) : (
+        <BaseFieldArray
+          ref={buttonRef}
+          name={name}
+          register={register}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          Field={Field}
+          {...customField}
+        />
       )}
-      {fields.map((field, index) => (
-        <Card variant="border" key={field.id}>
-          <Fieldset>
-            <FieldsetLabel>
-              {customField.extra?.label.object.title} {index + 1}
-            </FieldsetLabel>
-            <FieldObject
-              name={`${name}.${index}`}
-              error={Array.isArray(error) && error[index]}
-              formState={formState}
-              register={register}
-              control={control}
-              {...customField.extra?.of}
-            />
-            <Button
-              name={`${name}-object-remove`}
-              type="button"
-              color="warning"
-              onClick={() => remove(index)}
-            >
-              {customField.extra?.label.object?.delete}
-            </Button>
-          </Fieldset>
-        </Card>
-      ))}
-
-      <Button
-        type="button"
-        name={`${name}-add-object`}
-        color="secondary"
-        onClick={(ev) => {
-          ev.preventDefault();
-          append({});
-        }}
-      >
-        {customField.extra?.label.object?.add}
-      </Button>
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/FieldObject/index.tsx

@@ -1,23 +1,22 @@
 import React, { useMemo } from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
-import {
-  FIELD_COMPONENTS,
-  ALTERNATIVE_COMPONENTS,
-} from '@digigov/form/Field/utils';
-import { calculateField } from '@digigov/form/Field/utils/calculateField';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
-import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
+import type { FieldProps } from '@digigov/form/Field/types';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
+import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
+import type { FieldSpec } from '@digigov/form/types';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField: UseFormReturn['resetField'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  defaultValue?: any;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -27,29 +26,37 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
+  defaultValue,
+  Field,
 }) => {
   const { t } = useTranslation();
 
   return (
     <Fieldset>
       {label?.primary && (
-        <FieldsetLegend size="sm">{t(label.primary)}</FieldsetLegend>
+        <FieldsetLegend size="sm" marginBottom={3}>
+          {t(label.primary)}
+        </FieldsetLegend>
       )}
       {label?.secondary && (
-        <FieldsetCaption>{t(label.secondary)}</FieldsetCaption>
+        <FieldsetCaption marginBottom={3}>{t(label.secondary)}</FieldsetCaption>
       )}
       {extra?.fields.map((field) => (
         <FieldObjectItem
-          key={`${name}.${field.key}`}
-          name={`${name}.${field.key}`}
+          key={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
+          name={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
           control={control}
           register={register}
           reset={reset}
+          resetField={resetField}
           field={field}
           error={error && error[field.key]}
           formState={formState}
+          defaultValue={defaultValue?.[field.key] || undefined}
+          Field={Field}
         />
       ))}
     </Fieldset>
@@ -57,14 +64,18 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
 };
 
 export interface FieldObjectItemProps {
+  key: string;
   name: string;
   field: FieldSpec;
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField: UseFormReturn['resetField'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
   children?: React.ReactNode;
+  defaultValue?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
@@ -75,25 +86,33 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   control,
   formState,
   reset,
+  resetField,
   register,
+  defaultValue,
+  Field,
 }) => {
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
-    [field]
-  );
-
-  const customError = error ? error : formState?.errors[name];
-  return (
-    <FieldBase
-      {...calculatedField}
-      name={name}
-      control={control}
-      reset={reset}
-      register={register}
-      error={customError}
-    />
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
+  if (Field) {
+    if (!field.type) {
+      field.type = 'string';
+    }
+    return <Field {...field} name={name} />;
+  } else {
+    const customError = error ? error : formState?.errors[name];
+    return (
+      <FieldBase
+        {...resolvedField}
+        name={name}
+        Field={Field}
+        control={control}
+        reset={reset}
+        resetField={resetField}
+        register={register}
+        error={customError}
+        defaultValue={defaultValue}
+      />
+    );
+  }
 };
 
 export default FieldObject;

package/src/Fieldset/FieldsetWithContext.tsx

@@ -7,7 +7,7 @@ import {
   FieldsetBody,
 } from '@digigov/form/Fieldset/';
 import { FormContext } from '@digigov/form/FormContext';
-import { FieldsetSpec } from '@digigov/form/types';
+import type { FieldsetSpec } from '@digigov/form/types';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export const FieldsetWithContext: React.FC<{ name: string }> = ({ name }) => {

package/src/Fieldset/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import {
+import type {
   FieldsetLabelProps,
   FieldsetCaptionProps,
   FieldsetBodyProps,
 } from '@digigov/form/Fieldset/types';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import Grid from '@digigov/ui/layouts/Grid';
-import NormalText from '@digigov/ui/typography/NormalText';
+import { Fieldset } from '@digigov/react-core/Fieldset';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Grid } from '@digigov/ui/layouts/Grid';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
   children,

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
-import { HintProps } from '@digigov/react-core/Hint';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

package/src/FormBuilder/FormBuilder.stories.js

@@ -1,7 +1,12 @@
 import FormBuilder from '@digigov/form/FormBuilder';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/FormBuilder',
   component: FormBuilder,
+  tags: ['autodocs'],
+  markdown: doc,
   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 = (_: any) => (
+  <FormBuilder
+    grid={true}
+    auto={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    fields={FIELDS}
+  ></FormBuilder>
+);
+
+export default AutoErrorGrouping;

package/src/FormBuilder/__stories__/Default.tsx

@@ -6,7 +6,7 @@ const initialValues = {
   'business-title': null,
 };
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

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