@digigov/form 2.0.0-8e254888 → 2.0.0-a402a664

package/src/FieldArray/__stories__/Default.tsx

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

package/src/FieldArray/__stories__/WithExactLength.tsx

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

package/src/FieldArray/__stories__/WithModal.tsx

@@ -22,6 +22,8 @@ const fields = [
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
     },
     extra: {
+      noIndex: true,
+      border: false,
       variant: 'dialog',
       noHeader: false,
       label: {
@@ -145,15 +147,14 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithModal = () => (
+export const WithModal = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
+      window.alert('Submit success');
     }}
   >
-    <Field name="string" {...fields[0]} />
     <Field name="multiplicity" {...fields[1]} />
-    <Field name="arrayofafm" {...fields[2]} />
     <Button>Συνέχεια</Button>
   </FormBuilder>
 );

package/src/FieldArray/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All FieldArray 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();
 });

package/src/FieldArray/index.tsx

@@ -7,7 +7,6 @@ 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'];
@@ -19,6 +18,7 @@ export interface FieldArrayProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
@@ -33,36 +33,28 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   setValue,
   layout,
   reset,
+  resetField,
   label,
   Field,
   ...customField
 }) => {
-  const { fields, append, remove } = useFieldArray({
+  const { append, remove } = useFieldArray({
     control,
     name,
   });
-
+  const fields = getValues(name) || [];
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
+      register={register}
+      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_props}>
-          {customField.extra?.label.object?.nothing_added}
-        </Hint>
-      )}
       {customField.extra?.variant === 'dialog' ? (
         <FormDialog
           name={name}
@@ -78,6 +70,8 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           label={label}
           Field={Field}
           reset={reset}
+          resetField={resetField}
+          sortable={customField.extra.sortable}
           {...customField}
         />
       ) : (
@@ -85,7 +79,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           {fields.map((field, index) => (
             <Card
               variant={customField.extra?.border ? 'border' : 'divider'}
-              key={field.id}
+              key={field.id || index}
             >
               <Fieldset>
                 <FieldsetLabel>
@@ -114,19 +108,21 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
               </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>
+          {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>

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,6 +16,7 @@ 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;
@@ -29,6 +30,7 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
   defaultValue,
@@ -39,10 +41,12 @@ 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
@@ -51,10 +55,11 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
           control={control}
           register={register}
           reset={reset}
+          resetField={resetField}
           field={field}
           error={error && error[field.key]}
           formState={formState}
-          defaultValue={defaultValue}
+          defaultValue={defaultValue?.[field.key] || undefined}
           Field={Field}
         />
       ))}
@@ -63,15 +68,16 @@ 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?: FormData | undefined;
   defaultValue?: undefined;
   Field: React.FC<FieldProps>;
 }
@@ -84,6 +90,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   control,
   formState,
   reset,
+  resetField,
   register,
   defaultValue,
   Field,
@@ -93,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}
-      defaultValue={defaultValue}
-    />
-  );
+  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

@@ -22,6 +22,10 @@ test('renders the All FormBuilder 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();
 });

package/src/FormBuilder/index.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { Field } from '@digigov/form/Field';
 import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
 import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
 import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
-import { FormContext } from '@digigov/form/FormContext';
+import { FormContext, useFormContext } from '@digigov/form/FormContext';
 import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
@@ -23,10 +23,11 @@ const FormBase = React.forwardRef(function FormBase(
     mode,
     initial,
     reValidateMode,
-    shouldFocusError,
+    shouldFocusError = true,
     criteriaMode,
     componentRegistry,
     grid,
+    errors,
     ...props
   }: FormBaseProps,
   ref: React.Ref<HTMLFormElement>
@@ -49,6 +50,13 @@ const FormBase = React.forwardRef(function FormBase(
     },
     [onSubmit]
   );
+  useEffect(() => {
+    if (errors) {
+      for (const fieldName in errors) {
+        form.setError(fieldName, errors[fieldName]);
+      }
+    }
+  }, [errors]);
   const submit = form.handleSubmit(handleSubmit);
   const ctx = {
     fieldsMap,
@@ -72,6 +80,7 @@ const FormBase = React.forwardRef(function FormBase(
     formRef: ref,
     submit,
   };
+
   return (
     <FormContext.Provider value={ctx}>
       <Form grid={grid} onSubmit={submit} ref={ref} {...props}>
@@ -118,9 +127,6 @@ const groupFieldsByLayout = (fields) => {
     return sizes;
   }, {});
 };
-const useFormContext = () => {
-  return useContext(FormContext);
-};
 const useFormValues = () => {
   const ctx = useFormContext();
   return ctx.getValues();

package/src/FormBuilder/interaction.test.tsx

@@ -7,6 +7,10 @@ import { ErrorGrouping } from '@digigov/form/FormBuilder/__stories__/ErrorGroupi
 test('renders the ErrorGrouping and click submit', async ({ mount, page }) => {
   await mount(<ErrorGrouping />);
   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);
+
   await page.click('text="Συνέχεια"');
 
   const screenshot = await page.screenshot({
@@ -22,6 +26,10 @@ test('renders the AutoErrorGrouping and click submit', async ({
 }) => {
   await mount(<AutoErrorGrouping />);
   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);
+
   await page.click('text="Συνέχεια"');
 
   const screenshot = await page.screenshot({

package/src/FormBuilder/scenarios.test.tsx

@@ -652,9 +652,9 @@ const el = {
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',
       file_size:
-        'Το μέγεθος του αρχείου είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος του αρχείου είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       image_size:
-        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο απο το επιτρεπόμενο ({{maxSizeToMb}}Mb).',
+        'Το μέγεθος της φωτογραφίας είναι μεγαλύτερο από το επιτρεπόμενο ({{maxSize}} Bytes).',
       mobile_phone: 'Συμπληρώστε έναν έγκυρο αριθμό κινητού τηλεφώνου.',
       phone_number: 'Συμπληρώστε έναν έγκυρο αριθμό τηλεφώνου.',
       landline: 'Συμπληρώστε έναν έγκυρο αριθμό σταθερού τηλεφώνου.',
@@ -1122,7 +1122,7 @@ const inputsScenarios = [
         type: 'error',
         fieldKey: 'image',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 300,
         },
         text: el.form.error.image_size,
       },
@@ -1130,7 +1130,7 @@ const inputsScenarios = [
         type: 'error',
         fieldKey: 'file',
         args: {
-          maxSizeToMb: 0.0003,
+          maxSize: 300,
         },
         text: el.form.error.file_size,
       },
@@ -1462,7 +1462,7 @@ const inputsInputScenarios = [
   {
     title: 'empty fill for inputs Input',
     describe: 'inputs Input scenario',
-    delay: 4_000,
+    delay: 5_000,
     fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [],
     expect: [
@@ -1564,7 +1564,7 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: '23232',
+        value: 'example@mail.',
       },
       {
         fieldKey: 'location',
@@ -1947,7 +1947,7 @@ const scenarios = [
   ...inputsInputScenarios,
 ];
 
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 for (const scenario of scenarios) {
   test.describe(scenario.describe, () => {

package/src/FormContext.tsx

@@ -1,7 +1,11 @@
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { 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

@@ -47,6 +47,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
+  resetField,
   onStash,
   error,
   Field,
@@ -187,6 +188,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        resetField={resetField}
         Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||