React components and hooks to construct a workflow builder application. The workflow builder application allows you to create a complex TOML formatted config file based on a set of JSON schemas.
Below is a screencast of haddock3 download app which is made using this package.
Part of i-VRESSE/workflow-builder monorepo.
To create an app with a single global parameter and a single node with a single parameter.
Create vite React project and install the core package with
npm create vite my-ivresse-app -- --template react-ts
cd my-ivresse-app
npm install
npm install @i-vresse/wb-core bootstrap@4
Rewrite src/main.tsx
to include wrapper component for global state, notifications and drag-n-drop support.
...
import { Wrapper } from '@i-vresse/wb-core'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<Wrapper>
<App />
</Wrapper>
</React.StrictMode>,
document.getElementById('root')
)
Rewrite src/App.tsx
to combine the components of the @i-vresse/wb-core
package to make an app
import { useEffect } from "react";
import {
CatalogPanel,
FormActions,
NodePanel,
WorkflowPanel,
} from "@i-vresse/wb-core";
import { useSetCatalog } from "@i-vresse/wb-core/dist/store";
import { prepareCatalog } from "@i-vresse/wb-core/dist/catalog";
import "bootstrap/dist/css/bootstrap.min.css";
import "@i-vresse/wb-form/dist/index.css";
function App() {
const setCatalog = useSetCatalog();
useEffect(() => {
const catalog = {
title: "Some title",
global: {
schema: {
type: "object",
properties: {
parameterY: {
type: "string",
},
},
},
uiSchema: {},
},
categories: [
{
name: "cat1",
description: "First category",
},
],
nodes: [
{
category: "cat1",
description: "Description of somenode",
id: "somenode",
label: "Some node",
schema: {
type: "object",
properties: {
parameterX: {
type: "string",
},
},
},
uiSchema: {},
},
],
examples: {},
};
setCatalog(prepareCatalog(catalog)); // On mount configure catalog
}, []);
return (
<table>
<tr>
<td>
<CatalogPanel />
</td>
<td>
<WorkflowPanel/>
</td>
<td style={{verticalAlign: 'top'}}>
<NodePanel />
<FormActions />
</td>
</tr>
</table>
);
}
export default App;
Example is running here.
With the example you can do a couple of things:
global paramters
button.Submit
button to store the changes.Cancel
button to close the form for the global parameterssomenode
button or by hovering over the somenode
button and use the grip to drag it over to the middle column.somenode
button or by hovering over the somenode
button and use the grip to drag it over to the middle column, insert new node where ever you want in the list by dragging it there.X
button.More applications can be found at https://github.com/i-VRESSE/workflow-builder/tree/main/apps which include ways to import, export and run the workflow.
API documentation of main branch is at https://i-vresse.github.io/workflow-builder/core/docs/.
The API documentation can be generated with
yarn apidocs
Will generate a docs/index.html.
The API docs exclude React components, the docs for the React components can be seen at https://i-vresse.github.io/workflow-builder/core/storybook-static/
Or generated locally with
yarn storybook
Which starts a storybook server on http://localhost:6008
Generated using TypeDoc