@digigov/form 0.10.8 → 0.10.10

package/src/Field/FieldBaseContainer.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import FieldContainer from '@digigov/react-core/FieldContainer';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import CoreFieldset from '@digigov/react-core/Fieldset';
+import Hint from '@digigov/react-core/Hint';
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldContainerProps } from '@digigov/form/Field/types';
+import Label from '@digigov/form/inputs/Label';
+
+export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
+  name,
+  wrapper,
+  label,
+  children,
+  error,
+  layout,
+}) => {
+  const { t } = useTranslation();
+  const errorMessage = error?.message.key
+    ? error.message.key
+    : error?.message || '';
+  const errorContext = error?.message.context || {};
+  if (wrapper === 'fieldset') {
+    return (
+      <FieldContainer error={!!error} {...layout}>
+        <CoreFieldset>
+          <FieldsetLegend size="s">{label && label.primary}</FieldsetLegend>
+          {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+          {error && (
+            <ErrorMessage id={`${name}-error`}>
+              {t(errorMessage, errorContext)}
+            </ErrorMessage>
+          )}
+          {children}
+        </CoreFieldset>
+      </FieldContainer>
+    );
+  } else {
+    return (
+      <FieldContainer error={!!error} {...layout}>
+        <LabelContainer>
+          {label && <Label label={label} />}
+          {error && (
+            <ErrorMessage id={`${name}-error`}>
+              {t(errorMessage, errorContext)}
+            </ErrorMessage>
+          )}
+          {children}
+        </LabelContainer>
+      </FieldContainer>
+    );
+  }
+};
+
+export default FieldBaseContainer;

package/src/Field/FieldConditional.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useWatch } from 'react-hook-form';
+import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
+import { FieldBase } from '@digigov/form/Field/FieldBase';
+import {
+  ChildFieldMemoProps,
+  FieldConditionalProps,
+} from '@digigov/form/Field/types';
+
+const ChildFieldMemo = React.memo(
+  function ChildField({
+    dependencies,
+    field,
+    control,
+    reset,
+    register,
+    error,
+  }: ChildFieldMemoProps) {
+    const newField = evaluateFieldWithConditions(
+      field,
+      dependencies as FormData
+    );
+    return (
+      <FieldBase
+        {...newField}
+        name={newField.key}
+        reset={reset}
+        control={control}
+        register={register}
+        error={error}
+      />
+    );
+  },
+  (prev, next) => {
+    if (!prev || !prev.dependencies) {
+      return false;
+    }
+    if (prev.error !== next.error) {
+      return false;
+    }
+    for (const dep in next.dependencies) {
+      if (next.dependencies[dep] !== prev.dependencies[dep]) {
+        return false;
+      }
+    }
+    return true;
+  }
+);
+
+export const FieldConditional: React.FC<FieldConditionalProps> = ({
+  control,
+  field,
+  register,
+  reset,
+  error,
+}) => {
+  const dependencyKeys = Object.keys(field.condition);
+  const variables = useWatch({
+    name: dependencyKeys,
+    control,
+  });
+
+  return (
+    <ChildFieldMemo
+      dependencies={variables}
+      field={field}
+      control={control}
+      register={register}
+      reset={reset}
+      error={error}
+    />
+  );
+};
+
+export default FieldConditional;

package/src/Field/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Form
+parent: docs/form/components
+---
+
+hello md

