@digigov/form 2.0.0-8de46296 → 2.0.0-a0ac149e

package/src/Field/types.tsx

@@ -1,13 +1,81 @@
-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 type React from 'react';
+import type { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
+import type { FieldComponentRegistry } from '@digigov/form/inputs/registry';
+import type { registerFieldFocus } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { GridProps } from '@digigov/ui/layouts/Grid';
 
+export interface 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'
+    | 'datetime'
+    | 'otp'
+    | 'afm'
+    | 'amka'
+    | 'iban'
+    | 'file'
+    | 'image'
+    | 'postal_code'
+    | 'phone_number'
+    | 'array'
+    | 'object';
+  trim?: boolean;
+  component?: any;
+  autoComplete?: string;
+  placeholder?: string;
+  maxLength?: number;
+  condition?: Record<string, FieldCondition>;
+  controlled?: boolean;
+  label?: FieldLabelProps;
+  extra?: Record<string, any>;
+  editable?: boolean;
+  variant?: 'inline' | 'dialog';
+  required?: boolean;
+  enabled?: boolean;
+  disabled?: boolean; // TODO: keep disabled or editable
+  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'> {
+export interface FieldWithCondition extends Omit<ResolvedField, 'condition'> {
   condition: Record<string, FieldCondition>;
 }
 
@@ -16,29 +84,31 @@ export interface FieldConditionalProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
+  Field: React.FC<FieldProps>;
 }
 
-export type FieldComponentItem = {
+export interface FieldComponentItem {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
   controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
-};
+}
 
 export interface FieldContainerProps {
   name?: FieldSpec['key'];
+  register: FieldBaseProps['register'];
   layout?: FieldSpec['layout'];
   label?: FieldSpec['label'];
   error?: ErrorOption | Record<string, any>;
+  hasError?: boolean;
   children?: React.ReactNode;
+  controlled?: boolean;
   wrapper?: FieldSpec['wrapper'];
+  labelSize?: FieldsetLegendProps['size'];
 }
 
