@digigov/form 2.0.0-2a26e869 → 2.0.0-30d44ed9

package/src/FieldArray/__stories__/WithModal.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    editable: true,
+    required: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      noIndex: true,
+      border: false,
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 2,
+      // max: 4,
+      of: {
+        type: 'object',
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'arrayofafm',
+    editable: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      // min: 2,
+      // max: 4,
+      of: {
+        required: true,
+        type: 'afm',
+        label: {
+          primary: 'ΑΦΜ',
+        },
+      },
+    },
+  },
+] as FieldSpec[];
+
+export const WithModal = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+      window.alert('Submit success');
+    }}
+  >
+    <Field name="multiplicity" {...fields[1]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/FieldArray/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/FieldArray/__stories__/Default';
 import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+import { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 
 test('renders the All FieldArray variants', async ({ mount, page }) => {
   await mount(
@@ -14,10 +15,17 @@ test('renders the All FieldArray variants', async ({ mount, page }) => {
     <TestVariant title="WithExactLength">
       <WithExactLength />
     </TestVariant>
+    <TestVariant title="WithModal">
+      <WithModal />
+    </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/FieldArray/index.tsx

@@ -1,93 +1,157 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
+import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
 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';
 
 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>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
+  trigger,
   register,
+  clearErrors,
   control,
   formState,
   error,
+  getValues,
+  setValue,
   layout,
+  reset,
+  resetField,
   label,
   Field,
   ...customField
 }) => {
-  const { fields, append, remove } = useFieldArray({
+  const { append, remove } = useFieldArray({
     control,
     name,
   });
+  const fields = getValues(name) || [];
+
+  /** The ref of the FieldBaseContainer. */
+  const containerRef = useRef<HTMLFieldSetElement | null>(null);
+
+  const { errors } = formState;
+
+  // Focus the fieldset when there are errors related to this field array
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const fieldErrors = Object.keys(errors);
+    // no errors
+    if (!fieldErrors.length) return;
+
+    if (
+      // Check if there are errors related to the current field array
+      fieldErrors.some((key) => {
+        const fieldArrayName = key.split('.')[0];
+        return fieldArrayName === name;
+      })
+    ) {
+      if (containerRef.current && errors[name]) {
+        containerRef.current.focus();
+      }
+    }
+  }, [errors, name]);
 
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
+      register={register}
+      ref={containerRef}
+      error={error?.message && error ? error : undefined}
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      labelSize={customField.extra?.labelSize}
+      controlled={true}
     >
-      {fields.length === 0 && (
-        <Hint>{customField.extra?.label.object?.nothing_added}</Hint>
-      )}
-      {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}
-            />
+      {customField.extra?.variant === 'dialog' ? (
+        <FormDialog
+          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}
+        />
+      ) : (
+        <>
+          {fields.map((field, index) => (
+            <Card
+              variant={customField.extra?.border ? 'border' : 'divider'}
+              key={field.id || index}
+            >
+              <Fieldset>
+                <FieldsetLabel>
+                  {customField.extra?.label.object.title}{' '}
+                  {!customField.extra?.noIndex && 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`}
+                  variant={customField.extra?.label.object?.deleteButtonVariant}
+                  type="button"
+                  color="warning"
+                  onClick={() => remove(index)}
+                  disabled={!customField?.editable}
+                >
+                  {customField.extra?.label.object?.delete}
+                </Button>
+              </Fieldset>
+            </Card>
+          ))}
+          {customField.editable && (
             <Button
-              name={`${name}-object-remove`}
               type="button"
-              color="warning"
-              onClick={() => remove(index)}
+              name={`${name}-add-object`}
+              color="secondary"
+              variant={customField.extra?.label.object?.addButtonVariant}
+              onClick={(ev) => {
+                ev.preventDefault();
+                append({});
+              }}
+              disabled={!customField?.editable}
             >
-              {customField.extra?.label.object?.delete}
+              {customField.extra?.label.object?.add}
             </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,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
+import { FieldProps, CalculatedField } from '@digigov/form/Field/types';
 import {
   FIELD_COMPONENTS,
   ALTERNATIVE_COMPONENTS,
@@ -16,8 +16,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?: undefined;
   Field: React.FC<FieldProps>;
 }
 
@@ -28,8 +30,10 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
+  defaultValue,
   Field,
 }) => {
   const { t } = useTranslation();
@@ -37,21 +41,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}${field.key ? `.${field.key}` : ''}`}
+          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 +68,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,7 +90,9 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   control,
   formState,
   reset,
+  resetField,
   register,
+  defaultValue,
   Field,
 }) => {
   const calculatedField: CalculatedField = useMemo(
@@ -87,19 +100,27 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
       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}
-    />
-  );
+  if (Field) {
+    if (!field.type) {
+      field.type = 'string';
+    }
+    return <Field {...field} name={name} />;
+  } else {
+    const customError = error ? error : formState?.errors[name];
+    return (
+      <FieldBase
+        {...calculatedField}
+        name={name}
+        Field={Field}
+        control={control}
+        reset={reset}
+        resetField={resetField}
+        register={register}
+        error={customError}
+        defaultValue={defaultValue}
+      />
+    );
+  }
 };
 
 export default FieldObject;

package/src/FormBuilder/FormBuilder.stories.js

@@ -1,7 +1,10 @@
 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';

package/src/FormBuilder/__stories__/AutoErrorGrouping.tsx

@@ -49,7 +49,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const AutoErrorGrouping = () => (
+export const AutoErrorGrouping = (_: any) => (
   <FormBuilder
     grid={true}
     auto={true}

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

@@ -3,7 +3,7 @@ import FormBuilder, { Field } from '@digigov/form';
 import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
 import { Button } from '@digigov/ui/form/Button';
 
-export const ErrorGrouping = () => (
+export const ErrorGrouping = (_: any) => (
   <FormBuilder
     grid={true}
     onSubmit={(data) => {

package/src/FormBuilder/doc.mdx

@@ -4,13 +4,14 @@ 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" />
 
-
 ### Importing and using FormBuilder Component
 
 To import `FormBuilder` component simply import it from `'@digigov/form`.
@@ -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,29 +1,32 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant';
+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>
-  );
+    
+  <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();
 });
+