sequential-workflow-designer-react 0.5.2

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 N4NO.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+![Sequential Workflow Designer for React](../.github/cover.png)
+
+# Sequential Workflow Designer for React
+
+[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer-react.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer-react)
+
+React wrapper for the [Sequential Workflow Designer](https://github.com/nocode-js/sequential-workflow-designer) component.
+
+## 🚀 Installation
+
+Install the following packages by [NPM](https://www.npmjs.com/) command:
+
+`npm i sequential-workflow-designer sequential-workflow-designer-react`
+
+Import CSS files:
+
+```tsx
+import 'sequential-workflow-designer/css/designer.css';
+import 'sequential-workflow-designer/css/designer-light.css';
+import 'sequential-workflow-designer/css/designer-dark.css';
+```
+
+Import types:
+
+```tsx
+import {
+  Definition,
+  ToolboxConfiguration,
+  StepsConfiguration
+} from 'sequential-workflow-designer';
+import {
+  SequentialWorkflowDesigner,
+  wrapDefinition,
+  useGlobalEditor,
+  useStepEditor
+} from 'sequential-workflow-designer-react';
+```
+
+Create or load your definition of a workflow.
+
+```ts
+const startDefinition: Definition = { /* ... */ };
+```
+
+Wrap the start definition and memorize it.
+
+```tsx
+const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
+```
+
+Configure the designer.
+
+```ts
+const toolboxConfiguration: ToolboxConfiguration = { /* ... */ };
+const stepsConfiguration: StepsConfiguration = { /* ... */ };
+```
+
+Create the global editor component:
+
+```tsx
+function GlobalEditor() {
+  const { properties, setProperty } = useGlobalEditor();
+
+  function onSpeedChanged(e) {
+    setProperty('speed', e.target.value);
+  }
+
+  return (
+    <>
+      <h3>Speed</h3>
+      <input value={properties['speed'] || ''} onChange={onSpeedChanged} />
+    </>
+  );
+}
+```
+
+Create the step editor component:
+
+```tsx
+function StepEditor() {
+  const { type, componentType, name, setName, properties, setProperty } = useStepEditor();
+
+  function onNameChanged(e) {
+    setName(e.target.value);
+  }
+
+  return (
+    <>
+      <h3>Name</h3>
+      <input value={name} onChange={onNameChanged} />
+    </>
+  );
+}
+```
+
+At the end attach the designer.
+
+```tsx
+<SequentialWorkflowDesigner
+  definition={definition}
+  onDefinitionChange={setDefinition}
+  toolboxConfiguration={toolboxConfiguration}
+  stepsConfiguration={stepsConfiguration}
+  globalEditor={<GlobalEditor />}
+  stepEditor={<StepEditor />}>
+  />
+```
+
+Check the [demo project](../demos/react-app/).
+
+## 💡 License
+
+This project is released under the MIT license.

package/lib/GlobalEditorWrapper.d.ts

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

package/lib/GlobalEditorWrapper.js

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ToolboxConfiguration, StepsConfiguration, DesignerExtension } from 'sequential-workflow-designer';
+import { WrappedDefinition } from './WrappedDefinition';
+export interface SequentialWorkflowDesignerProps {
+    definition: WrappedDefinition;
+    onDefinitionChange: (state: WrappedDefinition) => 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(props: SequentialWorkflowDesignerProps): JSX.Element;

package/lib/SequentialWorkflowDesigner.js

@@ -0,0 +1,139 @@
+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

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

package/lib/StepEditorWrapper.js

@@ -0,0 +1,62 @@
+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

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

package/lib/WrappedDefinition.js

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

package/lib/index.d.ts

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

package/lib/index.js

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

package/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "sequential-workflow-designer-react",
+	"description": "React wrapper for Sequential Workflow Designer component.",
+	"version": "0.5.2",
+	"main": "./lib/index.js",
+	"types": "./lib/index.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/nocode-js/sequential-workflow-designer.git"
+	},
+	"files": [
+		"lib/"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"author": "N4NO.com",
+	"license": "MIT",
+	"scripts": {
+		"prepare": "cp ../LICENSE LICENSE",
+		"clean": "rm -rf lib",
+		"start": "tsc --watch",
+		"build": "yarn clean && tsc",
+		"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",
+		"sequential-workflow-designer": "^0.5.2"
+	},
+	"devDependencies": {
+		"@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",
+		"typescript": "^4.9.4"
+	},
+	"keywords": [
+		"workflow",
+		"designer",
+		"builder",
+		"nocode",
+		"lowcode",
+		"flow",
+		"react",
+		"reactjs"
+	]
+}