@flowerforce/flower-react 3.5.1-beta.1 → 4.0.3-beta.0

package/dist/index.esm.js

@@ -1,17 +1,13 @@
-import React, { createContext, PureComponent, memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback } from 'react';
+import React, { memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback } from 'react';
 import _keyBy from 'lodash/keyBy';
-import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, devtoolState, Emitter, MatchRules } from '@flowerforce/flower-core';
+import { CoreUtils, FlowerCoreBaseReducers, REDUCER_NAME, FlowerCoreStateSelectors, FlowerStateUtils, devtoolState, Emitter } from '@flowerforce/flower-core';
+import { FlowerReactProvider, FlowerReactContext } from '@flowerforce/flower-react-context';
 import _get from 'lodash/get';
-import { createSlice, configureStore } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
-import { createDispatchHook, createSelectorHook, createStoreHook, Provider as Provider$1 } from 'react-redux';
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
-
-const _context = createContext({});
-const context = _context;
-const Provider = _context.Provider;
-const Consumer = _context.Consumer;
+import { useDispatch, useSelector, useStore, flowerDataActions, ReduxFlowerProvider } from '@flowerforce/flower-react-store';
+export { useDispatch, useSelector, useStore } from '@flowerforce/flower-react-store';
+import { FlowerRule } from '@flowerforce/flower-react-shared';
 
 // eslint-disable-next-line import/prefer-default-export
 const convertElements = (nodes) => {
@@ -20,74 +16,47 @@ const convertElements = (nodes) => {
 };
 
 const flowerReducer = createSlice({
-    name: 'flower',
+    name: REDUCER_NAME.FLOWER_FLOW,
     initialState: {},
-    reducers: FlowerCoreReducers
+    reducers: FlowerCoreBaseReducers
 });
-const { actions } = flowerReducer;
+const flowerActions = flowerReducer.actions;
+const flowerFlowReducer = flowerReducer.reducer;
 const reducerFlower = {
-    flower: flowerReducer.reducer
+    [REDUCER_NAME.FLOWER_FLOW]: flowerFlowReducer
 };
 
-const { getAllData: mapData } = FlowerStateUtils;
-const { selectGlobal } = Selectors;
-const selectFlower = (name) => createSelector(selectGlobal, Selectors.selectFlower(name));
-const selectFlowerFormNode = (name, id) => createSelector(selectFlower(name), Selectors.selectFlowerFormNode(id));
-const selectFlowerHistory = (name) => createSelector(selectFlower(name), Selectors.selectFlowerHistory);
-const makeSelectNodesIds = (name) => createSelector(selectFlower(name), Selectors.makeSelectNodesIds);
-const makeSelectStartNodeId = (name) => createSelector(selectFlower(name), Selectors.makeSelectStartNodeId);
-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 makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldTouched(fieldId));
-const makeSelectNodeFieldFocused = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldFocused(fieldId));
-const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormFieldDirty(fieldId));
-const makeSelectNodeFormSubmitted = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeFormSubmitted);
-const getAllData = createSelector(selectGlobal, mapData);
-const selectFlowerFormCurrentNode = (name) => createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (data, current) => {
-    return _get(data, ['form', current]);
-});
-const makeSelectFieldError = (name, id, validate) => createSelector(getAllData, selectFlowerFormCurrentNode(name), 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 = createContext(null);
-const useDispatch = createDispatchHook(reduxContext);
-const useSelector = createSelectorHook(reduxContext);
-const useStore = createStoreHook(reduxContext);
-const store = ({ enableDevtool }) => configureStore({
-    reducer: reducerFlower,
-    devTools: enableDevtool ? { name: 'flower' } : false
+const { selectGlobal, selectGlobalForm } = FlowerCoreStateSelectors;
+const selectFlower = (name) => createSelector(selectGlobal, FlowerCoreStateSelectors.selectFlower(name));
+const selectFlowerForm = selectGlobalForm;
+const selectFlowerFormNode = (name) => createSelector(selectFlowerForm, (data) => {
+    return data[name];
 });
-class FlowerProvider extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.store = store({ enableDevtool: props.enableReduxDevtool });
-    }
-    render() {
-        const { children } = this.props;
-        return (React.createElement(Provider$1, { context: reduxContext, store: this.store }, children));
-    }
-}
+const selectFlowerHistory = (name) => createSelector(selectFlower(name), FlowerCoreStateSelectors.selectFlowerHistory);
+const makeSelectNodesIds = (name) => createSelector(selectFlower(name), FlowerCoreStateSelectors.makeSelectNodesIds);
+const makeSelectStartNodeId = (name) => createSelector(selectFlower(name), FlowerCoreStateSelectors.makeSelectStartNodeId);
+const makeSelectCurrentNodeId = (name) => createSelector(selectFlower(name), makeSelectStartNodeId(name), FlowerCoreStateSelectors.makeSelectCurrentNodeId);
+const makeSelectPrevNodeRetain = (name) => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), FlowerCoreStateSelectors.makeSelectPrevNodeRetain);
+const makeSelectCurrentNodeDisabled = (name) => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), FlowerCoreStateSelectors.makeSelectCurrentNodeDisabled);
+// dati nel flow selezionato
+const makeSelectFormData = (name) => createSelector(selectFlowerFormNode(name), (data) => data?.data ?? {});
+createSelector(selectGlobalForm, FlowerStateUtils.getAllData);
 
 /* eslint-disable no-undef */
 /* eslint-disable no-underscore-dangle */
