@digigov/form 2.0.0-49de50c4 → 2.0.0-555d1027

package/src/FieldArray/__stories__/WithModal.tsx

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

package/src/FieldArray/index.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Controller,
-  ErrorOption,
-  useFieldArray,
-  UseFormReturn,
-} from 'react-hook-form';
+import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
 import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
@@ -23,7 +18,7 @@ export interface FieldArrayProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
-  resetField: UseFormReturn['resetField'];
+  resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
@@ -47,104 +42,90 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
     control,
     name,
   });
-
   const fields = getValues(name) || [];
   return (
-    <Controller
-      render={({ field }) => {
-        return (
-          <FieldBaseContainer
-            label={label}
-            layout={layout}
-            register={register}
-            error={error?.message && error ? error : undefined}
-            hasError={
-              formState.isSubmitted && !formState.isSubmitting && !!error
-            }
-            wrapper="fieldset"
-            name={name}
-            labelSize={customField.extra?.labelSize}
-          >
-            <div tabIndex={-1} ref={field.ref} />
-
-            {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}
-                resetField={resetField}
-                sortable={customField.extra.sortable}
-                {...customField}
-              />
-            ) : (
-              <>
-                {fields.map((field, index) => (
-                  <Card
-                    variant={customField.extra?.border ? 'border' : 'divider'}
-                    key={field.id}
-                  >
-                    <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>
-                ))}
-                {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>
-        );
-      }}
-      control={control}
+    <FieldBaseContainer
+      label={label}
+      layout={layout}
+      register={register}
+      error={error?.message && error ? error : undefined}
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
+      wrapper="fieldset"
       name={name}
-    />
+      labelSize={customField.extra?.labelSize}
+      controlled={true}
+    >
+      {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}
+          resetField={resetField}
+          sortable={customField.extra.sortable}
+          {...customField}
+        />
+      ) : (
+        <>
+          {fields.map((field, index) => (
+            <Card
+              variant={customField.extra?.border ? 'border' : 'divider'}
+              key={field.id || index}
+            >
+              <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>
+          ))}
+          {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/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, useEffect, 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';
@@ -44,7 +44,6 @@ const FormBase = React.forwardRef(function FormBase(
   const handleSubmit = useCallback(
     (data: FormData): void => {
       if (onSubmit) {
-        form.reset(data);
         onSubmit(data);
       }
     },
@@ -53,7 +52,7 @@ const FormBase = React.forwardRef(function FormBase(
   useEffect(() => {
     if (errors) {
       for (const fieldName in errors) {
-        form.setError(fieldName, errors[fieldName], { shouldFocus: true });
+        form.setError(fieldName, errors[fieldName]);
       }
     }
   }, [errors]);
@@ -127,9 +126,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

@@ -1564,7 +1564,7 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: '23232',
+        value: 'example@mail.',
       },
       {
         fieldKey: 'location',

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,
@@ -133,7 +134,6 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
     control,
     register,
     reset,
-    resetField,
     error: needsMoreError,
   } = useField(radioField.key, radioField?.type ? radioField : null);
 

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({
@@ -52,7 +53,6 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     <FieldBaseContainer
       label={label}
       layout={layout}
-      register={register}
       error={
         formState.isSubmitted && !formState.isSubmitting && error?.message
           ? error
@@ -61,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>
@@ -99,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);

package/src/inputs/Checkboxes/index.tsx

@@ -32,14 +32,10 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   const handleChange =
     (optionValue, idx, show) =>
     (evt): void => {
-      let newValue;
+      let newValue: any = [];
       if (evt.currentTarget.checked) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         newValue = value.filter((val) => val !== optionValue);
       }
       if (show && show.length > 0) {
@@ -48,6 +44,9 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
         );
       }
 
+      // reset value to undefined instead of an empty array
+      // so the error state mechanism can throw validation errors
+      if (newValue.length === 0) newValue = undefined;
       onChange(newValue);
     };
   const { t } = useTranslation();

package/src/inputs/DateInput/DateInput.stories.js

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

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

@@ -14,7 +14,7 @@ const fields = [
   } as const,
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder onSubmit={() => console.log('kati')}>
     {fields.map(({ key, ...field }) => {
       return <Field {...field} name={key} key={key} />;

package/src/inputs/DateInput/__stories__/WithDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    defaultValue: '05/11/2020',
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithDefaultValue;

package/src/inputs/DateInput/__stories__/WithInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '05/01/2020' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithInitialValue;