Update the <Node> tooltip props demo to use reablocks

reaviz · Nov 30, 2024 · fff965f · fff965f
1 parent c7db1ed
commit fff965f
Show file tree

Hide file tree

Showing 8 changed files with 3,075 additions and 272 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,15 @@
+import React from 'react';
+import { ThemeProvider, theme as reablocksTheme } from 'reablocks';
 import theme from './theme';
 
+export const decorators = [
+  Story => (
+    <ThemeProvider theme={reablocksTheme}>
+      <Story />
+    </ThemeProvider>
+  )
+]
+
 export const parameters = {
   layout: 'centered',
   docs: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,6 @@
   "homepage": "https://github.com/reaviz/reaflow#readme",
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "antd": "^5.22.0",
     "calculate-size": "^1.1.1",
     "classnames": "^2.3.2",
     "d3-shape": "^3.0.1",
@@ -59,7 +58,7 @@
     "kld-affine": "^2.1.1",
     "kld-intersections": "^0.7.0",
     "p-cancelable": "^3.0.0",
-    "reablocks": "^8.0.3",
+    "reablocks": "^8.7.3",
     "react-cool-dimensions": "^2.0.7",
     "react-fast-compare": "^3.2.2",
     "react-use-gesture": "^8.0.1",
@@ -74,6 +73,7 @@
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-mdx-gfm": "^7.6.17",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-storysource": "^7.6.17",
     "@storybook/addons": "^7.6.17",
     "@storybook/react": "^7.6.17",
@@ -87,7 +87,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "chromatic": "6.20.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -97,13 +97,15 @@
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
+    "postcss": "^8.4.49",
     "postcss-nested": "^6.0.1",
     "postcss-preset-env": "^9.4.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "storybook": "^7.6.17",
+    "tailwindcss": "^3.4.15",
     "typescript": "^4.9.5",
     "vite": "^4.4.7",
     "vite-plugin-checker": "^0.6.1",

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -2,9 +2,8 @@
 /* eslint-disable no-undef */
 // eslint-disable-next-line no-undef
 module.exports = {
-  plugins: [
-    require('postcss-nested'),
-    require('postcss-preset-env')({ stage: 1 }),
-    require('autoprefixer')
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/stories/Basic.stories.tsx b/stories/Basic.stories.tsx
@@ -3,7 +3,8 @@ import { Canvas, CanvasRef } from '../src/Canvas';
 import { createEdgeFromNodes, detectCircular, hasLink } from '../src/helpers';
 import { Node, Edge, MarkerArrow, Port, Icon, Label, Remove, Add, NodeProps, EdgeProps, Arrow } from '../src/symbols';
 import { CanvasPosition, EdgeData, NodeData } from '../src/types';
-import { Popover } from 'antd';
+import { Popover, popoverTheme, extendComponentTheme, PopoverTheme } from 'reablocks';
+import '../src/index.css';
 
 export default {
   title: 'Demos/Basic',
@@ -124,73 +125,84 @@ export const Disabled = () => (
   </div>
 );
 
-export const CustomElements = () => (
-  <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
-    <Canvas
-      nodes={[
-        {
-          id: '2',
-          text: 'Mother',
-          data: {
-            gender: 'female'
-          }
-        },
-        {
-          id: '3',
-          text: 'Daughter',
-          data: {
-            gender: 'female'
-          }
-        },
-        {
-          id: '4',
-          text: 'Son',
-          data: {
-            gender: 'male'
+export const CustomElements = () => {
+
+  const customTheme = extendComponentTheme<PopoverTheme>(popoverTheme, {
+    base: 'rounded bg-success-hover text-white font-bold p-3 text-base'
+  });
+
+  return (
+    <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+      <Canvas
+        nodes={[
+          {
+            id: '2',
+            text: 'Mother',
+            data: {
+              gender: 'female'
+            }
+          },
+          {
+            id: '3',
+            text: 'Daughter',
+            data: {
+              gender: 'female'
+            }
+          },
+          {
+            id: '4',
+            text: 'Son',
+            data: {
+              gender: 'male'
+            }
+          },
+        ]}
+        edges={[
+          {
+            id: '2-3',
+            from: '2',
+            to: '3'
+          },
+          {
+            id: '2-4',
+            from: '2',
+            to: '4'
           }
-        },
-      ]}
-      edges={[
-        {
-          id: '2-3',
-          from: '2',
-          to: '3'
-        },
-        {
-          id: '2-4',
-          from: '2',
-          to: '4'
-        }
-      ]}
-      node={(node: NodeProps) => (
-        <Node
-          {...node}
-          onClick={() => console.log(node.properties.data)}
-          style={{ fill: node.properties.data?.gender === 'male' ? 'blue' : 'red' }}
-          tooltip={(props) => (
-            <Popover
-              title="Antd Popover"
-              content={
-                <>
-                  <p>this is {node.properties.text} </p>
-                </>
-              }
-            >
-              {props.children}
-            </Popover>
-          )}
-        />
-      )}
-      edge={(edge: EdgeProps) => (
-        <Edge
-          {...edge}
-          style={{ stroke: edge.id === '2-4' ? 'blue' : 'red' }}
-        />
-      )}
-      onLayoutChange={layout => console.log('Layout', layout)}
-    />
-  </div>
-);
+        ]}
+        node={(node: NodeProps) => (
+          <Node
+            {...node}
+            onClick={() => console.log(node.properties.data)}
+            style={{ fill: node.properties.data?.gender === 'male' ? 'blue' : 'red' }}
+            tooltip={(props) => (
+              <Popover
+                theme={customTheme}
+                trigger={'hover'}
+                closeOnClick={true}
+                content={
+                  <div>
+                    <h1>This is {node.properties.text}!</h1>
+                    <p>you can also use Popover from other libraries such as Antd</p>
+                  </div>
+                }
+              >
+                {props.children}
+              </Popover>
+            )}
+          />
+
+        )}
+        edge={(edge: EdgeProps) => (
+          <Edge
+            {...edge}
+            style={{ stroke: edge.id === '2-4' ? 'blue' : 'red' }}
+          />
+        )}
+        onLayoutChange={layout => console.log('Layout', layout)}
+      />
+    </div>
+  );
+};
 
 export const Refs = () => {
   const ref = useRef<CanvasRef | null>(null);

diff --git a/stories/Drag.stories.tsx b/stories/Drag.stories.tsx
@@ -3,7 +3,7 @@ import { Canvas } from '../src/Canvas';
 import { Node, Edge, MarkerArrow, Port, Icon, Arrow, Label, Remove, Add, NodeProps } from '../src/symbols';
 import { EdgeData, NodeData } from '../src/types';
 import { createEdgeFromNodes, hasLink, removeAndUpsertNodes } from '../src/helpers';
-import { Popover } from 'antd';
+import { extendComponentTheme, Popover, popoverTheme, PopoverTheme } from 'reablocks';
 
 export default {
   title: 'Demos/Drag',
@@ -190,6 +190,10 @@ export const NodeRearranging = () => {
     }
   ]);
 
+  const customTheme = extendComponentTheme<PopoverTheme>(popoverTheme, {
+    base: 'rounded bg-success-hover text-white font-bold p-3 text-base'
+  });
+
   return (
     <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
       <Canvas
@@ -201,15 +205,19 @@ export const NodeRearranging = () => {
               dragType="node"
               tooltip={(props) => (
                 <Popover
-                  title="Antd Popover"
+                  theme={customTheme}
+                  trigger={'hover'}
+                  closeOnClick={true}
                   content={
-                    <>
-                      <p>this is {node.properties.text} </p>
-                    </>
+                    <div>
+                      <h1>This is {node.properties.text}!</h1>
+                      <p>you can also use Popover from other libraries such as Antd</p>
+                    </div>
                   }
                 >
                   {props.children}
                 </Popover>
+
               )}
             />)
         }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+/* eslint-disable max-len */
+import plugin from 'tailwindcss/plugin';
+import { colorPalette } from 'reablocks';
+
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/reablocks/**/*.{js,jsx,ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: colorPalette.blue[500],
+          active: colorPalette.blue[500],
+          hover: colorPalette.blue[600],
+          inactive: colorPalette.blue[200]
+        },
+        secondary: {
+          DEFAULT: colorPalette.gray[700],
+          active: colorPalette.gray[700],
+          hover: colorPalette.gray[800],
+          inactive: colorPalette.gray[400]
+        },
+        success: {
+          DEFAULT: colorPalette.green[500],
+          active: colorPalette.green[500],
+          hover: colorPalette.green[600]
+        },
+        error: {
+          DEFAULT: colorPalette.red[500],
+          active: colorPalette.red[500],
+          hover: colorPalette.red[600]
+        },
+        warning: {
+          DEFAULT: colorPalette.orange[500],
+          active: colorPalette.orange[500],
+          hover: colorPalette.orange[600]
+        },
+        info: {
+          DEFAULT: colorPalette.blue[500],
+          active: colorPalette.blue[500],
+          hover: colorPalette.blue[600]
+        },
+        background: {
+          level1: colorPalette.white,
+          level2: colorPalette.gray[950],
+          level3: colorPalette.gray[900],
+          level4: colorPalette.gray[800],
+        },
+        panel: {
+          DEFAULT: colorPalette['black-pearl'],
+          accent: colorPalette['charade']
+        },
+        surface: {
+          DEFAULT: colorPalette['charade'],
+          accent: colorPalette.blue[500]
+        },
+        typography: {
+          DEFAULT: colorPalette['athens-gray'],
+        },
+        accent: {
+          DEFAULT: colorPalette['waterloo'],
+          active: colorPalette['anakiwa']
+        },
+      }
+    }
+  },
+  plugins: [
+    plugin(({ addVariant }) => {
+      addVariant('disabled-within', '&:has(input:is(:disabled),button:is(:disabled))');
+    })
+  ],
+};