@flowerforce/flower-core 3.1.2-beta.3 → 3.1.2-beta.4

package/dist/index.cjs.js

@@ -433,18 +433,23 @@ const FlowerStateUtils = {
     },
     makeSelectNodeErrors: (name, currentNodeId) => (state) => {
         const form = FlowerStateUtils.selectFlowerFormNode(name, currentNodeId)(state);
-        return {
-            touched: form?.touched || false,
-            errors: form?.errors,
-            isValidating: form?.isValidating,
-            isValid: form && form.errors
-                ? Object.values(form.errors).flat().length === 0
-                : true
-        };
+        return createFormData(form);
     }
 };
+const createFormData = (form) => {
+    const validationErrors = form && form.errors;
+    const customErrors = form && form.customErrors;
+    const allErrors = { ...(validationErrors || {}), ...(customErrors || {}) };
+    return {
+        touched: form?.touched || false,
+        errors: form?.errors,
+        customErrors: form?.customErrors,
+        isValidating: form?.isValidating,
+        isValid: allErrors ? Object.values(allErrors).flat().length === 0 : true
+    };
+};
 
-const { generateNodes, hasNode, makeObjectRules, generateRulesName, findValidRule } = CoreUtils;
+const { generateNodes, hasNode, makeObjectRules, generateRulesName, findValidRule, getPath } = CoreUtils;
 /**
  * These functions are Redux reducers used in a Flux architecture for managing state transitions and updates in a Flower application.
  */
@@ -601,6 +606,9 @@ const FlowerCoreReducers = {
             }
         }
     },
+    formAddCustomErrors: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'customErrors', payload.id], payload.errors);
+    },
     formAddErrors: (state, { payload }) => {
         _set(state, [payload.name, 'form', payload.currentNode, 'errors', payload.id], payload.errors);
     },
@@ -614,6 +622,9 @@ const FlowerCoreReducers = {
         ]);
         _unset(state, [payload.name, 'form', payload.currentNode, 'isValidating']);
     },