-/**
+/*
  * FlowerClient
  */
-const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialData = {}, initialState = {} }) => {
+const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialState = {}, initialData }) => {
     const flowName = name;
     const dispatch = useDispatch();
     const one = useRef(false);
     const [wsDevtools, setWsDevtools] = useState(devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
-    // TODO rivedere il giro, potremmo fare le trasformazioni in CoreUtils.generateNodesForFlowerJson
+    // TODO could make that transformation in CoreUtils.generateNodesForFlowerJson
     // eslint-disable-next-line react-hooks/exhaustive-deps, max-len
-    const nodes = useMemo(() => convertElements(Children.toArray(children)), [children]);
+    const nodes = useMemo(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    () => convertElements(Children.toArray(children)), [children]);
     const nodeById = useMemo(() => _keyBy(Children.toArray(children), 'props.id'), [children]);
     const isInitialized = useSelector(makeSelectStartNodeId(name));
     const history = useSelector(selectFlowerHistory(name));
@@ -98,24 +67,29 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
     useEffect(() => {
         if (nodes.length > 0 && one.current === false) {
             one.current = true;
-            dispatch(actions.initNodes({
+            dispatch(flowerActions.initNodes({
                 name: flowName,
                 // @ts-expect-error FIX ME
                 nodes,
                 startId: startId ?? '',
                 persist: destroyOnUnmount === false,
-                initialData,
                 initialState
             }));
+            if (initialData) {
+                dispatch(flowerDataActions.initForm({
+                    formName: flowName,
+                    initialData: initialData ?? {}
+                }));
+            }
         }
     }, [
         dispatch,
         flowName,
         nodes,
         startId,
-        initialData,
         destroyOnUnmount,
-        initialState
+        initialState,
+        initialData
     ]);
     useEffect(() => {
         /* istanbul ignore next */
@@ -127,14 +101,16 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
                 setWsDevtools(true);
             }
             if (msg.action === 'SELECTED_NODE' && msg.name === flowName) {
-                dispatch(actions.setCurrentNode({ name: msg.name, node: msg.id }));
-            }
-            if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
-                dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }));
-            }
-            if (msg.action === 'ADD_DATA' && msg.name === flowName) {
-                dispatch(actions.addData({ flowName: msg.name, value: msg.data }));
+                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 })
+            //   )
+            // }
+            // if (msg.action === 'ADD_DATA' && msg.name === flowName) {
+            //   dispatch(formActions.addData({ flowName: msg.name, value: msg.data }))
+            // }
         };
         /* istanbul ignore next */
         if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
