@flowerforce/flower-react 3.0.1-beta.6 → 3.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 3.1.0 (2024-06-06)
+
+
+### 🚀 Features
+
+- add restart action in flower hooks, pass initial data in context ([adbc859](https://github.com/flowerforce/flower/commit/adbc859))
+
+- add devtool to demo - remove duplicated export type ([88117d6](https://github.com/flowerforce/flower/commit/88117d6))
+
+- allow custom functions when defining rules and navigation between nodes ([b35f5da](https://github.com/flowerforce/flower/commit/b35f5da))
+
+
+### 🩹 Fixes
+
+- add types exports from index ([b7a2c3b](https://github.com/flowerforce/flower/commit/b7a2c3b))
+
+- pass initial data to reset function in useFlower ([2177578](https://github.com/flowerforce/flower/commit/2177578))
+
+- payload creator for reset action fixed ([389fe15](https://github.com/flowerforce/flower/commit/389fe15))
+
+- align packages ([210a284](https://github.com/flowerforce/flower/commit/210a284))
+
 ## 3.0.0 (2024-05-20)
 
 This was a version bump only for flower-react to align it with other projects, there were no code changes.

package/README.md

@@ -14,7 +14,7 @@ For more info [flowerjs.it/](https://flowerjs.it/)
 - **Node and Connection Handling**: Functions to manage nodes and connections, including adding, removing, and editing.
 - **State Management**: Built-in state management to keep track of workflow changes and updates.
 - **Event System**: Customizable event handling to respond to user interactions and changes within the workflow.
-- **Serialization**: Convert workflows to and from different formats (e.g., JSON) for easy storage and retrieval.
+- **Serialization**: Convert workflows to JSON for easy storage and retrieval. (only server side flow)
 - **Validation**: Ensure workflows follow predefined rules and constraints to maintain integrity.
 - **Form Validation**: Built-in functionalities to validate form inputs within nodes, ensuring data integrity and correctness.
 - **History Management**: Internal management of flow history, tracking node traversal and changes for debugging and visualization purposes.
@@ -30,7 +30,7 @@ Flower React can be installed via npm or yarn for use in any JavaScript project.
 
 ```bash
 #NPM
-npm install @flowerforce/flower-core
+npm install @flowerforce/flower-react
 ```
 
 ### Using yarn
@@ -40,7 +40,7 @@ npm install @flowerforce/flower-core
 
 ```bash
 #YARN
-yarn add @flowerforce/flower-core
+yarn add @flowerforce/flower-react
 ```
 
 ## Configuration
@@ -811,6 +811,34 @@ Devtool({
 })
 ```
 
+#### Devtool remote
+
+```jsx
+Devtool({
+  remote: 'passKey',
+  sourceMap: require('./.flower.source-map.json')
+})
+```
+
+To generate the source maps, add the command flower-sourcemap to your package.
+
+```json
+  "scripts": {
+    "build-sourcemap": "flower generate-sourcemap -p NEWPASSKEY"
+  },
+```
+
+
+```bash
+  flower sourcemap --help
+
+  -p, --passKey <type>   Choose pass key for devtool inspect (default: "RANDOM STRING")
+  -f, --pattern <type>  Add glob for search <Flower/> files (default: "src/**/*.{js,ts,tsx,jsx}")
+  -s, --dirsave <type>  Directory on save sourcemap (default: "src")
+  -h, --help             Display help for command
+```
+
+
 # Documentation
 
 The Flower React docs are published at [flowerjs.it/](https://flowerjs.it)

package/dist/index.cjs.js

@@ -57,16 +57,20 @@ const reduxContext = /*#__PURE__*/React.createContext(null);
 const useDispatch = reactRedux.createDispatchHook(reduxContext);
 const useSelector = reactRedux.createSelectorHook(reduxContext);
 const useStore = reactRedux.createStoreHook(reduxContext);
-const store = toolkit.configureStore({
+const store = ({
+  enableDevtool
+}) => toolkit.configureStore({
   reducer: reducerFlower,
-  devTools: {
+  devTools: enableDevtool ? {
     name: 'flower'
-  }
+  } : false
 });
 class FlowerProvider extends React.Component {
   constructor(props) {
     super(props);
-    this.store = store;
+    this.store = store({
+      enableDevtool: props.enableDevtool
+    });
   }
   render() {
     const {
@@ -159,10 +163,11 @@ const FlowerClient = ({
         action: 'FLOWER_CLIENT_INIT',
         name: flowName,
         time: new Date(),
-        nodeId: isInitialized
+        nodeId: isInitialized,
+        getState: store.getState
       });
     }
-  }, [dispatch, flowName, wsDevtools, isInitialized]);
+  }, [dispatch, flowName, wsDevtools, isInitialized, store]);
   React.useEffect(() => {
     if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
       flowerCore.Emitter.emit('flower-devtool-from-client', {
@@ -824,7 +829,18 @@ const useFlower = ({
   } = React.useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
-  const emitNavigateEvent = React.useCallback(params => {}, [flowName, nodeId]);
+  const emitNavigateEvent = React.useCallback(params => {
+    if (_get(global.window, '__FLOWER_DEVTOOLS__')) {
+      flowerCore.Emitter.emit('flower-devtool-from-client', {
+        source: 'flower-client',
+        action: 'FLOWER_NAVIGATE',
+        nodeId,
+        name: flowName,
+        time: new Date(),
+        params
+      });
+    }
+  }, [flowName, nodeId]);
   const next = React.useCallback(param => {
     const params = typeof param === 'string' ? {
       route: param

package/dist/index.esm.js

@@ -55,16 +55,20 @@ const reduxContext = /*#__PURE__*/createContext(null);
 const useDispatch = createDispatchHook(reduxContext);
 const useSelector = createSelectorHook(reduxContext);
 const useStore = createStoreHook(reduxContext);
-const store = configureStore({
+const store = ({
+  enableDevtool
+}) => configureStore({
   reducer: reducerFlower,
-  devTools: {
+  devTools: enableDevtool ? {
     name: 'flower'
-  }
+  } : false
 });
 class FlowerProvider extends Component {
   constructor(props) {
     super(props);
-    this.store = store;
+    this.store = store({
+      enableDevtool: props.enableDevtool
+    });
   }
   render() {
     const {
@@ -157,10 +161,11 @@ const FlowerClient = ({
         action: 'FLOWER_CLIENT_INIT',
         name: flowName,
         time: new Date(),
-        nodeId: isInitialized
+        nodeId: isInitialized,
+        getState: store.getState
       });
     }
-  }, [dispatch, flowName, wsDevtools, isInitialized]);
+  }, [dispatch, flowName, wsDevtools, isInitialized, store]);
   useEffect(() => {
     if (isInitialized && wsDevtools && global.window && _get(global.window, '__FLOWER_DEVTOOLS__')) {
       Emitter.emit('flower-devtool-from-client', {
@@ -822,7 +827,18 @@ const useFlower = ({
   } = useContext(context);
   const flowName = customFlowName || name || flowNameDefault;
   const nodeId = useSelector(makeSelectCurrentNodeId(flowName != null ? flowName : ''));
-  const emitNavigateEvent = useCallback(params => {}, [flowName, nodeId]);
+  const emitNavigateEvent = useCallback(params => {
+    if (_get(global.window, '__FLOWER_DEVTOOLS__')) {
+      Emitter.emit('flower-devtool-from-client', {
+        source: 'flower-client',
+        action: 'FLOWER_NAVIGATE',
+        nodeId,
+        name: flowName,
+        time: new Date(),
+        params
+      });
+    }
+  }, [flowName, nodeId]);
   const next = useCallback(param => {
     const params = typeof param === 'string' ? {
       route: param

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

@@ -1,4 +1,4 @@
-import { RulesObject } from '@flowerforce/flower-core';
+import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>> = {
     id?: string;
     children: React.ReactNode | ((props: {
@@ -19,7 +19,7 @@ export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>
     asyncDebounce?: number;
     asyncInitialError?: string;
     asyncWaitingError?: string;
-    rules?: RulesObject<T>;
+    rules?: RulesObject<T> | FunctionRule;
     flowName?: string;
     defaultValue?: unknown;
     destroyValue?: boolean;

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

@@ -1,8 +1,8 @@
-import { RulesObject } from '@flowerforce/flower-core';
+import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerRuleProps = {
     id?: string;
     value?: any;
-    rules?: RulesObject<any>;
+    rules?: RulesObject<any> | FunctionRule;
     flowName?: string;
     alwaysDisplay?: boolean;
     onUpdate?: (hidden: boolean) => void;

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

@@ -1,8 +1,8 @@
-import { RulesObject } from '@flowerforce/flower-core';
+import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
 export type FlowerValueProps = {
     id?: string;
     value?: any;
-    rules?: RulesObject<any>;
+    rules?: RulesObject<any> | FunctionRule;
     children: React.ReactNode | ((props: Record<string, any>) => React.ReactNode | React.ReactElement | undefined);
     spreadValue?: boolean;
     flowName?: string;

package/dist/src/provider.d.ts

@@ -4,7 +4,9 @@ import { FlowerProviderProps } from './components/types/FlowerProvider';
 export declare const useDispatch: import("react-redux").UseDispatch<import("redux").Dispatch<Action>>;
 export declare const useSelector: import("react-redux").UseSelector<unknown>;
 export declare const useStore: import("react-redux").UseStore<import("redux").Store<any, Action, {}>>;
-export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
+export declare const store: ({ enableDevtool }: {
+    enableDevtool?: boolean;
+}) => import("@reduxjs/toolkit").EnhancedStore<{
     flower: Record<string, import("packages/flower-core/dist/src").Flower<Record<string, any>>>;
 }, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
     dispatch: import("redux-thunk").ThunkDispatch<{
@@ -13,7 +15,9 @@ export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
 }>, import("redux").StoreEnhancer]>>;
 declare class FlowerProvider extends Component<PropsWithChildren, FlowerProviderProps> {
     private store;
-    constructor(props: PropsWithChildren);
+    constructor(props: PropsWithChildren & {
+        enableDevtool?: boolean;
+    });
     render(): React.JSX.Element;
 }
 export default FlowerProvider;

package/dist/src/selectors.d.ts

@@ -1,4 +1,4 @@
-import { RulesObject } from '@flowerforce/flower-core';
+import { RulesObject, FunctionRule } from '@flowerforce/flower-core';
 declare const selectFlowerHistory: (name: string) => ((state: {
     flower: {
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
@@ -63,24 +63,24 @@ declare const makeSelectNodesIds: (name: string) => ((state: {
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
     };
 }) => {
-    [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+    [x: string]: import("@flowerforce/flower-core").INode;
 }) & {
     clearCache: () => void;
     resultsCount: () => number;
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     };
     memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     };
     lastResult: () => {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     };
     dependencies: [((state: {
         flower: {
@@ -311,10 +311,10 @@ declare const makeSelectPrevNodeRetain: (name: string) => ((state: {
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }, resultFuncArgs_1: string[], resultFuncArgs_2: string) => string | boolean | undefined;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }, resultFuncArgs_1: string[], resultFuncArgs_2: string) => string | boolean | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
@@ -326,24 +326,24 @@ declare const makeSelectPrevNodeRetain: (name: string) => ((state: {
             [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
         };
     }) => {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         };
         memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         }) & {
             clearCache: () => void;
             resultsCount: () => number;
             resetResultsCount: () => void;
         };
         lastResult: () => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         };
         dependencies: [((state: {
             flower: {
@@ -580,10 +580,10 @@ declare const makeSelectCurrentNodeDisabled: (name: string) => ((state: {
     resetResultsCount: () => void;
 } & {
     resultFunc: (resultFuncArgs_0: {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }, resultFuncArgs_1: string) => boolean;
     memoizedResultFunc: ((resultFuncArgs_0: {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }, resultFuncArgs_1: string) => boolean) & {
         clearCache: () => void;
         resultsCount: () => number;
@@ -595,24 +595,24 @@ declare const makeSelectCurrentNodeDisabled: (name: string) => ((state: {
             [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
         };
     }) => {
-        [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+        [x: string]: import("@flowerforce/flower-core").INode;
     }) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
     } & {
         resultFunc: (resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         };
         memoizedResultFunc: ((resultFuncArgs_0: import("@flowerforce/flower-core").Flower<Record<string, any>>) => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         }) & {
             clearCache: () => void;
             resultsCount: () => number;
             resetResultsCount: () => void;
         };
         lastResult: () => {
-            [x: string]: import("packages/flower-core/dist/src/interfaces/Store").Node;
+            [x: string]: import("@flowerforce/flower-core").INode;
         };
         dependencies: [((state: {
             flower: {
@@ -1203,7 +1203,7 @@ declare const makeSelectFieldError: (name: string, id: string, validate: any) =>
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any>, keys: string[], flowName: string, value: any, currentNode: string) => ((state: {
+export declare const selectorRulesDisabled: (id: string, rules: RulesObject<any> | FunctionRule, keys: string[], flowName: string, value: any, currentNode: string) => ((state: {
     flower: {
         [x: string]: import("@flowerforce/flower-core").Flower<Record<string, any>>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.0.1-beta.6",
+  "version": "3.1.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.0.0",
+    "@flowerforce/flower-core": "3.1.0",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",