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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 3.1.1 (2024-06-11)
+
+
+### 🩹 Fixes
+
+- enableReduxDevtool prop inside FlowerProvider ([ff0e57a](https://github.com/flowerforce/flower/commit/ff0e57a))
+
 ## 3.1.0 (2024-06-06)
 
 

package/README.md

@@ -59,6 +59,7 @@ function Root() {
   )
 }
 ```
+> You can pass the prop `enableReduxDevtool` to the `FlowerProvider` to show the Flower Store data inside the redux devtool of your browser.
 
 ## How to use
 
@@ -121,7 +122,8 @@ import {
 export const Page = () => {
   return (
     <Flower name="demo">
-      <FlowerRoute id="start" to={{ step1: null }} /> {/* autonext */}
+      {/* autonext */}
+      <FlowerRoute id="start" to={{ step1: null }} /> 
       <FlowerNode
         id="step1"
         to={{
@@ -225,7 +227,7 @@ export const Page = () => {
         id="step1"
         to={{
               step3: {
-                rules={{ $and: [{ skipStep2: { $eq: true } }] }}
+                rules: { $and: [{ skipStep2: { $eq: true } }] }
               },
               step2: null
             }}
@@ -432,7 +434,14 @@ export const Page = () => {
     <>
       <button onClick={() => next()}>click me and go next</button>
 
-      <Flower name="demo">...</Flower>
+      <Flower name="demo">
+        <FlowerNode id="step1" to={{ step2: null }}>
+          ...
+          <button onClick={() => next()}>click me and go next</button>
+        </FlowerNode>
+
+        <FlowerNode id="step2">...</FlowerNode>
+      </Flower>
     </>
   )
 }
@@ -816,7 +825,7 @@ Devtool({
 ```jsx
 Devtool({
   remote: 'passKey',
-  sourceMap: require('./.flower.source-map.json')
+  sourceMap: require('./.flower.sourcemap.json')
 })
 ```
 
@@ -824,20 +833,86 @@ To generate the source maps, add the command flower-sourcemap to your package.
 
 ```json
   "scripts": {
-    "build-sourcemap": "flower generate-sourcemap -p NEWPASSKEY"
+    "build-sourcemap": "flower generate-sourcemap"
   },
 ```
 
 
 ```bash
-  flower sourcemap --help
+  flower generate-sourcemap --help
+
+  -p, --pattern <type>  Add glob for search <Flower/> files (default: "src/**/*.{js,ts,tsx,jsx}")
+  -d, --dirsave <type>  The directory where to save the sourcemap (default: "src")
+  -h, --help            Quick overview of usage options
+  -w, --watch           Watch for files changes
+```
+
+
+> When you execute this command, you will receive the secretKey, which must be inserted into the `remote` field within the Devtool function.
+
+# Using React components with the VS Code extension
+
+With Flower, you can configure and use your components through a **graphical interface**. After creating the component in code, you need to associate it with a `JSON configuration file`. This file will be used by Flower to provide users the ability to configure each component's props via a graphical interface, **without writing code**.
+
+
+For example, let's configure a `Text` component so that it can be used through Flower's graphical interface.
+
+## Step-by-Step Guide
+
+1) `Create the JSON File`
+
+First, create the JSON file at the same level as the component file.
+
+```
+src
+│  
+│
+└───components
+│   │
+│   └───Text
+│       │   index.tsx
+│       │   text.flower.json
+│       │   ...
+...
+```
+
+2) `Insert the Basic Structure`
+
+Once the file is created, insert the basic structure of the JSON file, which will be common to any component:
 
-  -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
+```json
+{
+    "type": "component",
+    "name": "Text",
+    "category": "UI",
+    "description": "This is the Text component",
+    "editing": []
+}
 ```
 
+The keys in the JSON file have the following purposes:
+  - `type`: indicates what is being described with this JSON file, in this case, a component
+  - `name`: the name of the component being configured
+  - `category`: components are grouped into categories in Flower's graphical interface, so you can choose a category to which the component belongs
+  - `description`: a brief description of the component that will be displayed in the graphical interface. This is particularly useful for understanding the functionality of a specific component without reading the code
+  - `editing`: in this key, we will insert the options that will allow us to configure the component's behavior directly from the graphical interface
+
+Once you have completed these two steps, you will be able to use your `Text component` through the graphical interface.
+
+## Configuring the editing Field
+
+Within the editing field, you can insert a series of entries that will allow us to choose the values of the props to pass to the component.
+
+The editing field is an array of objects, one for each prop we want to configure, which contain the following keys:
+
+1) `type`: Represents the type of field that will be used within the graphical interface. Possible basic values are `Input`, `Select`, `Switch`, `ButtonGroup`. In addition to these basic types, you can choose the `Rules` type, which allows you to insert rules directly from the graphical interface, and the `SelectNode` type, which allows you to have a Select populated with the nodes present in the flow.
+2) `id`: Represents the name of the prop being configured
+3) `label`: The label that will be displayed above the field in the graphical interface
+4) `default`: Specifies a default value for that prop in case no value is configured on the graphical interface
+5) `options`: An array of objects with keys `label` and `value` for the `Select` type, and `name` and `value` for the `ButtonGroup` type
+
+In any case, there is a JSON schema that will guide you in writing the file associated with each component.
+
 
 # Documentation
 

package/dist/index.cjs.js

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