@digigov/form 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/src/Field/FieldConditional.tsx

@@ -5,7 +5,7 @@ import {
   ChildFieldMemoProps,
   FieldConditionalProps,
 } from '@digigov/form/Field/types';
-import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
+import { evaluateFieldWithConditions } from '@digigov/form/Field/utils/evaluateFieldWithConditions';
 
 const ChildFieldMemo = React.memo(
   function ChildField({
@@ -15,6 +15,7 @@ const ChildFieldMemo = React.memo(
     reset,
     register,
     error,
+    Field
   }: ChildFieldMemoProps) {
     const newField = evaluateFieldWithConditions(
       field,
@@ -23,6 +24,7 @@ const ChildFieldMemo = React.memo(
     return (
       <FieldBase
         {...newField}
+        Field={Field}
         name={newField.key}
         reset={reset}
         control={control}
@@ -53,6 +55,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
   register,
   reset,
   error,
+  Field
 }) => {
   const dependencyKeys = Object.keys(field.condition);
   const dependencyValues = useWatch({
@@ -74,6 +77,7 @@ export const FieldConditional: React.FC<FieldConditionalProps> = ({
       register={register}
       reset={reset}
       error={error}
+      Field={Field}
     />
   );
 };

package/src/Field/index.tsx

@@ -6,12 +6,17 @@ import {
   CalculatedField,
   FieldProps,
 } from '@digigov/form/Field/types';
-import { useField, calculateField } from '@digigov/form/Field/utils';
+import {
+  FIELD_COMPONENTS,
+  ALTERNATIVE_COMPONENTS,
+} from '@digigov/form/Field/utils';
+import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import { useField } from '@digigov/form/Field/utils/useField';
 import FieldArray from '@digigov/form/FieldArray';
 import Multiplicity from '@digigov/form/MultiplicityField';
-
 export const Field: React.FC<FieldProps> = ({
   name,
+  disabled,
   children,
   ...customField
 }) => {
@@ -30,7 +35,16 @@ export const Field: React.FC<FieldProps> = ({
     clearErrors,
   } = useField(name, customField?.type ? customField : null);
   const calculatedField: CalculatedField = useMemo(
-    () => calculateField(children, field, componentRegistry),
+    () =>
+      calculateField(
+        children,
+        field,
+        {
+          ...FIELD_COMPONENTS,
+          ...componentRegistry,
+        },
+        ALTERNATIVE_COMPONENTS
+      ),
     [field]
   );
 
@@ -42,6 +56,7 @@ export const Field: React.FC<FieldProps> = ({
         register={register}
         field={calculatedField as FieldWithCondition}
         error={error}
+        Field={Field}
       />
     );
   }
@@ -53,6 +68,7 @@ export const Field: React.FC<FieldProps> = ({
         register={register}
         error={error}
         formState={formState}
+        Field={Field}
         {...calculatedField}
       />
     );
@@ -73,6 +89,7 @@ export const Field: React.FC<FieldProps> = ({
         setValue={setValue}
         getValues={getValues}
         unregister={unregister}
+        Field={Field}
         {...calculatedField}
       />
     );
@@ -81,10 +98,12 @@ export const Field: React.FC<FieldProps> = ({
     <FieldBase
       {...calculatedField}
       name={name}
+      disabled={disabled}
       control={control}
       register={register}
       reset={reset}
       error={error}
+      Field={Field}
     />
   );
 };

package/src/Field/types.tsx

@@ -1,11 +1,72 @@
 import React from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/types';
-import { FieldCondition, FormData } from '@digigov/form/types';
+import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { GridProps } from '@digigov/ui/layouts/Grid';
 
+export type FieldLabelProps = {
+  primary?: string;
+  secondary?: string;
+  hint?: string;
+};
+
+export interface FieldSpec {
+  key: string; // !TODO rename key to name;
+  type?:
+    | 'int'
+    | 'string'
+    | 'text'
+    | 'boolean'
+    | 'email'
+    | 'uuid4'
+    | 'choice:multiple'
+    | 'choice:single'
+    | 'mobile_phone'
+    | 'date'
+    | 'otp'
+    | 'afm'
+    | 'iban'
+    | 'file'
+    | 'image'
+    | 'postal_code'
+    | 'phone_number'
+    | 'array'
+    | 'object';
+  component?: any;
+  maxLength?: number;
+  condition?: Record<string, FieldCondition>;
+  controlled?: boolean;
+  label?: FieldLabelProps;
+  extra?: {
+    [key: string]: any;
+  };
+  editable?: boolean;
+  required?: boolean;
+  enabled?: boolean;
+  disabled?: boolean;
+  layout?: Record<
+    string,
+    | GridProps['xs']
+    | GridProps['sm']
+    | GridProps['md']
+    | GridProps['lg']
+    | GridProps['xl']
+  >;
+  validators?: ValidatorSchema[];
+  wrapper?: 'label' | 'fieldset';
+  maxWidth?: string;
+  maxHeight?: string;
+  width?: string;
+}
+
+export interface FieldCondition {
+  is: string | string[] | number | number[] | boolean | boolean[];
+  then?: Partial<FieldSpec>;
+  else?: Partial<FieldSpec>;
+}
 export interface ChildFieldMemoProps extends FieldConditionalProps {
   dependencies: FormData;
 }
+export type FormData = UseFormProps['defaultValues'];
 
 export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
   condition: Record<string, FieldCondition>;
@@ -17,6 +78,7 @@ export interface FieldConditionalProps {
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
 export type FieldComponentItem = {
@@ -51,6 +113,7 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
 }
 
 export interface UncontrolledFieldProps {
@@ -61,6 +124,7 @@ export interface UncontrolledFieldProps {
   extra?: Record<string, never>;
   type?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
 }
 
 export interface CalculatedField extends OmittedFieldSpec {
@@ -77,6 +141,7 @@ export interface FieldBaseProps extends CalculatedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  Field: React.FC<FieldProps>;
 }
 
 export interface FieldProps extends FieldSpec {

package/src/Field/utils/calculateField.ts

@@ -0,0 +1,49 @@
+import {
+  FieldProps,
+  FieldSpec,
+  FieldComponentRegistry,
+  CalculatedField,
+} from '@digigov/form/Field/types';
+
+export function calculateField(
+  children: FieldProps['children'],
+  field: FieldSpec,
+  fieldComponentRegistry: FieldComponentRegistry,
+  alternativeComponents: FieldComponentRegistry
+): CalculatedField {
+  const calculatedField = { ...field };
+  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' &&
+    alternativeComponents[field.extra.component]
+  ) {
+    calculatedField.controlled =
+      alternativeComponents[field.extra.component]?.controlled || false;
+    calculatedField.component =
+      alternativeComponents[field.extra.component].component;
+    calculatedField.wrapper =
+      alternativeComponents[field.extra.component].wrapper;
+  } 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;
+}

package/src/Field/utils/evaluateFieldWithConditions.ts

@@ -0,0 +1,30 @@
+import { FieldWithCondition, CalculatedField } from '@digigov/form/Field/types';
+
+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) {
+        const is = field.condition[key].is;
+        if (
+          is === variables[key] ||
+          (Array.isArray(variables[key]) && variables[key].includes(is))
+        ) {
+          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/Field/utils/index.ts

@@ -0,0 +1,76 @@
+import { FieldComponentRegistry } from '@digigov/form/Field/types';
+import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
+import Checkboxes from '@digigov/form/inputs/Checkboxes';
+import DateInput from '@digigov/form/inputs/DateInput';
+import FileInput from '@digigov/form/inputs/FileInput';
+import ImageInput from '@digigov/form/inputs/ImageInput';
+import Input from '@digigov/form/inputs/Input';
+import OtpInput from '@digigov/form/inputs/OtpInput';
+import Radio, { ControlledRadioButtonsGroup } from '@digigov/form/inputs/Radio';
+import Select from '@digigov/form/inputs/Select';
+
+export const FIELD_COMPONENTS: FieldComponentRegistry = {
+  text: {
+    component: Input,
+  },
+  string: {
+    component: Input,
+  },
+  file: {
+    wrapper: 'fieldset',
+    component: FileInput,
+  },
+  image: {
+    wrapper: 'fieldset',
+    component: ImageInput,
+  },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput,
+  },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: OtpInput,
+  },
+  'choice:multiple': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: Checkboxes,
+  },
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: false,
+    component: Radio,
+  },
+};
+
+export const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
+  Select: {
+    component: Select,
+    controlled: false,
+  },
+  AutoComplete: {
+    component: AutoCompleteInput,
+    controlled: true,
+    wrapper: 'fieldset',
+  },
+};
+
+export const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry = {
+  ...FIELD_COMPONENTS,
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: ControlledRadioButtonsGroup,
+  },
+  text: {
+    component: Input,
+    controlled: true,
+  },
+  string: {
+    component: Input,
+    controlled: true,
+  },
+};

package/src/Field/utils/useField.ts

@@ -0,0 +1,54 @@
+import { useContext, useMemo } from 'react';
+import { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
+import { FormContext } from '@digigov/form/FormContext';
+
+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);
+
+  if (!registerField) {
+    throw new Error(`
+      You can't use the Field component without wrapping it in FormBuilder.
+      https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/
+    `);
+  }
+
+  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],
+  };
+};

package/src/FieldArray/FieldArray.stories.js

@@ -4,5 +4,5 @@ export default {
   component: FieldArray,
   displayName: 'FieldArray',
 };
-export * from '@digigov/form/FieldArray/__stories__/Default';
-export * from '@digigov/form/FieldArray/__stories__/WithExactLength';
+export { Default } from '@digigov/form/FieldArray/__stories__/Default';
+export { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';

package/src/FieldArray/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/form/FieldArray/__stories__/Default';
+import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+
+test('renders the All FieldArray variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithExactLength">
+      <WithExactLength />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/FieldArray/index.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
-import FieldObject from '@digigov/form/FieldObject';
+import { FieldObject } from '@digigov/form/FieldObject';
 import { FieldsetLabel } from '@digigov/form/Fieldset';
-import Fieldset from '@digigov/react-core/Fieldset';
-import { Button, Card, Hint } from '@digigov/ui';
+import { 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'];
   register: UseFormReturn['register'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -20,6 +24,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   error,
   layout,
   label,
+  Field,
   ...customField
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -28,7 +33,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   });
 
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -58,9 +63,15 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
               register={register}
               control={control}
               {...customField.extra?.of}
+              Field={Field}
             />
-            <Button type="button" color="warning" onClick={() => remove(index)}>
-              Remove
+            <Button
+              name={`${name}-object-remove`}
+              type="button"
+              color="warning"
+              onClick={() => remove(index)}
+            >
+              {customField.extra?.label.object?.delete}
             </Button>
           </Fieldset>
         </Card>
@@ -68,6 +79,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
 
       <Button
         type="button"
+        name={`${name}-add-object`}
         color="secondary"
         onClick={(ev) => {
           ev.preventDefault();
@@ -76,7 +88,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
       >
         {customField.extra?.label.object?.add}
       </Button>
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/FieldObject/index.tsx

@@ -2,10 +2,14 @@ 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 { calculateField } from '@digigov/form/Field/utils';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
+import {
+  FIELD_COMPONENTS,
+  ALTERNATIVE_COMPONENTS,
+} from '@digigov/form/Field/utils';
+import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
@@ -14,6 +18,7 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
 export const FieldObject: React.FC<FieldObjectProps> = ({
@@ -24,6 +29,8 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   register,
   reset,
   formState,
+  error,
+  Field,
 }) => {
   const { t } = useTranslation();
 
@@ -43,8 +50,9 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
           register={register}
           reset={reset}
           field={field}
-          error={formState.errors && formState.errors[field.key]}
+          error={error && error[field.key]}
           formState={formState}
+          Field={Field}
         />
       ))}
     </Fieldset>
@@ -59,6 +67,8 @@ export interface FieldObjectItemProps {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  children?: React.ReactNode;
+  Field: React.FC<FieldProps>;
 }
 
 const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
@@ -70,9 +80,11 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   formState,
   reset,
   register,
+  Field,
 }) => {
   const calculatedField: CalculatedField = useMemo(
-    () => calculateField(children, field),
+    () =>
+      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
     [field]
   );
 
@@ -81,6 +93,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
     <FieldBase
       {...calculatedField}
       name={name}
+      Field={Field}
       control={control}
       reset={reset}
       register={register}

package/src/Fieldset/index.tsx

@@ -4,11 +4,11 @@ import {
   FieldsetCaptionProps,
   FieldsetBodyProps,
 } from '@digigov/form/Fieldset/types';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import Grid from '@digigov/ui/layouts/Grid';
-import NormalText from '@digigov/ui/typography/NormalText';
+import { Fieldset } from '@digigov/react-core/Fieldset';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Grid } from '@digigov/ui/layouts/Grid';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
   children,

package/src/Fieldset/types.tsx

@@ -1,6 +1,8 @@
-import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
-import { HintProps } from '@digigov/react-core/Hint';
+import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}
-export interface FieldsetBodyProps {}
+export interface FieldsetBodyProps {
+  children?: React.ReactNode;
+}

package/src/FormBuilder/FormBuilder.stories.js

@@ -4,4 +4,4 @@ export default {
   component: FormBuilder,
   displayName: 'FormBuilder',
 };
-export * from '@digigov/form/FormBuilder/__stories__/Default';
+export { Default } from '@digigov/form/FormBuilder/__stories__/Default';