@digigov/form 0.10.6 → 0.10.7

package/src/FieldArray/FieldArray.stories.playwright.json

@@ -0,0 +1,353 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-fieldarray--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Προσθήκη συνυπογράφοντα"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Συνέχεια"
+              }
+            },
+            {
+              "name": "waitForSelector",
+              "args": {
+                "selector": "text=Το πεδίο πρέπει να έχει τουλάχιστον 2 εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.",
+                "options": {
+                  "state": "visible"
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Προσθήκη συνυπογράφοντα",
+                "options": {
+                  "clickCount": 2
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "text=Συνέχεια"
+              }
+            },
+            {
+              "name": "waitForSelector",
+              "args": {
+                "selector": "text=Το πεδίο είναι υποχρεωτικό.",
+                "options": {
+                  "state": "visible"
+                }
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(3)>label>input",
+                "text": "2107474274"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "iMmV-vvS4iNn",
+          "title": "Add new items to FieldArray"
+        },
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "Lhj8o_MByws7",
+          "title": "Validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body",
+                "text": "hello"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Jon"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "Doe"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Mar"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "P"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(3)>label>input",
+                "text": "6977777777"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "OCWrR7oFA3YV",
+          "title": "add 2 items"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body",
+                "text": "hello"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Jon"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "Doe"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Mar"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "P"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(3)>div>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(3)>label>input",
+                "text": "6977777777"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "8ZxUUjo0Yxnr",
+          "title": "add 2 items and remove 1"
+        }
+      ]
+    },
+    "digigov-form-fieldarray--with-exact-length": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "WG3dAbfXa-Sn",
+          "title": "validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(1)>label>input",
+                "text": "Hello"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Μάρω"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "Μενεξέ"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(1)>label>input",
+                "text": "150000496"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(2)>label>input",
+                "text": "Ηλέκτρα"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(2)>fieldset>div:nth-child(4)>div>fieldset>fieldset>div:nth-child(3)>label>input",
+                "text": "Αποστόλου"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div:nth-child(3)>label>input",
+                "text": "6977654321"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "-U0EryxXC-g7",
+          "title": "add exact length of items"
+        }
+      ]
+    }
+  }
+}

package/src/FieldArray/__stories__/Default.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          add: 'Προσθήκη συνυπογράφοντα',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 2,
+      max: 4,
+      of: {
+        type: 'object',
+        extra: {
+          fields: [
+            {
+              key: 'afm',
+              type: 'afm',
+              required: true,
+              label: { primary: 'ΑΦΜ' },
+            },
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου',
+    },
+  },
+] as FieldSpec[];
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      length: 2,
+      of: {
+        type: 'object',
+        extra: {
+          fields: [
+            {
+              key: 'afm',
+              type: 'afm',
+              required: true,
+              label: { primary: 'ΑΦΜ' },
+            },
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'phonenumber',
+    type: 'phone_number',
+    required: true,
+    label: {
+      primary: 'Σταθερό τηλέφωνο',
+      secondary: 'Συμπληρώστε τον αριθμό τηλεφώνου σας',
+    },
+  },
+] as FieldSpec[];
+
+export const WithExactLength = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="phonenumber" {...fields[2]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/FieldArray/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import FieldObject from '@digigov/form/FieldObject';
+import { Button, Card, Hint } from '@digigov/ui';
+import { FieldsetLabel } from '@digigov/form/Fieldset';
+import Fieldset from '@digigov/react-core/Fieldset';
+import { FieldProps } from '@digigov/form/Field/types';
+import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+export interface FieldArrayProps extends FieldProps {
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  formState: UseFormReturn['formState'];
+  error?: ErrorOption;
+}
+export const FieldArray: React.FC<FieldArrayProps> = ({
+  name,
+  register,
+  control,
+  formState,
+  error,
+  layout,
+  label,
+  ...customField
+}) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    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 type="button" color="warning" onClick={() => remove(index)}>
+              Remove
+            </Button>
+          </Fieldset>
+        </Card>
+      ))}
+
+      <Button
+        type="button"
+        color="secondary"
+        onClick={(ev) => {
+          ev.preventDefault();
+          append({});
+        }}
+      >
+        {customField.extra?.label.object?.add}
+      </Button>
+    </FieldContainer>
+  );
+};
+
+export default FieldArray;