sequential-workflow-designer-react 0.8.0 → 0.9.0

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

@@ -0,0 +1,270 @@
+'use strict';
+
+var ReactDOM = require('react-dom/client');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+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.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+if (!window.sqdGlobalEditorContext) {
+    window.sqdGlobalEditorContext = react.createContext(null);
+}
+var globalEditorContext = window.sqdGlobalEditorContext;
+function useGlobalEditor() {
+    var wrapper = react.useContext(globalEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find global editor context');
+    }
+    return wrapper;
+}
+function GlobalEditorWrapperContext(props) {
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            properties: props.definition.properties,
+            setProperty: setProperty
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setProperty(name, value) {
+        props.definition.properties[name] = value;
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    return jsxRuntime.jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = react.createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
+function useStepEditor() {
+    var wrapper = react.useContext(stepEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find step editor context');
+    }
+    return wrapper;
+}
+function StepEditorWrapperContext(props) {
+    var _a = react.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            id: props.step.id,
+            type: props.step.type,
+            componentType: props.step.componentType,
+            name: props.step.name,
+            properties: props.step.properties,
+            step: props.step,
+            setName: setName,
+            setProperty: setProperty,
+            notifyPropertiesChanged: notifyPropertiesChanged,
+            notifyChildrenChanged: notifyChildrenChanged
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setName(name) {
+        props.step.name = name;
+        notifyNameChanged();
+    }
+    function setProperty(name, value) {
+        props.step.properties[name] = value;
+        notifyPropertiesChanged();
+    }
+    function notifyNameChanged() {
+        props.context.notifyNameChanged();
+        forward();
+    }
+    function notifyPropertiesChanged() {
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    function notifyChildrenChanged() {
+        props.context.notifyChildrenChanged();
+        forward();
+    }
+    return jsxRuntime.jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+function wrapDefinition(value, isValid) {
+    return {
+        value: value,
+        isValid: 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);
+    var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
+    var globalEditorRef = react.useRef(props.globalEditor);
+    var stepEditorRef = react.useRef(props.stepEditor);
+    var designerRef = react.useRef(null);
+    var editorRootRef = react.useRef(null);
+    var definition = props.definition;
+    var selectedStepId = props.selectedStepId;
+    var isReadonly = props.isReadonly;
+    var theme = props.theme;
+    var undoStackSize = props.undoStackSize;
+    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());
+            onDefinitionChangeRef.current(def);
+        }
+    }
+    function globalEditorProvider(def, context) {
+        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) {
+        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;
+    }, [props.onDefinitionChange]);
+    react.useEffect(function () {
+        onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
+    }, [props.onSelectedStepIdChanged]);
+    react.useEffect(function () {
+        globalEditorRef.current = props.globalEditor;
+    }, [props.globalEditor]);
+    react.useEffect(function () {
+        stepEditorRef.current = props.stepEditor;
+    }, [props.stepEditor]);
+    react.useEffect(function () {
+        if (!placeholder) {
+            return;
+        }
+        if (designerRef.current) {
+            var isNotChanged = definition.value === designerRef.current.getDefinition();
+            if (isNotChanged) {
+                if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
+                    if (selectedStepId) {
+                        designerRef.current.selectStepById(selectedStepId);
+                    }
+                    else {
+                        designerRef.current.clearSelectedStep();
+                    }
+                    // console.log('sqd: selected step updated');
+                }
+                if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
+                    designerRef.current.setIsReadonly(isReadonly);
+                    // console.log('sqd: readonly updated');
+                }
+                return;
+            }
+            designerRef.current.destroy();
+            designerRef.current = null;
+        }
+        var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
+            theme: theme,
+            undoStackSize: undoStackSize,
+            toolbox: toolbox,
+            steps: steps,
+            controlBar: controlBar,
+            editors: globalEditorRef.current && stepEditorRef.current
+                ? {
+                    globalEditorProvider: globalEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
+            extensions: extensions
+        });
+        if (selectedStepId) {
+            designer.selectStepById(selectedStepId);
+        }
+        if (isReadonly) {
+            designer.setIsReadonly(isReadonly);
+        }
+        // console.log('sqd: designer rendered');
+        designer.onReady.subscribe(forwardDefinition);
+        designer.onDefinitionChanged.subscribe(forwardDefinition);
+        designer.onSelectedStepIdChanged.subscribe(function (stepId) {
+            if (onSelectedStepIdChangedRef.current) {
+                onSelectedStepIdChangedRef.current(stepId);
+            }
+        });
+        designerRef.current = designer;
+    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
+    react.useEffect(function () {
+        return function () {
+            Presenter.tryDestroy(editorRootRef);
+            if (designerRef.current) {
+                designerRef.current.destroy();
+                designerRef.current = null;
+                // console.log('sqd: designer destroyed');
+            }
+        };
+    }, []);
+    return jsxRuntime.jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
+}
+
+exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;
+exports.Presenter = Presenter;
+exports.SequentialWorkflowDesigner = SequentialWorkflowDesigner;
+exports.StepEditorWrapperContext = StepEditorWrapperContext;
+exports.useGlobalEditor = useGlobalEditor;
+exports.useStepEditor = useStepEditor;
+exports.wrapDefinition = wrapDefinition;