+    formFieldTouch: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'touches', payload.id], payload.touched);
+    },
     addData: (state, { payload }) => {
         const prevData = _get(state, [payload.flowName, 'data']);
         _set(state, [payload.flowName, 'data'], { ...prevData, ...payload.value });
@@ -634,6 +645,14 @@ const FlowerCoreReducers = {
     setFormIsValidating: (state, { payload }) => {
         _set(state, [payload.name, 'form', payload.currentNode, 'isValidating'], payload.isValidating);
     },
+    resetForm: (state, { payload }) => {
+        const touchedFields = _get(state, [payload.flowName, 'form', payload.id, 'touches'], {});
+        Object.keys(touchedFields).forEach((key) => {
+            const { flowNameFromPath = payload.flowName, path } = getPath(key);
+            _unset(state, [flowNameFromPath, 'data', ...path]);
+        });
+        _unset(state, [payload.flowName, 'form', payload.id]);
+    },
     node: (state, { payload }) => {
         const { name, history } = payload;
         const node = payload.nodeId || payload.node || '';
@@ -743,6 +762,7 @@ const FlowerCoreStateSelectors = {
     getDataByFlow: (flower) => _get(flower, ['data']) ?? {},
     getDataFromState: (id) => (data) => (id === '*' ? data : _get(data, id)),
     makeSelectNodeFormTouched: (form) => form && form.touched,
+    makeSelectNodeFormFieldTouched: (id) => (form) => form && form.touches && form.touches[id],
     makeSelectCurrentNodeId: (flower, startNodeId) => _get(flower, ['current']) || startNodeId,
     makeSelectCurrentNodeDisabled: (nodes, current) => !!_get(nodes, [current, 'disabled']),
     makeSelectPrevNodeRetain: (nodes, history, current) => {
@@ -762,17 +782,12 @@ const FlowerCoreStateSelectors = {
         // eslint-disable-next-line consistent-return
         return (nodes[prevFlowerNode] && nodes[prevFlowerNode].retain && prevFlowerNode);
     },
-    makeSelectNodeErrors: (form) => {
-        return {
-            touched: form?.touched || false,
-            errors: form?.errors,
-            isValidating: form?.isValidating,
-            isValid: form && form.errors
-                ? Object.values(form.errors).flat().length === 0
-                : true
-        };
-    },
-    makeSelectFieldError: (name, id, validate) => (data) => {
+    makeSelectNodeErrors: createFormData,
+    makeSelectFieldError: (name, id, validate) => (data, form) => {
+        const customErrors = Object.entries((form && form.customErrors) || {})
+            .filter(([k]) => k === id)
+            .map(([, v]) => v)
+            .flat();
         if (!validate || !data)
             return [];
         const errors = validate.filter((rule) => {
@@ -787,7 +802,7 @@ const FlowerCoreStateSelectors = {
             return hasError;
         });
         const result = errors.map((r) => (r && r.message) || 'error');
-        return result.length === 0 ? [] : result;
+        return [...customErrors, ...(result.length === 0 ? [] : result)];
     },
     selectorRulesDisabled: (id, rules, keys, flowName, value) => (data, form) => {
         const newState = { ...data, ...value, $form: form };

package/dist/index.esm.js

@@ -431,18 +431,23 @@ const FlowerStateUtils = {
     },
     makeSelectNodeErrors: (name, currentNodeId) => (state) => {
         const form = FlowerStateUtils.selectFlowerFormNode(name, currentNodeId)(state);
-        return {
-            touched: form?.touched || false,
-            errors: form?.errors,
-            isValidating: form?.isValidating,
-            isValid: form && form.errors
-                ? Object.values(form.errors).flat().length === 0
-                : true
-        };
+        return createFormData(form);
     }
 };
+const createFormData = (form) => {
+    const validationErrors = form && form.errors;
+    const customErrors = form && form.customErrors;
+    const allErrors = { ...(validationErrors || {}), ...(customErrors || {}) };
+    return {
+        touched: form?.touched || false,
+        errors: form?.errors,
+        customErrors: form?.customErrors,
+        isValidating: form?.isValidating,
+        isValid: allErrors ? Object.values(allErrors).flat().length === 0 : true
+    };
+};
 
-const { generateNodes, hasNode, makeObjectRules, generateRulesName, findValidRule } = CoreUtils;
+const { generateNodes, hasNode, makeObjectRules, generateRulesName, findValidRule, getPath } = CoreUtils;
 /**
  * These functions are Redux reducers used in a Flux architecture for managing state transitions and updates in a Flower application.
  */
@@ -599,6 +604,9 @@ const FlowerCoreReducers = {
             }
         }
     },
+    formAddCustomErrors: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'customErrors', payload.id], payload.errors);
+    },
     formAddErrors: (state, { payload }) => {
         _set(state, [payload.name, 'form', payload.currentNode, 'errors', payload.id], payload.errors);
     },
@@ -612,6 +620,9 @@ const FlowerCoreReducers = {
         ]);
         _unset(state, [payload.name, 'form', payload.currentNode, 'isValidating']);
     },
