@digigov/form 0.10.8 → 0.10.9

package/src/MultiplicityField/add-objects.tsx

@@ -0,0 +1,186 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useMemo } from 'react';
+// import { FormBuilderProps } from '@digigov/form';
+import Button from '@digigov/ui/core/Button';
+import Fieldset from '@digigov/react-core/Fieldset';
+import RadioConditional from '@digigov/react-core/RadioConditional';
+import {
+  ErrorOption,
+  FieldArrayWithId,
+  UseFieldArrayReturn,
+  useWatch,
+} from 'react-hook-form';
+import { FieldBase } from '@digigov/form/Field/FieldBase';
+import { CalculatedField } from '@digigov/form/Field/types';
+import { calculateField, useField } from '@digigov/form/Field/utils';
+import FieldObject from '@digigov/form/FieldObject';
+import {
+  MultiplicityProps,
+  StashedObject,
+} from '@digigov/form/MultiplicityField';
+import { FieldSpec } from '@digigov/form/types';
+export interface AddObjectsProps
+  extends Omit<MultiplicityProps, 'key' | 'component'> {
+  fields: FieldArrayWithId[];
+  error?: ErrorOption;
+  append: UseFieldArrayReturn['append'];
+  remove: UseFieldArrayReturn['remove'];
+  stashedObjects: StashedObject[];
+  onStash: (arg0: StashedObject) => void;
+}
+
+export const AddObjects: React.FC<AddObjectsProps> = ({
+  name,
+  fields,
+  formState,
+  extra,
+  append,
+  remove,
+  trigger,
+  clearErrors,
+  children,
+  setValue,
+  stashedObjects,
+  getValues,
+  onStash,
+  error,
+}) => {
+  const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
+  const currentName = `${name}.${currentIndex}`;
+  const radioField: FieldSpec = {
+    key: 'needs-more',
+    type: 'choice:single',
+    label: {
+      primary: extra?.label.question.title,
+    },
+    required: true,
+    validators: [
+      {
+        name: 'is-locked',
+        message: 'form.error.needs-more',
+        test: (data) => {
+          return data === 'no';
+        },
+      },
+    ],
+    extra: {
+      options: [
+        {
+          label: { primary: extra?.label.question.yes },
+          value: 'yes',
+          selected: function RadioSelected() {
+            return (
+              <RadioConditional
+                hidden={
+                  needsMore !== 'yes' ||
+                  (extra?.max && extra?.max - stashedObjects.length === 0)
+                }
+              >
+                {needsMore === 'yes' && fields.length > 0 && (
+                  <>
+                    <FieldObject
+                      name={currentName}
+                      error={error && error[currentIndex]}
+                      register={register}
+                      formState={formState}
+                      control={control}
+                      {...extra?.of}
+                      label={
+                        extra?.label.question.objectLabel || extra?.of.label
+                      }
+                    />
+                    <Button
+                      color="secondary"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        const nestedFields = extra?.of.extra.fields.map(
+                          (f) => `${currentName}.${f.key}`
+                        );
+                        const result = await trigger(nestedFields);
+                        result && setValue('needs-more', '');
+                        result && onStash(getValues(currentName));
+                      }}
+                    >
+                      {extra?.label.object.add}
+                    </Button>
+                  </>
+                )}
+              </RadioConditional>
+            );
+          },
+        },
+        {
+          label: { primary: extra?.label.question.no },
+          value: 'no',
+        },
+      ],
+    },
+  };
+
+  const { field, control, register, reset, error: needsMoreError } = useField(
+    radioField.key,
+    radioField?.type ? radioField : null
+  );
+
+  const calculatedField: CalculatedField = useMemo(
+    () => calculateField(children, field),
+    [field]
+  );
+  const needsMore = useWatch({ name: field.key, control });
+
+  useEffect(() => {
+    if (needsMore === 'yes') {
+      append({ afm: '', firstName: '', lastName: '' });
+    }
+    if (needsMore === 'no' && stashedObjects.length < fields.length) {
+      remove(currentIndex);
+    }
+    if (needsMore === '') clearErrors('needs-more');
+  }, [needsMore]);
+
+  // TODO: Refactor types so that label is always required, the following
+  // assignment is a temp fix for typescript build to run
+  calculatedField.label = calculatedField.label || {};
+  if (extra?.length) {
+    calculatedField.label.secondary = `Έχετε προσθέσει ${
+      stashedObjects.length
+    } εγγραφές και σας απομένουν ακόμα ${
+      extra.length - stashedObjects.length
+    } εγγραφές.`;
+  } else if (extra?.min && extra?.max) {
+    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+      extra?.min - stashedObjects.length
+    } και το μέγιστο ${
+      extra?.max
+    } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+  } else if (extra?.min) {
+    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
+      extra?.min - stashedObjects.length
+    } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+  } else if (extra?.max) {
+    calculatedField.label.secondary = ` Έχετε προσθέσει ${
+      stashedObjects.length
+    } εγγραφές και σας απομένουν ${
+      extra.max - stashedObjects.length
+    } επιπλέον εγγραφές.`;
+  }
+  return (
+    <Fieldset>
+      <FieldBase
+        {...calculatedField}
+        name={calculatedField.key}
+        control={control}
+        register={register}
+        reset={reset}
+        error={
+          extra?.max - stashedObjects.length === 0 ||
+          extra?.length - stashedObjects.length === 0
+            ? error
+            : needsMoreError
+        }
+      />
+    </Fieldset>
+  );
+};
+
+export default AddObjects;