package/lib/esm/index.js

@@ -0,0 +1,262 @@
+import ReactDOM from 'react-dom/client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
+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.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+if (!window.sqdGlobalEditorContext) {
+    window.sqdGlobalEditorContext = createContext(null);
+}
+var globalEditorContext = window.sqdGlobalEditorContext;
+function useGlobalEditor() {
+    var wrapper = useContext(globalEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find global editor context');
+    }
+    return wrapper;
+}
+function GlobalEditorWrapperContext(props) {
+    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            properties: props.definition.properties,
+            setProperty: setProperty
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setProperty(name, value) {
+        props.definition.properties[name] = value;
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    return jsx(globalEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+if (!window.sqdStepEditorContext) {
+    window.sqdStepEditorContext = createContext(null);
+}
+var stepEditorContext = window.sqdStepEditorContext;
+function useStepEditor() {
+    var wrapper = useContext(stepEditorContext);
+    if (!wrapper) {
+        throw new Error('Cannot find step editor context');
+    }
+    return wrapper;
+}
+function StepEditorWrapperContext(props) {
+    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
+    function createWrapper() {
+        return {
+            id: props.step.id,
+            type: props.step.type,
+            componentType: props.step.componentType,
+            name: props.step.name,
+            properties: props.step.properties,
+            step: props.step,
+            setName: setName,
+            setProperty: setProperty,
+            notifyPropertiesChanged: notifyPropertiesChanged,
+            notifyChildrenChanged: notifyChildrenChanged
+        };
+    }
+    function forward() {
+        setWrapper(createWrapper());
+    }
+    function setName(name) {
+        props.step.name = name;
+        notifyNameChanged();
+    }
+    function setProperty(name, value) {
+        props.step.properties[name] = value;
+        notifyPropertiesChanged();
+    }
+    function notifyNameChanged() {
+        props.context.notifyNameChanged();
+        forward();
+    }
+    function notifyPropertiesChanged() {
+        props.context.notifyPropertiesChanged();
+        forward();
+    }
+    function notifyChildrenChanged() {
+        props.context.notifyChildrenChanged();
+        forward();
+    }
+    return jsx(stepEditorContext.Provider, __assign({ value: wrapper }, { children: props.children }));
+}
+
+function wrapDefinition(value, isValid) {
+    return {
+        value: value,
+        isValid: isValid
+    };
+}
+
+var externalEditorClassName = 'sqd-editor-react';
+function SequentialWorkflowDesigner(props) {
+    var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
+    var onDefinitionChangeRef = useRef(props.onDefinitionChange);
+    var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
+    var globalEditorRef = useRef(props.globalEditor);
+    var stepEditorRef = useRef(props.stepEditor);
+    var designerRef = useRef(null);
+    var editorRootRef = useRef(null);
+    var definition = props.definition;
+    var selectedStepId = props.selectedStepId;
+    var isReadonly = props.isReadonly;
+    var theme = props.theme;
+    var undoStackSize = props.undoStackSize;
+    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());
+            onDefinitionChangeRef.current(def);
+        }
+    }
+    function globalEditorProvider(def, context) {
+        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) {
+        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;
+    }, [props.onDefinitionChange]);
+    useEffect(function () {
+        onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
+    }, [props.onSelectedStepIdChanged]);
+    useEffect(function () {
+        globalEditorRef.current = props.globalEditor;
+    }, [props.globalEditor]);
+    useEffect(function () {
+        stepEditorRef.current = props.stepEditor;
+    }, [props.stepEditor]);
+    useEffect(function () {
+        if (!placeholder) {
+            return;
+        }
+        if (designerRef.current) {
+            var isNotChanged = definition.value === designerRef.current.getDefinition();
+            if (isNotChanged) {
+                if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
+                    if (selectedStepId) {
+                        designerRef.current.selectStepById(selectedStepId);
+                    }
+                    else {
+                        designerRef.current.clearSelectedStep();
+                    }
+                    // console.log('sqd: selected step updated');
+                }
+                if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
+                    designerRef.current.setIsReadonly(isReadonly);
+                    // console.log('sqd: readonly updated');
+                }
+                return;
+            }
+            designerRef.current.destroy();
+            designerRef.current = null;
+        }
+        var designer = Designer.create(placeholder, definition.value, {
+            theme: theme,
+            undoStackSize: undoStackSize,
+            toolbox: toolbox,
+            steps: steps,
+            controlBar: controlBar,
+            editors: globalEditorRef.current && stepEditorRef.current
+                ? {
+                    globalEditorProvider: globalEditorProvider,
+                    stepEditorProvider: stepEditorProvider
+                }
+                : false,
+            extensions: extensions
+        });
+        if (selectedStepId) {
+            designer.selectStepById(selectedStepId);
+        }
+        if (isReadonly) {
+            designer.setIsReadonly(isReadonly);
+        }
+        // console.log('sqd: designer rendered');
+        designer.onReady.subscribe(forwardDefinition);
+        designer.onDefinitionChanged.subscribe(forwardDefinition);
+        designer.onSelectedStepIdChanged.subscribe(function (stepId) {
+            if (onSelectedStepIdChangedRef.current) {
+                onSelectedStepIdChangedRef.current(stepId);
+            }
+        });
+        designerRef.current = designer;
+    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, extensions]);
+    useEffect(function () {
+        return function () {
+            Presenter.tryDestroy(editorRootRef);
+            if (designerRef.current) {
+                designerRef.current.destroy();
+                designerRef.current = null;
+                // console.log('sqd: designer destroyed');
+            }
+        };
+    }, []);
+    return jsx("div", { ref: setPlaceholder, className: "sqd-designer-react" });
+}
+
+export { GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, StepEditorWrapperContext, useGlobalEditor, useStepEditor, wrapDefinition };

