Skip to content

Commit 566c970

Browse files
b4rtazb4rtaz
authored
Merge pull request #24 from nocode-js/develop
0.8.0.
2 parents 26f3a38 + 3e570b0 commit 566c970

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+411
-297
lines changed

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
## 0.8.0
2+
3+
* This release introduces a better support for TypeScript.
4+
* The model of the workflow definition is moved from the `sequential-workflow-designer` package to the `sequential-workflow-model` package. By this it's possible to create a common package with your workflow model and use it for the front-end and back-end applications at the same time. The `sequential-workflow-designer` package exports definition types as before, but these types come from the `sequential-workflow-model` package. You don't have to include the `sequential-workflow-model` package to your project if you don't need it. You can read more about this approach [here](https://nocode-js.com/docs/sequential-workflow-designer/sharing-types-between-frontend-and-backend).
5+
6+
#### Breaking Changes
7+
8+
`TaskStep`, `SwitchStep`, `ContainerStep` interfaces are depreciated now. Those types will be removed in the future.
9+
10+
🤩 We launched a new project: [Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine). It's a JavaScript workflow engine for the frontend and the backend. The engine uses exactly the same data model as the Sequential Workflow Designer. It means you can use the same workflow definition for the designer and the engine. The new package is powered by the `xstate` library.
11+
112
## 0.7.0
213

314
* The step validator has two parameters from now: `step` and `parentSequence`.

‎README.md

+12-113
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@
44

