@flowerforce/flower-react 4.0.10-beta.0 → 4.0.11-beta.1

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+## 3.7.2 (2025-04-23)
+
+
+### 🩹 Fixes
+
+- package lock ([a3bb210](https://github.com/flowerforce/flower/commit/a3bb210))
+
+
+### 🧱 Updated Dependencies
+
+- Updated flower-core to 3.5.2
+
+## 3.7.1 (2025-04-19)
+
+
+### 🧱 Updated Dependencies
+
+- Updated flower-core to 3.5.1
+
+## 3.7.0 (2025-04-19)
+
+
+### 🚀 Features
+
+- remove data blank from init nodes ([#80](https://github.com/flowerforce/flower/pull/80))
+
+
+### 🧱 Updated Dependencies
+
+- Updated flower-core to 3.5.0
+
+## 3.6.0 (2025-04-19)
+
+
+### 🚀 Features
+
+- added remove value on hide element ([#68](https://github.com/flowerforce/flower/pull/68))
+
+
+### 🩹 Fixes
+
+- avoid validate hidden field ([#67](https://github.com/flowerforce/flower/pull/67))
+
+
+### 🧱 Updated Dependencies
+
+- Updated flower-core to 3.4.0
+
 ## 3.5.0 (2024-10-08)
 
 

package/dist/index.cjs.js

@@ -5,17 +5,42 @@ var _keyBy = require('lodash/keyBy');
 var flowerCore = require('@flowerforce/flower-core');
 var flowerReactContext = require('@flowerforce/flower-react-context');
 var _get = require('lodash/get');
-var toolkit = require('@reduxjs/toolkit');
 var flowerReactStore = require('@flowerforce/flower-react-store');
+var toolkit = require('@reduxjs/toolkit');
 var reselect = require('reselect');
+var flowerReactHistoryContext = require('@flowerforce/flower-react-history-context');
 var flowerReactShared = require('@flowerforce/flower-react-shared');
 var set = require('lodash/set');
 
-// eslint-disable-next-line import/prefer-default-export
-const convertElements = (nodes) => {
-    const res = flowerCore.CoreUtils.generateNodesForFlowerJson(nodes);
-    return res;
+const getRulesExists = (rules) => {
+    return Object.keys(rules).length ? flowerCore.FlowUtils.mapEdge(rules) : undefined;
 };
+function hasDisplayName(type) {
+    return (!!type &&
+        typeof type === 'object' &&
+        'displayName' in type &&
+        typeof type.displayName === 'string');
+}
+const generateNodesForFlowerJson = (nodes) => nodes
+    .filter((child) => typeof child === 'object' && child !== null && 'props' in child)
+    .filter((e) => !!_get(e, 'props.id'))
+    .map((e) => {
+    const rules = flowerCore.FlowUtils.makeRules(e.props.to ?? {});
+    const nextRules = getRulesExists(rules);
+    const children = e.props.data?.children;
+    const nodeType = hasDisplayName(e.type)
+        ? e.type.displayName
+        : e.props.as || 'FlowerNode';
+    return {
+        nodeId: e.props.id,
+        nodeType,
+        nodeTitle: _get(e.props, 'data.title'),
+        children,
+        nextRules,
+        retain: e.props.retain,
+        disabled: e.props.disabled
+    };
+});
 
 const flowerReducer = toolkit.createSlice({
     name: flowerCore.REDUCER_NAME.FLOWER_FLOW,
@@ -42,60 +67,37 @@ const selectFlowerHistory = (name) => reselect.createSelector(selectFlower(name)
 const makeSelectNodesIds = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectNodesIds);
 const makeSelectStartNodeId = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectStartNodeId);
 const makeSelectCurrentNodeId = (name) => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeId);
+const makeSelectIsCurrentNode = (name) => reselect.createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (flower, current) => flower.nodes[current]);
 const makeSelectPrevNodeRetain = (name) => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectPrevNodeRetain);
 const makeSelectCurrentNodeDisabled = (name) => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeDisabled);
 // dati nel flow selezionato
 const makeSelectData = (name) => reselect.createSelector(selectFlowerDataNode(name), (data) => data?.data ?? {});
 reselect.createSelector(selectGlobalData, flowerCore.FlowerStateUtils.getAllData);
 
-/* eslint-disable no-undef */
-/* eslint-disable no-underscore-dangle */
-/*
- * FlowerClient
- */
-const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialState = {}, initialData }) => {
-    const flowName = name;
-    const { dispatch, store, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
-    const one = React.useRef(false);
-    const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
-    // TODO could make that transformation in CoreUtils.generateNodesForFlowerJson
-    // eslint-disable-next-line react-hooks/exhaustive-deps, max-len
-    const nodes = React.useMemo(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    () => convertElements(React.Children.toArray(children)), [children]);
-    const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
-    const isInitialized = useSelector(makeSelectStartNodeId(name));
-    const history = useSelector(selectFlowerHistory(name));
-    const current = useSelector(makeSelectCurrentNodeId(flowName));
-    const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
-    const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
+const useInitNodes = ({ one, nodes, name, startId, persist = false, initialData, initialState = {} }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         if (nodes.length > 0 && one.current === false) {
             one.current = true;
             dispatch(flowerActions.initNodes({
-                name: flowName,
-                // @ts-expect-error FIX ME
+                name,
                 nodes,
                 startId: startId ?? '',
-                persist: destroyOnUnmount === false,
+                persist,
                 initialState
             }));
-            if (initialData) {
-                dispatch(flowerReactStore.flowerDataActions.initData({
-                    rootName: flowName,
-                    initialData: initialData ?? {}
-                }));
-            }
         }
-    }, [
-        dispatch,
-        flowName,
-        nodes,
-        startId,
-        destroyOnUnmount,
-        initialState,
-        initialData
-    ]);
+        if (initialData) {
+            dispatch(flowerReactStore.flowerDataActions.initData({
+                rootName: name,
+                initialData: initialData ?? {}
+            }));
+        }
+    }, [dispatch, name, nodes, startId, initialData, initialState, persist]);
+};
+
+const useInitDevtools = ({ devtoolState, setWsDevtools, flowName, }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         /* istanbul ignore next */
         const eventCb = (msg) => {
@@ -109,32 +111,39 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 dispatch(flowerActions.setCurrentNode({ name: msg.name, node: msg.id }));
             }
             // if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
-            //   dispatch(
-            //     formActions.replaceData({ flowName: msg.name, value: msg.data })
-            //   )
+            //   dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }))
             // }
             // if (msg.action === 'ADD_DATA' && msg.name === flowName) {
-            //   dispatch(formActions.addData({ flowName: msg.name, value: msg.data }))
+            //   dispatch(actions.addData({ flowName: msg.name, value: msg.data }))
             // }
         };
         /* istanbul ignore next */
-        if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
+        if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
             flowerCore.Emitter.on('flower-devtool-to-client', eventCb);
         }
         return () => {
             /* istanbul ignore next */
-            if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
+            if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
                 flowerCore.Emitter.off('flower-devtool-to-client', eventCb);
             }
         };
     }, [dispatch, flowName]);