package/lib/index.d.ts

@@ -1,4 +1,77 @@
-export * from './GlobalEditorWrapper';
-export * from './SequentialWorkflowDesigner';
-export * from './StepEditorWrapper';
-export * from './WrappedDefinition';
+/// <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;
+}
+declare function useGlobalEditor<TDefinition extends Definition = Definition>(): GlobalEditorWrapper<TDefinition>;
+declare function GlobalEditorWrapperContext(props: {
+    children: JSX.Element;
+    definition: Definition;
+    context: GlobalEditorContext;
+}): JSX.Element;
+
+interface WrappedDefinition<TDefinition extends Definition = Definition> {
+    readonly value: TDefinition;
+    readonly isValid: boolean | undefined;
+}
+declare function wrapDefinition<TDefinition extends Definition = Definition>(value: TDefinition, isValid?: boolean): WrappedDefinition<TDefinition>;
+
+interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
+    definition: WrappedDefinition<TDefinition>;
+    onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
+    selectedStepId?: string | null;
+    onSelectedStepIdChanged?: (stepId: string | null) => void;
+    isReadonly?: boolean;
+    globalEditor: false | JSX.Element;
+    stepEditor: false | JSX.Element;
+    theme?: string;
+    undoStackSize?: number;
+    stepsConfiguration: StepsConfiguration;
+    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'];
+    readonly componentType: TStep['componentType'];
+    readonly name: string;
+    readonly properties: TStep['properties'];
+    readonly step: TStep;
+    setName(name: string): void;
+    setProperty(name: keyof TStep['properties'], value: TStep['properties'][typeof name]): void;
+    notifyPropertiesChanged(): void;
+    notifyChildrenChanged(): void;
+}
+declare function useStepEditor<TStep extends Step = Step>(): StepEditorWrapper<TStep>;
+declare function StepEditorWrapperContext(props: {
+    children: JSX.Element;
+    step: Step;
+    context: StepEditorContext;
+}): JSX.Element;
+
+export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useStepEditor, wrapDefinition };

