From dfa63b50a8940583033e95454912a56b59c4a80e Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <sven@maykinmedia.nl>
Date: Tue, 6 Jun 2023 10:01:03 +0200
Subject: [PATCH] :recycle: #43 - Refactor validation to suit multiple.

---
 package.json                                  |   3 +-
 .../formio/textfield/textfield.component.tsx  |   2 +-
 .../utils/errors/errors.component.tsx         |   7 +-
 .../utils/errors/errors.stories.tsx           |   6 +-
 .../multiple/multiple.container.tsx           |   6 +-
 src/containers/multiple/multiple.stories.tsx  |  54 ++++++-
 src/lib/renderer/renderer.tsx                 |   8 +-
 src/lib/validation/validate.ts                | 145 +++++++++---------
 src/lib/validation/validators/maxlength.ts    |   2 +-
 src/lib/validation/validators/minlength.ts    |   2 +-
 src/lib/validation/validators/pattern.ts      |   2 +-
 src/lib/validation/validators/required.ts     |   2 +-
 .../custom-component.stories.tsx              |  10 +-
 src/types/componentprops.d.ts                 |   3 +-
 src/types/config.d.ts                         |   4 +-
 15 files changed, 157 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index 0f4a0cd..d3155f5 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
   },
   "dependencies": {
     "clsx": "^1.2.1",
-    "formik": "^2.2.9"
+    "formik": "^2.2.9",
+    "lodash": "^4.17.21"
   },
   "resolutions": {
     "react-formio/formiojs": "~4.13.0"
diff --git a/src/components/formio/textfield/textfield.component.tsx b/src/components/formio/textfield/textfield.component.tsx
index 0bdd46e..9cb8b24 100644
--- a/src/components/formio/textfield/textfield.component.tsx
+++ b/src/components/formio/textfield/textfield.component.tsx
@@ -62,7 +62,7 @@ export const TextField: React.FC<ITextFieldProps> = ({callbacks, component, valu
         {..._callbacks}
       />
 
-      {!pristineState && component.showCharCount && <CharCount value={value} />}
+      {!pristineState && component.showCharCount && value && <CharCount value={value} />}
       {component.description && <Description description={component.description} />}
       {!pristineState && errors?.length > 0 && <Errors componentId={componentId} errors={errors} />}
     </Component>
diff --git a/src/components/utils/errors/errors.component.tsx b/src/components/utils/errors/errors.component.tsx
index 2d940ae..145db5a 100644
--- a/src/components/utils/errors/errors.component.tsx
+++ b/src/components/utils/errors/errors.component.tsx
@@ -1,9 +1,10 @@
+import {ValidationError} from '@lib/validation';
 import clsx from 'clsx';
 import React from 'react';
 
 export interface IErrorsProps {
   componentId: string;
-  errors: string[];
+  errors: ValidationError[];
 }
 
 /**
@@ -16,11 +17,11 @@ export const Errors: React.FC<IErrorsProps> = ({componentId, errors}) => {
 
   return (
     <ul className={className} aria-describedby={componentId}>
-      {errors?.map((error: string, index: number) => {
+      {errors?.map((error, index: number) => {
         return (
           <li key={index} className={listItemClassName}>
             <label className={labelClassName} htmlFor={componentId} role="alert">
-              {error}
+              {error.message}
             </label>
           </li>
         );
diff --git a/src/components/utils/errors/errors.stories.tsx b/src/components/utils/errors/errors.stories.tsx
index fa951d8..6e0717c 100644
--- a/src/components/utils/errors/errors.stories.tsx
+++ b/src/components/utils/errors/errors.stories.tsx
@@ -13,7 +13,11 @@ export default meta;
 
 export const errors: ComponentStory<typeof Errors> = args => <Errors {...args} />;
 errors.args = {
-  errors: ['Postcode is required', 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'],
+  // errors: [{message: 'Postcode is required'}, {message: 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'}],
+  errors: [
+    {name: 'required', message: 'Postcode is required'},
+    {name: 'pattern', message: 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'},
+  ],
 };
 errors.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
diff --git a/src/containers/multiple/multiple.container.tsx b/src/containers/multiple/multiple.container.tsx
index 35a6c9d..1b722d6 100644
--- a/src/containers/multiple/multiple.container.tsx
+++ b/src/containers/multiple/multiple.container.tsx
@@ -73,7 +73,9 @@ export const Multiple: React.FC<IMultipleProps> = props => {
 
   return (
     <Component {...props}>
-      <Label {...props} />
+      {props.component.label && (
+        <Label label={props.component.label} componentId={props.component.key as string} />
+      )}
       <table>
         <tbody>{renderComponents()}</tbody>
         <tfoot>
@@ -87,7 +89,7 @@ export const Multiple: React.FC<IMultipleProps> = props => {
         </tfoot>
       </table>
       <table />
-      <Description {...props} />
+      {props.component.description && <Description description={props.component.description} />}
     </Component>
   );
 };
diff --git a/src/containers/multiple/multiple.stories.tsx b/src/containers/multiple/multiple.stories.tsx
index 1c77a52..637aee5 100644
--- a/src/containers/multiple/multiple.stories.tsx
+++ b/src/containers/multiple/multiple.stories.tsx
@@ -1,7 +1,7 @@
 import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
 import {expect} from '@storybook/jest';
 import type {ComponentStory, Meta} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, waitFor, within} from '@storybook/testing-library';
 
 import {Multiple} from './multiple.container';
 
@@ -27,13 +27,18 @@ multipleTextfields.args = {
         description: 'Array of strings instead of a single string value',
         label: 'Multiple inputs',
         multiple: true,
+        showCharCount: true,
+        validate: {
+          required: true,
+          maxLength: 3,
+          minLength: 1,
+        },
       },
     ],
   },
   initialValues: {
     'multiple-inputs': ['first value'],
   },
-  onSubmit: () => {},
 };
 multipleTextfields.play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
@@ -62,3 +67,48 @@ multipleTextfields.play = async ({canvasElement}) => {
   expect(await canvas.getAllByRole('textbox')[0]).toHaveDisplayValue('');
   expect(await canvas.getAllByRole('textbox')).toHaveLength(1);
 };
+
+export const multipleTextfieldsWithValidation: ComponentStory<typeof RenderForm> = args => (
+  <RenderForm {...args} />
+);
+multipleTextfieldsWithValidation.args = {
+  configuration: DEFAULT_RENDER_CONFIGURATION,
+  form: {
+    display: 'form',
+    components: [
+      {
+        type: 'textfield',
+        key: 'multiple-inputs',
+        description: 'Array of strings instead of a single string value',
+        label: 'Multiple inputs',
+        multiple: true,
+        showCharCount: true,
+        validate: {
+          required: true,
+        },
+      },
+    ],
+  },
+  initialValues: {
+    'multiple-inputs': ['first value'],
+  },
+};
+multipleTextfieldsWithValidation.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+
+  // check that new items can be added
+  await userEvent.click(canvas.getByRole('button', {name: 'Add another'}));
+  const input1 = await canvas.getAllByRole('textbox')[0];
+  const input2 = await canvas.getAllByRole('textbox')[1];
+
+  await userEvent.type(input1, 'foo', {delay: 300});
+  await userEvent.type(input2, 'bar', {delay: 300});
+
+  await userEvent.clear(input1);
+  expect(await canvas.findAllByText('Multiple inputs is required')).toHaveLength(1);
+
+  await userEvent.clear(input2);
+  waitFor(async () => {
+    expect(await canvas.findAllByText('Multiple inputs is required')).toHaveLength(2);
+  });
+};
diff --git a/src/lib/renderer/renderer.tsx b/src/lib/renderer/renderer.tsx
index 74796e4..2935052 100644
--- a/src/lib/renderer/renderer.tsx
+++ b/src/lib/renderer/renderer.tsx
@@ -1,6 +1,6 @@
 import {Column, Columns, Content, IColumnProps, TextField} from '@components';
 import {Multiple} from '@containers';
-import {DEFAULT_VALIDATORS, getFormErrors} from '@lib/validation';
+import {DEFAULT_VALIDATORS, ValidationError, getFormErrors} from '@lib/validation';
 import {IComponentProps, IFormioForm, IRenderConfiguration, IValues, Value, Values} from '@types';
 import {Formik, useField, useFormikContext} from 'formik';
 import {FormikHelpers} from 'formik/dist/types';
@@ -109,7 +109,7 @@ export const RenderForm: React.FC<IRenderFormProps> = ({
       <Formik
         initialValues={initialValues}
         onSubmit={onSubmit}
-        validate={values => getFormErrors(form, values, configuration.validators)}
+        validate={async values => await getFormErrors(form, values, configuration.validators)}
       >
         {props => {
           return (
@@ -182,12 +182,12 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({
   }
 
   const [{onBlur, onChange}, {error}] = field;
+  const errors = error || [];
 
   // Allow the value to be overriden.
   const _value = value !== undefined ? value : field[0].value;
 
   const callbacks = {onBlur, onChange};
-  const errors = error?.split('\n') || []; // Reconstruct array.
 
   // In certain cases a component (is not defined as) a component but something else (e.g. a column)
   // We deal with these edge cases by extending the schema with a custom (component) type allowing
@@ -223,7 +223,7 @@ export const RenderComponent: React.FC<IRenderComponentProps> = ({
       callbacks={callbacks}
       component={component}
       form={form}
-      errors={errors}
+      errors={errors as unknown as ValidationError[]} // Formik typing issue.
       path={path}
       value={_value}
       setValue={setFieldValue}
diff --git a/src/lib/validation/validate.ts b/src/lib/validation/validate.ts
index fb23cdd..3100baf 100644
--- a/src/lib/validation/validate.ts
+++ b/src/lib/validation/validate.ts
@@ -9,8 +9,9 @@ import {
 import {IFormioForm, IValues, Value, Values} from '@types';
 import {FormikErrors} from 'formik';
 import {ExtendedComponentSchema, Utils} from 'formiojs';
+import _ from 'lodash';
 
-export type validator = [
+export type Validator = [
   (
     ExtendedComponentSchema: ExtendedComponentSchema,
     value: Value,
@@ -20,19 +21,13 @@ export type validator = [
   string
 ];
 
-export const DEFAULT_VALIDATORS: validator[] = [
+export const DEFAULT_VALIDATORS: Validator[] = [
   [validateMaxLength, '{{ label }} must have no more than {{ limit }} characters.'],
   [validateMinLength, '{{ label }} must have at least {{ limit }} characters.'],
   [validatePattern, '{{ label }} does not match the pattern {{ pattern }}'],
   [validateRequired, '{{ label }} is required'],
 ];
 
-type ErrorMap =
-  | Record<string, string>
-  | {
-      [key: string]: ErrorMap;
-    };
-
 /**
  * Validates `form` and combines errors for each component.
  * TODO: Implement "scoring/thresholds" for validators (determine what errors to show in specific cases).
@@ -41,44 +36,22 @@ type ErrorMap =
  * @param form Formio form.
  * @param values The values to validate.
  * @param validators See `validate` for more information.
- * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`FormikErrors<value>`) it is considered invalid.
+ * @return A promise which resolves (`void`) if all `values` are considered valid or
+ * (`FormikErrors<IValues>`) if it is considered invalid.
  */
 export const getFormErrors = async (
   form: IFormioForm,
   values: IValues,
-  validators: validator[] = DEFAULT_VALIDATORS
+  validators: Validator[] = DEFAULT_VALIDATORS
 ): Promise<FormikErrors<IValues> | void> => {
   try {
     await validateForm(form, values, validators);
     return;
   } catch (result) {
-    const errors: FormikErrors<IValues> = {};
-    // Convert the validation errors to messages.
-    Object.entries(result).forEach(([key, validationErrors]: [string, ValidationError[]]) => {
-      const [tail, ...bits] = key.split('.').reverse();
-      let localErrorObject = errors as ErrorMap;
-      // deep-assign errors
-      bits.forEach(bit => {
-        if (!localErrorObject[bit]) {
-          localErrorObject[bit] = {};
-        }
-        localErrorObject = localErrorObject[bit] as ErrorMap;
-      });
-      const messages = validationErrors
-        .map(validationError => validationError.message.trim())
-        .join('\n');
-      localErrorObject[tail] = messages;
-    });
-    return errors;
+    return result;
   }
 };
 
-const isSingleValue = (obj: IValues | Value | Values): obj is Value => {
-  if (obj === null) return true; // typeof null === 'object'
-  return typeof obj !== 'object';
-};
-
 /**
  * Validates `form`.
  *
@@ -92,13 +65,13 @@ const isSingleValue = (obj: IValues | Value | Values): obj is Value => {
  * @param validators See `validate` for more information.
  * @throws {ValidationError[]} As promise rejection if invalid.
  * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`{[index: string]: ValidationError[]}`) it is considered invalid.
+ * (`{[index: string]: ValidationError[] | ValidationError[][]}`) it is considered invalid.
  */
 export const validateForm = async (
   form: IFormioForm,
   values: IValues,
   validators = DEFAULT_VALIDATORS
-): Promise<{[index: string]: ValidationError[]} | void> => {
+): Promise<{[index: string]: ValidationError[] | ValidationError[][]} | void> => {
   const errors: {[key: string]: Error} = {};
 
   // Collect all the components in the form definition so that each components set of
@@ -111,83 +84,109 @@ export const validateForm = async (
   // Run validation for all components in the form definition
   const promises = componentsToValidate.map(async component => {
     const key = component.key || OF_MISSING_KEY;
-    // lodash.get like to support nested data structures/keys with dots
-    // TODO: works only for objects right now
-    // FIXME: types can be more complex, value of a file upload is not a scalar, but an
-    // object!
-    // FIXME: the accumulator casting is also less than ideal, it should be possible
-    // to infer this correctly.
-    const value = key.split('.').reduce((acc: Value | IValues, bit: string) => {
-      if (Array.isArray(acc)) {
-        throw new Error('Arrays not supported yet');
-      }
-      if (acc === null) return null;
-      const nestedProp = (acc as IValues)[bit];
-      if (isSingleValue(nestedProp)) {
-        return nestedProp;
-      }
-      return nestedProp;
-    }, values) as Value;
+    const valueOrValues = _.get(values, key) as Value | Values;
 
     try {
-      await validate(component, value, values, validators);
-    } catch (e) {
-      errors[key] = e;
+      await validate(component, valueOrValues, values, validators);
+    } catch (validationErrors) {
+      _.set(errors, key, validationErrors);
     }
   });
 
   await Promise.all(promises);
   if (Object.keys(errors).length) {
-    return Promise.reject(errors);
+    throw errors;
   }
-  return;
 };
 
 /**
  * Validates a component.
  *
- * Runs each function in `validators` and passing it `ExtendedComponentSchema` and `message`.
+ * Runs each function in `validators` and passing it `component`, `valueOrValues`, `message`. and
+ * `formValues`.
  * If all validators resolve a components is considered valid and the returned `Promise` resolves.
- * If not: the returned `Promise` rejects with an array of `ValidationError` (subclasses).
+ * If not: the returned `Promise` rejects with a (possibly nested) array of `ValidationError` (subclasses).
  *
- * @param ExtendedComponentSchema Formio component schema passed to each validator.
- * @param value The value to validate.
+ * @param component Formio component schema passed to each validator.
+ * @param valueOrValues The value(s) to validate.
  * @param formValues All the form values.
  *
  * @param validators An array of `async function`/`string` tuples. The function being the validator
  * function, the string a message used to indicate an invalid value. Each validator is run in order.
  *
- *  The validator function is called with `ExtendedComponentSchema`, the `value` and the error `message`.
+ *  The validator function is called with `component`, the `valueOrValues`, the 'message' and all the
+ *  `formValues`.
  *  The (async/sync) function should return a `Promise` which either resolves (valid) or rejects
  *  (invalid) with a (subclass of) `ValidationError` instantiated with `message`.
  *
- * @throws {ValidationError[]} As promise rejection if invalid.
+ * @throws {ValidationError[] | ValidationError[][]} As promise rejection if invalid.
  *
  * @return A promise which resolves (`void`) if `value` is considered valid and rejects
- * (`ValidationError[]`) it is considered invalid.
+ * (`ValidationError[] | ValidationError[][]`) it is considered invalid.
  */
 export const validate = async (
-  ExtendedComponentSchema: ExtendedComponentSchema,
-  value: Value,
+  component: ExtendedComponentSchema,
+  valueOrValues: Value | Values,
   formValues: IValues,
   validators = DEFAULT_VALIDATORS
+): Promise<void> => {
+  // Array of values (multiple), simple implementation for now.
+  if (Array.isArray(valueOrValues)) {
+    return validateValues(component, valueOrValues, formValues, validators);
+  }
+  // Single value.
+  return validateValue(component, valueOrValues, formValues, validators);
+};
+
+/**
+ * Implements validate for a multiple values.
+ * @see {validate}
+ */
+export const validateValues = async (
+  component: ExtendedComponentSchema,
+  values: Values,
+  formValues: IValues,
+  validators: Validator[]
+): Promise<void> => {
+  // Array of values (multiple) simple implementation for now.
+  const results = Array(values.length);
+  const promises = values.map((value, index) => {
+    return validateValue(component, value, formValues, validators).catch(errorsForInstance => {
+      return (results[index] = errorsForInstance);
+    });
+  });
+
+  await Promise.all(promises);
+  if (results.some(v => v)) {
+    throw results;
+  }
+};
+
+/**
+ * Implements validate for a singular value.
+ * @see {validate}
+ */
+export const validateValue = async (
+  component: ExtendedComponentSchema,
+  value: Value,
+  formValues: IValues,
+  validators: Validator[]
 ): Promise<void> => {
   // Map all validators into an array of `Promise`s, implementing a catch handler building the
   // `errors` array.
-  const errors: ValidationError[] = [];
+  const validationErrors: ValidationError[] = [];
   const promises = validators.map(async ([validatorFunction, message]) => {
     try {
-      await validatorFunction(ExtendedComponentSchema, value, message, formValues);
+      await validatorFunction(component, value, message, formValues);
     } catch (e) {
-      errors.push(e);
+      validationErrors.push({name: e.name, message: e.message});
     }
   });
 
   // Wait until all promises are completed. When so: check if the `errors` array contains items,
   // indicating that at least one validation error exists in the array.
   await Promise.all(promises);
-  if (errors.length) {
-    return Promise.reject(errors);
+  if (validationErrors.length) {
+    throw validationErrors;
   }
-  return Promise.resolve();
 };
diff --git a/src/lib/validation/validators/maxlength.ts b/src/lib/validation/validators/maxlength.ts
index 38f0b98..7841fcd 100644
--- a/src/lib/validation/validators/maxlength.ts
+++ b/src/lib/validation/validators/maxlength.ts
@@ -22,5 +22,5 @@ export const validateMaxLength = async (
 };
 
 export class MaxLengthValidationError extends ValidationError {
-  validator = 'maxlength';
+  name = 'maxlength';
 }
diff --git a/src/lib/validation/validators/minlength.ts b/src/lib/validation/validators/minlength.ts
index da3c9e9..eddf656 100644
--- a/src/lib/validation/validators/minlength.ts
+++ b/src/lib/validation/validators/minlength.ts
@@ -22,5 +22,5 @@ export const validateMinLength = async (
 };
 
 export class MinLengthValidationError extends ValidationError {
-  validator = 'minlength';
+  name = 'minlength';
 }
diff --git a/src/lib/validation/validators/pattern.ts b/src/lib/validation/validators/pattern.ts
index d54c573..fcae26f 100644
--- a/src/lib/validation/validators/pattern.ts
+++ b/src/lib/validation/validators/pattern.ts
@@ -21,5 +21,5 @@ export const validatePattern = async (
 };
 
 export class PatternValidationError extends ValidationError {
-  validator = 'pattern';
+  name = 'pattern';
 }
diff --git a/src/lib/validation/validators/required.ts b/src/lib/validation/validators/required.ts
index 83d48a0..637678f 100644
--- a/src/lib/validation/validators/required.ts
+++ b/src/lib/validation/validators/required.ts
@@ -21,5 +21,5 @@ export const validateRequired = async (
 };
 
 export class RequiredValidationError extends ValidationError {
-  validator = 'required';
+  name = 'required';
 }
diff --git a/src/tests/custom-component/custom-component.stories.tsx b/src/tests/custom-component/custom-component.stories.tsx
index 1bb69fb..1500c43 100644
--- a/src/tests/custom-component/custom-component.stories.tsx
+++ b/src/tests/custom-component/custom-component.stories.tsx
@@ -1,5 +1,5 @@
 import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
-import {DEFAULT_VALIDATORS, validator} from '@lib/validation';
+import {DEFAULT_VALIDATORS, Validator} from '@lib/validation';
 import {expect} from '@storybook/jest';
 import type {ComponentStory, Meta} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
@@ -14,7 +14,7 @@ const meta: Meta<typeof RenderForm> = {
 };
 export default meta;
 
-const VALIDATORS = DEFAULT_VALIDATORS.map(([fn, mssg], index): validator => {
+const VALIDATORS = DEFAULT_VALIDATORS.map(([fn, mssg], index): Validator => {
   if (index === 3) {
     return [fn, 'Vul het verplichte veld in'];
   }
@@ -42,9 +42,9 @@ const BootstrapInput: React.FC<IComponentProps> = ({callbacks, component, errors
         {...callbacks}
       />
 
-      {errors.map(error => (
-        <div key={error} className="invalid-feedback">
-          {error}
+      {errors.map((error, i) => (
+        <div key={i} className="invalid-feedback">
+          {error.message}
         </div>
       ))}
     </div>
diff --git a/src/types/componentprops.d.ts b/src/types/componentprops.d.ts
index 4930b5a..e046eaa 100644
--- a/src/types/componentprops.d.ts
+++ b/src/types/componentprops.d.ts
@@ -1,3 +1,4 @@
+import {ValidationError} from '@lib/validation';
 import {ComponentSchema} from 'formiojs';
 import React from 'react';
 
@@ -8,7 +9,7 @@ import {Value, Values} from './value';
 export interface IComponentProps {
   callbacks: ICallbackConfiguration;
   component: ComponentSchema;
-  errors: string[];
+  errors: ValidationError[];
   form: IFormioForm;
   value: Value | Values | undefined;
   path: string;
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index f17730f..22eb139 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -1,6 +1,6 @@
 import {IColumnProps} from '@components';
 import {IRenderable} from '@lib/renderer';
-import {validator} from '@lib/validation';
+import {Validator} from '@lib/validation';
 import React from 'react';
 
 import {IComponentProps} from './componentprops';
@@ -8,7 +8,7 @@ import {IComponentProps} from './componentprops';
 export interface IRenderConfiguration {
   components: IComponentConfiguration;
   containers: IContainerConfiguration;
-  validators: validator[];
+  validators: Validator[];
 }
 
 /**