fix(Form): remove validation on field removal (#200)

Author: tenphi

.changeset/metal-baboons-double.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Form is no longer validated on field removal (bugfix)

.changeset/soft-monkeys-marry.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Validation rules in Form now allows to return complex markup in error messages.

src/components/forms/Form/ComplexForm.stories.tsx

@@ -2,19 +2,19 @@ import { StoryFn } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 
 import {
-  Submit,
-  TextInput,
-  Select,
+  Block,
+  Checkbox,
+  CheckboxGroup,
   ComboBox,
+  Field,
   Form,
-  Radio,
   Item,
-  Field,
-  Checkbox,
-  CheckboxGroup,
   PasswordInput,
+  Radio,
+  Select,
+  Submit,
   Switch,
-  Block,
+  TextInput,
 } from '../../../index';
 import { NumberInput } from '../NumberInput/NumberInput';
 import { baseProps } from '../../../stories/lists/baseProps';
@@ -26,6 +26,44 @@ export default {
   parameters: { controls: { exclude: baseProps } },
 };
 
+const ComplexErrorTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form
+      form={form}
+      {...args}
+      onSubmit={(v) => {
+        console.log('onSubmit:', v);
+      }}
+      onValuesChange={(v) => {
+        console.log('onChange', v);
+      }}
+    >
+      <Field
+        name="text"
+        label="Text input"
+        rules={[
+          { required: true, message: 'This field is required' },
+          () => ({
+            validator(rule, value) {
+              return value.length >= 8
+                ? Promise.resolve()
+                : Promise.reject(
+                    <>
+                      This field should be <b>at least 8 symbols</b> long
+                    </>,
+                  );
+            },
+          }),
+        ]}
+      >
+        <TextInput />
+      </Field>
+    </Form>
+  );
+};
+
 const Template: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
 
@@ -185,3 +223,5 @@ export const FormInsideDialog: StoryFn = () => {
 };
 
 export const Default = Template.bind({});
+
+export const ComplexErrorMessage: StoryFn = ComplexErrorTemplate.bind({});

src/components/forms/Form/Field.tsx

@@ -125,7 +125,7 @@ export interface CubeFieldProps<T extends FieldTypes>
   /** The form instance */
   form?: CubeFormInstance<T>;
   /** The message for the field or text for the error */
-  message?: string;
+  message?: ReactNode;
   /** The description for the field */
   description?: ReactNode;
   /** Tooltip for the label that explains something. */

src/components/forms/Form/types.ts

@@ -1,10 +1,12 @@
+import { ReactNode } from 'react';
+
 export type FieldTypes = {
   [key: string]: any;
 };
 
 export type CubeFieldData<Name extends string | number | symbol, Value> = {
   readonly name: Name;
-  errors: string[];
+  errors: ReactNode[];
   value?: Value;
   inputValue?: Value;
   touched?: boolean;

src/components/forms/Form/useForm.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { ReactNode, useRef, useState } from 'react';
 
 import { dotize } from '../../../tasty';
 
@@ -216,19 +216,17 @@ export class CubeFormInstance<
         }
       })
       .catch((err) => {
-        if (!field.errors || !isEqual(field.errors, [err])) {
-          field.errors = [err];
+        field.errors = [err];
 
-          this.forceReRender();
-        }
+        this.forceReRender();
 
         return Promise.reject([err]);
       });
   }
 
   validateFields<Names extends (keyof T)[]>(names?: Names): Promise<any> {
     const fieldsList = names || Object.keys(this.fields);
-    const errorList: { name: string; errors: string[] }[] = [];
+    const errorList: { name: string; errors: ReactNode[] }[] = [];
 
     return Promise.allSettled(
       fieldsList.map((name) => {
@@ -271,7 +269,7 @@ export class CubeFormInstance<
     return !!field.touched;
   }
 
-  getFieldError<Name extends keyof T>(name: Name): string[] {
+  getFieldError<Name extends keyof T>(name: Name): ReactNode[] {
     const field = this.getFieldInstance(name);
 
     if (!field) return [];
@@ -297,8 +295,6 @@ export class CubeFormInstance<
     if (!skipRender) {
       this.forceReRender();
     }
-
-    this.validateFields().catch(() => {});
   }
 
   setFields<Names extends keyof T>(newFields: SetFieldsArrType<T, Names>[]) {

src/components/forms/Form/validation.ts

@@ -144,11 +144,11 @@ export async function applyRules(value, rules, form) {
 
   for (let rule of rules) {
     await applyRule(value, rule, form).catch((err) => {
-      if (typeof err !== 'string') {
+      if (err instanceof Error) {
         err = err?.message || rule.message;
       }
 
-      throw err;
+      throw err || rule.message;
     });
   }
 }