package/package.json

@@ -1,9 +1,22 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.8.0",
-	"main": "./lib/index.js",
+	"version": "0.9.0",
+	"type": "module",
+	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
+	"exports": {
+		".": {
+			"types": {
+				"require": "./lib/index.d.ts",
+				"default": "./lib/index.d.ts"
+			},
+			"default": {
+				"require": "./lib/cjs/index.cjs",
+				"default": "./lib/esm/index.js"
+			}
+		}
+	},
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -23,33 +36,38 @@
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
 		"clean": "rm -rf lib",
-		"start": "tsc --watch",
-		"build": "yarn clean && tsc",
+		"start": "rollup -c --watch",
+		"build": "yarn clean && rollup -c",
 		"prettier": "prettier --check ./src",
 		"prettier:fix": "prettier --write ./src",
 		"eslint": "eslint ./src --ext .ts",
 		"test:single": "jest",
-		"test": "jest --watchAll"
-	},
-	"dependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"test": "jest --clearCache && jest --watchAll"
 	},
 	"peerDependencies": {
-		"sequential-workflow-designer": "^0.8.0"
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"sequential-workflow-designer": "^0.9.0"
 	},
 	"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.0",
+		"rollup": "^3.18.0",
+		"rollup-plugin-dts": "^5.2.0",
+		"rollup-plugin-typescript2": "^0.34.1",
+		"ts-jest": "^29.0.3",
 		"typescript": "^4.9.4"
 	},
 	"keywords": [

package/lib/GlobalEditorWrapper.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { Definition, GlobalEditorContext } from 'sequential-workflow-designer';
-export interface GlobalEditorWrapper<TDefinition extends Definition> {
-    readonly properties: TDefinition['properties'];
-    setProperty(name: keyof TDefinition['properties'], value: TDefinition['properties'][typeof name]): void;
-}
-export declare function useGlobalEditor<TDefinition extends Definition = Definition>(): GlobalEditorWrapper<TDefinition>;
-export declare function GlobalEditorWrapperContext(props: {
-    children: JSX.Element;
-    definition: Definition;
-    context: GlobalEditorContext;
-}): JSX.Element;

package/lib/GlobalEditorWrapper.js

@@ -1,39 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-var globalEditorWrapperContext = createContext(null);
-export function useGlobalEditor() {
-    var wrapper = useContext(globalEditorWrapperContext);
-    if (!wrapper) {
-        throw new Error('Cannot find global editor context');
-    }
-    return wrapper;
-}
-export function GlobalEditorWrapperContext(props) {
-    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
-    function createWrapper() {
-        return {
-            properties: props.definition.properties,
-            setProperty: setProperty
-        };
-    }
-    function forward() {
-        setWrapper(createWrapper());
-    }
-    function setProperty(name, value) {
-        props.definition.properties[name] = value;
-        props.context.notifyPropertiesChanged();
-        forward();
-    }
-    return _jsx(globalEditorWrapperContext.Provider, __assign({ value: wrapper }, { children: props.children }));
-}

package/lib/SequentialWorkflowDesigner.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { Definition, ToolboxConfiguration, StepsConfiguration, DesignerExtension } from 'sequential-workflow-designer';
-import { WrappedDefinition } from './WrappedDefinition';
-export interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
-    definition: WrappedDefinition<TDefinition>;
-    onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
-    selectedStepId?: string | null;
-    onSelectedStepIdChanged?: (stepId: string | null) => void;
-    isReadonly?: boolean;
-    globalEditor: JSX.Element;
-    stepEditor: JSX.Element;
-    theme?: string;
-    undoStackSize?: number;
-    stepsConfiguration: StepsConfiguration;
-    toolboxConfiguration: ToolboxConfiguration;
-    extensions?: DesignerExtension[];
-}
-export declare function SequentialWorkflowDesigner<TDefinition extends Definition>(props: SequentialWorkflowDesignerProps<TDefinition>): JSX.Element;