+    formFieldTouch: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'touches', payload.id], payload.touched);
+    },
     addData: (state, { payload }) => {
         const prevData = _get(state, [payload.flowName, 'data']);
         _set(state, [payload.flowName, 'data'], { ...prevData, ...payload.value });
@@ -632,6 +643,14 @@ const FlowerCoreReducers = {
     setFormIsValidating: (state, { payload }) => {
         _set(state, [payload.name, 'form', payload.currentNode, 'isValidating'], payload.isValidating);
     },
+    resetForm: (state, { payload }) => {
+        const touchedFields = _get(state, [payload.flowName, 'form', payload.id, 'touches'], {});
+        Object.keys(touchedFields).forEach((key) => {
+            const { flowNameFromPath = payload.flowName, path } = getPath(key);
+            _unset(state, [flowNameFromPath, 'data', ...path]);
+        });
+        _unset(state, [payload.flowName, 'form', payload.id]);
+    },
     node: (state, { payload }) => {
         const { name, history } = payload;
         const node = payload.nodeId || payload.node || '';
@@ -741,6 +760,7 @@ const FlowerCoreStateSelectors = {
     getDataByFlow: (flower) => _get(flower, ['data']) ?? {},
     getDataFromState: (id) => (data) => (id === '*' ? data : _get(data, id)),
     makeSelectNodeFormTouched: (form) => form && form.touched,
+    makeSelectNodeFormFieldTouched: (id) => (form) => form && form.touches && form.touches[id],
     makeSelectCurrentNodeId: (flower, startNodeId) => _get(flower, ['current']) || startNodeId,
     makeSelectCurrentNodeDisabled: (nodes, current) => !!_get(nodes, [current, 'disabled']),
     makeSelectPrevNodeRetain: (nodes, history, current) => {
@@ -760,17 +780,12 @@ const FlowerCoreStateSelectors = {
         // eslint-disable-next-line consistent-return
         return (nodes[prevFlowerNode] && nodes[prevFlowerNode].retain && prevFlowerNode);
     },
-    makeSelectNodeErrors: (form) => {
-        return {
-            touched: form?.touched || false,
-            errors: form?.errors,
-            isValidating: form?.isValidating,
-            isValid: form && form.errors
-                ? Object.values(form.errors).flat().length === 0
-                : true
-        };
-    },
-    makeSelectFieldError: (name, id, validate) => (data) => {
+    makeSelectNodeErrors: createFormData,
+    makeSelectFieldError: (name, id, validate) => (data, form) => {
+        const customErrors = Object.entries((form && form.customErrors) || {})
+            .filter(([k]) => k === id)
+            .map(([, v]) => v)
+            .flat();
         if (!validate || !data)
             return [];
         const errors = validate.filter((rule) => {
@@ -785,7 +800,7 @@ const FlowerCoreStateSelectors = {
             return hasError;
         });
         const result = errors.map((r) => (r && r.message) || 'error');
-        return result.length === 0 ? [] : result;
+        return [...customErrors, ...(result.length === 0 ? [] : result)];
     },
     selectorRulesDisabled: (id, rules, keys, flowName, value) => (data, form) => {
         const newState = { ...data, ...value, $form: form };

package/dist/src/FlowerCoreStateUtils.d.ts

@@ -1,2 +1,9 @@
 import { CoreStateUtils } from './interfaces/UtilsInterface';
 export declare const FlowerStateUtils: CoreStateUtils;
+export declare const createFormData: (form: Record<string, any>) => {
+    touched: any;
+    errors: any;
+    customErrors: any;
+    isValidating: any;
+    isValid: boolean;
+};

package/dist/src/interfaces/ReducerInterface.d.ts

@@ -5,7 +5,7 @@ export type ActionWithPayload<T> = {
     payload: T;
 };
 type ReducerFunctionSign<T extends object, R> = (state: Record<string, Flower<T>>, action: ActionWithPayload<R>) => Record<string, Flower<T>> | void;
-export type ActionsTypes = 'historyAdd' | 'historyPrevToNode' | 'setFormTouched' | 'forceAddHistory' | 'historyPop' | 'restoreHistory' | 'replaceNode' | 'initializeFromNode' | 'forceResetHistory' | 'destroy' | 'initNodes' | 'setCurrentNode' | 'formAddErrors' | 'formRemoveErrors' | 'addData' | 'addDataByPath' | 'replaceData' | 'unsetData' | 'setFormIsValidating' | 'node' | 'prevToNode' | 'next' | 'prev' | 'reset';
+export type ActionsTypes = 'historyAdd' | 'historyPrevToNode' | 'setFormTouched' | 'forceAddHistory' | 'historyPop' | 'restoreHistory' | 'replaceNode' | 'initializeFromNode' | 'forceResetHistory' | 'destroy' | 'initNodes' | 'setCurrentNode' | 'formAddErrors' | 'formRemoveErrors' | 'addData' | 'addDataByPath' | 'replaceData' | 'unsetData' | 'setFormIsValidating' | 'resetForm' | 'formFieldTouch' | 'node' | 'prevToNode' | 'next' | 'prev' | 'reset';
 /**
  * These functions are Redux reducers used in a Flux architecture for managing state transitions and updates in a Flower application.
  */
@@ -162,6 +162,20 @@ export type ReducersFunctions<T extends Record<string, any> = Record<string, Flo
         name: string;
         node: string;
     }>;
+    /**
+     * @param state
+     * @param action
+     *
+     * Adds errors to a form node in a flow.
+     *
+     * @returns state
+     */
+    formAddCustomErrors: ReducerFunctionSign<T, {
+        name: string;
+        currentNode: string;
+        id: string;
+        errors: string[];
+    }>;
     /**
      * @param state
      * @param action
@@ -178,6 +192,20 @@ export type ReducersFunctions<T extends Record<string, any> = Record<string, Flo
             [x: string]: string[];
         } | string[];
     }>;
+    /**
+     * @param state
+     * @param action
+     *
+     * Set touch form single field
+     *
+     * @returns state
+     */
+    formFieldTouch: ReducerFunctionSign<T, {
+        name: string;
+        currentNode: string;
+        id: string;
+        touched?: boolean;
+    }>;
     /**
      * @param state
      * @param action
@@ -331,6 +359,19 @@ export type ReducersFunctions<T extends Record<string, any> = Record<string, Flo
         name?: string;
         flowName?: string;
         initialData?: Record<string, any>;
+    }
+    /**
+     * @param state
+     * @param action
+     *
+     * Reset form.
+     *
+     * @returns state
+     */
+    >;
+    resetForm: ReducerFunctionSign<T, {
+        id: string;
+        flowName: string;
     }>;
 };
 export {};

package/dist/src/interfaces/SelectorsInterface.d.ts

@@ -67,9 +67,15 @@ export interface ISelectors {
     makeSelectNodeErrors<T extends Record<string, any>>(form: Form<T> | undefined): {
         touched: boolean;
         errors: any;
+        customErrors: any;
         isValid: boolean;
         isValidating?: boolean;
     };
+    /**
+     * @param form
+     * @returns
+     */
+    makeSelectNodeFormFieldTouched<T extends Record<string, any>>(id: string): (form: Form<T> | undefined) => boolean | undefined;
     /**
      * @param flower
      * @returns
@@ -94,7 +100,7 @@ export interface ISelectors {
     makeSelectFieldError<T extends Record<string, any>>(name: string, id: string, validate: {
         rules?: RulesObject<any>;
         message?: string;
-    }[] | null): (data?: T) => Array<string>;
+    }[] | null): (data: T | undefined, form: Form<T>) => Array<string>;
     /**
      * @param id
      * @param rules
@@ -103,10 +109,5 @@ export interface ISelectors {
      * @param value
      * @returns
      */
-    selectorRulesDisabled<T extends Record<string, any>>(id: string, rules: any, keys: string[] | null, flowName: string, value: any): (data: T | undefined, form: {
-        touched: boolean;
-        errors: any;
-        isValid: boolean;
-        isValidating?: boolean;
-    }) => boolean;
+    selectorRulesDisabled<T extends Record<string, any>>(id: string, rules: any, keys: string[] | null, flowName: string, value: any): (data: T | undefined, form: Form<T>) => boolean;
 }

package/dist/src/interfaces/Store.d.ts

@@ -49,4 +49,10 @@ export type Form<T> = {
     errors?: {
         [K in keyof T]: Array<string>;
     };
+    customErrors?: {
+        [K in keyof T]: Array<string>;
+    };
+    touches?: {
+        [K in keyof T]: boolean;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-core",
-  "version": "3.1.2-beta.3",
+  "version": "3.1.2-beta.4",
   "description": "Core functions for flowerJS",
   "repository": {
     "type": "git",