feat: add external errors (#137)

Author: bocembocem

src/lib/core/components/Form/Controller.tsx

@@ -34,7 +34,7 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     parentOnChange,
     parentOnUnmount,
 }: ControllerProps<Value, SpecType>) => {
-    const {tools, __mirror} = useDynamicFormsCtx();
+    const {tools, externalErrors, __mirror} = useDynamicFormsCtx();
     const {inputEntity, Layout} = useComponents(spec);
     const render = useRender({name, spec, inputEntity, Layout});
     const validate = useValidate(spec);
@@ -47,6 +47,7 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
         tools,
         parentOnChange,
         parentOnUnmount,
+        externalErrors,
     });
     const withSearch = useSearch(spec, renderProps.input.value, name);
 

src/lib/core/components/Form/DynamicField.tsx

@@ -16,7 +16,7 @@ import {
     useSearchStore,
     useStore,
 } from './hooks';
-import {DynamicFormConfig, FieldValue, WonderMirror} from './types';
+import {BaseValidateError, DynamicFormConfig, FieldValue, WonderMirror} from './types';
 import {getDefaultSearchFunction, isCorrectConfig} from './utils';
 
 export interface DynamicFieldProps {
@@ -27,6 +27,7 @@ export interface DynamicFieldProps {
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
     generateRandomValue?: (spec: StringSpec) => string;
     withoutInsertFFDebounce?: boolean;
+    errors?: Record<string, BaseValidateError>;
     __mirror?: WonderMirror;
 }
 
@@ -38,6 +39,7 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     generateRandomValue,
     search,
     withoutInsertFFDebounce,
+    errors: externalErrors,
     __mirror,
 }) => {
     const DynamicFormsCtx = useCreateContext();
@@ -52,9 +54,10 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
             Monaco: isValidElementType(Monaco) ? Monaco : undefined,
             generateRandomValue,
             tools,
+            externalErrors,
             __mirror,
         }),
-        [tools, config, Monaco, __mirror, generateRandomValue],
+        [tools, config, Monaco, __mirror, generateRandomValue, externalErrors],
     );
 
     const searchContext = React.useMemo(

src/lib/core/components/Form/hooks/__tests__/useField.test.tsx

@@ -82,7 +82,7 @@ describe('Form/hooks/useField', () => {
 
         expect(mirror.field.useStore?.store.values[name]).not.toBe(value[name]);
         expect(mirror.field.useStore?.store.values[name]).toMatchObject(value[name]);
-        expect(mirror.field.useStore?.store.errors[name]).toBe(false);
+        expect(mirror.field.useStore?.store.errors[name]).toBe(undefined);
     });
 
     test('initialization with required object spec', () => {
@@ -117,7 +117,7 @@ describe('Form/hooks/useField', () => {
         expect(mirror.controller[name]?.useField?.arrayInput.value).toMatchObject(objectDefault);
 
         expect(mirror.field.useStore?.store.values[name]).toMatchObject(objectDefault);
-        expect(mirror.field.useStore?.store.errors[name]).toBe(false);
+        expect(mirror.field.useStore?.store.errors[name]).toBe(undefined);
     });
 
     test('initialization with required array spec', () => {
@@ -152,7 +152,7 @@ describe('Form/hooks/useField', () => {
         expect(mirror.controller[name]?.useField?.arrayInput.value).toMatchObject(arrayDefault);
 
         expect(mirror.field.useStore?.store.values[name]).toMatchObject(arrayDefault);
-        expect(mirror.field.useStore?.store.errors[name]).toBe(false);
+        expect(mirror.field.useStore?.store.errors[name]).toBe(undefined);
     });
 
     test('initialization with error', () => {
@@ -498,7 +498,7 @@ describe('Form/hooks/useField', () => {
         );
 
         expect(mirror.field.useStore?.store.values[name]).toMatchObject({});
-        expect(mirror.field.useStore?.store.errors[name]).toBe(false);
+        expect(mirror.field.useStore?.store.errors[name]).toBe(undefined);
 
         rerender(
             <Form initialValues={{}} onSubmit={_.noop}>

src/lib/core/components/Form/hooks/useField.tsx

@@ -6,6 +6,7 @@ import {isArraySpec, isNumberSpec, isObjectSpec} from '../../../helpers';
 import {Spec} from '../../../types';
 import {OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG} from '../constants';
 import {
+    BaseValidateError,
     DynamicFormsContext,
     FieldArrayValue,
     FieldObjectValue,
@@ -30,6 +31,7 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
           ) => void)
         | null;
     parentOnUnmount: ((childName: string) => void) | null;
+    externalErrors?: Record<string, BaseValidateError>;
 }
 
 export const useField = <Value extends FieldValue, SpecType extends Spec>({
@@ -41,6 +43,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
     tools,
     parentOnChange,
     parentOnUnmount: externalParentOnUnmount,
+    externalErrors,
 }: UseFieldProps<Value, SpecType>): FieldRenderProps<Value> => {
     const firstRenderRef = React.useRef(true);
 
@@ -67,7 +70,19 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
             }
         }
 
-        const error = validate?.(value);
+        let externalError = _.get(externalErrors, name);
+
+        if (
+            !(
+                _.isString(externalError) ||
+                _.isBoolean(externalError) ||
+                _.isUndefined(externalError)
+            )
+        ) {
+            externalError = undefined;
+        }
+
+        const error = validate?.(value) || externalError;
         const dirty = !_.isEqual(value, initialValue);
 
         return {
@@ -254,6 +269,25 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
         }
     }, [state.value]);
 
+    React.useEffect(() => {
+        const externalError = _.get(externalErrors, name);
+
+        if (
+            !firstRenderRef.current &&
+            (_.isString(externalError) ||
+                _.isBoolean(externalError) ||
+                _.isUndefined(externalError)) &&
+            state.error !== externalError &&
+            !(state.error && !externalError)
+        ) {
+            setState({...state, error: externalError});
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, {
+                ...state.childErrors,
+                [name]: externalError,
+            });
+        }
+    }, [externalErrors]);
+
     React.useEffect(() => {
         firstRenderRef.current = false;
 

src/lib/core/components/Form/types/context.ts

@@ -4,7 +4,7 @@ import type {MonacoEditorProps} from 'react-monaco-editor/lib/types';
 
 import {StringSpec} from '../../../types';
 
-import {DynamicFormConfig, FieldValue, ValidateError, WonderMirror} from './';
+import {BaseValidateError, DynamicFormConfig, FieldValue, ValidateError, WonderMirror} from './';
 
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
@@ -16,5 +16,6 @@ export interface DynamicFormsContext {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
+    externalErrors?: Record<string, BaseValidateError>;
     __mirror?: WonderMirror;
 }