@digigov/form 2.0.0-87b6232d → 2.0.0-8bbad051

package/src/Field/types.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
-import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
-import { ValidatorSchema } from '@digigov/form/validators/types';
-import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
-import { GridProps } from '@digigov/ui/layouts/Grid';
+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;
@@ -73,7 +75,7 @@ export interface ChildFieldMemoProps extends FieldConditionalProps {
 }
 export type FormData = UseFormProps['defaultValues'];
 
-export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
+export interface FieldWithCondition extends Omit<ResolvedField, 'condition'> {
   condition: Record<string, FieldCondition>;
 }
 
@@ -82,7 +84,7 @@ export interface FieldConditionalProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
-  resetField: UseFormReturn['resetField'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   Field: React.FC<FieldProps>;
 }
@@ -107,10 +109,6 @@ export interface FieldContainerProps {
   labelSize?: FieldsetLegendProps['size'];
 }
 
-export type FieldComponentRegistry = Record<string, FieldComponentItem>;
-
-export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
-
 export type UnknownValue = never | never[];
 
 export interface ControlledFieldProps {
@@ -137,7 +135,7 @@ export interface UncontrolledFieldProps {
   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;
@@ -147,11 +145,11 @@ 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'];
+  resetField?: UseFormReturn['resetField'];
   Field?: React.FC<FieldProps>;
 }
 
@@ -175,5 +173,6 @@ export interface UseFieldProps {
   trigger: UseFormReturn['trigger'];
   clearErrors: UseFormReturn['clearErrors'];
   error?: ErrorOption;
+  registerFieldFocus: registerFieldFocus;
   componentRegistry?: FieldComponentRegistry;
 }

package/src/Field/utils/evaluateFieldWithConditions.ts

@@ -1,9 +1,12 @@
-import { FieldWithCondition, CalculatedField } from '@digigov/form/Field/types';
+import type {
+  FieldWithCondition,
+  ResolvedField,
+} from '@digigov/form/Field/types';
 
 export function evaluateFieldWithConditions(
   field: FieldWithCondition,
   variables: FormData
-): CalculatedField {
+): ResolvedField {
   const newField = { ...field };
   if (variables) {
     for (const key in variables) {

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

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
+import type { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
 import { FormContext } from '@digigov/form/FormContext';
 
 export const useField = (
@@ -23,6 +23,7 @@ export const useField = (
     getValues,
     unregister,
     formState,
+    registerFieldFocus,
   } = useContext(FormContext);
   if (!registerField) {
     throw new Error(`
@@ -62,5 +63,6 @@ export const useField = (
     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

@@ -7,3 +7,4 @@ export default {
 export { Default } from '@digigov/form/FieldArray/__stories__/Default';
 export { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 export { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+export { CardsWithError } from '@digigov/form/FieldArray/__stories__/CardsWithError';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArrayItemHeader } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader';
+import { Table, TableBody, TableContainer } from '@digigov/ui/content';
+
+export interface ArrayContainerDisplayProps {
+  fieldArrayValues: any[];
+  ofField: any;
+  customField: any;
+  children: React.ReactNode;
+}
+
+export const ArrayContainerDisplay = ({
+  fieldArrayValues,
+  ofField,
+  customField,
+  children,
+}: ArrayContainerDisplayProps) => {
+  return (
+    <>
+      {customField?.extra?.layout === 'card' ? (
+        children
+      ) : (
+        <TableContainer {...customField.extra?.tableContainer}>
+          <Table verticalAlign={customField.extra?.verticalAlign}>
+            {!customField.extra?.noHeader &&
+              ofField?.extra &&
+              fieldArrayValues?.length > 0 && (
+                <ArrayItemHeader
+                  labels={
+                    ofField.type === 'object'
+                      ? ofField.extra.fields.map(({ label }) => label.primary)
+                      : [ofField.label.primary]
+                  }
+                  disabled={customField?.editable === false}
+                />
+              )}
+            <TableBody>{children}</TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </>
+  );
+};
+
+export default ArrayContainerDisplay;

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

@@ -0,0 +1,14 @@
+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';
+export { Cards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Cards';
+export { SortableCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/SortableCards';
+export { ReadOnlyCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnlyCards';

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

@@ -0,0 +1,337 @@
+import React from 'react';
+import type { ErrorOption, UseFieldArrayMove } from 'react-hook-form';
+import { omit } from '@digigov/form/utils';
+import { ErrorMessage } from '@digigov/ui';
+import {
+  Card,
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  TableDataCell,
+  TableRow,
+} from '@digigov/ui/content';
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import type { StackProps } from '@digigov/ui/layouts';
+import { Grid, SectionBreak, Stack } from '@digigov/ui/layouts';
+import Heading from '@digigov/ui/typography/Heading';
+import { NormalText } from '@digigov/ui/typography/NormalText';
+
+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;
+  customField: any;
+  ofField: any;
+  fieldArrayValues: any[];
+  error?: Record<string, ErrorOption> | undefined;
+}
+
+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',
+  },
+  customField,
+  ofField,
+  fieldArrayValues,
+  error,
+}: ArrayItemDisplayProps) => {
+  if (data === undefined || data === null) {
+    return null;
+  }
+  if (
+    Object.keys(data).length === 0 ||
+    (Object.keys(data).length === 1 && data.id)
+  ) {
+    return null;
+  }
+  const values: (string | Record<string, any>)[] =
+    typeof data === 'string'
+      ? [data]
+      : Object.values(data ? omit(data, ['id']) : {});
+  const borderVariant = border === false || sortable ? 'none' : 'border';
+  // Show last border if there are action buttons to separate buttons from item values
+  const hasItemButtons = !disabled && (!disabledEdit || !disabledDelete);
+
+  const fieldLabel: Record<string, string> | string =
+    ofField?.type === 'object'
+      ? ofField?.extra?.fields.reduce(
+          (acc: Record<string, string>, { key, label }) => ({
+            ...acc,
+            [key]: label.primary,
+          }),
+          {}
+        )
+      : ofField?.label?.primary;
+
+  return (
+    <>
+      {customField?.extra?.layout === 'card' ? (
+        <Card
+          borderColor="light"
+          variant="border"
+          dense
+          {...customField?.extra.cardContainer}
+        >
+          {sortable && <Heading size="sm">Επιλογή #{index + 1}</Heading>}
+          <SummaryList mb={0} noLastBorder={!hasItemButtons} error={!!error}>
+            {error &&
+              Object.keys(error).length > 0 &&
+              Object.entries(error).map(([fieldKey, fieldError]) => (
+                <ErrorMessage key={fieldKey} id={`${name}-error`}>
+                  {`${
+                    ofField?.type === 'object' && ofField?.extra?.fields
+                      ? `${fieldLabel[fieldKey] || fieldKey}: `
+                      : ''
+                  }`}
+                  {
+                    fieldError.message /* This is expected to be a SafeHTML component, not a string */
+                  }
+                </ErrorMessage>
+              ))}
+            {values?.map?.((value, valueIndex) => {
+              const key =
+                ofField?.type === 'object'
+                  ? ofField?.extra?.fields?.[valueIndex]?.key
+                  : ofField?.key;
+              const label =
+                ofField?.type === 'object' ? fieldLabel[key] : fieldLabel;
+
+              const shouldShowKey =
+                !customField?.extra?.noHeader &&
+                ofField?.extra &&
+                fieldArrayValues?.length > 0;
+
+              return (
+                <SummaryListItem key={valueIndex}>
+                  {shouldShowKey && (
+                    <SummaryListItemKey
+                      error={!!error && Object.keys(error)?.includes(key)}
+                    >
+                      {label}
+                    </SummaryListItemKey>
+                  )}
+                  <SummaryListItemValue
+                    error={
+                      !shouldShowKey &&
+                      !!error &&
+                      Object.keys(error)?.includes(key)
+                    }
+                  >
+                    {(value as Record<string, any>)?.name ||
+                      (Array.isArray(value)
+                        ? value.join('\n')
+                        : valueDisplay
+                          ? valueDisplay(value)
+                          : value) ||
+                      ''}
+                  </SummaryListItemValue>
+                </SummaryListItem>
+              );
+            })}
+          </SummaryList>
+          {disabled === true ||
+          (disabledEdit === true && disabledDelete === true) ? null : (
+            <ButtonGroup mb={0} {...customField?.extra?.cardButtonGroup}>
+              {disabledEdit !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => {
+                    edit(name);
+                  }}
+                >
+                  Επεξεργασία
+                </Button>
+              )}
+              {disabledDelete !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => remove(name)}
+                >
+                  Διαγραφή
+                </Button>
+              )}
+            </ButtonGroup>
+          )}
+          {sortable && (
+            <>
+              <SectionBreak />
+              {sortable && !disabled && !(isFirst && isLast) && (
+                <NormalText mb={0}>
+                  Μετακίνηση{' '}
+                  {!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>
+                    </>
+                  )}
+                </NormalText>
+              )}
+            </>
+          )}
+        </Card>
+      ) : (
+        <>
+          <TableRow>
+            {values?.map?.((value, valueIndex) => {
+              const fieldKey =
+                ofField?.type === 'object'
+                  ? ofField?.extra?.fields?.[valueIndex]?.key
+                  : ofField?.key;
+              return (
+                <TableDataCell
+                  key={valueIndex}
+                  variant={borderVariant}
+                  wordBreak={wordBreak}
+                  pb={sortable ? 0 : undefined}
+                  pt={sortable ? 4 : undefined}
+                  highlight={
+                    !!error && Object.keys(error)?.includes(fieldKey)
+                      ? 'error'
+                      : undefined
+                  }
+                >
+                  {sortable && valueIndex === 0 && (
+                    <Heading size="sm" 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>
+  );
+};