55
[![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.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
66

7-
Sequential workflow designer with no dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow designers.
7+
Sequential workflow designer with 0 external dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow designers.
88

99
Features:
1010

11-
* no dependencies,
11+
* 0 external dependencies,
1212
* full generic & configurable,
1313
* light/dark themes,
1414
* works on modern browsers,
1515
* works on mobile,
1616
* the definition is stored as JSON,
1717
* has support for [React](./react/) and [Angular](./angular/designer/).
1818

19+
📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-designer) for more details.
20+
1921
🤩 Don't miss [the pro version](https://github.com/nocode-js/sequential-workflow-designer-pro-demo).
2022

2123
## 👀 Examples
@@ -38,6 +40,10 @@ Pro:
3840
* [📁 Folders](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/examples/webpack/public/folders.html)
3941
* [⭕ Wheel Mode](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/examples/webpack/public/wheel-mode.html)
4042

43+
## 👩‍💻 Integrations
44+
45+
* [🚚 Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) - JavaScript workflow engine, powered by the xstate library.
46+
4147
## 🚀 Installation
4248

4349
To use the designer you should add JS/TS files and CSS files to your project.
@@ -76,10 +82,10 @@ Add the below code to your head section in HTML document.
7682
```html
7783
<head>
7884
...
79-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.7.0/css/designer.css" rel="stylesheet">
80-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.7.0/css/designer-light.css" rel="stylesheet">
81-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.7.0/css/designer-dark.css" rel="stylesheet">
82-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.7.0/dist/index.umd.js"></script>
85+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.8.0/css/designer.css" rel="stylesheet">
86+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.8.0/css/designer-light.css" rel="stylesheet">
87+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.8.0/css/designer-dark.css" rel="stylesheet">
88+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.8.0/dist/index.umd.js"></script>
8389
```
8490

8591
Call the designer by:
@@ -179,113 +185,6 @@ designer.onDefinitionChanged.subscribe((newDefinition) => {
179185
});
180186
```
181187

182-
### 📝 Editors
183-
184-
The designer doesn't provide editors for steps. Why? Because this part usually is strongly dependent on a project type. So you must create editors by your own and set them in the start configuration.
185-
186-
The designer supports two types of editors.
187-
188-
* Global editor - it appears when no step is selected. This editor should configure a global settings of your definition. You should set your configuration to the `definition.properties` object.
189-
* Step editor - it appears when some step is selected. This editor can change the step's name (`step.name`) and step's property values (`step.properties`). Also, it can change children, but you must be careful and don't mix responsibilities.
190-
191-
You need to notify the designer when your editor changes the definition. To do it you need to call one of the editor context methods.
192-
193-
```js
194-
const editorsConfiguration = {
195-
globalEditorProvider: (definition, globalContext) => {
196-
// ...
197-
input.addEventListener('changed', () => {
198-
definition.properties['a'] = newA;
199-
globalContext.notifyPropertiesChanged();
200-
});
201-
// ...
202-
},
203-
204-
stepEditorProvider: (step, stepContext) => {
205-
// ...
206-
input.addEventListener('changed', () => {
207-
step.name = newName;
208-
stepContext.notifyNameChanged();
209-
210-
step.properties['x'] = newX;
211-
stepContext.notifyPropertiesChanged();
212-
213-
step.branches['newBranch'] = [];
214-
stepContext.notifyChildrenChanged();
215-
});
216-
// ...
217-
}
218-
}
219-
```
220-
221-
## 🚧 Supported Components
222-
223-
### Task
224-
225-
Any atomic task.
226-
227-
```js
228-
const taskStep = {
229-
componentType: 'task',
230-
id: 'my-unique-id',
231-
type: 'my-type', // e.g. 'save-file', 'send-email', ...
232-
name: 'my-name',
233-
properties: {
234-
'myProperty': 'my-value',
235-
// ...
236-
}
237-
};
238-
```
239-
240-
### Container
241-
242-
This component is mainly designed for `for/while/foreach` loops. It could be used as a context container too.
243-
244-
```ts
245-
const containerStep = {
246-
componentType: 'container',
247-
id: 'my-unique-id',
248-
type: 'my-type', // e.g. 'for', 'while', 'foreach'...
249-
name: 'my-name',
250-
properties: {
251-
'myProperty': 'my-value',
252-
// ...
253-
},
254-
sequence: [
255-
// steps...
256-
]
257-
};
258-
```
259-
260-
### Switch
261-
262-
This component is designed for `if/else` expressions, but you may use it for `switch/case` expressions too. This component must have minimum 2 branches.
263-
264-
```js
265-
const switchStep = {
266-
componentType: 'switch',
267-
id: 'my-unique-id',
268-
type: 'my-type', // e.g. 'if', 'switch'...
269-
name: 'my-name',
270-
properties: {
271-
'myProperty': 'my-value',
272-
// ...
273-
},
274-
branches: {
275-
'true': [
276-
// steps...
277-
],
278-
'false': [
279-
// steps...
280-
],
281-
// ...
282-
'next': [
283-
// steps...
284-
]
285-
}
286-
};
287-
```
288-
289188
## 💡 License
290189

291190
This project is released under the MIT license.

‎angular/designer/package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.7.0",
5-
"author": "N4NO.com",
4+
"version": "0.8.0",
5+
"author": {
6+
"name": "NoCode JS",
7+
"url": "https://nocode-js.com/"
8+
},
9+
"homepage": "https://nocode-js.com/",
610
"license": "MIT",
711
"repository": {
812
"type": "git",
@@ -11,7 +15,7 @@
1115
"peerDependencies": {
1216
"@angular/common": "^15.1.0",
1317
"@angular/core": "^15.1.0",
14-
"sequential-workflow-designer": "^0.7.0"
18+
"sequential-workflow-designer": "^0.8.0"
1519
},
1620
"dependencies": {
1721
"tslib": "^2.3.0"

‎demos/angular-app/package.json

+7-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"test": "ng test",
1111
"test:single": "ng test --watch false --browsers ChromeHeadless",
1212
"prettier": "prettier --check ./src",
13-
"prettier:fix": "prettier --write ./src"
13+
"prettier:fix": "prettier --write ./src",
14+
"upgrade:locals": "yarn upgrade sequential-workflow-designer sequential-workflow-designer-angular"
1415
},
1516
"private": true,
1617
"dependencies": {
@@ -23,10 +24,10 @@
2324
"@angular/platform-browser-dynamic": "^15.1.0",
2425
"@angular/router": "^15.1.0",
2526
"rxjs": "~7.8.0",
27+
"sequential-workflow-designer": "^0.8.0",
28+
"sequential-workflow-designer-angular": "^0.8.0",
2629
"tslib": "^2.3.0",
27-
"zone.js": "~0.12.0",
28-
"sequential-workflow-designer": "^0.7.0",
29-
"sequential-workflow-designer-angular": "^0.7.0"
30+
"zone.js": "~0.12.0"
3031
},
3132
"devDependencies": {
3233
"@angular-devkit/build-angular": "^15.1.1",
@@ -39,7 +40,7 @@
3940
"karma-coverage": "~2.2.0",
4041
"karma-jasmine": "~5.1.0",
4142
"karma-jasmine-html-reporter": "~2.0.0",
42-
"typescript": "~4.9.4",
43-
"prettier": "^2.8.3"
43+
"prettier": "^2.8.3",
44+
"typescript": "~4.9.4"
4445
}
4546
}

‎demos/angular-app/src/app/app.component.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
Step,
88
StepEditorContext,
99
StepsConfiguration,
10-
TaskStep,
1110
ToolboxConfiguration
1211
} from 'sequential-workflow-designer';
1312

@@ -36,12 +35,11 @@ export class AppComponent implements OnInit {
3635
name: 'Step',
3736
steps: [
3837
{
39-
id: '_',
4038
componentType: 'task',
4139
name: 'Step',
4240
properties: { velocity: 0 },
4341
type: 'task'
44-
} as TaskStep
42+
}
4543
]
4644
}
4745
]

‎demos/angular-app/yarn.lock

+15-8
Original file line numberDiff line numberDiff line change
@@ -5090,17 +5090,24 @@ send@0.18.0:
50905090
range-parser "~1.2.1"
50915091
statuses "2.0.1"
50925092

5093-
sequential-workflow-designer-angular@^0.6.0:
5094-
version "0.6.0"
5095-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.6.0.tgz#c8dd201c2da3291e70db1c0b8aae8668ee2ad5bc"
5096-
integrity sha512-b1pCvkcu+whjqDf3RDcwGgZLSTrgsQNvSDKGTQOEha2IRFU+txT0RjxtA3NrMZUYezQ+LWQwjJ0zkh04G0pyVQ==
5093+
sequential-workflow-designer-angular@^0.8.0:
5094+
version "0.8.0"
5095+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.8.0.tgz#b8bbce6b2c141ff908a47eadb17a787c99b730ff"
5096+
integrity sha512-ogwojf02XLOTgt/baD3sPOxO9JbETczSiP0HZ36WzEFcW5hV4u8VhHfjpGpclJ6WJN5Bll59WAQXxjvbc+3/+w==
50975097
dependencies:
50985098
tslib "^2.3.0"
50995099

5100-
sequential-workflow-designer@^0.6.0:
5101-
version "0.6.0"
5102-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.6.0.tgz#6043156611a5620ee93edccacc1f4848ba10e1b8"
5103-
integrity sha512-SvAsEUo1JejAOqAi55bNnn7SbTfksq3W3tIg806BtS+T9TlHCQwlXDQgn9CLfv8LtpOH7IvN9dAPUlbFWObtEw==
5100+
sequential-workflow-designer@^0.8.0:
5101+
version "0.8.0"
5102+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.8.0.tgz#149634094b64efc94cd8991720baa99b79e1433b"
5103+
integrity sha512-TShcrtUGSOwk3FkdxuCtVgMWDcoA7apSGgtwhDTaUvsMKaKi0T0JsgFcKwzbqmgoDyKvTQRnzMcNpZzonjwMZQ==
5104+
dependencies:
5105+
sequential-workflow-model "^0.1.0"
5106+
5107+
sequential-workflow-model@^0.1.0:
5108+
version "0.1.0"
5109+
resolved "https://registry.yarnpkg.com/sequential-workflow-model/-/sequential-workflow-model-0.1.0.tgz#ed80a6e769810fa68ec4cded7b35e7327d63427a"
5110+
integrity sha512-VQVJuJQfxid9nYiUPwU5GUc3igeFPeHlgTSoqIaYhzulmZqB3bpLmVg1WY7Ve3lKvG8pjs9NzoissvG8PDhaEQ==
51045111

51055112
serialize-javascript@^6.0.0:
51065113
version "6.0.1"

‎demos/react-app/package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.7.0",
9-
"sequential-workflow-designer-react": "^0.7.0"
8+
"sequential-workflow-designer": "^0.8.0",
9+
"sequential-workflow-designer-react": "^0.8.0"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",
@@ -17,8 +17,8 @@
1717
"@typescript-eslint/parser": "^5.47.0",
1818
"eslint": "^8.30.0",
1919
"prettier": "^2.8.2",
20-
"typescript": "^4.9.4",
21-
"react-scripts": "5.0.1"
20+
"react-scripts": "5.0.1",
21+
"typescript": "^4.9.4"
2222
},
2323
"scripts": {
2424
"start": "react-scripts start",
@@ -28,7 +28,8 @@
2828
"eject": "react-scripts eject",
2929
"prettier": "prettier --check ./src",
3030
"prettier:fix": "prettier --write ./src",
31-
"eslint": "eslint ./src --ext .ts"
31+
"eslint": "eslint ./src --ext .ts",
32+
"upgrade:locals": "yarn upgrade sequential-workflow-designer sequential-workflow-designer-react"
3233
},
3334
"eslintConfig": {
3435
"extends": [

‎demos/react-app/src/App.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useEffect, useState } from 'react';
2-
import { Definition, ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration } from 'sequential-workflow-designer';
2+
import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration } from 'sequential-workflow-designer';
33
import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react';
44
import { GlobalEditor } from './GlobalEditor';
55
import { StepEditor } from './StepEditor';
66
import { createSwitchStep, createTaskStep } from './StepUtils';
7+
import { WorkflowDefinition } from './model';
78

8-
const startDefinition: Definition = {
9+
const startDefinition: WorkflowDefinition = {
910
properties: {},
1011
sequence: [createTaskStep(), createSwitchStep()]
1112
};
@@ -15,7 +16,7 @@ const toolboxConfiguration: ToolboxConfiguration = {
1516
};
1617

1718
const stepsConfiguration: StepsConfiguration = {
18-
validator: (step: Step) => !!step.name
19+
validator: (step: Step) => Boolean(step.name)
1920
};
2021

2122
export function App() {

‎demos/react-app/src/GlobalEditor.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ChangeEvent } from 'react';
22
import { useGlobalEditor } from 'sequential-workflow-designer-react';
3+
import { WorkflowDefinition } from './model';
34

45
export function GlobalEditor() {
5-
const { properties, setProperty } = useGlobalEditor();
6+
const { properties, setProperty } = useGlobalEditor<WorkflowDefinition>();
67

78
function onAlfaChanged(e: ChangeEvent) {
89
setProperty('alfa', (e.target as HTMLInputElement).value);
@@ -14,7 +15,7 @@ export function GlobalEditor() {
1415

1516
<h4>Alfa</h4>
1617

17-
<input type="text" value={(properties['alfa'] as string) || ''} onChange={onAlfaChanged} />
18+
<input type="text" value={properties.alfa || ''} onChange={onAlfaChanged} />
1819
</>
1920
);
2021
}

‎demos/react-app/src/StepEditor.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ChangeEvent } from 'react';
2-
import { SwitchStep } from 'sequential-workflow-designer';
32
import { useStepEditor } from 'sequential-workflow-designer-react';
3+
import { SwitchStep, TaskStep } from './model';
44

55
export function StepEditor() {
6-
const { type, name, step, properties, setName, setProperty, notifyPropertiesChanged, notifyChildrenChanged } = useStepEditor();
6+
const { type, name, step, properties, setName, setProperty, notifyPropertiesChanged, notifyChildrenChanged } = useStepEditor<
7+
TaskStep | SwitchStep
8+
>();
79

810
function onNameChanged(e: ChangeEvent) {
911
setName((e.target as HTMLInputElement).value);
@@ -36,10 +38,10 @@ export function StepEditor() {
3638
<input type="text" value={name} onChange={onNameChanged} />
3739

3840
<h4>X Variable</h4>
39-
<input type="text" value={(properties['x'] as string) || ''} onChange={onXChanged} />
41+
<input type="text" value={properties.x || ''} onChange={onXChanged} />
4042

4143
<h4>Y Variable</h4>
42-
<input type="text" value={(properties['y'] as string) || ''} onChange={onYChanged} />
44+
<input type="text" value={properties.y || ''} onChange={onYChanged} />
4345

4446
{type === 'switch' && (
4547
<>

0 commit comments

Comments
 (0)