+};
+
+const useDestroyFlow = ({ flowName, one, persist }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => () => {
-        // unmount function
-        if (destroyOnUnmount && one.current === true) {
+        if (persist)
+            return;
+        if (one.current === true) {
             one.current = false;
             dispatch(flowerActions.destroy({ name: flowName }));
         }
-    }, [dispatch, flowName, destroyOnUnmount]);
+    }, [dispatch, flowName, persist]);
+};
+
+const useClientInitEvent = ({ flowName, isInitialized, wsDevtools }) => {
+    const { store } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         /* istanbul ignore next */
         if (isInitialized &&
@@ -150,7 +159,11 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 getState: store.getState
             });
         }
-    }, [dispatch, flowName, wsDevtools, isInitialized, store]);
+    }, [flowName, wsDevtools, isInitialized, store]);
+};
+const useSetHistoryEvent = ({ flowName, isInitialized, wsDevtools }) => {
+    const { useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const history = useSelector(selectFlowerHistory(flowName));
     React.useEffect(() => {
         /* istanbul ignore next */
         if (isInitialized &&
@@ -164,7 +177,9 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 history
             });
         }
-    }, [dispatch, flowName, history, wsDevtools, isInitialized]);
+    }, [flowName, history, wsDevtools, isInitialized]);
+};
+const useSetCurrentEvent = ({ current, flowName, isInitialized, wsDevtools }) => {
     React.useEffect(() => {
         if (!current)
             return;
@@ -184,6 +199,9 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
             });
         }
     }, [flowName, current, wsDevtools, isInitialized]);