package/lib/SequentialWorkflowDesigner.js

@@ -1,139 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactDOM from 'react-dom/client';
-import { useEffect, useRef, useState } from 'react';
-import { Designer } from 'sequential-workflow-designer';
-import { GlobalEditorWrapperContext } from './GlobalEditorWrapper';
-import { StepEditorWrapperContext } from './StepEditorWrapper';
-import { wrapDefinition } from './WrappedDefinition';
-export function SequentialWorkflowDesigner(props) {
-    var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
-    var onDefinitionChangeRef = useRef(props.onDefinitionChange);
-    var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
-    var globalEditorRef = useRef(props.globalEditor);
-    var stepEditorRef = useRef(props.stepEditor);
-    var designerRef = useRef(null);
-    var editorRootRef = useRef(null);
-    var definition = props.definition;
-    var selectedStepId = props.selectedStepId;
-    var isReadonly = props.isReadonly;
-    var theme = props.theme;
-    var undoStackSize = props.undoStackSize;
-    var stepsConfiguration = props.stepsConfiguration;
-    var toolboxConfiguration = props.toolboxConfiguration;
-    var extensions = props.extensions;
-    function forwardDefinition() {
-        if (designerRef.current) {
-            var def = wrapDefinition(designerRef.current.getDefinition(), designerRef.current.isValid());
-            onDefinitionChangeRef.current(def);
-        }
-    }
-    function globalEditorProvider(def, context) {
-        return editorProvider(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 })));
-    }
-    useEffect(function () {
-        onDefinitionChangeRef.current = props.onDefinitionChange;
-    }, [props.onDefinitionChange]);
-    useEffect(function () {
-        onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
-    }, [props.onSelectedStepIdChanged]);
-    useEffect(function () {
-        globalEditorRef.current = props.globalEditor;
-    }, [props.globalEditor]);
-    useEffect(function () {
-        stepEditorRef.current = props.stepEditor;
-    }, [props.stepEditor]);
-    useEffect(function () {
-        if (!placeholder) {
-            return;
-        }
-        if (designerRef.current) {
-            var isNotChanged = definition.value === designerRef.current.getDefinition();
-            if (isNotChanged) {
-                if (selectedStepId !== undefined && selectedStepId !== designerRef.current.getSelectedStepId()) {
-                    if (selectedStepId) {
-                        designerRef.current.selectStepById(selectedStepId);
-                    }
-                    else {
-                        designerRef.current.clearSelectedStep();
-                    }
-                    // console.log('sqd: selected step updated');
-                }
-                if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
-                    designerRef.current.setIsReadonly(isReadonly);
-                    // console.log('sqd: readonly updated');
-                }
-                return;
-            }
-            designerRef.current.destroy();
-            designerRef.current = null;
-        }
-        var designer = Designer.create(placeholder, definition.value, {
-            theme: theme,
-            undoStackSize: undoStackSize,
-            toolbox: toolboxConfiguration,
-            steps: stepsConfiguration,
-            editors: {
-                isHidden: false,
-                globalEditorProvider: globalEditorProvider,
-                stepEditorProvider: stepEditorProvider
-            },
-            extensions: extensions
-        });
-        if (selectedStepId) {
-            designer.selectStepById(selectedStepId);
-        }
-        if (isReadonly) {
-            designer.setIsReadonly(isReadonly);
-        }
-        // console.log('sqd: designer rendered');
-        designer.onReady.subscribe(forwardDefinition);
-        designer.onDefinitionChanged.subscribe(forwardDefinition);
-        designer.onSelectedStepIdChanged.subscribe(function (stepId) {
-            if (onSelectedStepIdChangedRef.current) {
-                onSelectedStepIdChangedRef.current(stepId);
-            }
-        });
-        designerRef.current = designer;
-    }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolboxConfiguration, stepsConfiguration, extensions]);
-    useEffect(function () {
-        return function () {
-            if (editorRootRef.current) {
-                var oldRoot_1 = editorRootRef.current;
-                editorRootRef.current = null;
-                setTimeout(function () { return oldRoot_1.unmount(); });
-            }
-            if (designerRef.current) {
-                designerRef.current.destroy();
-                designerRef.current = null;
-                // console.log('sqd: designer destroyed');
-            }
-        };
-    }, []);
-    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;
-}

