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

package/dist/index.cjs.js

@@ -433,18 +433,22 @@ 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 allErrors = Object.values(validationErrors || {});
+    return {
+        touched: form?.touched || false,
+        errors: form?.errors,
+        customErrors: form?.customErrors,
+        isValidating: form?.isValidating,
+        isValid: allErrors.flat().length === 0
+    };
+};
 
-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 +605,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,15 +619,33 @@ const FlowerCoreReducers = {
             'errors',
             payload.id
         ]);
+        _unset(state, [
+            payload.name,
+            'form',
+            payload.currentNode,
+            'customErrors',
+            payload.id
+        ]);
         _unset(state, [payload.name, 'form', payload.currentNode, 'isValidating']);
     },
+    formFieldTouch: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'touches', payload.id], payload.touched);
+    },
+    formFieldDirty: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'dirty', payload.id], payload.dirty);
+    },
     addData: (state, { payload }) => {
         const prevData = _get(state, [payload.flowName, 'data']);
         _set(state, [payload.flowName, 'data'], { ...prevData, ...payload.value });
     },
     addDataByPath: (state, { payload }) => {
+        const { path: newpath } = getPath(payload.id);
+        const currentNode = FlowerStateUtils.makeSelectCurrentNodeId(payload.flowName)(state);
         if (payload.id && payload.id.length) {
-            _set(state, [payload.flowName, 'data', ...payload.id], payload.value);
+            _set(state, [payload.flowName, 'data', ...newpath], payload.value);
+            if (payload?.dirty) {
+                _set(state, [payload.flowName, 'form', currentNode, 'dirty', payload.id], payload.dirty);
+            }
         }
     },
     // TODO usato al momento solo il devtool
@@ -634,6 +659,16 @@ 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, 'errors'], {});
+        Object.keys(touchedFields).forEach((key) => {
+            const { flowNameFromPath = payload.flowName, path } = getPath(key);
+            _unset(state, [flowNameFromPath, 'data', ...path]);
+        });
+        _unset(state, [payload.flowName, 'form', payload.id, 'touches']);
+        _unset(state, [payload.flowName, 'form', payload.id, 'dirty']);
+        _unset(state, [payload.flowName, 'form', payload.id, 'touched']);
+    },
     node: (state, { payload }) => {
         const { name, history } = payload;
         const node = payload.nodeId || payload.node || '';
@@ -743,6 +778,8 @@ 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],
+    makeSelectNodeFormFieldDirty: (id) => (form) => form && form.dirty && form.dirty[id],
     makeSelectCurrentNodeId: (flower, startNodeId) => _get(flower, ['current']) || startNodeId,
     makeSelectCurrentNodeDisabled: (nodes, current) => !!_get(nodes, [current, 'disabled']),
     makeSelectPrevNodeRetain: (nodes, history, current) => {
@@ -760,19 +797,16 @@ const FlowerCoreStateSelectors = {
         if (nodes[prevFlowerNode] && nodes[prevFlowerNode].disabled)
             return;
         // 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) => {
+        return nodes[prevFlowerNode] && nodes[prevFlowerNode].retain
+            ? prevFlowerNode
+            : undefined;
+    },
+    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 +821,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,22 @@ 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 allErrors = Object.values(validationErrors || {});
+    return {
+        touched: form?.touched || false,
+        errors: form?.errors,
+        customErrors: form?.customErrors,
+        isValidating: form?.isValidating,
+        isValid: allErrors.flat().length === 0
+    };
+};
 
-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 +603,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);
     },
@@ -610,15 +617,33 @@ const FlowerCoreReducers = {
             'errors',
             payload.id
         ]);
+        _unset(state, [
+            payload.name,
+            'form',
+            payload.currentNode,
+            'customErrors',
+            payload.id
+        ]);
         _unset(state, [payload.name, 'form', payload.currentNode, 'isValidating']);
     },