package/src/Field/index.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { FieldBase } from '@digigov/form/Field/FieldBase';
+import {
+  FieldWithCondition,
+  CalculatedField,
+  FieldProps,
+} from '@digigov/form/Field/types';
+import FieldConditional from '@digigov/form/Field/FieldConditional';
+import { useField, calculateField } from '@digigov/form/Field/utils';
+import FieldArray from '@digigov/form/FieldArray';
+import Multiplicity from '@digigov/form/MultiplicityField';
+
+export const Field: React.FC<FieldProps> = ({
+  name,
+  children,
+  ...customField
+}) => {
+  const {
+    field,
+    control,
+    register,
+    reset,
+    error,
+    componentRegistry,
+    formState,
+    setValue,
+    getValues,
+    unregister,
+    trigger,
+    clearErrors,
+  } = useField(name, customField?.type ? customField : null);
+  const calculatedField: CalculatedField = useMemo(
+    () => calculateField(children, field, componentRegistry),
+    [field]
+  );
+
+  if (calculatedField.condition) {
+    return (
+      <FieldConditional
+        control={control}
+        reset={reset}
+        register={register}
+        field={calculatedField as FieldWithCondition}
+        error={error}
+      />
+    );
+  }
+  if (calculatedField.type === 'array' && !calculatedField.multiplicity) {
+    calculatedField.name = name;
+    return (
+      <FieldArray
+        control={control}
+        register={register}
+        error={error}
+        formState={formState}
+        {...calculatedField}
+      />
+    );
+  }
+  if (
+    calculatedField.type === 'array' &&
+    calculatedField.multiplicity === true
+  ) {
+    calculatedField.name = name;
+    return (
+      <Multiplicity
+        control={control}
+        register={register}
+        trigger={trigger}
+        clearErrors={clearErrors}
+        error={error}
+        formState={formState}
+        setValue={setValue}
+        getValues={getValues}
+        unregister={unregister}
+        {...calculatedField}
+      />
+    );
+  }
+  return (
+    <FieldBase
+      {...calculatedField}
+      name={name}
+      control={control}
+      register={register}
+      reset={reset}
+      error={error}
+    />
+  );
+};
+
+export default Field;

package/src/Field/types.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldSpec } from '@digigov/form/types';
+import { FieldCondition, FormData } from '@digigov/form/types';
+
+export interface ChildFieldMemoProps extends FieldConditionalProps {
+  dependencies: FormData;
+}
+
+export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
+  condition: Record<string, FieldCondition>;
+}
+
+export interface FieldConditionalProps {
+  field: FieldWithCondition;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  reset: UseFormReturn['reset'];
+  error?: ErrorOption;
+}
+
+export type FieldComponentItem = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: any;
+  controlled?: boolean;
+  wrapper?: FieldSpec['wrapper'];
+};
+
+export interface FieldContainerProps {
+  name?: FieldSpec['key'];
+  layout?: FieldSpec['layout'];
+  label?: FieldSpec['label'];
+  error?: ErrorOption | Record<string, any>;
+  children?: React.ReactNode;
+  wrapper?: FieldSpec['wrapper'];
+}
+
+export type FieldComponentRegistry = Record<string, FieldComponentItem>;
+
+export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
+
+export type UnknownValue = never | never[];
+
+export interface ControlledFieldProps {
+  type?: string;
+  value: UnknownValue;
+  onChange: (v: UnknownValue) => void;
+  defaultValue?: UnknownValue;
+  onBlur?: (e: Event) => void;
+  extra?: never;
+  error?: boolean;
+  name?: string;
+  disabled?: boolean;
+}
+
+export interface UncontrolledFieldProps {
+  name: string;
+  register: FieldBaseProps['register'];
+  control?: FieldBaseProps['control'];
+  error?: boolean;
+  extra?: Record<string, never>;
+  type?: string;
+  disabled?: boolean;
+}
+
+export interface CalculatedField extends OmittedFieldSpec {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: any;
+  defaultValue?: never;
+  error?: ErrorOption;
+  wrapper?: FieldComponentItem['wrapper'];
+  multiplicity?: boolean;
+}
+
+export interface FieldBaseProps extends CalculatedField {
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  reset: UseFormReturn['reset'];
+}
+
+export interface FieldProps extends FieldSpec {
+  name: string;
+  children?: React.ReactNode;
+}
+
+export interface UseFieldProps {
+  field: FieldSpec;
+  control: FieldBaseProps['control'];
+  register: FieldBaseProps['register'];
+  reset: FieldBaseProps['reset'];
+  watch: UseFormReturn['watch'];
+  formState: UseFormReturn['formState'];
+  getFieldState: UseFormReturn['getFieldState'];
+  setValue: UseFormReturn['setValue'];
+  getValues: UseFormReturn['getValues'];
+  unregister: UseFormReturn['unregister'];
+  trigger: UseFormReturn['trigger'];
+  clearErrors: UseFormReturn['clearErrors'];
+  error?: ErrorOption;
+  componentRegistry?: FieldComponentRegistry;
+}

package/src/Field/utils.ts