@@ -151,7 +127,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
         // unmount function
         if (destroyOnUnmount && one.current === true) {
             one.current = false;
-            dispatch(actions.destroy({ name: flowName }));
+            dispatch(flowerActions.destroy({ name: flowName }));
         }
     }, [dispatch, flowName, destroyOnUnmount]);
     useEffect(() => {
@@ -210,7 +186,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
         if (!isInitialized)
             return;
         if (isDisabled) {
-            dispatch({ type: 'flower/next', payload: { flowName, disabled: true } });
+            dispatch(flowerActions.next({ flowName }));
             // eslint-disable-next-line no-underscore-dangle, no-undef
             /* istanbul ignore next */
             if (wsDevtools &&
@@ -233,7 +209,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
             devtoolState &&
             _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
             if (isInitialized === current)
-                return; // salto il primo evento
+                return; // salto il primo event
             Emitter.emit('flower-devtool-from-client', {
                 source: 'flower-client',
                 action: 'SET_SELECTED',
@@ -253,32 +229,21 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
     ]);
     const currentNodeId = prevFlowerNodeId || current;
     const contextValues = useMemo(() => ({
-        flowName,
-        initialData,
+        name: flowName,
         currentNode: current
-    }), [flowName, initialData, current]);
+    }), [flowName, current]);
     const prevContextValues = useMemo(() => ({
-        flowName,
-        initialData,
+        name: flowName,
         currentNode: currentNodeId
-    }), [flowName, initialData, currentNodeId]);
+    }), [flowName, currentNodeId]);
     return isInitialized ? (React.createElement(React.Fragment, null,
-        React.createElement(Provider, { value: prevContextValues }, nodeById[currentNodeId]),
-        React.createElement(Provider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
+        React.createElement(FlowerReactProvider, { value: prevContextValues }, nodeById[currentNodeId]),
+        React.createElement(FlowerReactProvider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
 };
-const component$c = memo(FlowerClient);
-
-const FlowerNode = ({ children, onEnter, onExit }) => {
-    useEffect(() => {
-        onEnter?.();
-        return () => {
-            onExit?.();
-        };
-    }, [onEnter, onExit]);
-    return children;
-};
-const component$b = memo(FlowerNode);
-component$b.displayName = 'FlowerNode';
+const component$9 = memo(FlowerClient);
+component$9.displayName = 'Flower';
+// workaround for let typescript read JSX component as a valid JSX element using react 19(?)
+const Flower = component$9;
 
 const FlowAction = ({ children, onEnter, onExit }) => {
     useEffect(() => {
@@ -287,374 +252,28 @@ const FlowAction = ({ children, onEnter, onExit }) => {
             onExit?.();
         };
     }, [onEnter, onExit]);
-    return children;
-};
-const component$a = React.memo(FlowAction);
-component$a.displayName = 'FlowerAction';
-
-const FlowerServer = ({ children }) => {
-    return children;
-};
-const component$9 = React.memo(FlowerServer);
-component$9.displayName = 'FlowerServer';
-
-const FlowerFlow = ({ children, onEnter, onExit }) => {
-    useEffect(() => {
-        onEnter?.();
-        return () => {
-            onExit?.();
-        };
-    }, [onEnter, onExit]);
-    return children;
+    return React.createElement(React.Fragment, null, children);
 };
-const component$8 = React.memo(FlowerFlow);
-component$8.displayName = 'FlowerFlow';
+const component$8 = React.memo(FlowAction);
+component$8.displayName = 'FlowerAction';
+const FlowerAction = component$8;
 
-function FlowerStart() {
-    const dispatch = useDispatch();
-    const one = useRef(false);
-    const { flowName, autostart = true, currentNode } = useContext(context);
-    const startNodeId = useSelector(makeSelectStartNodeId(flowName ?? ''));
-    useEffect(() => {
-        if (startNodeId === currentNode && autostart && one.current === false) {
-            one.current = true;
-            dispatch({ type: 'flower/next', payload: { flowName, 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;
-}
-const component$7 = React.memo(FlowerStart);
-component$7.displayName = 'FlowerStart';
+const _FlowerComponent = ({ children }) => children;
+const component$7 = memo(_FlowerComponent);
+const FlowerComponent = component$7;
 
-const FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
-    const dispatch = useDispatch();
-    const one = useRef(false);
-    const { flowName } = useContext(context);
+const _FlowerFlow = ({ children, onEnter, onExit }) => {
     useEffect(() => {
         onEnter?.();
         return () => {
             onExit?.();
         };
     }, [onEnter, onExit]);
-    useEffect(() => {
-        if (autostart && one.current === false) {
-            one.current = true;
-            dispatch({ type: 'flower/next', payload: { flowName } });
-        }
-    }, [dispatch, flowName, autostart]);
-    return children;
-};
-const component$6 = React.memo(FlowerRoute);
-component$6.displayName = 'FlowerRoute';
-
-const FlowerRule = ({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }) => {
-    const { flowName: flowNameContext, currentNode } = useContext(context);
-    const name = flowName || flowNameContext;
-    const keys = MatchRules.utils.getKeys(rules, { prefix: name });
-    const hidden = useSelector(selectorRulesDisabled(id ?? '', rules, keys ?? [], name ?? '', value, currentNode ?? ''));
-    useEffect(() => {
-        if (onUpdate) {
-            onUpdate(hidden);
-        }
-    }, [hidden, onUpdate]);
-    if (typeof children === 'function') {
-        if (alwaysDisplay && hidden) {
-            return children({ hidden });
-        }
-        if (hidden) {
-            return undefined;
-        }
-        return children({});
-    }
-    if (alwaysDisplay && hidden) {
-        return React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-                const { props, type } = child;
-                const Component = type;
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                return Component && React.createElement(Component, { key: i, hidden: true, ...props });
-            }
-            return child;
-        });
-    }
-    return hidden
-        ? undefined
-        : React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-                const { props, type } = child;
-                const Component = type;
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                return Component && React.createElement(Component, { key: i, ...props });
-            }
-            return child;
-        });
-};
-const component$5 = React.memo(FlowerRule);
-component$5.displayName = 'FlowerRule';
-
-/* eslint-disable */
-function isIntrinsicElement$1(x) {
-    return typeof x === 'string';
-}
-//TODO make types for wrapper function props
-function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, destroyOnHide, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
-    const dispatch = useDispatch();
-    const [customAsyncErrors, setCustomAsyncErrors] = useState(asyncValidate && asyncInitialError && [asyncInitialError]);
-    const [isValidating, setIsValidating] = useState(undefined);
-    const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
-    const value = useSelector(getDataFromState(flowNameFromPath, path));
-    const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
-    const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
-    const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
-    const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
-    const refValue = useRef();
-    const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
-    const allErrors = useMemo(() => hidden ? [] : [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, hidden, customAsyncErrors]);
-    const setTouched = useCallback((touched) => {
-        dispatch({
-            type: 'flower/formFieldTouch',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                touched
-            }
-        });
-    }, [dispatch, flowName, currentNode, id]);
-    const setFocus = useCallback((focused) => {
-        dispatch({
-            type: 'flower/formFieldFocus',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                focused
-            }
-        });
-    }, [dispatch, flowName, currentNode, id]);
-    const validateFn = useCallback(async (value) => {
-        if (asyncWaitingError) {
-            setCustomAsyncErrors([asyncWaitingError]);
-        }
-        setIsValidating(true);
-        const state = FlowerStateUtils.getAllData(store);
-        const res = await asyncValidate(value, state, errors);
-        setIsValidating(false);
-        setCustomAsyncErrors(res);
-    }, [asyncWaitingError, errors]);
-    const debouncedValidation = useCallback(debounce(validateFn, asyncDebounce), [
-        validateFn
-    ]);
-    const onChange = useCallback((val) => {
-        if (asyncValidate && asyncWaitingError) {
-            setCustomAsyncErrors([asyncWaitingError]);
-        }
-        dispatch({
-            type: `flower/addDataByPath`,
-            payload: {
-                flowName: flowNameFromPath,
-                id,
-                value: val,
-                dirty: defaultValue ? !isEqual(val, defaultValue) : true
-            }
-        });
-    }, [flowNameFromPath, id, dispatch, setCustomAsyncErrors, asyncValidate, asyncWaitingError]);
-    const onBlurInternal = useCallback((e) => {
-        setTouched(true);
-        setFocus(false);
-        onBlur && onBlur(e);
-    }, [onBlur, setTouched, setFocus]);
-    const onFocusInternal = useCallback((e) => {
-        setFocus(true);
-        onFocus && onFocus(e);
-    }, [onFocus, setFocus]);
-    useEffect(() => {
-        if (hidden)
-            return;
-        if (asyncValidate) {
-            if (refValue.current === value)
-                return;
-            refValue.current = value;
-            const hasValue = !MatchRules.utils.isEmpty(value);
-            if (!hasValue) {
-                setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
-                setIsValidating(false);
-                return;
-            }
-            setTouched(true);
-            debouncedValidation(value);
-        }
-    }, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched, hidden]);
-    useEffect(() => {
-        if (onUpdate) {
-            onUpdate(value);
-        }
-    }, [value, onUpdate]);
-    useEffect(() => {
-        dispatch({
-            type: 'flower/formAddErrors',
-            payload: {
-                name: flowName,
-                id,
-                currentNode,
-                errors: allErrors
-            }
-        });
-    }, [id, flowName, allErrors, currentNode, touched]);
-    useEffect(() => {
-        dispatch({
-            type: 'flower/setFormIsValidating',
-            payload: {
-                name: flowName,
-                currentNode,
-                isValidating
-            }
-        });
-    }, [flowName, currentNode, isValidating]);
-    useEffect(() => {
-        // destroy
-        return () => {
-            if (destroyValue) {
-                dispatch({
-                    type: `flower/unsetData`,
-                    payload: { flowName: flowNameFromPath, id: path }
-                });
-            }
-            dispatch({
-                type: 'flower/formRemoveErrors',
-                payload: {
-                    name: flowName,
-                    id,
-                    currentNode
-                }
-            });
-        };
-    }, [destroyValue, id, flowNameFromPath, path, currentNode]);
-    useEffect(() => {
-        if (hidden) {
-            if (destroyOnHide) {
-                dispatch({
-                    type: `flower/unsetData`,
-                    payload: { flowName: flowNameFromPath, id: path }
-                });
-            }
-            dispatch({
-                type: 'flower/formRemoveErrors',
-                payload: {
-                    name: flowName,
-                    id,
-                    currentNode
-                }
-            });
-        }
-    }, [destroyOnHide, hidden, id, flowNameFromPath, path, currentNode]);
-    useEffect(() => {
-        if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
-            onChange(defaultValue);
-        }
-    }, [defaultValue, value, dirty, onChange]);
-    const newProps = useMemo(() => ({
-        ...props,
-        id,
-        value,
-        errors: allErrors,
-        hasError: !!allErrors.length,
-        onChange,
-        onBlur: onBlurInternal,
-        onFocus: onFocusInternal,
-        focused: !!focused,
-        touched,
-        dirty,
-        hidden,
-        isValidating,
-        isSubmitted,
-    }), [
-        props,
-        id,
-        value,
-        allErrors,
-        touched,
-        dirty,
-        onChange,
-        onBlurInternal,
-        onFocusInternal,
-        hidden,
-        isValidating,
-        isSubmitted,
-        focused
-    ]);
-    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 React.createElement(Component, { id: id, ...props });
-    }
-    return Component && React.createElement(Component, { ...newProps });
-}
-const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }) => {
-    const { flowName: flowNameContext, currentNode } = useContext(context);
-    const name = flowName || flowNameContext;
-    if (typeof children === 'function') {
-        return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue, destroyOnHide: destroyOnHide }))));
-    }
-    return React.Children.map(children, (child, i) => {
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-        const { type, props } = child;
-        const Component = type;
-        return (React.createElement(component$5, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name }, ({ hidden }) => (React.createElement(Wrapper$1, { ...props, hidden: hidden, id: id, Component: Component, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue }))));
-    });
+    return React.createElement(React.Fragment, null, children);
 };
