@flowerforce/flower-react 3.5.1-beta.1 → 4.0.3-beta.0

package/dist/src/index.d.ts

@@ -1,33 +1,5 @@
-export { Consumer as FlowerContextConsumer } from './context';
-export { Provider as FlowerContextProvider } from './context';
-export { context as FlowerContext } from './context';
-export { default as Flower } from './components/Flower';
-export { default as FlowerNode } from './components/FlowerNode';
-export { default as FlowerAction } from './components/FlowerAction';
-export { default as FlowerServer } from './components/FlowerServer';
-export { default as FlowerFlow } from './components/FlowerFlow';
-export { default as FlowerStart } from './components/FlowerStart';
-export { default as FlowerRoute } from './components/FlowerRoute';
-export { default as FlowerRule } from './components/FlowerRule';
-export { default as FlowerField } from './components/FlowerField';
-export { default as FlowerValue } from './components/FlowerValue';
-export { default as FlowerNavigate } from './components/FlowerNavigate';
-export { default as FlowerComponent } from './components/FlowerComponent';
-export { default as useFlower } from './components/useFlower';
-export { default as useFlowerForm } from './components/useFlowerForm';
-export { default as FlowerProvider } from './provider';
-export { getDataByFlow } from './selectors';
-export { useSelector } from './provider';
-export type { FlowerContext as FlowerContextProps } from './context';
-export type { FlowerNodeDefaultProps } from './components/types/DefaultNode';
-export type { FlowerComponentProps } from './components/types/FlowerComponent';
-export type { FlowerFieldProps } from './components/types/FlowerField';
-export type { FlowerFlowProps } from './components/types/FlowerFlow';
-export type { UseFlower, UseFlowerForm, UseFlowerProps, NavigateFunctionParams } from './components/types/FlowerHooks';
-export type { RouteReset, RoutePrev, RouteNode, Route, FlowerNavigateProps, FlowerNavigateActionsProps } from './components/types/FlowerNavigate';
-export type { FlowerNodeProps } from './components/types/FlowerNode';
-export type { FlowerProviderProps } from './components/types/FlowerProvider';
-export type { FlowerRouteProps } from './components/types/FlowerRoute';
-export type { FlowerRuleProps } from './components/types/FlowerRule';
-export type { FlowerServerProps } from './components/types/FlowerServer';
-export type { FlowerValueProps } from './components/types/FlowerValue';
+export * from './components';
+export * from './provider';
+export { makeSelectFormData } from './features';
+export type * from './types/FlowContext';
+export { useDispatch, useSelector, useStore } from '@flowerforce/flower-react-store';

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

@@ -0,0 +1 @@
+export * from './provider';

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

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { ConfigureStoreOptions, Reducer } from '@reduxjs/toolkit';
+export declare const FlowerProvider: ({ children, enableReduxDevtool, configureStoreOptions, reducers }: PropsWithChildren<{
+    reducers?: Record<string, Reducer>;
+    configureStoreOptions?: Omit<ConfigureStoreOptions, 'reducer'>;
+    /** @deprecated - uses devTools key from configureStoreOptions instead */
+    enableReduxDevtool?: boolean;
+}>) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+export type FlowContext = {
+    flowName?: string | undefined;
+    currentNode?: string | undefined;
+    autostart?: boolean | undefined;
+    initialData?: Record<string, unknown>;
+};

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

@@ -0,0 +1,27 @@
+import { Route, RouteNode, RoutePrev, RouteReset, RouteRestart } from './FlowerNavigate';
+export type UseFlowerProps = {
+    [x in 'name' | 'flowName']?: string;
+};
+export type useFlowerActions = {
+    /** Use this function to move to the next node inside the flow*/
+    next: (payload?: Route) => void;
+    /**Use this function to move to the previous node inside the flow*/
+    back: (payload?: RoutePrev) => void;
+    /**Use this function to return to the first node and restore history */
+    reset: (payload?: RouteReset) => void;
+    /**Use this function to move to a specific node*/
+    jump: (payload: RouteNode) => void;
+    /**Use this function to reset the flow data and history */
+    restart: (payload?: RouteRestart) => void;
+    /**Get current node by flowName or current flow */
+    getCurrentNodeId: (flowName?: string) => string;
+};
+export type UseFlower = (options?: UseFlowerProps) => useFlowerActions & {
+    /**The flow in which the hook is used.*/
+    flowName?: string;
+    /**Current node id*/
+    nodeId: string;
+    /**Initial start node id*/
+    startId: string;
+};
+export type NavigateFunctionParams = string | Record<string, any>;

