Skip to content
This repository was archived by the owner on Mar 17, 2024. It is now read-only.

Commit a7edaa5

Browse files
kamiazyakamiazya
committed
add storybook
1 parent 4a8c0b4 commit a7edaa5

File tree

9 files changed

+395
-104
lines changed

9 files changed

+395
-104
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,5 @@ lib.js
136136
lib.mjs
137137
web.js
138138
web.mjs
139+
docs
140+
*.d.ts

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
.vscode
88
config
99
coverage
10+
docs
1011
jest.config.js
1112
LICENSE
1213
rollup.build.ts

‎.storybook/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
module.exports = {
22
stories: ['../src/**/*.stories.[tj]sx'],
3+
addons: [
4+
'@storybook/addon-storysource',
5+
'@storybook/addon-knobs/register',
6+
],
37
webpackFinal: async config => {
48
config.module.rules.push({
59
test: /\.(ts|tsx)$/,

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"build": "ts-node rollup.build",
3232
"test": "jest",
3333
"lint": "eslint -c .eslintrc.json --ext ts,tsx src",
34-
"storybook": "start-storybook -p 9000"
34+
"storybook": "start-storybook -p 9000",
35+
"storybook:build": "build-storybook -c .storybook -o docs"
3536
},
3637
"peerDependencies": {
3738
"@hpcc-js/wasm": "^0.3.13",
@@ -51,6 +52,8 @@
5152
"devDependencies": {
5253
"@hpcc-js/wasm": "^0.3.13",
5354
"@rollup/plugin-commonjs": "^11.1.0",
55+
"@storybook/addon-knobs": "^5.3.18",
56+
"@storybook/addon-storysource": "^5.3.18",
5457
"@storybook/react": "^5.3.18",
5558
"@testing-library/react-hooks": "^3.2.1",
5659
"@types/fs-extra": "^8.1.0",

‎src/stories/animations.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { FC, useState, useEffect } from 'react';
2+
import { Graphviz } from '../web';
3+
import { Digraph, Node, Edge } from '../index';
4+
5+
export default { title: 'Graphviz/Animations' };
6+
7+
const shapes = [
8+
'box',
9+
'polygon',
10+
'ellipse',
11+
'oval',
12+
'circle',
13+
'egg',
14+
'triangle',
15+
'parallelogram',
16+
'house',
17+
'pentagon',
18+
'hexagon',
19+
];
20+
21+
export const CircoAnime: FC = () => {
22+
const [nodes, setNodes] = useState<string[]>(['n0', 'n1']);
23+
const [i, setI] = useState<number>(2);
24+
useEffect(() => {
25+
const interval = setInterval(() => {
26+
setNodes([...nodes, `n${i}`]);
27+
setI(i + 1);
28+
}, 2000);
29+
return (): void => {
30+
clearInterval(interval);
31+
};
32+
}, [nodes, i, setNodes, setI]);
33+
return (
34+
<Graphviz engine="circo">
35+
<Digraph>
36+
{nodes.map((n, j) => (
37+
<Node id={n} key={n} shape={shapes[j % shapes.length]} />
38+
))}
39+
<Edge targets={nodes} />
40+
<Edge targets={[`n${i - 1}`, 'n0']} />
41+
</Digraph>
42+
</Graphviz>
43+
);
44+
};

‎src/stories/components.stories.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* eslint-disable @typescript-eslint/explicit-function-return-type */
2+
import React, { FC } from 'react';
3+
import { withKnobs, text, select, number } from '@storybook/addon-knobs';
4+
import { Graphviz } from '../web';
5+
import { Digraph, Graph, Node, Edge } from '../index';
6+
7+
export default { title: 'Graphviz/Components', decorators: [withKnobs] };
8+
9+
export const RootGraph: FC = () => {
10+
const root = select('root', ['digraph', 'graph'], 'digraph');
11+
const Root = root === 'digraph' ? Digraph : Graph;
12+
const rankdir = select('rankdir', ['TB', 'BT', 'RL', 'LR'], 'TB');
13+
return (
14+
<Graphviz>
15+
<Root rankdir={rankdir}>
16+
<Node id="n1" />
17+
<Node id="n2" />
18+
<Node id="n3" />
19+
<Edge targets={['n1', 'n2', 'n3']} />
20+
<Edge targets={['n1', 'n3']} />
21+
</Root>
22+
</Graphviz>
23+
);
24+
};
25+
26+
export const NodeSample: FC = () => {
27+
return (
28+
<Graphviz>
29+
<Digraph>
30+
<Node
31+
id="n"
32+
label={text('label', 'label')}
33+
xlabel={text('xlabel', '')}
34+
color={text('color', 'black')}
35+
fillcolor={text('fillcolor', 'yellow')}
36+
style={text('style', 'filled')}
37+
shape={select(
38+
'shape',
39+
[
40+
'box',
41+
'assembly',
42+
'box3d',
43+
'cds',
44+
'circle',
45+
'component',
46+
'cylinder',
47+
'diamond',
48+
'doublecircle',
49+
'doubleoctagon',
50+
'egg',
51+
'ellipse',
52+
'fivepoverhang',
53+
'folder',
54+
'hexagon',
55+
'house',
56+
'insulator',
57+
'invhouse',
58+
'invtrapezium',
59+
'invtriangle',
60+
'larrow',
61+
'lpromoter',
62+
'Mcircle',
63+
'Mdiamond',
64+
'Msquare',
65+
'none',
66+
'note',
67+
'noverhang',
68+
'octagon',
69+
'oval',
70+
'parallelogram',
71+
'pentagon',
72+
'plain',
73+
'plaintext',
74+
'point',
75+
'polygon',
76+
'primersite',
77+
'promoter',
78+
'proteasesite',
79+
'proteinstab',
80+
'rarrow',
81+
'rect',
82+
'rectangle',
83+
'restrictionsite',
84+
'ribosite',
85+
'rnastab',
86+
'rpromoter',
87+
'septagon',
88+
'signature',
89+
'square',
90+
'star',
91+
'tab',
92+
'terminator',
93+
'threepoverhang',
94+
'trapezium',
95+
'triangle',
96+
'tripleoctagon',
97+
'underline',
98+
'utr',
99+
],
100+
'box',
101+
)}
102+
/>
103+
</Digraph>
104+
</Graphviz>
105+
);
106+
};
107+
108+
export const EdgeSample: FC = () => {
109+
return (
110+
<Graphviz>
111+
<Digraph>
112+
<Node id="n1" />
113+
<Node id="n2" />
114+
<Edge
115+
targets={['n1', 'n2']}
116+
label={text('label', 'label')}
117+
dir={select('dir', ['forward', 'back', 'both'], 'forward')}
118+
arrowhead={select(
119+
'arrowhead',
120+
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
121+
'normal',
122+
)}
123+
arrowtail={select(
124+
'arrowtail',
125+
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
126+
'normal',
127+
)}
128+
arrowsize={number('arrowsize', 1, { min: 0, step: 0.1 })}
129+
/>
130+
</Digraph>
131+
</Graphviz>
132+
);
133+
};

‎src/stories/index.stories.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { FC } from 'react';
2+
import { select, withKnobs } from '@storybook/addon-knobs';
3+
import { Graphviz } from '../web';
4+
import { Digraph, Node, Edge, Subgraph, DOT } from '../index';
5+
6+
export default { title: 'Graphviz', decorators: [withKnobs] };
7+
8+
export const Simple: FC = () => {
9+
const engine = select('engine', ['circo', 'dot', 'fdp', 'neato', 'osage', 'patchwork', 'twopi'], 'dot');
10+
return (
11+
<Graphviz engine={engine}>
12+
<Digraph>
13+
<Node id="n1" />
14+
<Node id="n2" />
15+
<Node id="n3" />
16+
<Edge targets={['n1', 'n2', 'n3']} />
17+
<Edge targets={['n1', 'n3']} />
18+
</Digraph>
19+
</Graphviz>
20+
);
21+
};
22+
23+
export const FullExample: FC = () => (
24+
<Graphviz>
25+
<Digraph
26+
rankdir="TB"
27+
edge={{
28+
color: 'blue',
29+
fontcolor: 'blue',
30+
}}
31+
node={{
32+
shape: 'none',
33+
}}
34+
>
35+
<Node
36+
id="nodeA"
37+
shape="none"
38+
label={
39+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
40+
<DOT.TR>
41+
<DOT.TD>left</DOT.TD>
42+
<DOT.TD PORT="m">middle</DOT.TD>
43+
<DOT.TD PORT="r">right</DOT.TD>
44+
</DOT.TR>
45+
</DOT.TABLE>
46+
}
47+
/>
48+
<Subgraph id="cluster" label="Cluster" labeljust="l">
49+
<Node id="nodeB" label="This is label for nodeB." />
50+
</Subgraph>
51+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
52+
</Digraph>
53+
</Graphviz>
54+
);

‎src/web/components/Graphviz.stories.tsx‎

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

0 commit comments

Comments
 (0)