package/src/MultiplicityField/index.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+import {
+  Card,
+  CardText,
+  CardAction,
+  Button,
+  Heading,
+  CardHeading,
+} from '@digigov/react-core';
+import { FieldSpec } from '@digigov/form';
+import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import FieldObject from '@digigov/form/FieldObject';
+import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+
+export interface MultiplicityProps
+  extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
+  name: string;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  trigger: UseFormReturn['trigger'];
+  clearErrors: UseFormReturn['clearErrors'];
+  formState: UseFormReturn['formState'];
+  setValue: UseFormReturn['setValue'];
+  getValues: UseFormReturn['getValues'];
+  unregister: UseFormReturn['unregister'];
+  error?: ErrorOption;
+  extra?: Record<string, any>;
+  label?: FieldSpec['label'];
+  layout?: FieldSpec['layout'];
+}
+
+export type StashedObject = Record<string, any>;
+
+// epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
+export const Multiplicity: React.FC<MultiplicityProps> = ({
+  extra,
+  name,
+  control,
+  error,
+  register,
+  trigger,
+  clearErrors,
+  formState,
+  label,
+  layout,
+  setValue,
+  getValues,
+  unregister,
+}) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name,
+  });
+  const [stashedObjects, setStashedObjects] = useState<StashedObject[]>([]);
+  const handleStash = (data) => {
+    setStashedObjects([...stashedObjects, data]);
+  };
+  const handleDelete = (index) => {
+    remove(index);
+    // creating a new array to maintain immutability
+    const newStashedObjects = [...stashedObjects];
+    newStashedObjects.splice(index, 1);
+    setStashedObjects(newStashedObjects);
+  };
+  return (
+    <FieldContainer
+      label={label}
+      layout={layout}
+      error={
+        formState.isSubmitted && !formState.isSubmitting && error?.message
+          ? error
+          : undefined
+      }
+      wrapper="fieldset"
+      name={name}
+    >
+      {stashedObjects.length > 0 ? (
+        <div>
+          <Heading size="m">{extra?.label.object.title_added}</Heading>
+          {stashedObjects.map((_Object, index) => {
+            return (
+              <ListObject
+                key={`${name}.${index}`}
+                index={index}
+                name={name}
+                extra={extra}
+                control={control}
+                register={register}
+                formState={formState}
+                onDelete={handleDelete}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        ''
+      )}
+      <AddObjects
+        name={name}
+        register={register}
+        control={control}
+        fields={fields}
+        formState={formState}
+        error={error}
+        stashedObjects={stashedObjects}
+        extra={extra}
+        append={append}
+        remove={remove}
+        onStash={handleStash}
+        setValue={setValue}
+        getValues={getValues}
+        unregister={unregister}
+        trigger={trigger}
+        clearErrors={clearErrors}
+      />
+    </FieldContainer>
+  );
+};
+
+export default Multiplicity;
+
+export interface ListObjectProps {
+  index: number;
+  name: string;
+  control: UseFormReturn['control'];
+  register: UseFormReturn['register'];
+  formState: UseFormReturn['formState'];
+  onDelete: (index: number) => void;
+  extra?: Record<string, any>;
+}
+
+export const ListObject: React.FC<ListObjectProps> = ({
+  index,
+  name,
+  extra,
+  control,
+  register,
+  onDelete,
+  formState,
+  // onEdit,
+}) => {
+  const currentName = `${name}.${index}`;
+  return (
+    <Card variant={extra?.border && 'border'}>
+      <CardHeading>
+        {extra?.label.object.title} #{index + 1}
+      </CardHeading>
+      <CardText>
+        <FieldObject
+          name={currentName}
+          formState={formState}
+          register={register}
+          control={control}
+          {...extra?.of}
+        />
+      </CardText>
+      <CardAction>
+        <Button type="button" variant="link" onClick={() => onDelete(index)}>
+          {extra?.label.object.delete}
+        </Button>
+      </CardAction>
+    </Card>
+  );
+};

package/src/Questions/Questions.stories.js

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

package/src/Questions/Questions.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+import { QuestionsInterface } from '@digigov/form/Questions/types';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { getNextStep } from '@digigov/form/Questions/getNextStep';
+
+const isBrowser = typeof window !== 'undefined';
+
+/**
+ * The Question component accepts question data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+export const Questions: React.FC<QuestionsInterface> = ({
+  name,
+  steps,
+  initialData = {},
+  onChange,
+  onSubmit,
+  onActiveStep,
+  forceStepName,
+  localDraft = false,
+  children,
+}) => {
+  const [currentStep, setCurrentStep] = useState<StepInterface>({ name: '' });
+  useEffect(() => {
+    if (!forceStepName) {
+      setCurrentStep(steps[0]);
+    }
+  }, [forceStepName, steps]);
+  useEffect(() => {
+    if (forceStepName !== currentStep.name) {
+      const forceStep = steps.find(({ name }) => name === forceStepName);
+      forceStep && setCurrentStep(forceStep);
+    }
+  }, [forceStepName]);
+  const localData =
+    isBrowser && localDraft && window.localStorage.getItem(`questions-${name}`);
+  const [data, setData] = useState(
+    (localData && JSON.parse(localData)) || initialData
+  );
+  const submitStep = (stepName, stepData): void => {
+    data[stepName] = stepData;
+    if (localDraft) {
+      isBrowser &&
+        window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
+    }
+    if (onChange) {
+      onChange && onChange(data);
+    }
+    setData(data);
+    const nextStep = getNextStep(currentStep, steps, data);
+    if (nextStep) {
+      onActiveStep && onActiveStep(nextStep);
+      setCurrentStep(nextStep);
+    } else {
+      onSubmit(data);
+    }
+  };
+
+  return (
+    <QuestionsContext.Provider
+      value={{
+        steps,
+        currentStep,
+        submitStep,
+        data,
+        onActiveStep,
+      }}
+    >
+      {children}
+    </QuestionsContext.Provider>
+  );
+};

package/src/Questions/QuestionsContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { QuestionsContextInterface } from '@digigov/form/Questions/types';
+
+const defaultStep = { name: '' };
+export const QuestionsContext = createContext<QuestionsContextInterface>({
+  currentStep: defaultStep,
+  steps: [],
+  submitStep: () => null,
+});

package/src/Questions/Step/ReviewStep.tsx

@@ -0,0 +1,63 @@
+import React, { useContext } from 'react';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/core/SummaryList';
+import Title from '@digigov/ui/typography/Title';
+import { Button } from '@digigov/ui/core';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { StepTitleBase } from '@digigov/form/Questions/Step/StepTitle';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { useTranslation } from '@digigov/ui/app/i18n';
+
+export const ReviewStep = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const { submitStep, title } = useContext(StepContext);
+  const { data, steps, onActiveStep } = useContext(QuestionsContext);
+  const filledSteps = steps.filter((step) => !!data[step.name]);
+  return (
+    <>
+      <StepTitleBase title={title || 'Review answers'}></StepTitleBase>
+      {filledSteps.map((step) => {
+        return (
+          <div key={step.name}>
+            <Title size={'md'}>{step.title}</Title>
+            <SummaryList>
+              {Object.keys(data[step.name]).map((dataKey) => {
+                return (
+                  <SummaryListItem key={dataKey}>
+                    <SummaryListItemKey>
+                      {
+                        step.fields.find(({ key }) => key === dataKey).label
+                          .primary
+                      }
+                    </SummaryListItemKey>
+                    <SummaryListItemValue>
+                      {data[step.name][dataKey]}
+                    </SummaryListItemValue>
+                    <SummaryListItemAction>
+                      <a
+                        style={{ cursor: 'pointer' }}
+                        onClick={(): void => onActiveStep && onActiveStep(step)}
+                      >
+                        {t('button.edit')}
+                      </a>
+                    </SummaryListItemAction>
+                  </SummaryListItem>
+                );
+              })}
+            </SummaryList>
+          </div>
+        );
+      })}
+      <Button onClick={(): void => submitStep && submitStep()}>
+        {t('button.submit')}
+      </Button>
+    </>
+  );
+};
+
+export default ReviewStep;

package/src/Questions/Step/Step.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useState } from 'react';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { StepArrayReview } from '@digigov/form/Questions/Step/StepArrayReview';
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+
+/**
+ * The Step component accepts Step data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+export const Step: React.FC<StepInterface> = (props) => {
+  // or return all Questions and currentStepName
+  // or return a specific Step object
+  const { currentStep, submitStep, data } = useContext(QuestionsContext);
+
+  const [stepData, setStepData] = useState<Record<string, any>[]>([]);
+  const [reviewActive, setReviewActive] = useState(false);
+
+  const handleArraySubmit = (_name: string, data: any): void => {
+    setStepData([...stepData, data]);
+    setReviewActive(true);
+  };
+
+  const handleArrayDeleteItem = (deleteIndex: number): void => {
+    const nextStepData = stepData.filter((_item, stepIndex) => {
+      return stepIndex !== deleteIndex;
+    });
+    setStepData(nextStepData);
+    if (nextStepData.length === 0) {
+      setReviewActive(false);
+    }
+  };
+
+  const handleArrayReviewStep = (data): void => {
+    if (data.addMore === 'yes') {
+      setReviewActive(false);
+    } else if (data.addMore === 'no') {
+      submitStep(currentStep.name, stepData);
+    }
+  };
+  if (!currentStep || props.name !== currentStep.name) return null;
+
+  // then provide the currentStep object
+  return (
+    <StepContext.Provider
+      value={{
+        ...currentStep,
+        submitStep:
+          currentStep.type === 'array' ? handleArraySubmit : submitStep,
+        initial: data[props.name],
+      }}
+    >
+      {reviewActive ? (
+        <StepArrayReview
+          array={stepData}
+          handleSubmit={handleArrayReviewStep}
+          handleDelete={handleArrayDeleteItem}
+        />
+      ) : (
+        props.children
+      )}
+    </StepContext.Provider>
+  );
+};
+
+export default Step;

package/src/Questions/Step/StepArrayReview.tsx

@@ -0,0 +1,68 @@
+import React, { useContext } from 'react';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';
+import Button from '@digigov/ui/core/Button';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FieldSpec } from '@digigov/form/types';
+import { Field } from '@digigov/form/Field';
+import { Fieldset } from '@digigov/form/Fieldset';
+import Label from '@digigov/form/inputs/Label';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/core/SummaryList';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import { StepArrayReviewInterface } from '@digigov/form/Questions/Step/types';
+import { getAddMoreFields } from '@digigov/form/Questions/Step/getAddMoreFields';
+
+export const StepArrayReview: React.FC<StepArrayReviewInterface> = (props) => {
+  const { t } = useTranslation();
+  const { currentStep } = useContext(QuestionsContext);
+  const fields = getAddMoreFields(currentStep);
+  const primaryField =
+    currentStep.fields.find(
+      (field: { key: any }) => field.key === currentStep.review?.primaryFieldKey
+    ) || {};
+  return (
+    <>
+      <PageTitle>
+        <PageTitleHeading>
+          {currentStep.review?.title && t(currentStep.review?.title)}
+        </PageTitleHeading>
+      </PageTitle>
+      <SummaryList>
+        {props.array.map(
+          (item: { [x: string]: React.ReactNode }, idx: number) => (
+            <SummaryListItem key={idx}>
+              <SummaryListItemKey>
+                {t(primaryField.label.primary)}
+              </SummaryListItemKey>
+              <SummaryListItemValue>
+                {item[primaryField.key]}
+              </SummaryListItemValue>
+              <SummaryListItemAction
+                onClick={(): void => props.handleDelete(idx)}
+              >
+                {t('button.delete')}
+              </SummaryListItemAction>
+            </SummaryListItem>
+          )
+        )}
+      </SummaryList>
+      <FormBuilder key="addmore" fields={fields} onSubmit={props.handleSubmit}>
+        <Fieldset>
+          <Label label={currentStep.review?.addMore.title} />
+          {fields.map((field: FieldSpec) => (
+            <Field key={field.key} name={field.key} />
+          ))}
+        </Fieldset>
+        <Button type="submit">{t('button.submit')}</Button>
+      </FormBuilder>
+    </>
+  );
+};
+
+export default StepArrayReview;

package/src/Questions/Step/StepContext.tsx

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+
+export const StepContext = createContext<StepInterface>({
+  name: '',
+  fields: [],
+  initial: [],
+  errorLabels: [],
+  submitStep: '',
+  review: {
+    title: '',
+    primaryFieldKey: '',
+    addMore: {
+      title: { primary: '' },
+      answers: { positive: { primary: 'Yes' }, negative: { primary: 'No' } },
+    },
+  },
+  type: 'object',
+});
+
+export default StepContext;