package/dist/src/{components/types → types}/FlowerProvider.d.ts

@@ -1,13 +1,13 @@
 import { ThunkMiddleware, Tuple, configureStore } from '@reduxjs/toolkit';
-import { Flower } from '@flowerforce/flower-core';
+import { Flower, REDUCER_NAME } from '@flowerforce/flower-core';
 import { UnknownAction } from 'redux';
 export interface FlowerProviderInterface {
     render(): JSX.Element;
 }
 export type FlowerProviderProps = ReturnType<typeof configureStore<{
-    flower: Record<string, Flower<any>>;
+    [REDUCER_NAME.FLOWER_FLOW]: Record<string, Flower<any>>;
 }, UnknownAction, Tuple<[
     ThunkMiddleware<{
-        flower: Record<string, Flower<any>>;
+        [REDUCER_NAME.FLOWER_FLOW]: Record<string, Flower<any>>;
     }, UnknownAction>
 ]>>>;

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

@@ -0,0 +1,10 @@
+export * from './DefaultNode';
+export * from './FlowContext';
+export * from './FlowerComponent';
+export * from './FlowerFlow';
+export * from './FlowerHooks';
+export * from './FlowerNavigate';
+export * from './FlowerNode';
+export * from './FlowerProvider';
+export * from './FlowerRoute';
+export * from './FlowerServer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowerforce/flower-react",
-  "version": "3.5.1-beta.1",
+  "version": "4.0.3-beta.0",
   "description": "FlowerJS components, hooks and utils for React.",
   "repository": {
     "type": "git",
@@ -34,7 +34,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@flowerforce/flower-core": "3.3.1-beta.1",
+    "@flowerforce/flower-core": "4.0.1-beta.0",
+    "@flowerforce/flower-react-context": "4.0.1-beta.0",
+    "@flowerforce/flower-react-store": "4.0.1-beta.0",
+    "@flowerforce/flower-react-shared": "4.0.2-beta.0",
     "@reduxjs/toolkit": "^2.2.4",
     "lodash": "^4.17.21",
     "react-redux": "^9.1.2",

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { FlowerFieldProps } from './types/FlowerField';
-declare const component: React.MemoExoticComponent<({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }: FlowerFieldProps) => React.JSX.Element | (string | number | Iterable<React.ReactNode> | React.JSX.Element)[] | null | undefined>;
-export default component;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { FlowerRuleProps } from './types/FlowerRule';
-declare const component: React.MemoExoticComponent<({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }: FlowerRuleProps) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | (string | number | Iterable<React.ReactNode> | React.JSX.Element)[] | null | undefined>;
-export default component;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { FlowerValueProps } from './types/FlowerValue';
-declare const component: React.MemoExoticComponent<({ id, rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }: FlowerValueProps) => React.JSX.Element | (string | number | React.JSX.Element | Iterable<React.ReactNode>)[] | null | undefined>;
-export default component;

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

@@ -1,124 +0,0 @@
-import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
-export type FlowerFieldProps<T extends Record<string, any> = Record<string, any>> = {
-    /** The path to the value you want to read from the flow's data
-     *
-     * Example: id="loginForm.name"
-     *
-     * The FlowerField component reads the value of the key "name" of the loginForm object in the flow's data
-     */
-    id?: string;
-    /** The FlowerField's children  */
-    children: React.ReactNode | ((props: {
-        /** The string passed to the "id" FlowerField's prop */
-        id: string;
-        /** The value found at the "id" key in the flow data
-         *
-         * Example: id="loginForm.name"
-         *
-         * This parameter will hold the value found at the key 'name' of the loginForm object in the flow's data.
-         */
-        value: any;
-        /** An array of strings containing error messages associated with validation rules that are not satisfied. */
-        errors: undefined | string[];
-        /** This parameter will notify you when there are validation errors. */
-        hasError: undefined | boolean;
-        /** Use this function to write a new value at the "id" key
-         *
-         * Example: id="loginForm.name"
-         *
-         * onChange("John") will write "John" at the key 'name' of the loginForm object in the flow's data.
-         */
-        onChange: (props: any) => void;
-        /** The function executed on blur input*/
-        onBlur: () => void;
-        /** The function executed on focus input*/
-        onFocus: () => void;
-        /** This value is set to true when the form has been submitted at least once or a next invoked */
-        isSubmitted: boolean;
-        /** This parameter will notify you whether the form field has been focues */
-        focused: boolean | undefined;
-        /** This parameter will notify you whether the form field has been touched */
-        touched: boolean;
-        /** This parameter will notify you if the form field is filled in at least once */
-        dirty: boolean;
-        /** true when some of the display rules are not satisfied, and you have passed true to the "alwaysDisplay" FlowerField's prop*/
-        hidden: boolean;
-        /** true when you have an async validation in progress */
-        isValidating: boolean | undefined;
-    }) => React.ReactNode | React.ReactElement | undefined);
-    /**The validation rules for that field
-     *
-     *  Example: validate={[
-     *
-     *       {
-     *           rules: {
-     *             $self: {
-     *               $regex:
-     *                 '^([A-Z]{6}[0-9LMNPQRSTUV]{2}[ABCDEHLMPRST]{1}[0-9LMNPQRSTUV]{2}[A-Z]{1}[0-9LMNPQRSTUV]{3}[A-Z]{1})$|([0-9]{11})$',
-     *             },
-     *           },
-     *           message: 'Value not valid',
-     *        },
-     *        {
-     *          // Don't use promises
-     *          rules: (data)=> {
-     *            return data.name === 'Andrea'
-     *          },
-     *          message: 'Value not valid',
-     *        }
-     *       ]}
-     *
-     * For every rule you can pass an error message, that Flower returns when that condition is note satisfied
-     */
-    validate?: Record<string, any>[] | string[];
-    /** A function to perform an async validation */
-    asyncValidate?: (value: any, data?: Record<string, any>, errors?: undefined | string[]) => string[] | undefined | Promise<string[]> | {
-        message: string;
-    }[] | boolean | Promise<boolean>;
-    /** Use this to set a debounce for the async validation
-     *
-     * The default value is 0
-     */
-    asyncDebounce?: number;
-    /** The initial error message when you have an async validation
-     *
-     * The default value is undefined
-     */
-    asyncInitialError?: string;
-    /** The message that the FlowerField returns while validating*/
-    asyncWaitingError?: string;
-    /** An object containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
-     *
-     * Example: rules={{ $and: [{ name: { $exists: true } }] }}
-     */
-    rules?: RulesObject<T> | FunctionRule;
-    /** The name of the flow from which read the data
-     *
-     * - note: the default value is the name of the flow where the component is used
-     */
-    flowName?: string;
-    /** Initial value field */
-    defaultValue?: unknown;
-    /** Remove value from data on destroy element */
-    destroyValue?: boolean;
-    /** Remove value from data on hide element */
-    destroyOnHide?: boolean;
-    value?: any;
-    /** When set to true, the children is shown even if the rules are not satisfied
-     *
-     * The FlowerField returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
-     */
-    alwaysDisplay?: boolean;
-    /** The function executed when the value found at the path passed to the "id" prop changes */
-    onUpdate?: (value: any) => void;
-    /** The function executed at the "onBlur" event, for example for Input components
-     *
-     * The onBlur function will test all the validation rules
-     */
-    onBlur?: (e: any) => void;
-    /** The function executed at the "onFocus" event, for example for Input components
-     *
-     * The onFocus function will test all the validation rules
-     */
-    onFocus?: (e: any) => void;
-};

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

@@ -1,72 +0,0 @@
-import { Route, RouteNode, RoutePrev, RouteReset, RouteRestart } from './FlowerNavigate';
-export type UseFlowerProps = {
-    [x in 'name' | 'flowName']?: string;
-};
-export type UseFlowerForm = (options?: UseFlowerProps) => {
-    /**  This value is set to true when the form has been submitted at least once or a next invoked. */
-    isSubmitted: boolean;
-    /**  This value is set to true when at least once field is dirted. */
-    isDirty: boolean;
-    /**  This value is the id of the focused element. */
-    hasFocus: string | undefined;
-    /** An object containing all the form errors */
-    errors: Record<string, any>;
-    /** An object containing all the form custom errors */
-    customErrors: Record<string, any>;
-    /** This value is set to true when all the validation rules are satisfied and the form is valid*/
-    isValid: boolean;
-    /** This value is set to true during asynchronous validation.*/
-    isValidating: boolean | undefined;
-    /** Use this function to read status from the flow's form. */
-    getFormStatus: (path?: string) => any;
-    /** Use this function to read values from the flow's data. */
-    getData: (path?: string) => any;
-    /** Use this function to set values in the flow's data. */
-    setData: (
-    /** The value that you want to set */
-    value: any, 
-    /** Specify the target path to set the value*/
-    id?: string) => void;
-    /** Use this function to set value in the flow's field data. */
-    setDataField: (
-    /** Specify the target path to set the value*/
-    id: string, 
-    /** The value that you want to set */
-    value: any, 
-    /** Specify default value for dirty status*/
-    dirty?: boolean) => void;
-    /** Use this function to unset values in the flow's data. */
-    unsetData: (
-    /** Specify the target path to the value tha you want to unset*/
-    path: string) => void;
-    /** Use this function to replace a value in the flow's data. */
-    replaceData: (value: any) => void;
-    /**Use this function to reset errors form and touched state */
-    reset: (nodeId?: string) => void;
-    /**this function to set a custom error on a specific field */
-    setCustomErrors: (field: string, errors: string[], nodeId?: string) => void;
-};
-type useFlowerActions = {
-    /** Use this function to move to the next node inside the flow*/
-    next: (payload?: Route) => void;
-    /**Use this function to move to the previous node inside the flow*/
-    back: (payload?: RoutePrev) => void;
-    /**Use this function to return to the first node and restore history */
-    reset: (payload?: RouteReset) => void;
-    /**Use this function to move to a specific node*/
-    jump: (payload: RouteNode) => void;
-    /**Use this function to reset the flow data and history */
-    restart: (payload?: RouteRestart) => void;
-    /**Get current node by flowName or current flow */
-    getCurrentNodeId: (flowName?: string) => string;
-};
-export type UseFlower = (options?: UseFlowerProps) => useFlowerActions & {
-    /**The flow in which the hook is used.*/
-    flowName?: string;
-    /**Current node id*/
-    nodeId: string;
-    /**Initial start node id*/
-    startId: string;
-};
-export type NavigateFunctionParams = string | Record<string, any>;
-export {};

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

@@ -1,35 +0,0 @@
-import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
-export type FlowerRuleProps = {
-    /** The path to the value you want to read from the flow's data
-     *
-     * Example: id="loginForm.name"
-     *
-     * The FlowerRule component reads the value of the key "name" of the loginForm object in the flow's data
-     */
-    id?: string;
-    /** */
-    value?: any;
-    /** An object or function containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
-     *
-     * Example: rules={{ $and: [{ name: { $exists: true } }] }}
-     * Example: rules={(state) => state... === true}
-     * if missing it is always visible
-     */
-    rules?: RulesObject<Record<string, any>> | FunctionRule;
-    /** The name of the flow from which read the data
-     *
-     * - note: the default value is the name of the flow where the component is used
-     */
-    flowName?: string;
-    /** When set to true, the children is shown even if the rules are not satisfied
-     *
-     * The FlowerRule returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
-     */
-    alwaysDisplay?: boolean;
-    /** The function executed when the value found at the path passed to the "id" prop changes */
-    onUpdate?: (hidden: boolean) => void;
-    /** The children of the FlowerRule*/
-    children?: React.ReactNode | ((props: {
-        hidden?: boolean;
-    }) => React.ReactNode | React.ReactElement | undefined);
-};

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

@@ -1,33 +0,0 @@
-import { FunctionRule, RulesObject } from '@flowerforce/flower-core';
-export type FlowerValueProps = {
-    /** The path to the value you want to read from the flow's data
-     *
-     * Example: id="loginForm.name"
-     *
-     * The FlowerValue component reads the value of the key "name" of the loginForm object in the flow's data
-     * If missing, I return all values, which is equivalent to setting id='*'
-     */
-    id?: string;
-    value?: any;
-    /** An object containing the display rules of that component. When the conditions are not satisfied, the children is hidden.
-     *
-     * Example: rules={{ $and: [{ name: { $exists: true } }] }}
-     */
-    rules?: RulesObject<any> | FunctionRule;
-    /** The FlowerValue's children  */
-    children: React.ReactNode | ((props: Record<string, any>) => React.ReactNode | React.ReactElement | undefined);
-    /** Set this value to true to spread the value into separate values in case it is an object. */
-    spreadValue?: boolean;
-    /** The name of the flow from which read the data
-     *
-     * - note: the default value is the name of the flow where the component is used
-     */
-    flowName?: string;
-    /** When set to true, the children is shown even if the rules are not satisfied
-     *
-     * The FlowerValue returns the boolean variable "hidden" to notify you if the conditions are satisfied or not
-     */
-    alwaysDisplay?: boolean;
-    /** The function executed when the value found at the path passed to the "id" prop changes */
-    onUpdate?: (value: any) => void;
-};

package/dist/src/components/useFlowerForm.d.ts

@@ -1,26 +0,0 @@
-import { UseFlowerForm } from './types/FlowerHooks';
-/**  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:
- *
- * - isSubmitted,
- * - isDirty,
- * - errors,
- * - customErrors,
- * - isValid,
- * - isValidating,
- * - getData,
- * - setData,
- * - unsetData,
- * - replaceData,
- * - reset,
- * - setCustomErrors
- * - getFormStatus
- *
- * @param {string} flowName - first optional parameter
- *
- * @param {string} name - alias optional parameter, if flowName exist, name is not used
- *
- */
-declare const useFlowerForm: UseFlowerForm;
-export default useFlowerForm;

package/dist/src/context.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export type FlowerContext = {
-    flowName?: string | undefined;
-    currentNode?: string | undefined;
-    autostart?: boolean | undefined;
-    initialData?: Record<string, any>;
-};
-export declare const context: React.Context<FlowerContext>;
-export declare const Provider: React.Provider<FlowerContext>;
-export declare const Consumer: React.Consumer<FlowerContext>;

package/dist/src/provider.d.ts

@@ -1,25 +0,0 @@
-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>>;
-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: ({ 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<{
-        flower: Record<string, import("packages/flower-core/dist/src").Flower<Record<string, any>>>;
-    }, undefined, import("redux").UnknownAction>;
-}>, import("redux").StoreEnhancer]>>;
-declare class FlowerProvider extends PureComponent<PropsWithChildren<{
-    enableReduxDevtool?: boolean;
-}>, FlowerProviderProps> {
-    private store;
-    constructor(props: PropsWithChildren<{
-        enableReduxDevtool?: boolean;
-    }>);
-    render(): React.JSX.Element;
-}
-export default FlowerProvider;

package/dist/src/reducer.d.ts

@@ -1,7 +0,0 @@
-import { Flower } from '@flowerforce/flower-core';
-declare const flowerReducer: import("@reduxjs/toolkit").Slice<Record<string, Flower<Record<string, any>>>, import("@flowerforce/flower-core").ReducersFunctions, "flower", "flower", import("@reduxjs/toolkit").SliceSelectors<Record<string, Flower<Record<string, any>>>>>;
-export declare const actions: import("@reduxjs/toolkit").CaseReducerActions<import("@flowerforce/flower-core").ReducersFunctions, "flower">;
-export declare const reducerFlower: {
-    flower: import("redux").Reducer<Record<string, Flower<Record<string, any>>>>;
-};
-export default flowerReducer;