+    formFieldTouch: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'touches', payload.id], payload.touched);
+    },
+    formFieldDirty: (state, { payload }) => {
+        _set(state, [payload.name, 'form', payload.currentNode, 'dirty', payload.id], payload.dirty);
+    },
     addData: (state, { payload }) => {
         const prevData = _get(state, [payload.flowName, 'data']);
         _set(state, [payload.flowName, 'data'], { ...prevData, ...payload.value });
     },
     addDataByPath: (state, { payload }) => {
+        const { path: newpath } = getPath(payload.id);
+        const currentNode = FlowerStateUtils.makeSelectCurrentNodeId(payload.flowName)(state);
         if (payload.id && payload.id.length) {
-            _set(state, [payload.flowName, 'data', ...payload.id], payload.value);
+            _set(state, [payload.flowName, 'data', ...newpath], payload.value);
+            if (payload?.dirty) {
+                _set(state, [payload.flowName, 'form', currentNode, 'dirty', payload.id], payload.dirty);
+            }
         }
     },
     // TODO usato al momento solo il devtool
@@ -632,6 +657,16 @@ 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, 'errors'], {});
+        Object.keys(touchedFields).forEach((key) => {
+            const { flowNameFromPath = payload.flowName, path } = getPath(key);
+            _unset(state, [flowNameFromPath, 'data', ...path]);
+        });
+        _unset(state, [payload.flowName, 'form', payload.id, 'touches']);
+        _unset(state, [payload.flowName, 'form', payload.id, 'dirty']);
+        _unset(state, [payload.flowName, 'form', payload.id, 'touched']);
+    },
     node: (state, { payload }) => {
         const { name, history } = payload;
         const node = payload.nodeId || payload.node || '';
@@ -741,6 +776,8 @@ 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],
+    makeSelectNodeFormFieldDirty: (id) => (form) => form && form.dirty && form.dirty[id],
     makeSelectCurrentNodeId: (flower, startNodeId) => _get(flower, ['current']) || startNodeId,
     makeSelectCurrentNodeDisabled: (nodes, current) => !!_get(nodes, [current, 'disabled']),
     makeSelectPrevNodeRetain: (nodes, history, current) => {
@@ -758,19 +795,16 @@ const FlowerCoreStateSelectors = {
         if (nodes[prevFlowerNode] && nodes[prevFlowerNode].disabled)
             return;
         // 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) => {
+        return nodes[prevFlowerNode] && nodes[prevFlowerNode].retain
+            ? prevFlowerNode
+            : undefined;
+    },
+    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 +819,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' | 'formFieldDirty' | '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,34 @@ 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
+     */
+    formFieldDirty: ReducerFunctionSign<T, {
+        name: string;
+        currentNode: string;
+        id: string;
+        dirty?: boolean;
+    }>;
+    /**
+     * @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
@@ -212,9 +254,10 @@ export type ReducersFunctions<T extends Record<string, any> = Record<string, Flo
      * @returns state
      */
     addDataByPath: ReducerFunctionSign<T, {
-        id: string[];
+        id: string;
         flowName: string;
         value: T | string;
+        dirty?: boolean;
     }>;
     /**
      * @param state
@@ -331,6 +374,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

@@ -51,7 +51,7 @@ export interface ISelectors {
      * @param current
      * @returns
      */
-    makeSelectPrevNodeRetain<T extends Record<string, any>>(nodes: Flower<T>['nodes'], history: Flower<T>['history'], current: Flower<T>['current']): boolean | string | undefined;
+    makeSelectPrevNodeRetain<T extends Record<string, any>>(nodes: Flower<T>['nodes'], history: Flower<T>['history'], current: Flower<T>['current']): string | undefined;
     /**
      * @param nodes
      * @param current
@@ -67,9 +67,20 @@ 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 form
+     * @returns
+     */
+    makeSelectNodeFormFieldDirty<T extends Record<string, any>>(id: string): (form: Form<T> | undefined) => boolean | undefined;
     /**
      * @param flower
      * @returns
@@ -94,7 +105,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 +114,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,13 @@ export type Form<T> = {
     errors?: {
         [K in keyof T]: Array<string>;
     };
+    customErrors?: {
+        [K in keyof T]: Array<string>;
+    };
+    dirty?: {
+        [K in keyof T]: boolean;
+    };
+    touches?: {
+        [K in keyof T]: boolean;
+    };
 };

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

@@ -43,6 +43,7 @@ export interface CoreStateUtils {
     makeSelectNodeErrors<T extends object>(name: string, currentNodeId: string): (state: T) => {
         touched: boolean;
         errors: any;
+        customErrors: any;
         isValid: boolean;
         isValidating?: boolean;
     };

package/package.json

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