@digigov/form 2.0.0-85c27c19 → 2.0.0-8e254888

package/src/FieldArray/__stories__/WithModal.tsx

@@ -0,0 +1,159 @@
+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: {
+      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);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="arrayofafm" {...fields[2]} />
+    <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,6 +15,9 @@ 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);

package/src/FieldArray/index.tsx

@@ -1,27 +1,40 @@
 import React from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+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'];
+  Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
+  trigger,
   register,
+  clearErrors,
   control,
   formState,
   error,
+  getValues,
+  setValue,
   layout,
+  reset,
   label,
+  Field,
   ...customField
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -30,7 +43,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   });
 
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -41,50 +54,82 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
     >
       {fields.length === 0 && (
-        <Hint>{customField.extra?.label.object?.nothing_added}</Hint>
+        <Hint {...customField.extra?.label.object?.nothing_added_props}>
+          {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?.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}
+          {...customField}
+        />
+      ) : (
+        <>
+          {fields.map((field, index) => (
+            <Card
+              variant={customField.extra?.border ? 'border' : 'divider'}
+              key={field.id}
             >
-              {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>
+              <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>
+          ))}
+          <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>
   );
 };
 

package/src/FieldObject/index.tsx

@@ -7,9 +7,9 @@ import {
   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'> {
@@ -18,6 +18,8 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  defaultValue?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -29,6 +31,8 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   reset,
   formState,
   error,
+  defaultValue,
+  Field,
 }) => {
   const { t } = useTranslation();
 
@@ -42,14 +46,16 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
       )}
       {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}
           field={field}
           error={error && error[field.key]}
           formState={formState}
+          defaultValue={defaultValue}
+          Field={Field}
         />
       ))}
     </Fieldset>
@@ -65,6 +71,9 @@ export interface FieldObjectItemProps {
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
   children?: React.ReactNode;
+  // defaultValue?: FormData | undefined;
+  defaultValue?: undefined;
+  Field: React.FC<FieldProps>;
 }
 
 const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
@@ -76,22 +85,25 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   formState,
   reset,
   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}
+      defaultValue={defaultValue}
     />
   );
 };

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;