+};
+const useFlowerNavigateEvent = ({ current, flowName, isInitialized, wsDevtools, isDisabled }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     React.useEffect(() => {
         if (!current)
             return;
@@ -191,7 +209,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
         if (!isInitialized)
             return;
         if (isDisabled) {
-            dispatch(flowerActions.next({ flowName }));
+            dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/next`, payload: { flowName, disabled: true } });
             // eslint-disable-next-line no-underscore-dangle, no-undef
             /* istanbul ignore next */
             if (wsDevtools &&
@@ -214,7 +232,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
             flowerCore.devtoolState &&
             _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
             if (isInitialized === current)
-                return; // salto il primo event
+                return; // salto il primo evento
             flowerCore.Emitter.emit('flower-devtool-from-client', {
                 source: 'flower-client',
                 action: 'SET_SELECTED',
@@ -223,15 +241,55 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 time: new Date()
             });
         }
-    }, [
-        dispatch,
-        flowName,
+    }, [dispatch, flowName, current, isDisabled, wsDevtools, isInitialized]);
+};
+
+const useSelectorsClient = (flowName) => {
+    const { useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const isInitialized = useSelector(makeSelectStartNodeId(flowName));
+    const current = useSelector(makeSelectCurrentNodeId(flowName));
+    const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
+    const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
+    return {
+        isInitialized,
         current,
         isDisabled,
-        store,
-        wsDevtools,
-        isInitialized
-    ]);
+        prevFlowerNodeId
+    };
+};
+
+/*
+ * FlowerClient
+ */
+const FlowerClient = ({ children, name, destroyOnUnmount = true, persist = false, startId = null, initialState = {}, initialData }) => {
+    const flowName = name;
+    const _persist = persist || !destroyOnUnmount;
+    const one = React.useRef(false);
+    const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+    const nodes = React.useMemo(() => generateNodesForFlowerJson(React.Children.toArray(children)), [children]);
+    const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
+    const { current, isDisabled, isInitialized, prevFlowerNodeId } = useSelectorsClient(flowName);
+    useInitNodes({
+        name,
+        nodes,
+        one,
+        initialData,
+        initialState,
+        persist: _persist,
+        startId
+    });
+    useDestroyFlow({ flowName, one, persist: _persist });
+    useInitDevtools({ devtoolState: flowerCore.devtoolState, setWsDevtools, flowName });
+    useClientInitEvent({ flowName, isInitialized, wsDevtools });
+    useSetHistoryEvent({ flowName, isInitialized, wsDevtools });
+    useSetCurrentEvent({ current, flowName, isInitialized, wsDevtools });
+    useFlowerNavigateEvent({
+        current,
+        flowName,
+        isDisabled,
+        isInitialized,
+        wsDevtools
+    });
     const currentNodeId = prevFlowerNodeId || current;
     const contextValues = React.useMemo(() => ({
         name: flowName,
@@ -245,10 +303,10 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
         React.createElement(flowerReactContext.FlowerReactProvider, { value: prevContextValues }, nodeById[currentNodeId]),
         React.createElement(flowerReactContext.FlowerReactProvider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
 };
-const component$9 = React.memo(FlowerClient);
-component$9.displayName = 'Flower';
+const component$8 = React.memo(FlowerClient);
+component$8.displayName = 'Flower';
 // workaround for let typescript read JSX component as a valid JSX element using react 19(?)
-const Flower = component$9;
+const Flower = component$8;
 
 const FlowAction = ({ children, onEnter, onExit }) => {
     React.useEffect(() => {
@@ -259,13 +317,12 @@ const FlowAction = ({ children, onEnter, onExit }) => {
     }, [onEnter, onExit]);
     return React.createElement(React.Fragment, null, children);
 };
-const component$8 = React.memo(FlowAction);
-component$8.displayName = 'FlowerAction';
-const FlowerAction = component$8;
+const component$7 = React.memo(FlowAction);
+component$7.displayName = 'FlowerAction';
+const FlowerAction = component$7;
 
 const _FlowerComponent = ({ children }) => children;
-const component$7 = React.memo(_FlowerComponent);
-const FlowerComponent = component$7;
+React.memo(_FlowerComponent);
 
 const _FlowerFlow = ({ children, onEnter, onExit }) => {
     React.useEffect(() => {
@@ -311,6 +368,43 @@ const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLOAD_K
 const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLOAD_KEYS_NEEDED.jump);
 const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLOAD_KEYS_NEEDED.next);
 const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLOAD_KEYS_NEEDED.restart);
+const handleHistoryStackChange = (currentIndex, currentNode, flowName, withUrl) => {
+    const historyNode = `/${flowName}/${currentNode.nodeId}`;
+    if (currentNode.nodeType === 'FlowerAction')
+        return currentIndex;
+    const nextIndex = currentIndex + 1;
+    if (history.state?.index !== nextIndex) {
+        window.history.pushState({
+            index: nextIndex,
+            stack: [...(window.history.state.stack ?? []), historyNode]
+        }, '', withUrl ? historyNode : '');
+    }
+    return nextIndex;
+};
+
+const useHistorySync = ({ backAction, nextAction }) => {
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    const { index, isActive, setIndex, withUrl } = flowerReactHistoryContext.useHistoryContext();
+    React.useEffect(() => {
+        if (!isActive)
+            return;
+        const initialIndex = window.history.state?.index ?? 0;
+        setIndex(initialIndex);
+        window.history.replaceState({ index: initialIndex, stack: [...(window.history.state?.stack ?? [])] }, withUrl ? '/' : '', '');
+        const onPopState = (event) => {
+            const newIndex = window.history.state?.index ?? 0;
+            if (newIndex > index) {
+                nextAction();
+            }
+            if (newIndex < index) {
+                backAction();
+            }
+            setIndex(newIndex);
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, [dispatch, backAction, nextAction]);
+};
 
 /** This hook allows you to read flow informations, such as the flowName and ID of the current node.
  *
@@ -332,10 +426,18 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLO
  */
 const useFlower = ({ flowName: customFlowName, name } = {}) => {
     const { name: flowNameDefault, initialData } = React.useContext(flowerReactContext.FlowerReactContext);
+    const { index, isActive, setIndex, withUrl } = flowerReactHistoryContext.useHistoryContext();
     const { store, dispatch, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
+    const currentNode = useSelector(makeSelectIsCurrentNode(flowName ?? ''));
     const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
+    React.useEffect(() => {
+        if (currentNode.nodeType === 'FlowerAction')
+            return;
+        window.history.replaceState({ ...window.history.state }, '', withUrl ? `/${flowName}/${nodeId}` : '');
+    }, [nodeId, flowName, withUrl, currentNode]);
+    const stack = React.useMemo(() => window.history.state?.stack?.map((path) => path.split('/')[1]), [window.history.state?.stack]);
     const emitNavigateEvent = React.useCallback(
     //TODO check this function is needed
     (params) => {
@@ -357,18 +459,37 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         const { type, payload } = makeActionPayloadOnNext(flowName, params);
         dispatch({
             type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`,
-            payload: {
-                ...payload,
-                data: store.getState()
-            }
+            payload: { ...payload, data: store.getState() }
         });
+        if (isActive) {
+            setIndex(handleHistoryStackChange(index, currentNode, flowName, withUrl));
+        }
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, store]);
+    /**
+     * By doing this, we have a full control over flower navigation from both our buttons and browser back and forward navigation
+     * In order to trigger back correctly, trigger a real history back
+     * If you use replaceState({ index: 2 }) while at index 3,
+     * you visually move to step 2, but the browser still sees you at step 3.
+     * As a result:
+     *  - The browser's Forward button stays disabled
+     *  - No popstate event is triggered
+     *  - The history flow is broken
+     * Use history.back() instead to preserve proper browser navigation.
+     */
+    const interceptBack = () => {
+        window.history.back();
+    };
     const back = React.useCallback((param) => {
-        const { type, payload } = makeActionPayloadOnBack(flowName, param);
-        dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
+        const { type, payload } = makeActionPayloadOnBack(isActive ? (stack?.[stack?.length - 1] ?? flowName) : flowName, param);
+        dispatch({
+            type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`,
+            payload
+        });
+        setIndex(index - 1);
         emitNavigateEvent({ type, payload });
-    }, [dispatch, emitNavigateEvent, flowName]);
+    }, [dispatch, emitNavigateEvent, flowName, stack]);
+    useHistorySync({ backAction: back, nextAction: next });
     const restart = React.useCallback((param) => {
         const { type, payload } = makeActionPayloadOnRestart(flowName, param);
         dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
@@ -377,10 +498,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
     const reset = React.useCallback((param) => {
         const { type, payload } = makeActionPayloadOnReset(flowName, typeof param === 'string'
             ? { node: param, initialData }
-            : {
-                ...param,
-                initialData
-            });
+            : { ...param, initialData });
         dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, initialData]);
@@ -403,7 +521,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         startId,
         next,
         jump,
-        back,
+        back: isActive ? interceptBack : back,
         reset,
         restart
     };
@@ -647,9 +765,12 @@ Object.defineProperty(exports, "createApi", {
   enumerable: true,
   get: function () { return flowerReactStore.createApi; }
 });
+Object.defineProperty(exports, "HistoryContextProvider", {
+  enumerable: true,
+  get: function () { return flowerReactHistoryContext.HistoryContextProvider; }
+});
 exports.Flower = Flower;
 exports.FlowerAction = FlowerAction;
-exports.FlowerComponent = FlowerComponent;
 exports.FlowerFlow = FlowerFlow;
 exports.FlowerNavigate = FlowerNavigate;
 exports.FlowerNode = FlowerNode;