Skip to content

Commit fff965f

Browse files
determinationlovedeterminationlove
committed
Update the <Node> tooltip props demo to use reablocks
1 parent c7db1ed commit fff965f

8 files changed

+3075
-272
lines changed

‎.storybook/preview.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1+
import React from 'react';
2+
import { ThemeProvider, theme as reablocksTheme } from 'reablocks';
13
import theme from './theme';
24

5+
export const decorators = [
6+
Story => (
7+
<ThemeProvider theme={reablocksTheme}>
8+
<Story />
9+
</ThemeProvider>
10+
)
11+
]
12+
313
export const parameters = {
414
layout: 'centered',
515
docs: {

‎package-lock.json

+2,885-192
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
"homepage": "https://github.com/reaviz/reaflow#readme",
5050
"dependencies": {
5151
"@juggle/resize-observer": "^3.4.0",
52-
"antd": "^5.22.0",
5352
"calculate-size": "^1.1.1",
5453
"classnames": "^2.3.2",
5554
"d3-shape": "^3.0.1",
@@ -59,7 +58,7 @@
5958
"kld-affine": "^2.1.1",
6059
"kld-intersections": "^0.7.0",
6160
"p-cancelable": "^3.0.0",
62-
"reablocks": "^8.0.3",
61+
"reablocks": "^8.7.3",
6362
"react-cool-dimensions": "^2.0.7",
6463
"react-fast-compare": "^3.2.2",
6564
"react-use-gesture": "^8.0.1",
@@ -74,6 +73,7 @@
7473
"@storybook/addon-docs": "^7.6.17",
7574
"@storybook/addon-essentials": "^7.6.17",
7675
"@storybook/addon-mdx-gfm": "^7.6.17",
76+
"@storybook/addon-postcss": "^2.0.0",
7777
"@storybook/addon-storysource": "^7.6.17",
7878
"@storybook/addons": "^7.6.17",
7979
"@storybook/react": "^7.6.17",
@@ -87,7 +87,7 @@
8787
"@typescript-eslint/eslint-plugin": "^7.1.0",
8888
"@typescript-eslint/parser": "^7.1.0",
8989
"@vitejs/plugin-react": "^4.0.3",
90-
"autoprefixer": "^10.4.14",
90+
"autoprefixer": "^10.4.20",
9191
"chromatic": "6.20.0",
9292
"eslint": "^8.57.0",
9393
"eslint-config-prettier": "^9.1.0",
@@ -97,13 +97,15 @@
9797
"husky": "^9.0.11",
9898
"jsdom": "^24.0.0",
9999
"lint-staged": "^15.2.2",
100+
"postcss": "^8.4.49",
100101
"postcss-nested": "^6.0.1",
101102
"postcss-preset-env": "^9.4.0",
102103
"prettier": "^3.2.5",
103104
"react": "^18.2.0",
104105
"react-dom": "^18.2.0",
105106
"rollup-plugin-peer-deps-external": "2.2.4",
106107
"storybook": "^7.6.17",
108+
"tailwindcss": "^3.4.15",
107109
"typescript": "^4.9.5",
108110
"vite": "^4.4.7",
109111
"vite-plugin-checker": "^0.6.1",

‎postcss.config.cjs

+4-5
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
/* eslint-disable no-undef */
33
// eslint-disable-next-line no-undef
44
module.exports = {
5-
plugins: [
6-
require('postcss-nested'),
7-
require('postcss-preset-env')({ stage: 1 }),
8-
require('autoprefixer')
9-
]
5+
plugins: {
6+
tailwindcss: {},
7+
autoprefixer: {},
8+
},
109
};

‎src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎stories/Basic.stories.tsx

+79-67
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { Canvas, CanvasRef } from '../src/Canvas';
33
import { createEdgeFromNodes, detectCircular, hasLink } from '../src/helpers';
44
import { Node, Edge, MarkerArrow, Port, Icon, Label, Remove, Add, NodeProps, EdgeProps, Arrow } from '../src/symbols';
55
import { CanvasPosition, EdgeData, NodeData } from '../src/types';
6-
import { Popover } from 'antd';
6+
import { Popover, popoverTheme, extendComponentTheme, PopoverTheme } from 'reablocks';
7+
import '../src/index.css';
78

89
export default {
910
title: 'Demos/Basic',
@@ -124,73 +125,84 @@ export const Disabled = () => (
124125
</div>
125126
);
126127

127-
export const CustomElements = () => (
128-
<div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
129-
<Canvas
130-
nodes={[
131-
{
132-
id: '2',
133-
text: 'Mother',
134-
data: {
135-
gender: 'female'
136-
}
137-
},
138-
{
139-
id: '3',
140-
text: 'Daughter',
141-
data: {
142-
gender: 'female'
143-
}
144-
},
145-
{
146-
id: '4',
147-
text: 'Son',
148-
data: {
149-
gender: 'male'
128+
export const CustomElements = () => {
129+
130+
const customTheme = extendComponentTheme<PopoverTheme>(popoverTheme, {
131+
base: 'rounded bg-success-hover text-white font-bold p-3 text-base'
132+
});
133+
134+
return (
135+
<div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
136+
<Canvas
137+
nodes={[
138+
{
139+
id: '2',
140+
text: 'Mother',
141+
data: {
142+
gender: 'female'
143+
}
144+
},
145+
{
146+
id: '3',
147+
text: 'Daughter',
148+
data: {
149+
gender: 'female'
150+
}
151+
},
152+
{
153+
id: '4',
154+
text: 'Son',
155+
data: {
156+
gender: 'male'
157+
}
158+
},
159+
]}
160+
edges={[
161+
{
162+
id: '2-3',
163+
from: '2',
164+
to: '3'
165+
},
166+
{
167+
id: '2-4',
168+
from: '2',
169+
to: '4'
150170
}
151-
},
152-
]}
153-
edges={[
154-
{
155-
id: '2-3',
156-
from: '2',
157-
to: '3'
158-
},
159-
{
160-
id: '2-4',
161-
from: '2',
162-
to: '4'
163-
}
164-
]}
165-
node={(node: NodeProps) => (
166-
<Node
167-
{...node}
168-
onClick={() => console.log(node.properties.data)}
169-
style={{ fill: node.properties.data?.gender === 'male' ? 'blue' : 'red' }}
170-
tooltip={(props) => (
171-
<Popover
172-
title="Antd Popover"
173-
content={
174-
<>
175-
<p>this is {node.properties.text} </p>
176-
</>
177-
}
178-
>
179-
{props.children}
180-
</Popover>
181-
)}
182-
/>
183-
)}
184-
edge={(edge: EdgeProps) => (
185-
<Edge
186-
{...edge}
187-
style={{ stroke: edge.id === '2-4' ? 'blue' : 'red' }}
188-
/>
189-
)}
190-
onLayoutChange={layout => console.log('Layout', layout)}
191-
/>
192-
</div>
193-
);
171+
]}
172+
node={(node: NodeProps) => (
173+
<Node
174+
{...node}
175+
onClick={() => console.log(node.properties.data)}
176+
style={{ fill: node.properties.data?.gender === 'male' ? 'blue' : 'red' }}
177+
tooltip={(props) => (
178+
<Popover
179+
theme={customTheme}
180+
trigger={'hover'}
181+
closeOnClick={true}
182+
content={
183+
<div>
184+
<h1>This is {node.properties.text}!</h1>
185+
<p>you can also use Popover from other libraries such as Antd</p>
186+
</div>
187+
}
188+
>
189+
{props.children}
190+
</Popover>
191+
)}
192+
/>
193+
194+
)}
195+
edge={(edge: EdgeProps) => (
196+
<Edge
197+
{...edge}
198+
style={{ stroke: edge.id === '2-4' ? 'blue' : 'red' }}
199+
/>
200+
)}
201+
onLayoutChange={layout => console.log('Layout', layout)}
202+
/>
203+
</div>
204+
);
205+
};
194206

195207
export const Refs = () => {
196208
const ref = useRef<CanvasRef | null>(null);

‎stories/Drag.stories.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Canvas } from '../src/Canvas';
33
import { Node, Edge, MarkerArrow, Port, Icon, Arrow, Label, Remove, Add, NodeProps } from '../src/symbols';
44
import { EdgeData, NodeData } from '../src/types';
55
import { createEdgeFromNodes, hasLink, removeAndUpsertNodes } from '../src/helpers';
6-
import { Popover } from 'antd';
6+
import { extendComponentTheme, Popover, popoverTheme, PopoverTheme } from 'reablocks';
77

88
export default {
99
title: 'Demos/Drag',
@@ -190,6 +190,10 @@ export const NodeRearranging = () => {
190190
}
191191
]);
192192

193+
const customTheme = extendComponentTheme<PopoverTheme>(popoverTheme, {
194+
base: 'rounded bg-success-hover text-white font-bold p-3 text-base'
195+
});
196+
193197
return (
194198
<div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
195199
<Canvas
@@ -201,15 +205,19 @@ export const NodeRearranging = () => {
201205
dragType="node"
202206
tooltip={(props) => (
203207
<Popover
204-
title="Antd Popover"
208+
theme={customTheme}
209+
trigger={'hover'}
210+
closeOnClick={true}
205211
content={
206-
<>
207-
<p>this is {node.properties.text} </p>
208-
</>
212+
<div>
213+
<h1>This is {node.properties.text}!</h1>
214+
<p>you can also use Popover from other libraries such as Antd</p>
215+
</div>
209216
}
210217
>
211218
{props.children}
212219
</Popover>
220+
213221
)}
214222
/>)
215223
}

‎tailwind.config.ts

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/** @type {import('tailwindcss').Config} */
2+
/* eslint-disable max-len */
3+
import plugin from 'tailwindcss/plugin';
4+
import { colorPalette } from 'reablocks';
5+
6+
module.exports = {
7+
content: [
8+
'./index.html',
9+
'./src/**/*.{js,ts,jsx,tsx}',
10+
'./node_modules/reablocks/**/*.{js,jsx,ts,tsx}',
11+
],
12+
theme: {
13+
extend: {
14+
colors: {
15+
primary: {
16+
DEFAULT: colorPalette.blue[500],
17+
active: colorPalette.blue[500],
18+
hover: colorPalette.blue[600],
19+
inactive: colorPalette.blue[200]
20+
},
21+
secondary: {
22+
DEFAULT: colorPalette.gray[700],
23+
active: colorPalette.gray[700],
24+
hover: colorPalette.gray[800],
25+
inactive: colorPalette.gray[400]
26+
},
27+
success: {
28+
DEFAULT: colorPalette.green[500],
29+
active: colorPalette.green[500],
30+
hover: colorPalette.green[600]
31+
},
32+
error: {
33+
DEFAULT: colorPalette.red[500],
34+
active: colorPalette.red[500],
35+
hover: colorPalette.red[600]
36+
},
37+
warning: {
38+
DEFAULT: colorPalette.orange[500],
39+
active: colorPalette.orange[500],
40+
hover: colorPalette.orange[600]
41+
},
42+
info: {
43+
DEFAULT: colorPalette.blue[500],
44+
active: colorPalette.blue[500],
45+
hover: colorPalette.blue[600]
46+
},
47+
background: {
48+
level1: colorPalette.white,
49+
level2: colorPalette.gray[950],
50+
level3: colorPalette.gray[900],
51+
level4: colorPalette.gray[800],
52+
},
53+
panel: {
54+
DEFAULT: colorPalette['black-pearl'],
55+
accent: colorPalette['charade']
56+
},
57+
surface: {
58+
DEFAULT: colorPalette['charade'],
59+
accent: colorPalette.blue[500]
60+
},
61+
typography: {
62+
DEFAULT: colorPalette['athens-gray'],
63+
},
64+
accent: {
65+
DEFAULT: colorPalette['waterloo'],
66+
active: colorPalette['anakiwa']
67+
},
68+
}
69+
}
70+
},
71+
plugins: [
72+
plugin(({ addVariant }) => {
73+
addVariant('disabled-within', '&:has(input:is(:disabled),button:is(:disabled))');
74+
})
75+
],
76+
};

0 commit comments

Comments
 (0)