@flowerforce/flower-react 4.0.5-beta.0 → 4.0.7-beta.0

package/dist/index.cjs.js

@@ -6,9 +6,10 @@ var flowerCore = require('@flowerforce/flower-core');
 var flowerReactContext = require('@flowerforce/flower-react-context');
 var _get = require('lodash/get');
 var toolkit = require('@reduxjs/toolkit');
-var reselect = require('reselect');
 var flowerReactStore = require('@flowerforce/flower-react-store');
+var reselect = require('reselect');
 var flowerReactShared = require('@flowerforce/flower-react-shared');
+var set = require('lodash/set');
 
 // eslint-disable-next-line import/prefer-default-export
 const convertElements = (nodes) => {
@@ -26,6 +27,10 @@ const flowerFlowReducer = flowerReducer.reducer;
 const reducerFlower = {
     [flowerCore.REDUCER_NAME.FLOWER_FLOW]: flowerFlowReducer
 };
+const flowerReducers = {
+    ...reducerFlower,
+    ...flowerReactStore.reducerData
+};
 
 const { selectGlobal, selectGlobalData } = flowerCore.FlowerCoreStateSelectors;
 const selectFlower = (name) => reselect.createSelector(selectGlobal, flowerCore.FlowerCoreStateSelectors.selectFlower(name));
@@ -50,7 +55,7 @@ reselect.createSelector(selectGlobalData, flowerCore.FlowerStateUtils.getAllData
  */
 const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialState = {}, initialData }) => {
     const flowName = name;
-    const dispatch = flowerReactStore.useDispatch();
+    const { dispatch, store, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const one = React.useRef(false);
     const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
     // TODO could make that transformation in CoreUtils.generateNodesForFlowerJson
@@ -59,12 +64,11 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     () => convertElements(React.Children.toArray(children)), [children]);
     const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
-    const isInitialized = flowerReactStore.useSelector(makeSelectStartNodeId(name));
-    const history = flowerReactStore.useSelector(selectFlowerHistory(name));
-    const current = flowerReactStore.useSelector(makeSelectCurrentNodeId(flowName));
-    const isDisabled = flowerReactStore.useSelector(makeSelectCurrentNodeDisabled(flowName));
-    const prevFlowerNodeId = flowerReactStore.useSelector(makeSelectPrevNodeRetain(flowName));
-    const store = flowerReactStore.useStore();
+    const isInitialized = useSelector(makeSelectStartNodeId(name));
+    const history = useSelector(selectFlowerHistory(name));
+    const current = useSelector(makeSelectCurrentNodeId(flowName));
+    const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
+    const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
     React.useEffect(() => {
         if (nodes.length > 0 && one.current === false) {
             one.current = true;
@@ -326,12 +330,13 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLO
  * @param {string} name - optional parameter, if flowName exist, name is not used
  */
 const useFlower = ({ flowName: customFlowName, name } = {}) => {
-    const dispatch = flowerReactStore.useDispatch();
+    const { store, useSelector, dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
+    // const dispatch = useDispatch()
     const { name: flowNameDefault, initialData } = React.useContext(flowerReactContext.FlowerReactContext);
-    const store = flowerReactStore.useStore();
+    // const store = useStore()
     const flowName = (customFlowName || name || flowNameDefault);
-    const nodeId = flowerReactStore.useSelector(makeSelectCurrentNodeId(flowName ?? ''));
-    const startId = flowerReactStore.useSelector(makeSelectStartNodeId(flowName ?? ''));
+    const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
+    const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
     const emitNavigateEvent = React.useCallback(
     //TODO check this function is needed
     (params) => {
@@ -528,7 +533,7 @@ component$3.displayName = 'FlowerNode';
 const FlowerNode = component$3;
 
 const _FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
-    const dispatch = flowerReactStore.useDispatch();
+    const { dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const one = React.useRef(false);
     const { name } = React.useContext(flowerReactContext.FlowerReactContext);
     React.useEffect(() => {
@@ -557,10 +562,10 @@ component$1.displayName = 'FlowerServer';
 const FlowerServer = component$1;
 
 function _FlowerStart() {
-    const dispatch = flowerReactStore.useDispatch();
+    const { dispatch, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const one = React.useRef(false);
     const { name, autostart = true, currentNode } = React.useContext(flowerReactContext.FlowerReactContext);
-    const startNodeId = flowerReactStore.useSelector(makeSelectStartNodeId(name ?? ''));
+    const startNodeId = useSelector(makeSelectStartNodeId(name ?? ''));
     React.useEffect(() => {
         if (startNodeId === currentNode && autostart && one.current === false) {
             one.current = true;
@@ -593,17 +598,64 @@ const FlowerProvider = ({ children, enableReduxDevtool, configureStore }) => {
         } }, children));
 };
 
-Object.defineProperty(exports, "useDispatch", {
-  enumerable: true,
-  get: function () { return flowerReactStore.useDispatch; }
-});
-Object.defineProperty(exports, "useSelector", {
-  enumerable: true,
-  get: function () { return flowerReactStore.useSelector; }
-});
-Object.defineProperty(exports, "useStore", {
+/**
+ *
+ * @param {ConfigureStoreOptions} configureStore object to configure store - same structure as redux configureStore options
+ * @param {MiddlewareList} middlewaresBlacklist list of flower middlewares to blacklist
+ * @returns {Store} redux store instance
+ */
+const createStoreWithFlower = (configureStore, middlewaresBlacklist) => {
+    if (!configureStore) {
+        return toolkit.configureStore({
+            reducer: toolkit.combineReducers({ ...flowerReactStore.reducerData, ...reducerFlower }),
+            devTools: true
+        });
+    }
+    const { reducer, ...configOptions } = configureStore ?? {};
+    const combinedReducers = toolkit.combineReducers({
+        ...flowerReactStore.reducerData,
+        ...reducerFlower,
+        ...(reducer || {})
+    });
+    const flowerMiddlewares = middlewaresBlacklist && !!middlewaresBlacklist.length
+        ? flowerReactStore.middlewares.filter((middleware) => !middlewaresBlacklist.includes(middleware.name))
+        : flowerReactStore.middlewares;
+    return toolkit.configureStore({
+        reducer: combinedReducers,
+        ...configOptions,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(...flowerMiddlewares, ...(configOptions.middleware ?? []))
+    });
+};
+
+// createSlice({
+//     name: "myStore",
+//     initialState: {
+//       gino: 1,
+//     } as Record<string, number>,
+//     reducers: {
+//       add: (state) => ({ ...state, gino: state.gino + 1 }),
+//     },
+//   });
+const updateAction = (reducerName) => toolkit.createAction(`${reducerName}/flowerUpdateData`);
+const createSliceWithFlower = (createSliceOptions) => {
+    const { name, reducers } = createSliceOptions;
+    updateAction(name);
+    const slice = toolkit.createSlice({
+        ...createSliceOptions,
+        reducers: {
+            ...reducers,
+            flowerUpdateData: (state, { payload }) => {
+                const { path, value } = payload;
+                set(state, path, value);
+            }
+        }
+    });
+    return slice;
+};
+
+Object.defineProperty(exports, "createApi", {
   enumerable: true,
-  get: function () { return flowerReactStore.useStore; }
+  get: function () { return flowerReactStore.createApi; }
 });
 exports.Flower = Flower;
 exports.FlowerAction = FlowerAction;
@@ -615,6 +667,10 @@ exports.FlowerProvider = FlowerProvider;
 exports.FlowerRoute = FlowerRoute;
 exports.FlowerServer = FlowerServer;
 exports.FlowerStart = FlowerStart;
+exports.createSliceWithFlower = createSliceWithFlower;
+exports.createStoreWithFlower = createStoreWithFlower;
+exports.flowerReducers = flowerReducers;
 exports.makeSelectData = makeSelectData;
+exports.reducerFlower = reducerFlower;
 exports.useFlower = useFlower;
 exports.useFlowerNavigate = useFlowerNavigate;

package/dist/index.esm.js

@@ -3,11 +3,12 @@ import _keyBy from 'lodash/keyBy';
 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 } from '@reduxjs/toolkit';
+import { createSlice, configureStore, combineReducers, createAction } from '@reduxjs/toolkit';
+import { reducerData, ReduxFlowerProvider, flowerDataActions, middlewares } from '@flowerforce/flower-react-store';
+export { createApi } from '@flowerforce/flower-react-store';
 import { createSelector } from 'reselect';
-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';
+import set from 'lodash/set';
 
 // eslint-disable-next-line import/prefer-default-export
 const convertElements = (nodes) => {
@@ -25,6 +26,10 @@ const flowerFlowReducer = flowerReducer.reducer;
 const reducerFlower = {
     [REDUCER_NAME.FLOWER_FLOW]: flowerFlowReducer
 };
+const flowerReducers = {
+    ...reducerFlower,
+    ...reducerData
+};
 
 const { selectGlobal, selectGlobalData } = FlowerCoreStateSelectors;
 const selectFlower = (name) => createSelector(selectGlobal, FlowerCoreStateSelectors.selectFlower(name));
@@ -49,7 +54,7 @@ createSelector(selectGlobalData, FlowerStateUtils.getAllData);
  */
 const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialState = {}, initialData }) => {
     const flowName = name;
-    const dispatch = useDispatch();
+    const { dispatch, store, useSelector } = ReduxFlowerProvider.getReduxHooks();
     const one = useRef(false);
     const [wsDevtools, setWsDevtools] = useState(devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
     // TODO could make that transformation in CoreUtils.generateNodesForFlowerJson
@@ -63,7 +68,6 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
     const current = useSelector(makeSelectCurrentNodeId(flowName));
     const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
     const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
-    const store = useStore();
     useEffect(() => {
         if (nodes.length > 0 && one.current === false) {
             one.current = true;
@@ -325,9 +329,10 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLO
  * @param {string} name - optional parameter, if flowName exist, name is not used
  */
 const useFlower = ({ flowName: customFlowName, name } = {}) => {
-    const dispatch = useDispatch();
+    const { store, useSelector, dispatch } = ReduxFlowerProvider.getReduxHooks();
+    // const dispatch = useDispatch()
     const { name: flowNameDefault, initialData } = useContext(FlowerReactContext);
-    const store = useStore();
+    // const store = useStore()
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
     const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
@@ -527,7 +532,7 @@ component$3.displayName = 'FlowerNode';
 const FlowerNode = component$3;
 
 const _FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
-    const dispatch = useDispatch();
+    const { dispatch } = ReduxFlowerProvider.getReduxHooks();
     const one = useRef(false);
     const { name } = useContext(FlowerReactContext);
     useEffect(() => {
@@ -556,7 +561,7 @@ component$1.displayName = 'FlowerServer';
 const FlowerServer = component$1;
 
 function _FlowerStart() {
-    const dispatch = useDispatch();
+    const { dispatch, useSelector } = ReduxFlowerProvider.getReduxHooks();
     const one = useRef(false);
     const { name, autostart = true, currentNode } = useContext(FlowerReactContext);
     const startNodeId = useSelector(makeSelectStartNodeId(name ?? ''));
@@ -592,4 +597,59 @@ const FlowerProvider = ({ children, enableReduxDevtool, configureStore }) => {
         } }, children));
 };
 
-export { Flower, FlowerAction, FlowerComponent, FlowerFlow, FlowerNavigate, FlowerNode, FlowerProvider, FlowerRoute, FlowerServer, FlowerStart, makeSelectData, useFlower, useFlowerNavigate };
+/**
+ *
+ * @param {ConfigureStoreOptions} configureStore object to configure store - same structure as redux configureStore options
+ * @param {MiddlewareList} middlewaresBlacklist list of flower middlewares to blacklist
+ * @returns {Store} redux store instance
+ */
+const createStoreWithFlower = (configureStore$1, middlewaresBlacklist) => {
+    if (!configureStore$1) {
+        return configureStore({
+            reducer: combineReducers({ ...reducerData, ...reducerFlower }),
+            devTools: true
+        });
+    }
+    const { reducer, ...configOptions } = configureStore$1 ?? {};
+    const combinedReducers = combineReducers({
+        ...reducerData,
+        ...reducerFlower,
+        ...(reducer || {})
+    });
+    const flowerMiddlewares = middlewaresBlacklist && !!middlewaresBlacklist.length
+        ? middlewares.filter((middleware) => !middlewaresBlacklist.includes(middleware.name))
+        : middlewares;
+    return configureStore({
+        reducer: combinedReducers,
+        ...configOptions,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(...flowerMiddlewares, ...(configOptions.middleware ?? []))
+    });
+};
+
+// createSlice({
+//     name: "myStore",
+//     initialState: {
+//       gino: 1,
+//     } as Record<string, number>,
+//     reducers: {
+//       add: (state) => ({ ...state, gino: state.gino + 1 }),
+//     },
+//   });
+const updateAction = (reducerName) => createAction(`${reducerName}/flowerUpdateData`);
+const createSliceWithFlower = (createSliceOptions) => {
+    const { name, reducers } = createSliceOptions;
+    updateAction(name);
+    const slice = createSlice({
+        ...createSliceOptions,
+        reducers: {
+            ...reducers,
+            flowerUpdateData: (state, { payload }) => {
+                const { path, value } = payload;
+                set(state, path, value);
+            }
+        }
+    });
+    return slice;
+};
+
+export { Flower, FlowerAction, FlowerComponent, FlowerFlow, FlowerNavigate, FlowerNode, FlowerProvider, FlowerRoute, FlowerServer, FlowerStart, createSliceWithFlower, createStoreWithFlower, flowerReducers, makeSelectData, reducerFlower, useFlower, useFlowerNavigate };

package/dist/src/features/reducer/flowerReducer.d.ts

@@ -1,6 +1,7 @@
-import { Flower, REDUCER_NAME } from '@flowerforce/flower-core';
+import { REDUCER_NAME } from '@flowerforce/flower-core';
 import { REDUCERS_TYPES } from '@flowerforce/flower-react-store';
-export declare const flowerReducer: import("@reduxjs/toolkit").Slice<Record<string, Flower<Record<string, any>>>, import("@flowerforce/flower-core").CoreReducersFunctions, REDUCER_NAME.FLOWER_FLOW, REDUCER_NAME.FLOWER_FLOW, import("@reduxjs/toolkit").SliceSelectors<Record<string, Flower<Record<string, any>>>>>;
+export declare const flowerReducer: import("@reduxjs/toolkit").Slice<{}, import("@flowerforce/flower-core").CoreReducersFunctions, REDUCER_NAME.FLOWER_FLOW, REDUCER_NAME.FLOWER_FLOW, import("@reduxjs/toolkit").SliceSelectors<{}>>;
 export declare const flowerActions: import("@reduxjs/toolkit").CaseReducerActions<import("@flowerforce/flower-core").CoreReducersFunctions, REDUCER_NAME.FLOWER_FLOW>;
-export declare const flowerFlowReducer: import("redux").Reducer<Record<string, Flower<Record<string, any>>>>;
+export declare const flowerFlowReducer: import("redux").Reducer<{}>;
 export declare const reducerFlower: REDUCERS_TYPES;
+export declare const flowerReducers: {};

package/dist/src/index.d.ts

@@ -1,5 +1,5 @@
 export * from './components';
 export * from './provider';
-export { makeSelectData } from './features';
+export { makeSelectData, reducerFlower, flowerReducers } from './features';
 export type * from './types';
-export { useDispatch, useSelector, useStore } from '@flowerforce/flower-react-store';
+export { createApi } from '@flowerforce/flower-react-store';

package/dist/src/provider/createSliceWithFlower.d.ts

@@ -0,0 +1,2 @@
+import { CreateSliceOptions, Slice, SliceCaseReducers, SliceSelectors } from '@reduxjs/toolkit';
+export declare const createSliceWithFlower: <State extends object, CaseReducers extends SliceCaseReducers<State>, Name extends string, Selectors extends SliceSelectors<State>, ReducerPath extends string = Name>(createSliceOptions: CreateSliceOptions<State, CaseReducers, Name, ReducerPath, Selectors>) => Slice<State, CaseReducers, Name, ReducerPath, Selectors>;

package/dist/src/provider/createStoreWithFlower.d.ts

@@ -0,0 +1,8 @@
+import { CreateStoreWithFlower } from '../types/middlewares';
+/**
+ *
+ * @param {ConfigureStoreOptions} configureStore object to configure store - same structure as redux configureStore options
+ * @param {MiddlewareList} middlewaresBlacklist list of flower middlewares to blacklist
+ * @returns {Store} redux store instance
+ */
+export declare const createStoreWithFlower: CreateStoreWithFlower;

package/dist/src/provider/index.d.ts

@@ -1 +1,3 @@
 export * from './provider';
+export * from './createStoreWithFlower';
+export * from './createSliceWithFlower';

package/dist/src/provider/provider.d.ts

@@ -1,11 +1,7 @@
 import React, { PropsWithChildren } from 'react';
-import { ConfigureStoreOptions, Reducer, UnknownAction } from '@reduxjs/toolkit';
-export declare const FlowerProvider: <T extends Record<string, unknown> = Record<string, unknown>>({ children, enableReduxDevtool, configureStore }: PropsWithChildren<{
-    configureStore?: Omit<ConfigureStoreOptions, 'reducer'> & {
-        reducer?: Reducer<T, UnknownAction> | {
-            [x: string]: Reducer<T, UnknownAction>;
-        };
-    };
+import { ConfigureStoreOptions } from '@reduxjs/toolkit';
+export declare const FlowerProvider: ({ children, enableReduxDevtool, configureStore }: PropsWithChildren<{
+    configureStore?: ConfigureStoreOptions;
     /** @deprecated - uses devTools key from configureStoreOptions instead */
     enableReduxDevtool?: boolean;
 }>) => React.JSX.Element;

package/dist/src/types/middlewares.d.ts

@@ -0,0 +1,16 @@
+import { ConfigureStoreOptions, Store } from '@reduxjs/toolkit';
+export type MiddlewareList = 'flowerUpdateMiddleware';
+type Values<T> = T[keyof T];
+type UniqueTuple<U extends string> = [U] extends [never] ? [] : Values<{
+    [K in U]: [K, ...UniqueTuple<Exclude<U, K>>];
+}>;
+export type UniqueMiddlewaresist = UniqueTuple<MiddlewareList>;
+/**
+ * Generates a Redux store instance with flower reducers injected automatically.
+ *
+ * @param {ConfigureStoreOptions} configureStore - The configuration options for creating the Redux store.
+ * @param {MiddlewareList} middlewaresBlacklist - Blacklist of middlewares we don't want to be integrated
+ * @returns {Store} A configured REdux store instance with flower reducers
+ */
+export type CreateStoreWithFlower = (configureStore?: ConfigureStoreOptions, middlewaresBlacklist?: Array<MiddlewareList>) => Store;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "4.0.5-beta.0",
+  "version": "4.0.7-beta.0",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -37,10 +37,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "4.0.1-beta.2",
-    "@flowerforce/flower-react-context": "4.0.1-beta.2",
-    "@flowerforce/flower-react-store": "4.0.1-beta.2",
-    "@flowerforce/flower-react-shared": "4.0.3-beta.0",
+    "@flowerforce/flower-core": "4.0.1-beta.4",
+    "@flowerforce/flower-react-context": "4.0.1-beta.4",
+    "@flowerforce/flower-react-store": "4.0.1-beta.4",
+    "@flowerforce/flower-react-shared": "4.0.5-beta.0",
     "lodash": "^4.17.21"
   },
   "exports": {