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

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

@@ -65,11 +65,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() {

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, Component, memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
+import React, { createContext, PureComponent, memo, useRef, useState, useMemo, Children, useEffect, useContext, useCallback, useLayoutEffect } from 'react';
 import _keyBy from 'lodash/keyBy';
 import { CoreUtils, FlowerCoreReducers, FlowerStateUtils, Selectors, Emitter, MatchRules } from '@flowerforce/flower-core';
 import _get from 'lodash/get';
@@ -63,11 +63,11 @@ const store = ({
     name: 'flower'
   } : false
 });
-class FlowerProvider extends Component {
+class FlowerProvider extends PureComponent {
   constructor(props) {
     super(props);
     this.store = store({
-      enableDevtool: props.enableDevtool
+      enableDevtool: props.enableReduxDevtool
     });
   }
   render() {

package/dist/src/provider.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, Component } from 'react';
+import React, { PropsWithChildren, PureComponent } from 'react';
 import { Action } from '@reduxjs/toolkit';
 import { FlowerProviderProps } from './components/types/FlowerProvider';
 export declare const useDispatch: import("react-redux").UseDispatch<import("redux").Dispatch<Action>>;
@@ -13,11 +13,13 @@ export declare const store: ({ enableDevtool }: {
         flower: Record<string, import("packages/flower-core/dist/src").Flower<Record<string, any>>>;
     }, undefined, import("redux").UnknownAction>;
 }>, import("redux").StoreEnhancer]>>;
-declare class FlowerProvider extends Component<PropsWithChildren, FlowerProviderProps> {
+declare class FlowerProvider extends PureComponent<PropsWithChildren<{
+    enableReduxDevtool?: boolean;
+}>, FlowerProviderProps> {
     private store;
-    constructor(props: PropsWithChildren & {
-        enableDevtool?: boolean;
-    });
+    constructor(props: PropsWithChildren<{
+        enableReduxDevtool?: boolean;
+    }>);
     render(): React.JSX.Element;
 }
 export default FlowerProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.1.1-beta.1",
+  "version": "3.1.1",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.1.1-beta.1",
+    "@flowerforce/flower-core": "3.1.1",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",