@digigov/form 2.0.0-85c27c19 → 2.0.0-87b6232d

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 = () => (
+  <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,90 +1,150 @@
 import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+import {
+  Controller,
+  ErrorOption,
+  useFieldArray,
+  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 } from '@digigov/form/Fieldset';
-import Fieldset from '@digigov/react-core/Fieldset';
+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) || [];
   return (
-    <FieldContainer
-      label={label}
-      layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
-      wrapper="fieldset"
-      name={name}
-    >
-      {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}
-            />
-            <Button
-              name={`${name}-object-remove`}
-              type="button"
-              color="warning"
-              onClick={() => remove(index)}
-            >
-              {customField.extra?.label.object?.delete}
-            </Button>
-          </Fieldset>
-        </Card>
-      ))}
+    <Controller
+      render={({ field }) => {
+        return (
+          <FieldBaseContainer
+            label={label}
+            layout={layout}
+            register={register}
+            error={error?.message && error ? error : undefined}
+            hasError={
+              formState.isSubmitted && !formState.isSubmitting && !!error
+            }
+            wrapper="fieldset"
+            name={name}
+            labelSize={customField.extra?.labelSize}
+          >
+            <div tabIndex={-1} ref={field.ref} />
 
-      <Button
-        type="button"
-        name={`${name}-add-object`}
-        color="secondary"
-        onClick={(ev) => {
-          ev.preventDefault();
-          append({});
-        }}
-      >
-        {customField.extra?.label.object?.add}
-      </Button>
-    </FieldContainer>
+            {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}
+                  >
+                    <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
+                    type="button"
+                    name={`${name}-add-object`}
+                    color="secondary"
+                    variant={customField.extra?.label.object?.addButtonVariant}
+                    onClick={(ev) => {
+                      ev.preventDefault();
+                      append({});
+                    }}
+                    disabled={!customField?.editable}
+                  >
+                    {customField.extra?.label.object?.add}
+                  </Button>
+                )}
+              </>
+            )}
+          </FieldBaseContainer>
+        );
+      }}
+      control={control}
+      name={name}
+    />
   );
 };
 

package/src/FieldObject/index.tsx

@@ -1,23 +1,26 @@
 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,
 } from '@digigov/form/Field/utils';
 import { calculateField } from '@digigov/form/Field/utils/calculateField';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
+import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
+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?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -27,29 +30,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}${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}
         />
       ))}
     </Fieldset>
@@ -57,14 +68,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 +90,37 @@ 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}
-    />
-  );
+  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/Fieldset/index.tsx

@@ -4,11 +4,11 @@ import {
   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 { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

package/src/FormBuilder/FormBuilder.stories.js

@@ -5,3 +5,5 @@ export default {
   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 = () => (
+  <FormBuilder
+    grid={true}
+    auto={true}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    fields={FIELDS}
+  ></FormBuilder>
+);
+
+export default AutoErrorGrouping;

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