@flowerforce/flower-react 4.0.8-beta.0 → 4.0.10-beta.0

package/README.md

@@ -44,6 +44,10 @@ yarn add @flowerforce/flower-react
 
 ## Configuration
 
+
+Flower React works with redux global state.
+
+If you starts an application with Flower React from scratch, you need to wrap your application with **FlowerProvider**
 The **FlowerProvider** component wraps the entire application, providing a global redux context to manage the application flow.
 
 ```jsx
@@ -58,39 +62,70 @@ function Root() {
   )
 }
 ```
-> FlowerProvider accepts some properties such as `reducers` and `configureStoreOptions` in order to inject custom reducers into redux instance provided by FlowerProvider component.
-N.B.: actions and selectors from your custom reducers must use `useSelector` and `useDispatch` provided by flower-react 
+
+If your application is already built with redux as global state manager, you can use differents approaches:
+
+- Separates Providers
+
+In this case, you need to wrap your application with the **FlowerProvider** component in addition to the classic Redux provider.
+The order of providers is not relevant, since their redux contexts are different.
+n.b.: FlowerProvider generates a store instance with `FlowerData slice` from `flower-react-form`
+
 ```jsx
 import React from 'react'
-import { customReducer, customReducer2 } from 'my-custom-reducers'
-import { Flower, FlowerProvider } from '@flowerforce/flower-react'
-
-const reducers = {
-  customReducer: customReducer.reducer,
-  customReducer2: customReducer2.reducer
-}
+import { Provider } from 'react-redux'
+import { yourStore } from 'yourStore'
+import { FlowerProvider } from '@flowerforce/flower-react'
 
 function Root() {
   return (
-    <FlowerProvider reducers={reducers}>
-      <App />
-    </FlowerProvider>
+    <Provider store={yourStore}>
+      <FlowerProvider>  
+        <App />
+      </FlowerProvider>
+    </Provider>
   )
 }
 ```
-> You can pass the prop `configureStoreOptions - devTools` to the `FlowerProvider` to show the Flower Store data inside the redux devtool of your browser.
+
+- Single Provider
+
+For this scenario, we provides ***createStoreWithFlower***
+This functions takes a `configureStoreOptions` object (same as createStore from redux) and an optional `middlewaresBlacklist`, since flower inject automatically some middlewares in its store.
+To generate slices fully compatible, you can use ***createSliceWithFlower***, a function same as `createSlice` from redux.
+Let's see the needed configuration
 ```jsx
 import React from 'react'
-import { Flower, FlowerProvider } from '@flowerforce/flower-react'
+import { Provider } from 'react-redux'
+import { FormProvider, createStoreWithFlower, createSliceWithFlower } from '@flowerforce/flower-react'
+
+const myStoreWithFlower = createSliceWithFlower({
+  name: 'myStore',
+  initialData: {},
+  reducers: {
+    add: (state) => {
+      state.count += 1
+    }
+  }
+})
+
+const storeWithFlower = createStoreWithFlower({
+  reducer: {
+      myStore: myStoreWithFlower.reducer,
+    }
+})
 
 function Root() {
   return (
-    <FlowerProvider configureStoreOptions={{ devTools: true }}>
+    <Provider store={storeWithFlower}>
       <App />
-    </FlowerProvider>
+    </Provider>
   )
 }
 ```
+
+In this scenario, we need a single provider, so we use the default redux provider
+
 ## How to use
 
 ### Simple Example
@@ -621,11 +656,9 @@ import {
   Flower,
   FlowerRoute,
   FlowerNavigate,
-  FlowerNode,
-  FlowerField,
+  FlowerNode
 } from '@flowerforce/flower-react'
 
-
 import {
   FlowerField,
 } from '@flowerforce/flower-react-form'