package/lib/StepEditorWrapper.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { StepEditorContext, Step } from 'sequential-workflow-designer';
-export interface StepEditorWrapper<TStep extends Step> {
-    readonly id: string;
-    readonly type: TStep['type'];
-    readonly componentType: TStep['componentType'];
-    readonly name: string;
-    readonly properties: TStep['properties'];
-    readonly step: TStep;
-    setName(name: string): void;
-    setProperty(name: keyof TStep['properties'], value: TStep['properties'][typeof name]): void;
-    notifyPropertiesChanged(): void;
-    notifyChildrenChanged(): void;
-}
-export declare function useStepEditor<TStep extends Step = Step>(): StepEditorWrapper<TStep>;
-export declare function StepEditorWrapperContext(props: {
-    children: JSX.Element;
-    step: Step;
-    context: StepEditorContext;
-}): JSX.Element;

package/lib/StepEditorWrapper.js

@@ -1,62 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-var globalEditorWrapperContext = createContext(null);
-export function useStepEditor() {
-    var wrapper = useContext(globalEditorWrapperContext);
-    if (!wrapper) {
-        throw new Error('Cannot find step editor context');
-    }
-    return wrapper;
-}
-export function StepEditorWrapperContext(props) {
-    var _a = useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
-    function createWrapper() {
-        return {
-            id: props.step.id,
-            type: props.step.type,
-            componentType: props.step.componentType,
-            name: props.step.name,
-            properties: props.step.properties,
-            step: props.step,
-            setName: setName,
-            setProperty: setProperty,
-            notifyPropertiesChanged: notifyPropertiesChanged,
-            notifyChildrenChanged: notifyChildrenChanged
-        };
-    }
-    function forward() {
-        setWrapper(createWrapper());
-    }
-    function setName(name) {
-        props.step.name = name;
-        notifyNameChanged();
-    }
-    function setProperty(name, value) {
-        props.step.properties[name] = value;
-        notifyPropertiesChanged();
-    }
-    function notifyNameChanged() {
-        props.context.notifyNameChanged();
-        forward();
-    }
-    function notifyPropertiesChanged() {
-        props.context.notifyPropertiesChanged();
-        forward();
-    }
-    function notifyChildrenChanged() {
-        props.context.notifyChildrenChanged();
-        forward();
-    }
-    return _jsx(globalEditorWrapperContext.Provider, __assign({ value: wrapper }, { children: props.children }));
-}

package/lib/WrappedDefinition.d.ts

@@ -1,6 +0,0 @@
-import { Definition } from 'sequential-workflow-designer';
-export interface WrappedDefinition<TDefinition extends Definition = Definition> {
-    readonly value: TDefinition;
-    readonly isValid: boolean | undefined;
-}
-export declare function wrapDefinition<TDefinition extends Definition = Definition>(value: TDefinition, isValid?: boolean): WrappedDefinition<TDefinition>;

package/lib/WrappedDefinition.js

@@ -1,6 +0,0 @@
-export function wrapDefinition(value, isValid) {
-    return {
-        value: value,
-        isValid: isValid
-    };
-}

package/lib/index.js

@@ -1,4 +0,0 @@
-export * from './GlobalEditorWrapper';
-export * from './SequentialWorkflowDesigner';
-export * from './StepEditorWrapper';
-export * from './WrappedDefinition';