@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/FormContext.tsx

@@ -1,7 +1,12 @@
-import React, { createContext } from 'react';
-import { FormContextProps } from '@digigov/form/types';
+import type React from 'react';
+import { createContext, useContext } from 'react';
+import type { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({
   fieldsMap: {},
   fieldsetsMap: {},
 } as FormContextProps);
+
+export const useFormContext = () => {
+  return useContext(FormContext);
+};

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -1,7 +1,10 @@
 import MultiplicityField from '@digigov/form/MultiplicityField';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/MultiplicityField',
   component: MultiplicityField,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'MultiplicityField',
 };
 export { Default } from '@digigov/form/MultiplicityField/__stories__/Default';

package/src/MultiplicityField/__stories__/Default.tsx

@@ -85,7 +85,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -61,7 +61,7 @@ const fields = [
   },
 ];
 
-export const PreviewDisplay = () => (
+export const PreviewDisplay = (_: any) => (
   <Layout>
     <Header>
       <HeaderContent>

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -84,7 +84,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithExactLength = () => (
+export const WithExactLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMaxLength = () => (
+export const WithMaxLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -88,7 +88,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinAndMaxLength = () => (
+export const WithMinAndMaxLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinLength = () => (
+export const WithMinLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/add-objects.tsx

@@ -1,17 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
-import {
+import type {
   ErrorOption,
   FieldArrayWithId,
   UseFieldArrayReturn,
-  useWatch,
 } from 'react-hook-form';
+import { useWatch } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { 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 { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { useField } from '@digigov/form/Field/utils/useField';
 import { FieldObject } from '@digigov/form/FieldObject';
 import { Fieldset } from '@digigov/form/Fieldset';
@@ -19,7 +14,7 @@ import type {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
-import { FieldSpec } from '@digigov/form/types';
+import type { FieldSpec } from '@digigov/form/types';
 import { Button } from '@digigov/ui/form/Button';
 import { RadioConditional } from '@digigov/ui/form/RadioContainer';
 
@@ -47,6 +42,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
+  resetField,
   onStash,
   error,
   Field,
@@ -136,11 +132,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
     error: needsMoreError,
   } = useField(radioField.key, radioField?.type ? radioField : null);
 
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
-    [field]
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
   const needsMore = useWatch({ name: field.key, control });
 
   useEffect(() => {
@@ -155,25 +147,25 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
 
   // TODO: Refactor types so that label is always required, the following
   // assignment is a temp fix for typescript build to run
-  calculatedField.label = calculatedField.label || {};
+  resolvedField.label = resolvedField.label || {};
   if (extra?.length) {
-    calculatedField.label.secondary = `Έχετε προσθέσει ${
+    resolvedField.label.secondary = `Έχετε προσθέσει ${
       stashedObjects.length
     } εγγραφές και σας απομένουν ακόμα ${
       extra.length - stashedObjects.length
     } εγγραφές.`;
   } else if (extra?.min && extra?.max) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+    resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
       extra?.min - stashedObjects.length
     } και το μέγιστο ${
       extra?.max
     } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.min) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+    resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
       extra?.min - stashedObjects.length
     } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.max) {
-    calculatedField.label.secondary = ` Έχετε προσθέσει ${
+    resolvedField.label.secondary = ` Έχετε προσθέσει ${
       stashedObjects.length
     } εγγραφές και σας απομένουν ${
       extra.max - stashedObjects.length
@@ -182,11 +174,12 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   return (
     <Fieldset>
       <FieldBase
-        {...calculatedField}
-        name={calculatedField.key}
+        {...resolvedField}
+        name={resolvedField.key}
         control={control}
         register={register}
         reset={reset}
+        resetField={resetField}
         Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||

package/src/MultiplicityField/doc.mdx

@@ -3,6 +3,8 @@ id: ask-users-recursive
 title: Ask users for recursive data
 ---
 
+# MultiplicityField
+
 Multiplicity & FieldArray fields allow users to input data described by a
 particular schema for an arbitrary number of times until they are done. It can
 be used to input a fixed, a minimum, and a maximum length of instances.
@@ -28,7 +30,7 @@ properties for a data entity like a citizen and their personal details, and it
 can be reused internally multiple times by `@digigov/form` to generate data
 objects based on this schema.
 
-## Accessibility & usability
+## Accessibility & Usability
 
 We aim to have semantically correct and valid forms, and as a result we cannot
 mix form-related HTML elements, like `form`, `input`, `label` with generic ones,
@@ -109,38 +111,40 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        multiplicity={true}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         extra={{
           border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε που έχετε προσθέσει',
+              add: 'Προσθήκη',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε και άλλα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε άλλο ένα όχημα',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -148,14 +152,14 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: { primary: 'Ημερομηνία Κυκλοφορίας' },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -163,7 +167,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -172,10 +176,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ### How to use it
@@ -192,7 +197,7 @@ export default function MultiplicityForm() {
   return (
     <Form>
       {/* this is where all fields will eventually be rendered */}
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
@@ -209,7 +214,7 @@ props.
 <Field
   key="vehicles"
   name="vehicles"
-  label={{ primary: 'Vehicles' }}
+  label={{ primary: 'Οχήματα' }}
   type="array"
   required
 />
@@ -234,8 +239,8 @@ key describing the field props for all inputs needed.
   of: {
     type: 'object',
     label: {
-      primary: 'Vehicle details',
-      secondary: 'See and change the details of a vehicle',
+      primary: 'Περιγραφή Οχήματος',
+      secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
     },
     extra: {
       fields: [
@@ -243,14 +248,16 @@ key describing the field props for all inputs needed.
           key: 'registration_date',
           type: 'date',
           required: true,
-          label: { primary: 'Registration date' },
+          label: {
+            primary: 'Ημερομηνία Κυκλοφορίας'
+          },
         },
         {
           key: 'make',
           type: 'string',
           required: true,
           label: {
-            primary: 'Make',
+            primary: 'Κατασκευαστής',
           },
         },
         {
@@ -258,7 +265,7 @@ key describing the field props for all inputs needed.
           type: 'string',
           required: true,
           label: {
-            primary: 'Model',
+            primary: 'Μοντέλο',
           },
         },
       ],
@@ -283,14 +290,14 @@ FieldArray instead of the Multiplicity, is to explicitly disable the
 multiplicity functionality, by using the `multiplicity={false}` prop.
 
 As a result, if you learn how to use one, you can easily use the other, and
-naturally, you can also change their behaviour by changing a single prop in your
+naturally, you can also change their behavior by changing a single prop in your
 React code.
 
 ```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
-  label={{ primary: 'Vehicles' }}
+  label={{ primary: 'Οχήματα' }}
   type="array"
   // highlight-next-line
   multiplicity={false}
@@ -306,40 +313,41 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
-        type="array"
         multiplicity={false}
+        editable={true}
+        label={{ primary: 'Οχήματα' }}
+        type="array"
         extra={{
           border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              nothing_added: 'You have not added any vehicles yet.',
-              add: 'Add vehicle',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε που έχετε προσθέσει',
+              add: 'Προσθήκη',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε και άλλα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε άλλο ένα όχημα',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -347,14 +355,14 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: { primary: 'Ημερομηνία Κυκλοφορίας' },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -362,7 +370,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -371,10 +379,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ## Validating form data
@@ -410,40 +419,42 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         multiplicity={true}
         extra={{
+          length: 2,
           border: true,
-          length: 3,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε προσθέσει',
+              nothing_added: 'Δεν έχετε προσθέσει κανένα όχημα ακόμα.',
+              add: 'Προσθήκη οχήματος',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε περισσότερα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε ακόμα ένα από τα οχήματά σας',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -451,14 +462,16 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: {
+                    primary: 'Ημερομηνία Κυκλοφορίας',
+                  },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -466,7 +479,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -475,10 +488,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ### Min or max length
@@ -512,42 +526,43 @@ import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         multiplicity={true}
         extra={{
-          border: true,
           min: 2,
           max: 5,
+          border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              nothing_added: 'You have not added any vehicles yet.',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε προσθέσει',
+              nothing_added: 'Δεν έχετε προσθέσει κανένα όχημα ακόμα.',
+              add: 'Προσθήκη οχήματος',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε περισσότερα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε ακόμα ένα από τα οχήματά σας',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -555,14 +570,16 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: {
+                    primary: 'Ημερομηνία Κυκλοφορίας',
+                  },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -570,7 +587,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -579,8 +596,9 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```

package/src/MultiplicityField/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All MultiplicityField variants', async ({ mount, page }) => {
   )
   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();
 });