@flowerforce/flower-react 3.1.1 → 3.1.2-beta.0

package/dist/index.cjs.js

@@ -14,6 +14,7 @@ const context = _context;
 const Provider = _context.Provider;
 const Consumer = _context.Consumer;
 
+// eslint-disable-next-line import/prefer-default-export
 const convertElements = nodes => {
   const res = flowerCore.CoreUtils.generateNodesForFlowerJson(nodes);
   return res;
@@ -45,7 +46,9 @@ const makeSelectStartNodeId = name => reselect.createSelector(selectFlower(name)
 const makeSelectCurrentNodeId = name => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeId);
 const makeSelectPrevNodeRetain = name => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectPrevNodeRetain);
 const makeSelectCurrentNodeDisabled = name => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeDisabled);
+// dati nel flow selezionato
 const getDataByFlow = name => reselect.createSelector(selectFlower(name), flowerCore.Selectors.getDataByFlow);
+// selettore per recuperare i dati di un flow specifico e id specifico
 const getDataFromState = (name, id) => reselect.createSelector(getDataByFlow(name), flowerCore.Selectors.getDataFromState(id));
 const makeSelectNodeErrors = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeErrors);
 const makeSelectNodeFormTouched = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormTouched);
@@ -53,6 +56,7 @@ const getAllData = reselect.createSelector(selectGlobal, mapData);
 const makeSelectFieldError = (name, id, validate) => reselect.createSelector(getAllData, flowerCore.Selectors.makeSelectFieldError(name, id, validate));
 const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => reselect.createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), flowerCore.Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
 
+//TODO check reduxContext type due to remove all any types
 const reduxContext = /*#__PURE__*/React.createContext(null);
 const useDispatch = reactRedux.createDispatchHook(reduxContext);
 const useSelector = reactRedux.createSelectorHook(reduxContext);
@@ -83,6 +87,11 @@ class FlowerProvider extends React.PureComponent {
   }
 }
 