-const component$4 = React.memo(FlowerField);
-component$4.displayName = 'FlowerField';
-
-/* eslint-disable */
-//TODO make types for wrapper function
-function Wrapper({ Component, id, flowName, spreadValue, hidden, onUpdate, ...props }) {
-    const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
-    const value = useSelector(getDataFromState(flowNameFromPath, path));
-    const values = spreadValue && typeof value === 'object' && !Array.isArray(value)
-        ? value
-        : { value };
-    useEffect(() => {
-        if (onUpdate) {
-            onUpdate(value);
-        }
-    }, [onUpdate, value]);
-    return (React.createElement(Component, { id: id, ...props, flowName: flowName, hidden: hidden, ...values }));
-}
-const RenderRules$1 = ({ id, alwaysDisplay, rules, value, Component, spreadValue, flowName, onUpdate, ...props }) => {
-    return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: flowName, id: id }, ({ hidden }) => (React.createElement(Wrapper, { ...props, hidden: hidden, id: id, Component: Component, spreadValue: spreadValue, flowName: flowName, onUpdate: onUpdate }))));
-};
-const FlowerValue = ({ id = '*', rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }) => {
-    const { flowName: flowNameContext } = useContext(context);
-    const name = flowName || flowNameContext;
-    if (typeof children === 'function') {
-        return (React.createElement(RenderRules$1, { id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, Component: children, flowName: name, onUpdate: onUpdate }));
-    }
-    return React.Children.map(children, (child, i) => {
-        if (!React.isValidElement(child))
-            return child;
-        const { type, props } = child;
-        const Component = type;
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return (React.createElement(RenderRules$1, { key: i, id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, flowName: name, Component: Component, ...props, onUpdate: onUpdate }));
-    });
-};
-const component$3 = React.memo(FlowerValue);
-component$3.displayName = 'FlowerValue';
+const component$6 = React.memo(_FlowerFlow);
+component$6.displayName = 'FlowerFlow';
+const FlowerFlow = component$6;
 
 const ACTION_TYPES = {
     back: ['prev', 'prevToNode'],
@@ -663,10 +282,10 @@ const ACTION_TYPES = {
     restart: ['restart', 'restart'],
     reset: ['reset', 'initializeFromNode']
 };
-const PAYLAOAD_KEYS_NEEDED = {
+const PAYLOAD_KEYS_NEEDED = {
     back: ['node'],
     jump: ['node', 'history'],
-    next: ['node', 'route', 'data'],
+    next: ['node', 'route', 'data', 'dataIn'],
     restart: ['node'],
     reset: ['node', 'initialData']
 };
@@ -682,11 +301,11 @@ const makeActionPayload = (actions, keys) => (flowName, params) => {
         payload
     };
 };
-const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLAOAD_KEYS_NEEDED.back);
-const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLAOAD_KEYS_NEEDED.reset);
-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);
+const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLOAD_KEYS_NEEDED.back);
+const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLOAD_KEYS_NEEDED.reset);
+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);
 /** 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:
@@ -707,7 +326,7 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLA
  */
 const useFlower = ({ flowName: customFlowName, name } = {}) => {
     const dispatch = useDispatch();
-    const { flowName: flowNameDefault, initialData } = useContext(context);
+    const { name: flowNameDefault, initialData } = useContext(FlowerReactContext);
     const store = useStore();
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
@@ -729,22 +348,25 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         }
     }, [flowName, nodeId]);
     const next = useCallback((param) => {
-        const params = typeof param === 'string' ? { route: param } : { data: param };
+        const params = typeof param === 'string' ? { route: param } : { dataIn: param };
         const { type, payload } = makeActionPayloadOnNext(flowName, params);
         dispatch({
-            type: `flower/${type}`,
-            payload
+            type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`,
+            payload: {
+                ...payload,
+                data: store.getState()
+            }
         });
         emitNavigateEvent({ type, payload });
-    }, [dispatch, emitNavigateEvent, flowName]);
+    }, [dispatch, emitNavigateEvent, flowName, store]);
     const back = useCallback((param) => {
         const { type, payload } = makeActionPayloadOnPrev(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
     const restart = useCallback((param) => {
         const { type, payload } = makeActionPayloadOnRestart(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
     const reset = useCallback((param) => {
@@ -754,17 +376,17 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
                 ...param,
                 initialData
             });
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, initialData]);
     const jump = useCallback((param) => {
         const { type, payload } = makeActionPayloadOnNode(flowName, param);
-        dispatch({ type: `flower/${type}`, payload });
+        dispatch({ type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
     const getCurrentNodeId = useCallback((customFlowName) => {
         return _get(store.getState(), [
-            'flower',
+            REDUCER_NAME.FLOWER_FLOW,
             customFlowName || flowName,
             'current'
         ]);
@@ -805,7 +427,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
 //     }
 // );
 const useFlowerNavigate = ({ flowName, action, route, node }) => {
-    const { flowName: flowNameContext } = useContext(context);
+    const { name: flowNameContext } = useContext(FlowerReactContext);
     const name = flowName || flowNameContext;
     const { next, jump, back, reset, restart } = useFlower({ flowName: name });
     const onNavigate = useCallback(() => {
@@ -841,7 +463,7 @@ function isIntrinsicElement(x) {
     return typeof x === 'string';
 }
 //TODO type FlowerNavigateWrapper props
-function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
+function _FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
     const newProps = useMemo(() => ({
         ...props,
         hidden,
@@ -860,136 +482,108 @@ function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
     /* istanbul ignore next */
     return Component && React.createElement(Component, { ...newProps });
 }
-const component$2 = React.memo(FlowerNavigateWrapper);
+const component$5 = React.memo(_FlowerNavigateWrapper);
+const FlowerNavigateWrapper = component$5;
 
 /* eslint-disable */
 //TODO type RenderRules props
+// ! Probably in this scenario we must replace `FlowerRule` or refactor `FlowerNavigate`
 const RenderRules = ({ alwaysDisplay, rules, Component, flowName, onNavigate, ...props }) => {
-    return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, flowName: flowName }, ({ hidden }) => React.createElement(component$2, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate })));
+    return (React.createElement(FlowerRule, { alwaysDisplay: alwaysDisplay, rules: rules, formName: flowName }, ({ hidden }) => (React.createElement(FlowerNavigateWrapper, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate }))));
 };
-const FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay, }) => {
-    const { onNavigate, flowName } = useFlowerNavigate({ flowName: forceFlowName, action, route, node });
+const _FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay }) => {
+    const { onNavigate, flowName } = useFlowerNavigate({
+        flowName: forceFlowName,
+        action,
+        route,
+        node
+    });
     if (typeof children === 'function') {
-        return React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate });
+        return (React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate }));
     }
-    return React.Children.map(children, (child, i) => {
+    return (React.createElement(React.Fragment, null, React.Children.map(children, (child, i) => {
         if (!React.isValidElement(child))
             return child;
         const { type, props } = child;
         const Component = type;
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props });
-    });
+        return (React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props }));
+    })));
 };
-const component$1 = React.memo(FlowerNavigate);
-component$1.displayName = 'FlowerNavigate';
+const component$4 = React.memo(_FlowerNavigate);
+component$4.displayName = 'FlowerNavigate';
+const FlowerNavigate = component$4;
 
-const FlowerComponent = ({ children }) => children;
-const component = memo(FlowerComponent);
+const _FlowerNode = ({ children, onEnter, onExit }) => {
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    return React.createElement(React.Fragment, null, children);
+};
+const component$3 = memo(_FlowerNode);
+component$3.displayName = 'FlowerNode';
+const FlowerNode = component$3;
 
-/**  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:
- *
- * - isSubmitted,
- * - isDirty,
- * - errors,
- * - customErrors,
- * - isValid,
- * - isValidating,
- * - getData,
- * - setData,
- * - unsetData,
- * - replaceData,
- * - reset,
- * - setCustomErrors
- * - getFormStatus
- *
- * @param {string} flowName - first optional parameter
- *
- * @param {string} name - alias optional parameter, if flowName exist, name is not used
- *
- */
-const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
-    const { flowName: flowNameDefault } = useContext(context);
+const _FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
     const dispatch = useDispatch();
-    const store = useStore();
-    const flowName = customFlowName || name || flowNameDefault || '';
-    const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
-    const { errors, customErrors, isValid, isSubmitted, isDirty, hasFocus, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
-    const getData = useCallback((path) => {
-        const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
-        return _get(store.getState(), [
-            'flower',
-            flowNameFromPath,
-            'data',
-            ...newpath
-        ]);
-    }, [store, flowName]);
-    const getFormStatus = useCallback((path) => {
-        const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
-        return _get(store.getState(), [
-            'flower',
-            flowNameFromPath,
-            'form',
-            ...newpath
-        ]);
-    }, [store, flowName]);
-    const setDataField = useCallback((id, val, dirty = true) => {
-        const { flowNameFromPath = flowName } = CoreUtils.getPath(id);
-        dispatch(actions.addDataByPath({
-            flowName: flowNameFromPath,
-            id,
-            value: val,
-            dirty
-        }));
-        return;
-    }, [flowName, dispatch]);
-    const setData = useCallback((val, id) => {
-        if (id) {
-            setDataField(id, val);
-            return;
+    const one = useRef(false);
+    const { name } = useContext(FlowerReactContext);
+    useEffect(() => {
+        onEnter?.();
+        return () => {
+            onExit?.();
+        };
+    }, [onEnter, onExit]);
+    useEffect(() => {
+        if (autostart && one.current === false) {
+            one.current = true;
+            dispatch(flowerActions.next({ flowName: name }));
         }
-        dispatch(actions.addData({ flowName, value: val }));
-    }, [flowName, setDataField, dispatch]);
-    const unsetData = useCallback((path) => {
-        const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
-        dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
-    }, [flowName, dispatch]);
-    const replaceData = useCallback((val) => {
-        dispatch(actions.replaceData({ flowName, value: val }));
-    }, [flowName, dispatch]);
-    const reset = useCallback((nodeId) => {
-        dispatch(actions.resetForm({ flowName, id: nodeId || currentNode }));
-    }, [flowName, currentNode, dispatch]);
-    const setCustomErrors = useCallback((field, errors, nodeId) => {
-        dispatch({
-            type: 'flower/formAddCustomErrors',
-            payload: {
-                name: flowName,
-                id: field,
-                currentNode: nodeId || currentNode,
-                errors
-            }
-        });
-    }, [flowName, currentNode, dispatch]);
-    return {
-        isSubmitted,
-        isDirty,
-        hasFocus,
-        errors,
-        customErrors,
-        isValid,
-        isValidating,
-        getData,
-        setData,
-        setDataField,
-        unsetData,
-        replaceData,
-        reset,
-        setCustomErrors,
-        getFormStatus
-    };
+    }, [dispatch, name, autostart]);
+    return React.createElement(React.Fragment, null, children);
 };
+const component$2 = React.memo(_FlowerRoute);
+component$2.displayName = 'FlowerRoute';
+const FlowerRoute = component$2;
+
+const _FlowerServer = ({ children }) => {
+    return React.createElement(React.Fragment, null, children);
+};
+const component$1 = React.memo(_FlowerServer);
+component$1.displayName = 'FlowerServer';
+const FlowerServer = component$1;
+
+function _FlowerStart() {
+    const dispatch = useDispatch();
+    const one = useRef(false);
+    const { name, autostart = true, currentNode } = useContext(FlowerReactContext);
+    const startNodeId = useSelector(makeSelectStartNodeId(name ?? ''));
+    useEffect(() => {
+        if (startNodeId === currentNode && autostart && one.current === false) {
+            one.current = true;
+            dispatch(flowerActions.next({ flowName: name, 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, name]);
+    return null;
+}
+const component = React.memo(_FlowerStart);
+component.displayName = 'FlowerStart';
+const FlowerStart = component;
+
+const FlowerProvider = ({ children, enableReduxDevtool, configureStoreOptions, reducers }) => (React.createElement(ReduxFlowerProvider, { reducer: { ...reducerFlower, ...(reducers ?? {}) }, config: {
+        ...configureStoreOptions,
+        devTools: enableReduxDevtool ?? configureStoreOptions?.devTools
+    } }, children));
 
-export { component$c as Flower, component$a as FlowerAction, component as FlowerComponent, context as FlowerContext, Consumer as FlowerContextConsumer, Provider as FlowerContextProvider, component$4 as FlowerField, component$8 as FlowerFlow, component$1 as FlowerNavigate, component$b as FlowerNode, FlowerProvider, component$6 as FlowerRoute, component$5 as FlowerRule, component$9 as FlowerServer, component$7 as FlowerStart, component$3 as FlowerValue, getDataByFlow, useFlower, useFlowerForm, useSelector };
+export { Flower, FlowerAction, FlowerComponent, FlowerFlow, FlowerNavigate, FlowerNode, FlowerProvider, FlowerRoute, FlowerServer, FlowerStart, makeSelectFormData, useFlower, useFlowerNavigate };