sequential-workflow-designer-react 0.8.1 → 0.9.1

package/README.md

@@ -101,13 +101,26 @@ At the end attach the designer.
 <SequentialWorkflowDesigner
   definition={definition}
   onDefinitionChange={setDefinition}
-  toolboxConfiguration={toolboxConfiguration}
   stepsConfiguration={stepsConfiguration}
+  toolboxConfiguration={toolboxConfiguration}
+  controlBar={true}
   globalEditor={<GlobalEditor />}
   stepEditor={<StepEditor />}>
   />
 ```
 
+You can hide any UI component.
+
+```tsx
+<SequentialWorkflowDesigner
+  // ...
+  toolboxConfiguration={false}
+  controlBar={false}
+  globalEditor={false}
+  stepEditor={false}>
+  />
+```
+
 Check the [demo project](https://github.com/nocode-js/sequential-workflow-designer/tree/main/demos/react-app).
 
 ## 💡 License

package/lib/cjs/index.cjs

@@ -1,10 +1,31 @@
 'use strict';
 
+var ReactDOM = require('react-dom/client');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var ReactDOM = require('react-dom/client');
 var sequentialWorkflowDesigner = require('sequential-workflow-designer');
 
+var Presenter = /** @class */ (function () {
+    function Presenter() {
+    }
+    Presenter.render = function (className, rootRef, element) {
+        Presenter.tryDestroy(rootRef);
+        var container = document.createElement('div');
+        container.className = className;
+        rootRef.current = ReactDOM.createRoot(container);
+        rootRef.current.render(element);
+        return container;
+    };
+    Presenter.tryDestroy = function (rootRef) {
+        if (rootRef.current) {
+            var oldRoot_1 = rootRef.current;
+            rootRef.current = null;
+            setTimeout(function () { return oldRoot_1.unmount(); });
+        }
+    };
+    return Presenter;
+}());
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -31,9 +52,12 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-var globalEditorWrapperContext$1 = react.createContext(null);
+if (!window.sqdGlobalEditorContext) {
+    window.sqdGlobalEditorContext = react.createContext(null);
+}
+var globalEditorContext = window.sqdGlobalEditorContext;
 function useGlobalEditor() {
-    var wrapper = react.useContext(globalEditorWrapperContext$1);
+    var wrapper = react.useContext(globalEditorContext);
     if (!wrapper) {
         throw new Error('Cannot find global editor context');
     }
@@ -55,12 +79,15 @@ function GlobalEditorWrapperContext(props) {
         props.context.notifyPropertiesChanged();
         forward();
     }
-    return jsxRuntime.jsx(globalEditorWrapperContext$1.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsxRuntime.jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
-var globalEditorWrapperContext = react.createContext(null);
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = react.createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
 function useStepEditor() {
-    var wrapper = react.useContext(globalEditorWrapperContext);
+    var wrapper = react.useContext(stepEditorContext);
     if (!wrapper) {
         throw new Error('Cannot find step editor context');
     }
@@ -105,7 +132,7 @@ function StepEditorWrapperContext(props) {
         props.context.notifyChildrenChanged();
         forward();
     }
-    return jsxRuntime.jsx(globalEditorWrapperContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsxRuntime.jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
 function wrapDefinition(value, isValid) {
@@ -115,6 +142,7 @@ function wrapDefinition(value, isValid) {
     };
 }
 
+var externalEditorClassName = 'sqd-editor-react';
 function SequentialWorkflowDesigner(props) {
     var _a = react.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
     var onDefinitionChangeRef = react.useRef(props.onDefinitionChange);
@@ -128,9 +156,13 @@ function SequentialWorkflowDesigner(props) {
     var isReadonly = props.isReadonly;
     var theme = props.theme;
     var undoStackSize = props.undoStackSize;
-    var stepsConfiguration = props.stepsConfiguration;
-    var toolboxConfiguration = props.toolboxConfiguration;
+    var steps = props.stepsConfiguration;
+    var toolbox = props.toolboxConfiguration;
+    var controlBar = props.controlBar;
     var extensions = props.extensions;
+    if (props.controlBar === undefined) {
+        throw new Error('The "controlBar" property is not set');
+    }
     function forwardDefinition() {
         if (designerRef.current) {
             var def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
@@ -138,10 +170,16 @@ function SequentialWorkflowDesigner(props) {
         }
     }
     function globalEditorProvider(def, context) {
-        return editorProvider(editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
+        if (!globalEditorRef.current) {
+            throw new Error('Global editor is not provided');
+        }
+        return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
     }
     function stepEditorProvider(step, context) {
-        return editorProvider(editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
+        if (!stepEditorRef.current) {
+            throw new Error('Step editor is not provided');
+        }
+        return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
     }
     react.useEffect(function () {
         onDefinitionChangeRef.current = props.onDefinitionChange;
@@ -183,13 +221,15 @@ function SequentialWorkflowDesigner(props) {
         var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
             theme: theme,
             undoStackSize: undoStackSize,
-            toolbox: toolboxConfiguration,
-            steps: stepsConfiguration,
-            editors: {
-                isHidden: false,
-                globalEditorProvider: globalEditorProvider,
-                stepEditorProvider: stepEditorProvider
-            },
+            toolbox: toolbox,
+            steps: steps,
+            controlBar: controlBar,
+            editors: globalEditorRef.current && stepEditorRef.current
+                ? {
+                    globalEditorProvider: globalEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
             extensions: extensions
         });
         if (selectedStepId) {
@@ -207,14 +247,10 @@ function SequentialWorkflowDesigner(props) {
             }
         });
         designerRef.current = designer;
-    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolboxConfiguration, stepsConfiguration, extensions]);
+    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
     react.useEffect(function () {
         return function () {
-            if (editorRootRef.current) {
-                var oldRoot_1 = editorRootRef.current;
-                editorRootRef.current = null;
-                setTimeout(function () { return oldRoot_1.unmount(); });
-            }
+            Presenter.tryDestroy(editorRootRef);
             if (designerRef.current) {
                 designerRef.current.destroy();
                 designerRef.current = null;
@@ -223,21 +259,10 @@ function SequentialWorkflowDesigner(props) {
         };
     }, []);
     return jsxRuntime.jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
-}
-function editorProvider(rootRef, element) {
-    if (rootRef.current) {
-        var oldRoot_2 = rootRef.current;
-        rootRef.current = null;
-        setTimeout(function () { return oldRoot_2.unmount(); });
-    }
-    var container = document.createElement('div');
-    container.className = 'sqd-editor-react';
-    rootRef.current = ReactDOM.createRoot(container);
-    rootRef.current.render(element);
-    return container;
 }
 
 exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;
+exports.Presenter = Presenter;
 exports.SequentialWorkflowDesigner = SequentialWorkflowDesigner;
 exports.StepEditorWrapperContext = StepEditorWrapperContext;
 exports.useGlobalEditor = useGlobalEditor;

package/lib/esm/index.js

@@ -1,8 +1,29 @@
+import ReactDOM from 'react-dom/client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useRef, useEffect } from 'react';
-import ReactDOM from 'react-dom/client';
 import { Designer } from 'sequential-workflow-designer';
 
+var Presenter = /** @class */ (function () {
+    function Presenter() {
+    }
+    Presenter.render = function (className, rootRef, element) {
+        Presenter.tryDestroy(rootRef);
+        var container = document.createElement('div');
+        container.className = className;
+        rootRef.current = ReactDOM.createRoot(container);
+        rootRef.current.render(element);
+        return container;
+    };
+    Presenter.tryDestroy = function (rootRef) {
+        if (rootRef.current) {
+            var oldRoot_1 = rootRef.current;
+            rootRef.current = null;
+            setTimeout(function () { return oldRoot_1.unmount(); });
+        }
+    };
+    return Presenter;
+}());
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -29,9 +50,12 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-var globalEditorWrapperContext$1 = createContext(null);
+if (!window.sqdGlobalEditorContext) {
+    window.sqdGlobalEditorContext = createContext(null);
+}
+var globalEditorContext = window.sqdGlobalEditorContext;
 function useGlobalEditor() {
-    var wrapper = useContext(globalEditorWrapperContext$1);
+    var wrapper = useContext(globalEditorContext);
     if (!wrapper) {
         throw new Error('Cannot find global editor context');
     }
@@ -53,12 +77,15 @@ function GlobalEditorWrapperContext(props) {
         props.context.notifyPropertiesChanged();
         forward();
     }
-    return jsx(globalEditorWrapperContext$1.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
-var globalEditorWrapperContext = createContext(null);
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
 function useStepEditor() {
-    var wrapper = useContext(globalEditorWrapperContext);
+    var wrapper = useContext(stepEditorContext);
     if (!wrapper) {
         throw new Error('Cannot find step editor context');
     }
@@ -103,7 +130,7 @@ function StepEditorWrapperContext(props) {
         props.context.notifyChildrenChanged();
         forward();
     }
-    return jsx(globalEditorWrapperContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+    return jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
 }
 
 function wrapDefinition(value, isValid) {
@@ -113,6 +140,7 @@ function wrapDefinition(value, isValid) {
     };
 }
 
+var externalEditorClassName = 'sqd-editor-react';
 function SequentialWorkflowDesigner(props) {
     var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
     var onDefinitionChangeRef = useRef(props.onDefinitionChange);
@@ -126,9 +154,13 @@ function SequentialWorkflowDesigner(props) {
     var isReadonly = props.isReadonly;
     var theme = props.theme;
     var undoStackSize = props.undoStackSize;
-    var stepsConfiguration = props.stepsConfiguration;
-    var toolboxConfiguration = props.toolboxConfiguration;
+    var steps = props.stepsConfiguration;
+    var toolbox = props.toolboxConfiguration;
+    var controlBar = props.controlBar;
     var extensions = props.extensions;
+    if (props.controlBar === undefined) {
+        throw new Error('The "controlBar" property is not set');
+    }
     function forwardDefinition() {
         if (designerRef.current) {
             var def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
@@ -136,10 +168,16 @@ function SequentialWorkflowDesigner(props) {
         }
     }
     function globalEditorProvider(def, context) {
-        return editorProvider(editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
+        if (!globalEditorRef.current) {
+            throw new Error('Global editor is not provided');
+        }
+        return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
     }
     function stepEditorProvider(step, context) {
-        return editorProvider(editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
+        if (!stepEditorRef.current) {
+            throw new Error('Step editor is not provided');
+        }
+        return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
     }
     useEffect(function () {
         onDefinitionChangeRef.current = props.onDefinitionChange;
@@ -181,13 +219,15 @@ function SequentialWorkflowDesigner(props) {
         var designer = Designer.create(placeholder, definition.value, {
             theme: theme,
             undoStackSize: undoStackSize,
-            toolbox: toolboxConfiguration,
-            steps: stepsConfiguration,
-            editors: {
-                isHidden: false,
-                globalEditorProvider: globalEditorProvider,
-                stepEditorProvider: stepEditorProvider
-            },
+            toolbox: toolbox,
+            steps: steps,
+            controlBar: controlBar,
+            editors: globalEditorRef.current && stepEditorRef.current
+                ? {
+                    globalEditorProvider: globalEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
             extensions: extensions
         });
         if (selectedStepId) {
@@ -205,14 +245,10 @@ function SequentialWorkflowDesigner(props) {
             }
         });
         designerRef.current = designer;
-    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolboxConfiguration, stepsConfiguration, extensions]);
+    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
     useEffect(function () {
         return function () {
-            if (editorRootRef.current) {
-                var oldRoot_1 = editorRootRef.current;
-                editorRootRef.current = null;
-                setTimeout(function () { return oldRoot_1.unmount(); });
-            }
+            Presenter.tryDestroy(editorRootRef);
             if (designerRef.current) {
                 designerRef.current.destroy();
                 designerRef.current = null;
@@ -221,18 +257,6 @@ function SequentialWorkflowDesigner(props) {
         };
     }, []);
     return jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
-}
-function editorProvider(rootRef, element) {
-    if (rootRef.current) {
-        var oldRoot_2 = rootRef.current;
-        rootRef.current = null;
-        setTimeout(function () { return oldRoot_2.unmount(); });
-    }
-    var container = document.createElement('div');
-    container.className = 'sqd-editor-react';
-    rootRef.current = ReactDOM.createRoot(container);
-    rootRef.current.render(element);
-    return container;
 }
 
-export { GlobalEditorWrapperContext, SequentialWorkflowDesigner, StepEditorWrapperContext, useGlobalEditor, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, StepEditorWrapperContext, useGlobalEditor, useStepEditor, wrapDefinition };

package/lib/index.d.ts

@@ -1,6 +1,18 @@
 /// <reference types="react" />
+import { MutableRefObject, Context } from 'react';
+import ReactDOM from 'react-dom/client';
 import { Definition, GlobalEditorContext, StepsConfiguration, ToolboxConfiguration, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
 
+declare class Presenter {
+    static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
+    static tryDestroy(rootRef: MutableRefObject<ReactDOM.Root | null>): void;
+}
+
+declare global {
+    interface Window {
+        sqdGlobalEditorContext?: Context<GlobalEditorWrapper<Definition> | null>;
+    }
+}
 interface GlobalEditorWrapper<TDefinition extends Definition> {
     readonly properties: TDefinition['properties'];
     setProperty(name: keyof TDefinition['properties'], value: TDefinition['properties'][typeof name]): void;
@@ -24,16 +36,25 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
     selectedStepId?: string | null;
     onSelectedStepIdChanged?: (stepId: string | null) => void;
     isReadonly?: boolean;
-    globalEditor: JSX.Element;
-    stepEditor: JSX.Element;
+    globalEditor: false | JSX.Element;
+    stepEditor: false | JSX.Element;
     theme?: string;
     undoStackSize?: number;
     stepsConfiguration: StepsConfiguration;
-    toolboxConfiguration: ToolboxConfiguration;
+    toolboxConfiguration: false | ToolboxConfiguration;
+    /**
+     * @description If true, the control bar will be displayed.
+     */
+    controlBar: boolean;
     extensions?: DesignerExtension[];
 }
 declare function SequentialWorkflowDesigner<TDefinition extends Definition>(props: SequentialWorkflowDesignerProps<TDefinition>): JSX.Element;
 
+declare global {
+    interface Window {
+        sqdStepEditorContext?: Context<StepEditorWrapper<Step> | null>;
+    }
+}
 interface StepEditorWrapper<TStep extends Step> {
     readonly id: string;
     readonly type: TStep['type'];
@@ -53,4 +74,4 @@ declare function StepEditorWrapperContext(props: {
     context: StepEditorContext;
 }): JSX.Element;
 
-export { GlobalEditorWrapper, GlobalEditorWrapperContext, SequentialWorkflowDesigner, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useStepEditor, wrapDefinition };
+export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useStepEditor, wrapDefinition };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.8.1",
+	"version": "0.9.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -42,29 +42,32 @@
 		"prettier:fix": "prettier --write ./src",
 		"eslint": "eslint ./src --ext .ts",
 		"test:single": "jest",
-		"test": "jest --watchAll"
+		"test": "jest --clearCache && jest --watchAll"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.8.1"
+		"sequential-workflow-designer": "^0.9.1"
 	},
 	"devDependencies": {
+		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^14.0.0",
+		"@types/jest": "^29.2.5",
+		"@types/react": "^18.0.26",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0",
-		"@types/react": "^18.0.26",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/jest-dom": "^5.16.5",
 		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.3.1",
-		"@types/jest": "^29.2.5",
-		"ts-jest": "^29.0.3",
 		"prettier": "^2.8.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"sequential-workflow-designer": "^0.9.1",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",
-		"@rollup/plugin-node-resolve": "^15.0.1",
+		"ts-jest": "^29.0.3",
 		"typescript": "^4.9.4"
 	},
 	"keywords": [
@@ -77,4 +80,4 @@
 		"react",
 		"reactjs"
 	]
-}
+}