@digigov/form 2.0.0-061795a7 → 2.0.0-0b806366

package/src/FieldArray/index.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import React, { useEffect, useRef } from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
-import { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from '@digigov/form/Field/types';
+import BaseFieldArray from '@digigov/form/FieldArray/BaseFieldArray';
 import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
-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';
+import type { registerFieldFocus } from '@digigov/form/types';
 
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
@@ -19,7 +16,9 @@ export interface FieldArrayProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
+  registerFieldFocus: registerFieldFocus;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -33,38 +32,49 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   setValue,
   layout,
   reset,
+  resetField,
   label,
   Field,
+  registerFieldFocus,
   ...customField
 }) => {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name,
-  });
+  /** The ref of the add-button */
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  // Register the button to be focusable
+  useEffect(() => {
+    let unregister: (name: string) => void = () => {};
+    if (buttonRef.current) {
+      unregister = registerFieldFocus(name, buttonRef.current);
+    }
+
+    return () => {
+      unregister(name);
+    };
+  }, [name, registerFieldFocus]);
+
+  // Clear container error when there are no item errors
+  const hasItemErrors: boolean =
+    !!error && Object.keys(error).some((key) => /^\d+$/.test(key));
+  useEffect(() => {
+    if (!hasItemErrors) clearErrors(name);
+  }, [clearErrors, hasItemErrors, name]);
 
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
-      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
+      register={register}
+      error={error?.message ? error : undefined}
+      hasError={!!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
+          ref={buttonRef}
           name={name}
           trigger={trigger}
           register={register}
@@ -78,56 +88,22 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           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>
-          ))}
-          <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>
-        </>
+        <BaseFieldArray
+          ref={buttonRef}
+          name={name}
+          register={register}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          Field={Field}
+          {...customField}
+        />
       )}
     </FieldBaseContainer>
   );

package/src/FieldObject/index.tsx

@@ -1,14 +1,10 @@
 import React, { useMemo } from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
-import {
-  FIELD_COMPONENTS,
-  ALTERNATIVE_COMPONENTS,
-} from '@digigov/form/Field/utils';
-import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import type { FieldProps } from '@digigov/form/Field/types';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
-import { FieldSpec } from '@digigov/form/types';
+import type { FieldSpec } from '@digigov/form/types';
 import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
@@ -16,9 +12,10 @@ 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;
+  defaultValue?: any;
   Field: React.FC<FieldProps>;
 }
 
@@ -29,6 +26,7 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
   defaultValue,
@@ -39,22 +37,25 @@ 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
-          key={`${name}${field.key ? `.${field.key}` : ''}`}
-          name={`${name}${field.key ? `.${field.key}` : ''}`}
+          key={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
+          name={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
           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 +64,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,28 +86,33 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   control,
   formState,
   reset,
+  resetField,
   register,
   defaultValue,
   Field,
 }) => {
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      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}
-    />
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
+  if (Field) {
+    if (!field.type) {
+      field.type = 'string';
+    }
+    return <Field {...field} name={name} />;
+  } else {
+    const customError = error ? error : formState?.errors[name];
+    return (
+      <FieldBase
+        {...resolvedField}
+        name={name}
+        Field={Field}
+        control={control}
+        reset={reset}
+        resetField={resetField}
+        register={register}
+        error={customError}
+        defaultValue={defaultValue}
+      />
+    );
+  }
 };
 
 export default FieldObject;

package/src/Fieldset/FieldsetWithContext.tsx

@@ -7,7 +7,7 @@ import {
   FieldsetBody,
 } from '@digigov/form/Fieldset/';
 import { FormContext } from '@digigov/form/FormContext';
-import { FieldsetSpec } from '@digigov/form/types';
+import type { FieldsetSpec } from '@digigov/form/types';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export const FieldsetWithContext: React.FC<{ name: string }> = ({ name }) => {

package/src/Fieldset/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {
+import type {
   FieldsetLabelProps,
   FieldsetCaptionProps,
   FieldsetBodyProps,

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
-import { HintProps } from '@digigov/ui/typography/Hint';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

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,12 +4,13 @@ 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" />
-
+<code src="@digigov/form/src/FormBuilder/__stories__/Default.tsx" />
 
 ### Importing and using FormBuilder Component
 
@@ -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();
 });