@digigov/form 2.0.0-a32ad9b2 → 2.0.0-abd768eb

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
@@ -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,55 @@ 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) || [];
+
+  /** The ref of the FieldBaseContainer. */
+  const containerRef = useRef<HTMLFieldSetElement | null>(null);
+
+  const { errors } = formState;
+
+  // Focus the fieldset when there are errors related to this field array
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const fieldErrors = Object.keys(errors);
+    // no errors
+    if (!fieldErrors.length) return;
+
+    if (
+      // Check if there are errors related to the current field array
+      fieldErrors.some((key) => {
+        const fieldArrayName = key.split('.')[0];
+        return fieldArrayName === name;
+      })
+    ) {
+      if (containerRef.current && errors[name]) {
+        containerRef.current.focus();
+      }
+    }
+  }, [errors, name]);
 
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
+      register={register}
+      ref={containerRef}
+      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 +97,8 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           label={label}
           Field={Field}
           reset={reset}
+          resetField={resetField}
+          sortable={customField.extra.sortable}
           {...customField}
         />
       ) : (
@@ -85,7 +106,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 +135,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>
@@ -43,12 +44,18 @@ const FormBase = React.forwardRef(function FormBase(
   const handleSubmit = useCallback(
     (data: FormData): void => {
       if (onSubmit) {
-        form.reset(data);
         onSubmit(data);
       }
     },
     [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 +79,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 +126,6 @@ const groupFieldsByLayout = (fields) => {
     return sizes;
   }, {});
 };
-const useFormContext = () => {
-  return useContext(FormContext);
-};
 const useFormValues = () => {
   const ctx = useFormContext();
   return ctx.getValues();