+/* eslint-disable no-undef */
+/* eslint-disable no-underscore-dangle */
+/**
+ * FlowerClient
+ */
 const FlowerClient = ({
   children,
   name,
@@ -93,7 +102,9 @@ const FlowerClient = ({
   const flowName = name;
   const dispatch = useDispatch();
   const one = React.useRef(false);
-  const [wsDevtools, setWsDevtools] = React.useState(global.window && _get(global.window, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+  const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+  // TODO rivedere il giro, potremmo fare le trasformazioni in CoreUtils.generateNodesForFlowerJson
+  // eslint-disable-next-line react-hooks/exhaustive-deps, max-len
   const nodes = React.useMemo(() => convertElements(React.Children.toArray(children)), [children]);
   const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
   const isInitialized = useSelector(makeSelectStartNodeId(name));
@@ -107,6 +118,7 @@ const FlowerClient = ({
       one.current = true;
       dispatch(actions.initNodes({
         name: flowName,
+        // @ts-expect-error FIX ME
         nodes,
         startId: _startId != null ? _startId : '',
         persist: _destroyOnUnmount === false,
@@ -115,6 +127,7 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, nodes, _startId, _initialData, _destroyOnUnmount]);
   React.useEffect(() => {
+    /* istanbul ignore next */
     const eventCb = msg => {
       if (msg.source !== 'flower-devtool') return;
       if (msg.action === 'FLOWER_EXTENSION_INIT' || msg.action === 'FLOWER_DEVTOOL_WEB_INIT') {
@@ -139,16 +152,19 @@ const FlowerClient = ({
         }));
       }
     };
-    if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.on('flower-devtool-to-client', eventCb);
     }
     return () => {
-      if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      /* istanbul ignore next */
+      if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
         flowerCore.Emitter.off('flower-devtool-to-client', eventCb);
       }
     };
   }, [dispatch, flowName]);
   React.useEffect(() => () => {
+    // unmount function
     if (_destroyOnUnmount && one.current === true) {
       one.current = false;
       dispatch(actions.destroy({
@@ -157,7 +173,8 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, _destroyOnUnmount]);
   React.useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'FLOWER_CLIENT_INIT',
@@ -169,7 +186,8 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, wsDevtools, isInitialized, store]);
   React.useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_HISTORY',
@@ -180,8 +198,10 @@ const FlowerClient = ({
   }, [dispatch, flowName, history, wsDevtools, isInitialized]);
   React.useEffect(() => {
     if (!current) return;
+    /* istanbul ignore next */
     if (!isInitialized) return;
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_CURRENT',
@@ -192,6 +212,7 @@ const FlowerClient = ({
   }, [flowName, current, wsDevtools, isInitialized]);
   React.useEffect(() => {
     if (!current) return;
+    /* istanbul ignore next */
     if (!isInitialized) return;
     if (isDisabled) {
       dispatch({
@@ -201,7 +222,9 @@ const FlowerClient = ({
           disabled: true
         }
       });
-      if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      // eslint-disable-next-line no-underscore-dangle, no-undef
+      /* istanbul ignore next */
+      if (wsDevtools && flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
         flowerCore.Emitter.emit('flower-devtool-from-client', {
           source: 'flower-client',
           action: 'FLOWER_NAVIGATE',
@@ -219,8 +242,10 @@ const FlowerClient = ({
       }
       return;
     }
-    if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      if (isInitialized === current) return;
+    // eslint-disable-next-line no-underscore-dangle, no-undef
+    /* istanbul ignore next */
+    if (wsDevtools && flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
+      if (isInitialized === current) return; // salto il primo evento
       flowerCore.Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_SELECTED',
@@ -316,6 +341,15 @@ function FlowerStart() {
           isStart: true
         }
       });
+      // if (global.window
+      //   // eslint-disable-next-line no-underscore-dangle, no-undef
+      //   && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
+      //   Emitter.emit('flower-devtool-from-client', {
+      //     source: 'flower-client',
+      //     action: 'START_FLOWER',
+      //     name: flowName,
+      //   });
+      // }
     }
   }, [dispatch, autostart, startNodeId, currentNode, flowName]);
   return null;
@@ -417,6 +451,7 @@ const FlowerRule = ({
           type
         } = child;
         const Component = type;
+        // eslint-disable-next-line react/jsx-props-no-spreading
         return Component && /*#__PURE__*/React.createElement(Component, _extends({
           key: i,
           hidden: true
@@ -432,6 +467,7 @@ const FlowerRule = ({
         type
       } = child;
       const Component = type;
+      // eslint-disable-next-line react/jsx-props-no-spreading
       return Component && /*#__PURE__*/React.createElement(Component, _extends({
         key: i
       }, props));
@@ -446,6 +482,7 @@ const _excluded$3 = ["Component", "id", "flowName", "currentNode", "validate", "
 function isIntrinsicElement$1(x) {
   return typeof x === 'string';
 }
+//TODO make types for wrapper function props
 function Wrapper$1(_ref) {
   let {
       Component,
@@ -544,6 +581,7 @@ function Wrapper$1(_ref) {
     });
   }, [flowName, currentNode, isValidating]);
   React.useLayoutEffect(() => {
+    // destroy
     return () => {
       if (destroyValue) {
         dispatch({
@@ -585,6 +623,8 @@ function Wrapper$1(_ref) {
   if (typeof Component === 'function') {
     return Component(newProps);
   }
+  // TODO si arriva in questa condizione quando si passa un componente primitivo es. div
+  // in questo caso non posso props custom di flower
   if (isIntrinsicElement$1(Component)) {
     return /*#__PURE__*/React.createElement(Component, _extends({
       id: id
@@ -677,6 +717,7 @@ component$4.displayName = 'FlowerField';
 
 const _excluded$2 = ["Component", "id", "flowName", "spreadValue", "hidden", "onUpdate"],
   _excluded2 = ["id", "alwaysDisplay", "rules", "value", "Component", "spreadValue", "flowName", "onUpdate"];
+//TODO make types for wrapper function
 function Wrapper(_ref) {
   let {
       Component,
@@ -769,6 +810,7 @@ const FlowerValue = ({
       props
     } = child;
     const Component = type;
+    // eslint-disable-next-line react/jsx-props-no-spreading
     return /*#__PURE__*/React.createElement(RenderRules$1, _extends({
       key: i,
       id: _id,
@@ -818,6 +860,24 @@ const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLAOAD_
 const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLAOAD_KEYS_NEEDED.jump);
 const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLAOAD_KEYS_NEEDED.next);
 const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLAOAD_KEYS_NEEDED.restart);
+/** This hook allows you to read flow informations, such as the flowName and ID of the current node.
+ *
+ * It also exposes all the functions to navigate within the flow:
+ *
+ * - next
+ *
+ * - back
+ *
+ * - jump
+ *
+ * - reset
+ *
+ * - restart
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ */
 const useFlower = ({
   flowName: customFlowName,
   name
@@ -829,8 +889,13 @@ const useFlower = ({
   } = React.useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
-  const emitNavigateEvent = React.useCallback(params => {
-    if (_get(global.window, '__FLOWER_DEVTOOLS__')) {
+  const startId = useSelector(makeSelectStartNodeId(flowName != null ? flowName : ''));
+  const emitNavigateEvent = React.useCallback(
+  //TODO check this function is needed
+  params => {
+    /* istanbul ignore next */
+    // eslint-disable-next-line no-underscore-dangle, no-undef
+    if (_get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'FLOWER_NAVIGATE',
@@ -924,6 +989,7 @@ const useFlower = ({
   return {
     flowName,
     nodeId,
+    startId,
     next,
     jump,
     back,
@@ -932,6 +998,28 @@ const useFlower = ({
   };
 };
 
+/* eslint-disable */
+// {
+//   flowName?: string | undefined;
+//   action?: 'next' | 'back' | 'reset' | 'jump';
+// } & (
+//   | {
+//       node?: undefined;
+//       route?: Route;
+//     }
+//   | {
+//       node?: RoutePrev;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteReset;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteNode;
+//       route?: undefined;
+//     }
+// );
 const useFlowerNavigate = ({
   flowName,
   action,
@@ -983,6 +1071,7 @@ const _excluded$1 = ["hidden", "Component", "onNavigate"];
 function isIntrinsicElement(x) {
   return typeof x === 'string';
 }
+//TODO type FlowerNavigateWrapper props
 function FlowerNavigateWrapper(_ref) {
   let {
       hidden,
@@ -997,16 +1086,22 @@ function FlowerNavigateWrapper(_ref) {
   if (typeof Component === 'function') {
     return Component(newProps);
   }
+  // TODO si arriva in questa condizione quando si passa un componente primitivo es. div
+  // in questo caso non posso props custom di flower
   if (isIntrinsicElement(Component)) {
     return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       onClick: onNavigate
     }));
   }
+  // TODO in questa condizione si arriva se nel progetto si utilizza Vite, in questo caso i componenti non sono Function ma Object,
+  // oppure nel caso di un testo semplice come children di questo componente
+  /* istanbul ignore next */
   return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
 }
 const component$2 = /*#__PURE__*/React.memo(FlowerNavigateWrapper);
 
 const _excluded = ["alwaysDisplay", "rules", "Component", "flowName", "onNavigate"];
+//TODO type RenderRules props
 const RenderRules = _ref => {
   let {
       alwaysDisplay,
@@ -1062,6 +1157,7 @@ const FlowerNavigate = ({
       props
     } = child;
     const Component = type;
+    // eslint-disable-next-line react/jsx-props-no-spreading
     return /*#__PURE__*/React.createElement(RenderRules, _extends({
       key: i,
       alwaysDisplay: alwaysDisplay,
@@ -1080,6 +1176,23 @@ const FlowerComponent = ({
 }) => children;
 const component = /*#__PURE__*/React.memo(FlowerComponent);
 
+/**  This hook allows you to manage and retrieve information about Forms.
+ *
+ * It exposes details regarding the form's state and a set of methods for reading and writing within it:
+ *
+ * - getData
+ *
+ * - setData
+ *
+ * - unSetData
+ *
+ * - replaceData
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ *
+ */
 const useFlowerForm = ({
   flowName: customFlowName,
   name

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { createContext, PureComponent, memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
 import _keyBy from 'lodash/keyBy';
-import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, Emitter, MatchRules } from '@flowerforce/flower-core';
+import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, devtoolState, Emitter, MatchRules } from '@flowerforce/flower-core';
 import _get from 'lodash/get';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
@@ -12,6 +12,7 @@ const context = _context;
 const Provider = _context.Provider;
 const Consumer = _context.Consumer;
 
+// eslint-disable-next-line import/prefer-default-export
 const convertElements = nodes => {
   const res = CoreUtils.generateNodesForFlowerJson(nodes);
   return res;
@@ -43,7 +44,9 @@ const makeSelectStartNodeId = name => createSelector(selectFlower(name), Selecto
 const makeSelectCurrentNodeId = name => createSelector(selectFlower(name), makeSelectStartNodeId(name), Selectors.makeSelectCurrentNodeId);
 const makeSelectPrevNodeRetain = name => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), Selectors.makeSelectPrevNodeRetain);
 const makeSelectCurrentNodeDisabled = name => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), Selectors.makeSelectCurrentNodeDisabled);
+// dati nel flow selezionato
 const getDataByFlow = name => createSelector(selectFlower(name), Selectors.getDataByFlow);
+// selettore per recuperare i dati di un flow specifico e id specifico
 const getDataFromState = (name, id) => createSelector(getDataByFlow(name), Selectors.getDataFromState(id));
 const makeSelectNodeErrors = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeErrors);
 const makeSelectNodeFormTouched = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormTouched);
@@ -51,6 +54,7 @@ const getAllData = createSelector(selectGlobal, mapData);
 const makeSelectFieldError = (name, id, validate) => createSelector(getAllData, Selectors.makeSelectFieldError(name, id, validate));
 const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
 
+//TODO check reduxContext type due to remove all any types
 const reduxContext = /*#__PURE__*/createContext(null);
 const useDispatch = createDispatchHook(reduxContext);
 const useSelector = createSelectorHook(reduxContext);
@@ -81,6 +85,11 @@ class FlowerProvider extends PureComponent {
   }
 }
 
+/* eslint-disable no-undef */
+/* eslint-disable no-underscore-dangle */
+/**
+ * FlowerClient
+ */
 const FlowerClient = ({
   children,
   name,
@@ -91,7 +100,9 @@ const FlowerClient = ({
   const flowName = name;
   const dispatch = useDispatch();
   const one = useRef(false);
-  const [wsDevtools, setWsDevtools] = useState(global.window && _get(global.window, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+  const [wsDevtools, setWsDevtools] = useState(devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
+  // TODO rivedere il giro, potremmo fare le trasformazioni in CoreUtils.generateNodesForFlowerJson
+  // eslint-disable-next-line react-hooks/exhaustive-deps, max-len
   const nodes = useMemo(() => convertElements(Children.toArray(children)), [children]);
   const nodeById = useMemo(() => _keyBy(Children.toArray(children), 'props.id'), [children]);
   const isInitialized = useSelector(makeSelectStartNodeId(name));
@@ -105,6 +116,7 @@ const FlowerClient = ({
       one.current = true;
       dispatch(actions.initNodes({
         name: flowName,
+        // @ts-expect-error FIX ME
         nodes,
         startId: _startId != null ? _startId : '',
         persist: _destroyOnUnmount === false,
@@ -113,6 +125,7 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, nodes, _startId, _initialData, _destroyOnUnmount]);
   useEffect(() => {
+    /* istanbul ignore next */
     const eventCb = msg => {
       if (msg.source !== 'flower-devtool') return;
       if (msg.action === 'FLOWER_EXTENSION_INIT' || msg.action === 'FLOWER_DEVTOOL_WEB_INIT') {
@@ -137,16 +150,19 @@ const FlowerClient = ({
         }));
       }
     };
-    if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
       Emitter.on('flower-devtool-to-client', eventCb);
     }
     return () => {
-      if (global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      /* istanbul ignore next */
+      if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
         Emitter.off('flower-devtool-to-client', eventCb);
       }
     };
   }, [dispatch, flowName]);
   useEffect(() => () => {
+    // unmount function
     if (_destroyOnUnmount && one.current === true) {
       one.current = false;
       dispatch(actions.destroy({
@@ -155,7 +171,8 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, _destroyOnUnmount]);
   useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
       Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'FLOWER_CLIENT_INIT',
@@ -167,7 +184,8 @@ const FlowerClient = ({
     }
   }, [dispatch, flowName, wsDevtools, isInitialized, store]);
   useEffect(() => {
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
       Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_HISTORY',
@@ -178,8 +196,10 @@ const FlowerClient = ({
   }, [dispatch, flowName, history, wsDevtools, isInitialized]);
   useEffect(() => {
     if (!current) return;
+    /* istanbul ignore next */
     if (!isInitialized) return;
-    if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+    /* istanbul ignore next */
+    if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
       Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_CURRENT',
@@ -190,6 +210,7 @@ const FlowerClient = ({
   }, [flowName, current, wsDevtools, isInitialized]);
   useEffect(() => {
     if (!current) return;
+    /* istanbul ignore next */
     if (!isInitialized) return;
     if (isDisabled) {
       dispatch({
@@ -199,7 +220,9 @@ const FlowerClient = ({
           disabled: true
         }
       });
-      if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
+      // eslint-disable-next-line no-underscore-dangle, no-undef
+      /* istanbul ignore next */
+      if (wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
         Emitter.emit('flower-devtool-from-client', {
           source: 'flower-client',
           action: 'FLOWER_NAVIGATE',
@@ -217,8 +240,10 @@ const FlowerClient = ({
       }
       return;
     }
-    if (wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
-      if (isInitialized === current) return;
+    // eslint-disable-next-line no-underscore-dangle, no-undef
+    /* istanbul ignore next */
+    if (wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
+      if (isInitialized === current) return; // salto il primo evento
       Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'SET_SELECTED',
@@ -314,6 +339,15 @@ function FlowerStart() {
           isStart: true
         }
       });
+      // if (global.window
+      //   // eslint-disable-next-line no-underscore-dangle, no-undef
+      //   && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
+      //   Emitter.emit('flower-devtool-from-client', {
+      //     source: 'flower-client',
+      //     action: 'START_FLOWER',
+      //     name: flowName,
+      //   });
+      // }
     }
   }, [dispatch, autostart, startNodeId, currentNode, flowName]);
   return null;
@@ -415,6 +449,7 @@ const FlowerRule = ({
           type
         } = child;
         const Component = type;
+        // eslint-disable-next-line react/jsx-props-no-spreading
         return Component && /*#__PURE__*/React.createElement(Component, _extends({
           key: i,
           hidden: true
@@ -430,6 +465,7 @@ const FlowerRule = ({
         type
       } = child;
       const Component = type;
+      // eslint-disable-next-line react/jsx-props-no-spreading
       return Component && /*#__PURE__*/React.createElement(Component, _extends({
         key: i
       }, props));
@@ -444,6 +480,7 @@ const _excluded$3 = ["Component", "id", "flowName", "currentNode", "validate", "
 function isIntrinsicElement$1(x) {
   return typeof x === 'string';
 }
+//TODO make types for wrapper function props
 function Wrapper$1(_ref) {
   let {
       Component,
@@ -542,6 +579,7 @@ function Wrapper$1(_ref) {
     });
   }, [flowName, currentNode, isValidating]);
   useLayoutEffect(() => {
+    // destroy
     return () => {
       if (destroyValue) {
         dispatch({
@@ -583,6 +621,8 @@ function Wrapper$1(_ref) {
   if (typeof Component === 'function') {
     return Component(newProps);
   }
+  // TODO si arriva in questa condizione quando si passa un componente primitivo es. div
+  // in questo caso non posso props custom di flower
   if (isIntrinsicElement$1(Component)) {
     return /*#__PURE__*/React.createElement(Component, _extends({
       id: id
@@ -675,6 +715,7 @@ component$4.displayName = 'FlowerField';
 
 const _excluded$2 = ["Component", "id", "flowName", "spreadValue", "hidden", "onUpdate"],
   _excluded2 = ["id", "alwaysDisplay", "rules", "value", "Component", "spreadValue", "flowName", "onUpdate"];
+//TODO make types for wrapper function
 function Wrapper(_ref) {
   let {
       Component,
@@ -767,6 +808,7 @@ const FlowerValue = ({
       props
     } = child;
     const Component = type;
+    // eslint-disable-next-line react/jsx-props-no-spreading
     return /*#__PURE__*/React.createElement(RenderRules$1, _extends({
       key: i,
       id: _id,
@@ -816,6 +858,24 @@ const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLAOAD_
 const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLAOAD_KEYS_NEEDED.jump);
 const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLAOAD_KEYS_NEEDED.next);
 const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLAOAD_KEYS_NEEDED.restart);
+/** This hook allows you to read flow informations, such as the flowName and ID of the current node.
+ *
+ * It also exposes all the functions to navigate within the flow:
+ *
+ * - next
+ *
+ * - back
+ *
+ * - jump
+ *
+ * - reset
+ *
+ * - restart
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ */
 const useFlower = ({
   flowName: customFlowName,
   name
@@ -827,8 +887,13 @@ const useFlower = ({
   } = useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
-  const emitNavigateEvent = useCallback(params => {
-    if (_get(global.window, '__FLOWER_DEVTOOLS__')) {
+  const startId = useSelector(makeSelectStartNodeId(flowName != null ? flowName : ''));
+  const emitNavigateEvent = useCallback(
+  //TODO check this function is needed
+  params => {
+    /* istanbul ignore next */
+    // eslint-disable-next-line no-underscore-dangle, no-undef
+    if (_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
       Emitter.emit('flower-devtool-from-client', {
         source: 'flower-client',
         action: 'FLOWER_NAVIGATE',
@@ -922,6 +987,7 @@ const useFlower = ({
   return {
     flowName,
     nodeId,
+    startId,
     next,
     jump,
     back,
@@ -930,6 +996,28 @@ const useFlower = ({
   };
 };
 
+/* eslint-disable */
+// {
+//   flowName?: string | undefined;
+//   action?: 'next' | 'back' | 'reset' | 'jump';
+// } & (
+//   | {
+//       node?: undefined;
+//       route?: Route;
+//     }
+//   | {
+//       node?: RoutePrev;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteReset;
+//       route?: undefined;
+//     }
+//   | {
+//       node?: RouteNode;
+//       route?: undefined;
+//     }
+// );
 const useFlowerNavigate = ({
   flowName,
   action,
@@ -981,6 +1069,7 @@ const _excluded$1 = ["hidden", "Component", "onNavigate"];
 function isIntrinsicElement(x) {
   return typeof x === 'string';
 }
+//TODO type FlowerNavigateWrapper props
 function FlowerNavigateWrapper(_ref) {
   let {
       hidden,
@@ -995,16 +1084,22 @@ function FlowerNavigateWrapper(_ref) {
   if (typeof Component === 'function') {
     return Component(newProps);
   }
+  // TODO si arriva in questa condizione quando si passa un componente primitivo es. div
+  // in questo caso non posso props custom di flower
   if (isIntrinsicElement(Component)) {
     return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       onClick: onNavigate
     }));
   }
+  // TODO in questa condizione si arriva se nel progetto si utilizza Vite, in questo caso i componenti non sono Function ma Object,
+  // oppure nel caso di un testo semplice come children di questo componente
+  /* istanbul ignore next */
   return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
 }
 const component$2 = /*#__PURE__*/React.memo(FlowerNavigateWrapper);
 
 const _excluded = ["alwaysDisplay", "rules", "Component", "flowName", "onNavigate"];
+//TODO type RenderRules props
 const RenderRules = _ref => {
   let {
       alwaysDisplay,
@@ -1060,6 +1155,7 @@ const FlowerNavigate = ({
       props
     } = child;
     const Component = type;
+    // eslint-disable-next-line react/jsx-props-no-spreading
     return /*#__PURE__*/React.createElement(RenderRules, _extends({
       key: i,
       alwaysDisplay: alwaysDisplay,
@@ -1078,6 +1174,23 @@ const FlowerComponent = ({
 }) => children;
 const component = /*#__PURE__*/memo(FlowerComponent);
 
+/**  This hook allows you to manage and retrieve information about Forms.
+ *
+ * It exposes details regarding the form's state and a set of methods for reading and writing within it:
+ *
+ * - getData
+ *
+ * - setData
+ *
+ * - unSetData
+ *
+ * - replaceData
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ *
+ */
 const useFlowerForm = ({
   flowName: customFlowName,
   name

package/dist/src/components/types/DefaultNode.d.ts

@@ -1,8 +1,25 @@
 export type FlowerNodeDefaultProps = {
+    /** Unique identifier for the node inside the Flow */
     id: string;
+    /** An object containing the informations about the node's links.
+     *
+     * Example: to={{ step2: { rules: { $and: [{ name: { $eq: 'John' } }] } } }}
+     *
+     * In that case, the FlowerNode is linked to the node with the ID 'step2'
+     *
+     * You can move from the current node to the step2 node only if the rules are satisfied
+     *
+     * Set it to null when you don't have rules
+     *
+     * Example: to={{ step2: null}
+     */
     to?: Record<string, any>;
+    /** The children of the FlowerNode */
     children?: React.ReactNode;
+    /** The function executed when you enter into this FlowerNode */
     onEnter?: () => void;
+    /** The function executed when you leave this FlowerNode */
     onExit?: () => void;
+    /** When set to true, the FlowerNode is ignored and skipped */
     disabled?: boolean;
 };

package/dist/src/components/types/FlowerComponent.d.ts

@@ -1,4 +1,6 @@
 export type FlowerComponentProps = {
+    /** The name of the component */
     name: string;
+    /** The component's children */
     children: React.ReactNode;
 };

package/dist/src/components/types/FlowerField.d.ts

@@ -1,30 +1,108 @@
 import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>> = {
+    /** The path to the value you want to read from the flow's data
+     *
+     * Example: id="loginForm.name"
+     *
+     * The FlowerField component reads the value of the key "name" of the loginForm object in the flow's data
+     */
     id?: string;
+    /** The FlowerField's children  */
     children: React.ReactNode | ((props: {
+        /** The string passed to the "id" FlowerField's prop */
         id: string;
+        /** The value found at the "id" key in the flow data
+         *
+         * Example: id="loginForm.name"
+         *
+         * This parameter will hold the value found at the key 'name' of the loginForm object in the flow's data.
+         */
         value: any;
+        /** An array of strings containing error messages associated with validation rules that are not satisfied. */
         errors: undefined | string[];
+        /** This parameter will notify you when there are validation errors. */
         hasError: undefined | boolean;
+        /** Use this function to write a new value at the "id" key
+         *
+         * Example: id="loginForm.name"
+         *
+         * onChange("John") will write "John" at the key 'name' of the loginForm object in the flow's data.
+         */
         onChange: (props: any) => void;
+        /** The function executed to test all the validation rules*/
         onBlur: () => void;
+        /** This parameter will notify you whether the form field has been touched */
         isTouched: boolean;
+        /** true when some of the display rules are not satisfied, and you have passed true to the "alwaysDisplay" FlowerField's prop*/
         hidden: boolean;
+        /** true when you have an async validation in progress */
         isValidating: boolean | undefined;
     }) => React.ReactNode | React.ReactElement | undefined);
+    /**The validation rules for that field
+     *
+     *  Example: validate={[
+     *
+     *       {
+     *           rules: {
+     *             $self: {
+     *               $regex:
+     *                 '^([A-Z]{6}[0-9LMNPQRSTUV]{2}[ABCDEHLMPRST]{1}[0-9LMNPQRSTUV]{2}[A-Z]{1}[0-9LMNPQRSTUV]{3}[A-Z]{1})$|([0-9]{11})$',
+     *             },
+     *           },
+     *           message: 'Value not valid',
+     *        },
+     *        {
+     *          // Don't use promises
+     *          rules: (data)=> {
+     *            return data.name === 'Andrea'
+     *          },
+     *          message: 'Value not valid',
+     *        }
+     *       ]}
+     *
+     * For every rule you can pass an error message, that Flower returns when that condition is note satisfied
+     */
     validate?: Record<string, any>[] | string[];
+    /** A function to perform an async validation */
     asyncValidate?: (value: any, data?: Record<string, any>, errors?: undefined | string[]) => string[] | undefined | Promise<string[]> | {
         message: string;
     }[] | boolean | Promise<boolean>;
+    /** Use this to set a debounce for the async validation
+     *
+     * The default value is 0
+     */
     asyncDebounce?: number;
+    /** The initial error message when you have an async validation
+     *
+     * The default value is undefined
+     */
     asyncInitialError?: string;
+    /** The message that the FlowerField returns while validating*/
     asyncWaitingError?: string;
+    /** An object containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
+     *
+     * Example: rules={{ $and: [{ name: { $exist: true } }] }}
+     */
     rules?: RulesObject<T> | FunctionRule;
+    /** The name of the flow from which read the data
+     *
+     * - note: the default value is the name of the flow where the component is used
+     */
     flowName?: string;
+    /** Initial value field */
     defaultValue?: unknown;
     destroyValue?: boolean;
     value?: any;
+    /** When set to true, the children is shown even if the rules are not satisfied
+     *
+     * The FlowerField returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
+     */
     alwaysDisplay?: boolean;
+    /** The function executed when the value found at the path passed to the "id" prop changes */
     onUpdate?: (value: any) => void;
+    /** The function executed at the "onBlur" event, for example for Input components
+     *
+     * The onBlur function will test all the validation rules
+     */
     onBlur?: (e: any) => void;
 };

package/dist/src/components/types/FlowerFlow.d.ts

@@ -1,4 +1,14 @@
 import { FlowerNodeDefaultProps } from './DefaultNode';
 export type FlowerFlowProps = FlowerNodeDefaultProps & {
+    /** A Flower node is visible only when is the current node in the navigation history of the flow.
+     *
+     * By setting this prop to true, you have the ability to view this node even when it is not the current node.
+     *
+     * This can only be set to true for FlowerNode and FlowerFlow components.
+     *
+     * An example use case is when transitioning from a FlowerNode containing a particular screen to an action node.
+     *
+     * The node with retain set to true will continue to be displayed until a new FlowerNode or FlowerFlow is added to the history
+     * */
     retain?: boolean;
 };

package/dist/src/components/types/FlowerHooks.d.ts

@@ -3,25 +3,48 @@ export type UseFlowerProps = {
     [x in 'name' | 'flowName']?: string;
 };
 export type UseFlowerForm = (options?: UseFlowerProps) => {
+    /**  This value is set to true when the form has been touched at least once. */
     touched: boolean;
+    /** An object containing all the form errors */
     errors: Record<string, any>;
+    /** This value is set to true when all the validation rules are satisfied and the form is valid*/
     isValid: boolean;
+    /** This value is set to true during asynchronous validation.*/
     isValidating: boolean | undefined;
+    /** Use this function to read values from the flow's data. */
     getData: (path?: string) => any;
-    setData: (value: any, path?: string) => void;
-    unsetData: (path: string) => void;
+    /** Use this function to set values in the flow's data. */
+    setData: (
+    /** The value that you want to set */
+    value: any, 
+    /** Specify the target path to set the value*/
+    path?: string) => void;
+    /** Use this function to unset values in the flow's data. */
+    unsetData: (
+    /** Specify the target path to the value tha you want to unset*/
+    path: string) => void;
+    /** Use this function to replace a value in the flow's data. */
     replaceData: (value: any) => void;
 };
 type useFlowerActions = {
+    /** Use this function to move to the next node inside the flow*/
     next: (payload?: Route) => void;
+    /**Use this function to move to the previous node inside the flow*/
     back: (payload?: RoutePrev) => void;
+    /**Use this function to return to the first node and restore history */
     reset: (payload?: RouteReset) => void;
+    /**Use this function to move to a specific node*/
     jump: (payload: RouteNode) => void;
+    /**Use this function to reset the flow data and history */
     restart: (payload?: RouteRestart) => void;
 };
 export type UseFlower = (options?: UseFlowerProps) => useFlowerActions & {
+    /**The flow in which the hook is used.*/
     flowName?: string;
+    /**Current node id*/
     nodeId: string;
+    /**Initial start node id*/
+    startId: string;
 };
 export type NavigateFunctionParams = string | Record<string, any>;
 export {};

package/dist/src/components/types/FlowerNavigate.d.ts

@@ -3,6 +3,10 @@ export type Route = string | Record<string, any>;
 export type RouteNode = string | {
     node: string;
     flowName?: string;
+    /**
+     * The flow's history on server component
+     * @experimental
+     */
     history?: string[];
 };
 export type RouteRestart = string | {
@@ -19,9 +23,19 @@ export type RoutePrev = string | {
     flowName?: string;
 };
 export type FlowerNavigateProps = {
+    /** The name of the flow from which read the data
+     *
+     * - note: the default value is the name of the flow where the component is used
+     */
     flowName?: string | undefined;
+    /** The FlowerNavigate's children  */
     children: React.ReactNode | ((props: Record<string, any>) => React.ReactNode | React.ReactElement | undefined);
+    /** An object containing the display rules of that component. When the conditions are not satisfied, the children is hidden. */
     rules?: RulesObject<Record<string, any>> | Record<string, RulesObject<any>>;
+    /** When set to true, the children is shown even if the rules are not satisfied
+     *
+     * The FlowerValue returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
+     */
     alwaysDisplay?: boolean;
 } & ({
     action?: 'next';

package/dist/src/components/types/FlowerNode.d.ts

@@ -1,4 +1,14 @@
 import { FlowerNodeDefaultProps } from './DefaultNode';
 export type FlowerNodeProps = FlowerNodeDefaultProps & {
+    /** A Flower node is visible only when is the current node in the navigation history of the flow.
+     *
+     * By setting this prop to true, you have the ability to view this node even when it is not the current node.
+     *
+     * This can only be set to true for FlowerNode and FlowerFlow components.
+     *
+     * An example use case is when transitioning from a FlowerNode containing a particular screen to an action node.
+     *
+     * The node with retain set to true will continue to be displayed until a new FlowerNode or FlowerFlow is added to the history
+     * */
     retain?: boolean;
 };

package/dist/src/components/types/FlowerRoute.d.ts

@@ -1,8 +1,25 @@
 export type FlowerRouteProps = {
+    /** Unique identifier for the node inside the Flow */
     id: string;
+    /** TODO document what this props does */
     autostart?: boolean;
+    /** An object containing the informations about the node's links.
+     *
+     * Example: to={{ step2: { rules: { $and: [{ name: { $eq: 'John' } }] } } }}
+     *
+     * In that case, the FlowerRoute is linked to the node with the ID 'step2'
+     *
+     * You can move from the current node to the step2 node only if the rules are satisfied
+     *
+     * Set it to null when you don't have rules
+     *
+     * Example: to={{ step2: null}
+     */
     to?: Record<string, any>;
+    /** The children of the FlowerRoute */
     children?: React.ReactNode;
+    /** The function executed when you enter into this FlowerRoute */
     onEnter?: () => void;
+    /** The function executed when you leave this FlowerRoute */
     onExit?: () => void;
 };

package/dist/src/components/types/FlowerRule.d.ts

@@ -1,11 +1,34 @@
 import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerRuleProps = {
+    /** The path to the value you want to read from the flow's data
+     *
+     * Example: id="loginForm.name"
+     *
+     * The FlowerRule component reads the value of the key "name" of the loginForm object in the flow's data
+     */
     id?: string;
+    /** */
     value?: any;
+    /** An object or function containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
+     *
+     * Example: rules={{ $and: [{ name: { $exist: true } }] }}
+     * Example: rules={(state) => state... === true}
+     * if missing it is always visible
+     */
     rules?: RulesObject<any> | FunctionRule;
+    /** The name of the flow from which read the data
+     *
+     * - note: the default value is the name of the flow where the component is used
+     */
     flowName?: string;
+    /** When set to true, the children is shown even if the rules are not satisfied
+     *
+     * The FlowerRule returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
+     */
     alwaysDisplay?: boolean;
+    /** The function executed when the value found at the path passed to the "id" prop changes */
     onUpdate?: (hidden: boolean) => void;
+    /** The children of the FlowerRule*/
     children?: React.ReactNode | ((props: {
         hidden?: boolean;
     }) => React.ReactNode | React.ReactElement | undefined);

package/dist/src/components/types/FlowerServer.d.ts

@@ -1,7 +1,9 @@
 import { FlowerNodeProps } from './FlowerNode';
 export type FlowerServerProps = {
     action?: {
+        /** The type of the action */
         type: string;
+        /** The parameters passed to the action */
         props?: Record<string, any>;
     };
 } & FlowerNodeProps;

package/dist/src/components/types/FlowerValue.d.ts

@@ -1,11 +1,33 @@
 import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerValueProps = {
+    /** The path to the value you want to read from the flow's data
+     *
+     * Example: id="loginForm.name"
+     *
+     * The FlowerValue component reads the value of the key "name" of the loginForm object in the flow's data
+     * If missing, I return all values, which is equivalent to setting id='*'
+     */
     id?: string;
     value?: any;
+    /** An object containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
+     *
+     * Example: rules={{ $and: [{ name: { $exist: true } }] }}
+     */
     rules?: RulesObject<any> | FunctionRule;
+    /** The FlowerValue's children  */
     children: React.ReactNode | ((props: Record<string, any>) => React.ReactNode | React.ReactElement | undefined);
+    /** Set this value to true to spread the value into separate values in case it is an object. */
     spreadValue?: boolean;
+    /** The name of the flow from which read the data
+     *
+     * - note: the default value is the name of the flow where the component is used
+     */
     flowName?: string;
+    /** When set to true, the children is shown even if the rules are not satisfied
+     *
+     * The FlowerValue returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
+     */
     alwaysDisplay?: boolean;
+    /** The function executed when the value found at the path passed to the "id" prop changes */
     onUpdate?: (value: any) => void;
 };

package/dist/src/components/useFlower.d.ts

@@ -1,3 +1,21 @@
 import { UseFlower } from './types/FlowerHooks';
+/** This hook allows you to read flow informations, such as the flowName and ID of the current node.
+ *
+ * It also exposes all the functions to navigate within the flow:
+ *
+ * - next
+ *
+ * - back
+ *
+ * - jump
+ *
+ * - reset
+ *
+ * - restart
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ */
 declare const useFlower: UseFlower;
 export default useFlower;

package/dist/src/components/useFlowerForm.d.ts

@@ -1,3 +1,20 @@
 import { UseFlowerForm } from './types/FlowerHooks';
+/**  This hook allows you to manage and retrieve information about Forms.
+ *
+ * It exposes details regarding the form's state and a set of methods for reading and writing within it:
+ *
+ * - getData
+ *
+ * - setData
+ *
+ * - unSetData
+ *
+ * - replaceData
+ *
+ * @param {string} flowName - first optional parameter
+ *
+ * @param {string} name - optional parameter, if flowName exist, name is not used
+ *
+ */
 declare const useFlowerForm: UseFlowerForm;
 export default useFlowerForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.1.1",
+  "version": "3.1.2-beta.0",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.1.1",
+    "@flowerforce/flower-core": "3.1.2-beta.0",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",