Skip to content

Commit e5bca88

Browse files
astanciuastanciu
committed
modernize project
upgrade dependencies, switch to hooks, modernize overall project
1 parent a351133 commit e5bca88

Some content is hidden

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

87 files changed

+26402
-28060
lines changed

‎.editorconfig

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,5 @@ dist
1717
npm-debug.log*
1818
yarn-debug.log*
1919
yarn-error.log*
20+
21+
.yarn/install-state.gz

‎.yarnrc.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ yarn add svg-workflow-canvas
1414
```
1515

1616
## Usage
17-
See the example folder for how to use this component. Below is just a very simple example.
17+
Below is a simple example of how to use this component. You can also check out the playground folder for a more interactive demo.
1818

1919
```tsx
2020
import React from "react";
@@ -40,6 +40,21 @@ export default () => {
4040

4141
```
4242

43+
## Development
44+
45+
This project uses Vite for both building the library and for development:
46+
47+
```bash
48+
# Start the development playground
49+
yarn dev
50+
51+
# Build the library
52+
yarn build
53+
54+
# Run type checking
55+
yarn typecheck
56+
```
57+
4358
## License
4459

4560
MIT © [astanciu](https://github.com/astanciu)

‎biome.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3+
"files": {
4+
"ignore": ["dist/*"]
5+
},
6+
"formatter": {
7+
"enabled": true,
8+
"lineWidth": 120,
9+
"formatWithErrors": true,
10+
"indentStyle": "space"
11+
},
12+
"javascript": {
13+
"formatter": {
14+
"quoteStyle": "double"
15+
},
16+
"jsxRuntime": "reactClassic"
17+
},
18+
"linter": {
19+
"enabled": true,
20+
"rules": {
21+
"recommended": true,
22+
"a11y": {
23+
"useKeyWithClickEvents": "off"
24+
}
25+
}
26+
},
27+
"organizeImports": {
28+
"enabled": false
29+
}
30+
}

‎example/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.yarn/install-state.gz
3+
.env

‎example/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>SVG Workflow Canvas</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.jsx"></script>
11+
</body>
12+
</html>

‎example/package.json

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,23 @@
44
"version": "0.0.0",
55
"license": "MIT",
66
"private": true,
7+
"type": "module",
78
"dependencies": {
8-
"react": "^16.12.0",
9-
"react-dom": "^16.12.0",
10-
"react-scripts": "^3.3.0",
11-
"svg-workflow-canvas": "link:.."
9+
"react": "^18.2.0",
10+
"react-dom": "^18.2.0",
11+
"svg-workflow-canvas": "link:..",
12+
"vite": "^6.2.2"
1213
},
13-
"scripts": {
14-
"start": "react-scripts start",
15-
"build": "react-scripts build",
16-
"test": "react-scripts test --env=jsdom",
17-
"eject": "react-scripts eject"
14+
"devDependencies": {
15+
"@types/react": "^18.2.15",
16+
"@types/react-dom": "^18.2.7",
17+
"@vitejs/plugin-react": "^4.0.3",
18+
"sass": "^1.69.5",
19+
"typescript": "^5.0.2"
1820
},
19-
"browserslist": {
20-
"production": [
21-
">0.2%",
22-
"not dead",
23-
"not op_mini all"
24-
],
25-
"development": [
26-
"last 1 chrome version",
27-
"last 1 firefox version",
28-
"last 1 safari version"
29-
]
21+
"scripts": {
22+
"dev": "vite",
23+
"build": "vite build",
24+
"preview": "vite preview"
3025
}
3126
}

‎example/src/App.js

Lines changed: 0 additions & 104 deletions
This file was deleted.

‎example/src/App.jsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from "react";
2+
import Workflow from "svg-workflow-canvas";
3+
import { Button } from "./Components/Button/Button";
4+
import { ButtonToggle } from "./Components/Button/ButtonToggle";
5+
import { ButtonGroup } from "./Components/Button/ButtonGroup";
6+
import { Panel } from "./Components/Panel/Panel";
7+
import { useLocalStorage } from "./Components/useLocalStorage";
8+
9+
const App = () => {
10+
const [showGrid, setShowGrid] = useLocalStorage("settings.showGrid", true);
11+
const w1 = {
12+
id: "jzh31fs",
13+
name: "Workflow",
14+
description: "Generic workflow",
15+
nodes: [
16+
{ id: "START", icon: "sign-in-alt", position: { x: -400, y: 0 } },
17+
{ id: "END", icon: "sign-out-alt", position: { x: 350, y: 0 } },
18+
{
19+
name: "add-new-item",
20+
id: "1",
21+
icon: "plus-circle",
22+
position: { x: 0, y: 0 },
23+
},
24+
{
25+
name: "create-user",
26+
id: "2",
27+
icon: "user",
28+
position: { x: 250, y: 165 },
29+
},
30+
{
31+
name: "upload-stuff",
32+
id: "3",
33+
icon: "home",
34+
position: { x: -200, y: 0 },
35+
},
36+
{
37+
name: "train-jedi",
38+
id: "4",
39+
icon: "jedi",
40+
position: { x: 250, y: -165 },
41+
},
42+
],
43+
connections: [
44+
{ from: "1", to: "2", id: "h1zt2" },
45+
{ from: "3", to: "1", id: "0.10135201500322455" },
46+
{ from: "1", to: "4", id: "0.8044895443880992" },
47+
{ from: "START", to: "3", id: "0.5510817403732952" },
48+
{ from: "1", to: "END", id: "0.21708917364861713" },
49+
],
50+
};
51+
52+
const w2 = {
53+
id: "jzh31fs",
54+
name: "Workflow",
55+
description: "Generic workflow",
56+
nodes: [
57+
{
58+
name: "create-user",
59+
id: "2",
60+
icon: "user",
61+
position: { x: 250, y: 165 },
62+
},
63+
{
64+
name: "upload-stuff",
65+
id: "3",
66+
icon: "home",
67+
position: { x: -200, y: 0 },
68+
},
69+
{
70+
name: "train-jedi",
71+
id: "4",
72+
icon: "jedi",
73+
position: { x: 250, y: -165 },
74+
},
75+
],
76+
connections: [],
77+
};
78+
79+
const addNode = (addNodeWorkflowFn) => () => {
80+
addNodeWorkflowFn({ name: "Alex" });
81+
};
82+
83+
const saveWorkflow = (fn) => () => {
84+
const workflow = fn();
85+
console.log("Store this in DB: ", workflow);
86+
alert("In this demo, data was dumped to console");
87+
};
88+
89+
const toggleGrid = () => {
90+
setShowGrid(!showGrid);
91+
};
92+
93+
return (
94+
<div style={{ width: "100vw", height: "100vh" }}>
95+
<Workflow
96+
workflow={w2}
97+
scale={1}
98+
snapToGrid
99+
showGrid={showGrid}
100+
render={(add, save, updateNode, removeNode, selectedNode) => (
101+
<>
102+
{/* <Sidebar add={addNode(add)} save={saveWorkflow(save)} /> */}
103+
<Panel updateNode={updateNode} removeNode={removeNode} selectedNode={selectedNode} />
104+
<ButtonGroup>
105+
<Button icon="plus-circle" tooltip="This is the cog" onClick={addNode(add)} />
106+
<Button icon="save" tooltip="This is the cog" onClick={saveWorkflow(save)} />
107+
<ButtonToggle icon="th" tooltip="This is the cog" enabled={showGrid} onClick={toggleGrid} />
108+
</ButtonGroup>
109+
</>
110+
)}
111+
/>
112+
</div>
113+
);
114+
};
115+
116+
export default App;

0 commit comments

Comments
 (0)