@@ -0,0 +1,164 @@
+import { lazy, useContext, useMemo } from 'react';
+import {
+  CalculatedField,
+  FieldComponentRegistry,
+  FieldProps,
+  FieldWithCondition,
+  UseFieldProps,
+} from '@digigov/form/Field/types';
+import { FieldSpec } from '@digigov/form/types';
+
+import Input from '@digigov/form/inputs/Input';
+import Checkboxes from '@digigov/form/inputs/Checkboxes';
+import Radio from '@digigov/form/inputs/Radio';
+import Select from '@digigov/form/inputs/Select';
+import FileInput from '@digigov/form/inputs/FileInput';
+import DateInput from '@digigov/form/inputs/DateInput';
+import { FormContext } from '@digigov/form/FormContext';
+const AutoComplete = lazy(() => import('@digigov/form/inputs/AutoComplete'));
+
+const FIELD_COMPONENTS: FieldComponentRegistry = {
+  text: {
+    component: Input,
+  },
+  string: {
+    component: Input,
+  },
+  file: {
+    wrapper: 'fieldset',
+    component: FileInput,
+  },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput,
+  },
+  'choice:multiple': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: Checkboxes,
+  },
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: false,
+    component: Radio,
+  },
+};
+
+const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
+  Select: {
+    component: Select,
+    controlled: false,
+  },
+  AutoComplete: {
+    component: AutoComplete,
+    controlled: true,
+  },
+};
+
+export function calculateField(
+  children: FieldProps['children'],
+  field: FieldSpec,
+  componentRegistry?: FieldComponentRegistry
+): CalculatedField {
+  const calculatedField = { ...field };
+  const fieldComponentRegistry = { ...FIELD_COMPONENTS, ...componentRegistry };
+  if (children) {
+    calculatedField.component = children;
+    calculatedField.controlled = true;
+  } else if (typeof field.component === 'function') {
+    // leave as is
+  } else if (!field.component && !field.type) {
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled =
+      fieldComponentRegistry.string?.controlled || false;
+  } else if (
+    typeof field?.extra?.component === 'string' &&
+    ALTERNATIVE_COMPONENTS[field.extra.component]
+  ) {
+    calculatedField.controlled =
+      ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
+    calculatedField.component =
+      ALTERNATIVE_COMPONENTS[field.extra.component].component;
+  } else if (
+    !field.component &&
+    field.type &&
+    fieldComponentRegistry[field.type]
+  ) {
+    calculatedField.component = fieldComponentRegistry[field.type].component;
+    calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
+    calculatedField.controlled =
+      fieldComponentRegistry[field.type]?.controlled || false;
+  } else {
+    calculatedField.component = fieldComponentRegistry.string.component;
+    calculatedField.controlled =
+      fieldComponentRegistry.string?.controlled || false;
+  }
+  return calculatedField as CalculatedField;
+}
+
+export const useField = (
+  name: string,
+  customField: FieldSpec | null
+): UseFieldProps => {
+  const {
+    fieldsMap,
+    control,
+    register,
+    reset,
+    trigger,
+    clearErrors,
+    errors,
+    registerField,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    getValues,
+    unregister,
+    formState,
+  } = useContext(FormContext);
+  useMemo(
+    () => customField?.type && registerField({ ...customField, key: name }),
+    [customField, name, registerField]
+  );
+  return {
+    field: customField || fieldsMap[name],
+    control,
+    register,
+    reset,
+    trigger,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    clearErrors,
+    getValues,
+    unregister,
+    formState,
+    error: errors[name],
+  };
+};
+
+export function evaluateFieldWithConditions(
+  field: FieldWithCondition,
+  variables: FormData
+): CalculatedField {
+  const newField = { ...field };
+  if (variables) {
+    for (const key in variables) {
+      if (field.condition[key] && field.condition[key].is === variables[key]) {
+        const then = field.condition[key].then || {};
+        for (const attr in then) {
+          newField[attr] = then[attr];
+        }
+      } else if (field.condition[key]) {
+        const otherwise = field.condition[key].else || {};
+        for (const attr in otherwise) {
+          newField[attr] = otherwise[attr];
+        }
+      }
+    }
+  }
+  return newField;
+}

package/src/FieldArray/FieldArray.stories.js

@@ -0,0 +1,8 @@
+import FieldArray from '@digigov/form/FieldArray';
+export default {
+  title: 'Digigov Form/FieldArray',
+  component: FieldArray,
+  displayName: 'FieldArray'
+};
+export * from '@digigov/form/FieldArray/__stories__/Default';
+export * from '@digigov/form/FieldArray/__stories__/WithExactLength';