@digigov/form 2.0.0-254f7786 → 2.0.0-290ada95

package/src/FieldArray/index.tsx

@@ -1,92 +1,110 @@
-import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import React, { useEffect, useRef } from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
-import { FieldProps } from '@digigov/form/Field/types';
-import { FieldObject } from '@digigov/form/FieldObject';
-import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
-import { Card } from '@digigov/ui/content/Card';
-import { Button } from '@digigov/ui/form/Button';
-import { Hint } from '@digigov/ui/typography/Hint';
+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 (
     <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}
-              Field={Field}
-            />
-            <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>
     </FieldBaseContainer>
   );
 };

package/src/FieldObject/index.tsx

@@ -1,14 +1,10 @@
 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 type { FieldProps } from '@digigov/form/Field/types';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
-import { FieldSpec } from '@digigov/form/types';
+import type { FieldSpec } from '@digigov/form/types';
 import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
@@ -16,8 +12,10 @@ 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>;
 }
 
@@ -28,8 +26,10 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
+  defaultValue,
   Field,
 }) => {
   const { t } = useTranslation();
@@ -37,21 +37,25 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   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}
         />
       ))}
@@ -60,14 +64,17 @@ 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>;
 }
 
@@ -79,27 +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}
-      Field={Field}
-      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,5 +1,5 @@
 import React from 'react';
-import {
+import type {
   FieldsetLabelProps,
   FieldsetCaptionProps,
   FieldsetBodyProps,

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
-import { HintProps } from '@digigov/ui/typography/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/doc.mdx

@@ -4,12 +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:
 
-<code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
-
+<code src="@digigov/form/src/FormBuilder/__stories__/Default.tsx" />
 
 ### Importing and using FormBuilder Component
 
@@ -28,7 +29,7 @@ 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 (
@@ -73,7 +74,7 @@ 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.
 
 ```jsx
 import React, { useState } from 'react';
@@ -83,7 +84,11 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Header, { HeaderTitle, HeaderContent, HeaderSection } 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';

package/src/FormBuilder/index.test.tsx

@@ -1,21 +1,32 @@
 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 TestVariant from '@digigov/ui/utils/TestVariant';
+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',
-  });
+  // 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();
 });
+