-export type FieldComponentRegistry = Record<string, FieldComponentItem>;
-
-export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
-
 export type UnknownValue = never | never[];
 
 export interface ControlledFieldProps {
@@ -51,6 +121,7 @@ export interface ControlledFieldProps {
   error?: boolean;
   name?: string;
   disabled?: boolean;
+  Field?: React.FC<FieldProps>;
 }
 
 export interface UncontrolledFieldProps {
@@ -61,9 +132,10 @@ export interface UncontrolledFieldProps {
   extra?: Record<string, never>;
   type?: string;
   disabled?: boolean;
+  Field: React.FC<FieldProps>;
 }
 
-export interface CalculatedField extends OmittedFieldSpec {
+export interface ResolvedField extends Omit<FieldSpec, 'component'> {
   name: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
@@ -73,10 +145,12 @@ export interface CalculatedField extends OmittedFieldSpec {
   multiplicity?: boolean;
 }
 
-export interface FieldBaseProps extends CalculatedField {
+export interface FieldBaseProps extends ResolvedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
+  Field?: React.FC<FieldProps>;
 }
 
 export interface FieldProps extends FieldSpec {
@@ -89,6 +163,7 @@ export interface UseFieldProps {
   control: FieldBaseProps['control'];
   register: FieldBaseProps['register'];
   reset: FieldBaseProps['reset'];
+  resetField: FieldBaseProps['resetField'];
   watch: UseFormReturn['watch'];
   formState: UseFormReturn['formState'];
   getFieldState: UseFormReturn['getFieldState'];
@@ -98,5 +173,6 @@ export interface UseFieldProps {
   trigger: UseFormReturn['trigger'];
   clearErrors: UseFormReturn['clearErrors'];
   error?: ErrorOption;
+  registerFieldFocus: registerFieldFocus;
   componentRegistry?: FieldComponentRegistry;
 }

package/src/Field/utils/evaluateFieldWithConditions.ts

@@ -0,0 +1,33 @@
+import type {
+  FieldWithCondition,
+  ResolvedField,
+} from '@digigov/form/Field/types';
+
+export function evaluateFieldWithConditions(
+  field: FieldWithCondition,
+  variables: FormData
+): ResolvedField {
+  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/resolveField.ts

@@ -0,0 +1,58 @@
+import type {
+  FieldProps,
+  FieldSpec,
+  ResolvedField,
+} from '@digigov/form/Field/types';
+import {
+  ALTERNATIVE_COMPONENTS,
+  FIELD_COMPONENTS,
+  type FieldComponentRegistry,
+} from '@digigov/form/inputs/registry';
+
+export function resolveField(
+  children: FieldProps['children'],
+  field: FieldSpec,
+  customComponentRegistry?: FieldComponentRegistry
+): ResolvedField {
+  const fieldComponentRegistry = {
+    ...FIELD_COMPONENTS,
+    ...(customComponentRegistry ?? {}),
+  };
+
+  const resolvedField = { ...field };
+
+  if (children) {
+    resolvedField.component = children;
+    resolvedField.controlled = true;
+  } else if (typeof field.component === 'function') {
+    // leave as is
+  } else if (!field.component && !field.type) {
+    resolvedField.component = fieldComponentRegistry.string.component;
+    resolvedField.controlled =
+      fieldComponentRegistry.string?.controlled || false;
+  } else if (
+    typeof field?.extra?.component === 'string' &&
+    ALTERNATIVE_COMPONENTS[field.extra.component]
+  ) {
+    resolvedField.controlled =
+      ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
+    resolvedField.component =
+      ALTERNATIVE_COMPONENTS[field.extra.component].component;
+    resolvedField.wrapper =
+      ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
+  } else if (
+    !field.component &&
+    field.type &&
+    fieldComponentRegistry[field.type]
+  ) {
+    resolvedField.component = fieldComponentRegistry[field.type].component;
+    resolvedField.wrapper = fieldComponentRegistry[field.type].wrapper;
+    resolvedField.controlled =
+      fieldComponentRegistry[field.type]?.controlled || false;
+  } else {
+    resolvedField.component = fieldComponentRegistry.string.component;
+    resolvedField.controlled =
+      fieldComponentRegistry.string?.controlled || false;
+  }
+  return resolvedField as ResolvedField;
+}

package/src/Field/utils/useField.ts

@@ -0,0 +1,68 @@
+import { useContext, useMemo } from 'react';
+import type { 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,
+    resetField,
+    trigger,
+    clearErrors,
+    errors,
+    registerField,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    getValues,
+    unregister,
+    formState,
+    registerFieldFocus,
+  } = 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/
+    `);
+  }
+  let error = errors[name];
+
+  const nameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\]*$/);
+  if (nameIndexRegex) {
+    const [, fieldArrayName, indexStr] = nameIndexRegex;
+    error = errors[fieldArrayName]?.[Number(indexStr)];
+  }
+  const nestedNameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\.(.*?)\]*$/);
+  if (nestedNameIndexRegex) {
+    const [, fieldArrayName, indexStr, fieldItemName] = nestedNameIndexRegex;
+    error = errors[fieldArrayName]?.[Number(indexStr)]?.[fieldItemName];
+  }
+  useMemo(
+    () => customField?.type && registerField({ ...customField, key: name }),
+    [customField, name, registerField]
+  );
+  return {
+    field: customField || fieldsMap[name],
+    control,
+    register,
+    reset,
+    resetField,
+    trigger,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    clearErrors,
+    getValues,
+    unregister,
+    formState,
+    error,
+    registerFieldFocus,
+  };
+};

package/src/FieldArray/BaseFieldArray.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldArrayProps } from '@digigov/form/FieldArray';
+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';
+
+type BaseFieldArrayProps = Omit<
+  FieldArrayProps,
+  | 'registerFieldFocus'
+  | 'trigger'
+  | 'clearErrors'
+  | 'setValue'
+  | 'reset'
+  | 'resetField'
+>;
+export const BaseFieldArray = React.forwardRef<
+  HTMLButtonElement,
+  BaseFieldArrayProps
+>(
+  (
+    {
+      name,
+      register,
+      control,
+      formState,
+      error,
+      getValues,
+      Field,
+      ...customField
+    },
+    ref
+  ) => {
+    const { append, remove } = useFieldArray({
+      control,
+      name,
+    });
+    const fields = getValues(name) || [];
+
+    return (
+      <>
+        {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 ? ' ' + String(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
+            ref={ref}
+            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.displayName = 'BaseFieldArray';
+
+export default BaseFieldArray;

package/src/FieldArray/FieldArray.stories.js

@@ -4,5 +4,6 @@ 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 { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
+export { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayDisplay.stories.js

@@ -0,0 +1,11 @@
+import ArrayDisplay from '@digigov/form/FieldArray/FormDialog/ArrayDisplay';
+
+export default {
+  title: 'Digigov Form/FieldArray/FormDialog/ArrayDisplay',
+  component: ArrayDisplay,
+  displayName: 'ArrayDisplay',
+};
+
+export { Default } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Default';
+export { Sortable } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Sortable';
+export { ReadOnly } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnly';

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+import { TableDataCell, TableRow } from '@digigov/ui/content';
+import { Button } from '@digigov/ui/form/Button';
+import type { StackProps } from '@digigov/ui/layouts';
+import { Grid, Stack } from '@digigov/ui/layouts';
+import Heading from '@digigov/ui/typography/Heading';
+
+export interface ArrayItemDisplayProps {
+  data: any;
+  name: string;
+  edit: (name: string) => void;
+  remove: (name: string) => void;
+  disabledEdit?: boolean;
+  disabledDelete?: boolean;
+  disabled?: boolean;
+  sortable: boolean;
+  index: number;
+  isFirst: boolean;
+  isLast: boolean;
+  move: UseFieldArrayMove;
+  valueDisplay?: (value) => React.ReactNode;
+  border: boolean;
+  wordBreak?: 'break-all' | 'none';
+  stackProps?: StackProps;
+}
+
+export const ArrayItemDisplay = ({
+  name,
+  data,
+  edit,
+  remove,
+  disabledEdit,
+  disabledDelete,
+  disabled,
+  sortable,
+  index,
+  isFirst,
+  isLast,
+  move,
+  valueDisplay,
+  border = true,
+  wordBreak = 'break-all',
+  stackProps = {
+    spacing: 4,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    direction: 'column',
+  },
+}: ArrayItemDisplayProps) => {
+  if (data === undefined || data === null) {
+    return null;
+  }
+  if (
+    Object.keys(data).length === 0 ||
+    (Object.keys(data).length === 1 && data.id)
+  ) {
+    return null;
+  }
+  delete data.id;
+  const values: (string | Record<string, any>)[] =
+    typeof data === 'string' ? [data] : Object.values(data || {});
+  const borderVariant = border === false || sortable ? 'none' : 'border';
+  return (
+    <>
+      <TableRow>
+        {values?.map?.((value, valueIndex) => {
+          return (
+            <TableDataCell
+              key={valueIndex}
+              variant={borderVariant}
+              wordBreak={wordBreak}
+              pb={sortable ? 0 : undefined}
+              pt={sortable ? 4 : undefined}
+            >
+              {sortable && valueIndex === 0 && (
+                <Heading size="sm" className="mb-2">
+                  Επιλογή #{index + 1}
+                </Heading>
+              )}
+              {(value as Record<string, any>)?.name ||
+                (Array.isArray(value)
+                  ? value.join('\n')
+                  : valueDisplay
+                    ? valueDisplay(value)
+                    : value) ||
+                ''}
+            </TableDataCell>
+          );
+        })}
+        {disabled === true ||
+        (disabledEdit === true && disabledDelete === true) ? null : (
+          <TableDataCell variant={borderVariant}>
+            <Stack {...stackProps}>
+              {disabledEdit !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => {
+                    edit(name);
+                  }}
+                >
+                  Επεξεργασία
+                </Button>
+              )}
+              {disabledDelete !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => remove(name)}
+                >
+                  Διαγραφή
+                </Button>
+              )}
+            </Stack>
+          </TableDataCell>
+        )}
+      </TableRow>
+      {sortable && (
+        <TableRow>
+          <TableDataCell
+            variant={isLast ? 'none' : 'border'}
+            colSpan={
+              disabled === true ||
+              (disabledEdit === true && disabledDelete === true)
+                ? values.length
+                : values.length + 1
+            }
+          >
+            {sortable && !disabled && !(isFirst && isLast) && (
+              <Grid xs={12} mt={2}>
+                Μετακίνηση{' '}
+                {!isFirst && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index - 1)}
+                    >
+                      πάνω
+                    </Button>
+                  </>
+                )}
+                {!isFirst && !isLast && ' ή '}
+                {!isLast && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index + 1)}
+                    >
+                      κάτω
+                    </Button>
+                  </>
+                )}
+              </Grid>
+            )}
+          </TableDataCell>
+        </TableRow>
+      )}
+    </>
+  );
+};

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableHead, TableHeadCell, TableRow } from '@digigov/ui/content';
+
+export const ArrayItemHeader = ({ labels, disabled }) => {
+  return (
+    <TableHead>
+      <TableRow>
+        {labels.map((label, index) => {
+          return <TableHeadCell key={index}>{label}</TableHeadCell>;
+        })}
+        {!disabled && <TableHeadCell>Ενέργειες</TableHeadCell>}
+      </TableRow>
+    </TableHead>
+  );
+};