@digigov/form 2.0.0-a32ad9b2 → 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.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/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/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,
       },
@@ -1564,7 +1564,7 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: '23232',
+        value: 'example@mail.',
       },
       {
         fieldKey: 'location',
@@ -1958,7 +1958,7 @@ for (const scenario of scenarios) {
           auto={true}
           grid={true}
           fields={scenario.fields}
-          onSubmit={() => {}}
+          onSubmit={() => { }}
         />
       );
       await fillFields(page, formBuilder, scenario);

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 ||

package/src/MultiplicityField/index.tsx

@@ -31,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -60,6 +61,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -98,6 +100,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
+        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />

package/src/MultiplicityField/types.ts

@@ -12,6 +12,7 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/Questions/Questions.stories.js

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

package/src/Questions/__stories__/Default.tsx

@@ -75,7 +75,7 @@ const steps = [
   },
 ];
 
-export function Default() {
+export function Default(_: any) {
   return (
     <BasicLayout>
       <Top>

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

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

package/src/inputs/AutoCompleteInput/__stories__/Default.tsx

@@ -29,7 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -29,7 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Multiple = () => (
+export const Multiple = (_: any) => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {

package/src/inputs/Checkboxes/Checkboxes.stories.js

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

package/src/inputs/Checkboxes/__stories__/Conditional.tsx

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

package/src/inputs/Checkboxes/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/__stories__/WithDivider.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const WithDivider = () => (
+export const WithDivider = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);