@@ -984,3 +1017,4 @@ The Flower React docs are published at [flowerjs.it/](https://flowerjs.it)
 
 
 
+

package/dist/index.cjs.js

@@ -281,7 +281,7 @@ component$6.displayName = 'FlowerFlow';
 const FlowerFlow = component$6;
 
 const ACTION_TYPES = {
-    back: ['prev', 'prevToNode'],
+    back: ['back', 'prevToNode'],
     jump: ['node', 'node'],
     next: ['next', 'next'],
     restart: ['restart', 'restart'],
@@ -306,11 +306,12 @@ const makeActionPayload = (actions, keys) => (flowName, params) => {
         payload
     };
 };
-const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLOAD_KEYS_NEEDED.back);
+const makeActionPayloadOnBack = 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:
@@ -330,10 +331,8 @@ 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 { store, useSelector, dispatch } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
-    // const dispatch = useDispatch()
     const { name: flowNameDefault, initialData } = React.useContext(flowerReactContext.FlowerReactContext);
-    // const store = useStore()
+    const { store, dispatch, useSelector } = flowerReactStore.ReduxFlowerProvider.getReduxHooks();
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
     const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
@@ -366,7 +365,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, store]);
     const back = React.useCallback((param) => {
-        const { type, payload } = makeActionPayloadOnPrev(flowName, param);
+        const { type, payload } = makeActionPayloadOnBack(flowName, param);
         dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
@@ -627,15 +626,6 @@ const createStoreWithFlower = (configureStore, middlewaresBlacklist) => {
     });
 };
 
-// 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;

package/dist/index.esm.js

@@ -280,7 +280,7 @@ component$6.displayName = 'FlowerFlow';
 const FlowerFlow = component$6;
 
 const ACTION_TYPES = {
-    back: ['prev', 'prevToNode'],
+    back: ['back', 'prevToNode'],
     jump: ['node', 'node'],
     next: ['next', 'next'],
     restart: ['restart', 'restart'],
@@ -305,11 +305,12 @@ const makeActionPayload = (actions, keys) => (flowName, params) => {
         payload
     };
 };
-const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLOAD_KEYS_NEEDED.back);
+const makeActionPayloadOnBack = 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:
@@ -329,10 +330,8 @@ 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 { store, useSelector, dispatch } = ReduxFlowerProvider.getReduxHooks();
-    // const dispatch = useDispatch()
     const { name: flowNameDefault, initialData } = useContext(FlowerReactContext);
-    // const store = useStore()
+    const { store, dispatch, useSelector } = ReduxFlowerProvider.getReduxHooks();
     const flowName = (customFlowName || name || flowNameDefault);
     const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
     const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
@@ -365,7 +364,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName, store]);
     const back = useCallback((param) => {
-        const { type, payload } = makeActionPayloadOnPrev(flowName, param);
+        const { type, payload } = makeActionPayloadOnBack(flowName, param);
         dispatch({ type: `${REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
         emitNavigateEvent({ type, payload });
     }, [dispatch, emitNavigateEvent, flowName]);
@@ -626,15 +625,6 @@ const createStoreWithFlower = (configureStore$1, middlewaresBlacklist) => {
     });
 };
 
-// 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;

package/dist/src/components/{useFlower.d.ts → useFlower/index.d.ts}

@@ -1,4 +1,4 @@
-import { UseFlower } from '../types/FlowerHooks';
+import { UseFlower } from '../../types';
 /** 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:

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

@@ -1,4 +1,4 @@
-export declare const makeActionPayloadOnPrev: (flowName: string | undefined, params: any) => {
+export declare const makeActionPayloadOnBack: (flowName: string | undefined, params: any) => {
     type: string;
     payload: Record<string, any>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "4.0.8-beta.0",
+  "version": "4.0.10-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.5",
-    "@flowerforce/flower-react-context": "4.0.1-beta.5",
-    "@flowerforce/flower-react-store": "4.0.1-beta.5",
-    "@flowerforce/flower-react-shared": "4.0.6-beta.1",
+    "@flowerforce/flower-core": "4.0.1-beta.7",
+    "@flowerforce/flower-react-context": "4.0.1-beta.7",
+    "@flowerforce/flower-react-store": "4.0.1-beta.7",
+    "@flowerforce/flower-react-shared": "4.0.6-beta.3",
     "lodash": "^4.17.21"
   },
   "exports": {