build(deps): Migrate to React Flow v12 and update website dependencies (#4330)

* build(deps): Update dependencies in website

* Update reactflow to @xyflow/react

website/package.json

@@ -17,31 +17,31 @@
     "format": "biome format --write"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.8.0",
-    "@docusaurus/faster": "^3.8.0",
-    "@docusaurus/plugin-client-redirects": "^3.8.0",
-    "@docusaurus/plugin-content-docs": "^3.8.0",
-    "@docusaurus/preset-classic": "^3.8.0",
-    "@docusaurus/theme-common": "^3.8.0",
-    "@easyops-cn/docusaurus-search-local": "^0.49.2",
+    "@docusaurus/core": "^3.8.1",
+    "@docusaurus/faster": "^3.8.1",
+    "@docusaurus/plugin-client-redirects": "^3.8.1",
+    "@docusaurus/plugin-content-docs": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-common": "^3.8.1",
+    "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@mdx-js/react": "^3.1.0",
-    "chart.js": "^4.4.9",
+    "@xyflow/react": "^12.8.2",
+    "chart.js": "^4.5.0",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
-    "react": "^18.3.1",
+    "react": "^19.1.1",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^18.3.1",
-    "reactflow": "^11.11.4",
-    "styled-components": "^6.1.18"
+    "react-dom": "^19.1.1",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.3",
-    "@docusaurus/module-type-aliases": "^3.8.0",
-    "@docusaurus/tsconfig": "^3.8.0",
-    "@docusaurus/types": "^3.8.0",
-    "@types/react": "^18.3.23",
+    "@docusaurus/module-type-aliases": "^3.8.1",
+    "@docusaurus/tsconfig": "^3.8.1",
+    "@docusaurus/types": "^3.8.1",
+    "@types/react": "^19.1.10",
     "typescript": "5.8.3",
-    "webpack": "5.100.0"
+    "webpack": "5.101.1"
   },
   "browserslist": {
     "production": [

website/src/components/architecture/BaseFlowChart.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react'
-import ReactFlow, { Background, Controls, type Edge, Handle, type Node, Position, useEdgesState, useNodesState } from 'reactflow'
-import 'reactflow/dist/style.css'
+import { useColorMode } from '@docusaurus/theme-common'
+import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 
 export const multiplier = 225
 export const height = 40
-export const widthMultiplier = 0.75
 
 export const defaultNodeOptions = {
   targetPosition: Position.Left,
@@ -18,44 +17,15 @@ export const defaultGroupOptions = {
 }
 
 export default function BaseFlowChart({ initialNodes = [], initialEdges = [] }: { initialNodes: Node[]; initialEdges: Edge[] }) {
-  function getWindowDimensions() {
-    const { innerWidth: width, innerHeight: height } = window
-    return {
-      width,
-      height,
-    }
-  }
-
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions())
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
   const [nodes] = useNodesState(initialNodes)
   const [edges] = useEdgesState(initialEdges)
 
+  const color = useColorMode()
+
   return (
     <>
       <div
         style={{
-          width:
-            windowDimensions.width >= 997
-              ? `${
-                  (100 *
-                    ((windowDimensions.width - 300 - (windowDimensions.width >= 1620 ? (windowDimensions.width - 1620) * 0.5 : 0)) /
-                      windowDimensions.width) -
-                    2) *
-                  widthMultiplier
-                }vw`
-              : '95vw',
           height: '25vh',
         }}
       >
@@ -63,6 +33,7 @@ export default function BaseFlowChart({ initialNodes = [], initialEdges = [] }:
           nodes={nodes}
           edges={edges}
           defaultEdgeOptions={{ focusable: false, animated: true }}
+          colorMode={color.isDarkTheme ? 'dark' : 'light'}
           nodeTypes={{
             baseLineNode: () => (
               <div style={{ height: '1px', width: '20px' }}>

website/src/components/architecture/FlowChart.tsx

@@ -1,5 +1,5 @@
-import type { Edge, Node } from 'reactflow'
-import 'reactflow/dist/style.css'
+import type { Edge, Node } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart'
 
 const initialNodes: Node[] = [

website/src/components/architecture/FlowChart2.tsx

@@ -1,5 +1,5 @@
-import { type Edge, type Node, Position } from 'reactflow'
-import 'reactflow/dist/style.css'
+import { type Edge, type Node, Position } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 import BaseFlowChart, { defaultGroupOptions, defaultNodeOptions, multiplier } from './BaseFlowChart'
 
 const initialNodes: Node[] = [
@@ -74,7 +74,7 @@ const initialNodes: Node[] = [
     position: { x: 0.125 * multiplier, y: 20 },
     data: { label: 'webSocket' },
     ...defaultNodeOptions,
-    parentNode: 'shard-1',
+    parentId: 'shard-1',
     extent: 'parent',
   },
   {
@@ -82,7 +82,7 @@ const initialNodes: Node[] = [
     position: { x: 1.125 * multiplier, y: 20 },
     data: { label: 'HandleMessage' },
     ...defaultNodeOptions,
-    parentNode: 'shard-1',
+    parentId: 'shard-1',
     extent: 'parent',
   },
   {
@@ -98,7 +98,7 @@ const initialNodes: Node[] = [
     position: { x: 0.125 * multiplier, y: 20 },
     data: { label: 'webSocket' },
     ...defaultNodeOptions,
-    parentNode: 'shard-2',
+    parentId: 'shard-2',
     extent: 'parent',
   },
   {
@@ -106,7 +106,7 @@ const initialNodes: Node[] = [
     position: { x: 1.125 * multiplier, y: 20 },
     data: { label: 'HandleMessage' },
     ...defaultNodeOptions,
-    parentNode: 'shard-2',
+    parentId: 'shard-2',
     extent: 'parent',
   },
   {
@@ -122,7 +122,7 @@ const initialNodes: Node[] = [
     position: { x: 0.125 * multiplier, y: 20 },
     data: { label: 'webSocket' },
     ...defaultNodeOptions,
-    parentNode: 'shard-3',
+    parentId: 'shard-3',
     extent: 'parent',
   },
   {
@@ -130,7 +130,7 @@ const initialNodes: Node[] = [
     position: { x: 1.125 * multiplier, y: 20 },
     data: { label: 'HandleMessage' },
     ...defaultNodeOptions,
-    parentNode: 'shard-3',
+    parentId: 'shard-3',
     extent: 'parent',
   },
   {
@@ -146,7 +146,7 @@ const initialNodes: Node[] = [
     position: { x: 0.125 * multiplier, y: 20 },
     data: { label: 'webSocket' },
     ...defaultNodeOptions,
-    parentNode: 'shard-n',
+    parentId: 'shard-n',
     extent: 'parent',
   },
   {
@@ -154,7 +154,7 @@ const initialNodes: Node[] = [
     position: { x: 1.125 * multiplier, y: 20 },
     data: { label: 'HandleMessage' },
     ...defaultNodeOptions,
-    parentNode: 'shard-n',
+    parentId: 'shard-n',
     extent: 'parent',
   },
   {

website/src/components/architecture/FlowChart3.tsx

@@ -1,8 +1,9 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { Background, Controls, type Edge, Handle, type Node, Position, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
-import ReactFlow, { Background, Controls, type Edge, Handle, type Node, Position, useEdgesState, useNodesState } from 'reactflow'
-import 'reactflow/dist/style.css'
-import { defaultNodeOptions, height, multiplier, widthMultiplier } from './BaseFlowChart'
+import '@xyflow/react/dist/style.css'
+import { defaultNodeOptions, height, multiplier } from './BaseFlowChart'
 
 const handlers: Record<
   string,
@@ -30,31 +31,8 @@ const handlers: Record<
 }
 
 export default function FlowChart() {
-  function getWindowDimensions() {
-    const { innerWidth: width, innerHeight: height } = window
-    return {
-      width,
-      height,
-    }
-  }
-
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions())
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
   const transformers = []
-
   const events = []
-
   const initialNodes: Node[] = [
     {
       id: 'baseNode-gateway',
@@ -294,7 +272,6 @@ export default function FlowChart() {
 
   const [nodes] = useNodesState(initialNodes)
   const [edges, setEdges] = useEdgesState(initialEdges)
-  const [, setHandlerIndex] = useState(0)
   const [userClick, setUserClick] = useState(false)
 
   const nodeMouseHandler = (_: React.MouseEvent, node: Node, userTrigger = true) => {
@@ -433,7 +410,6 @@ export default function FlowChart() {
           false,
         )
       }
-      setHandlerIndex(randomIndex)
     }, 1000)
     return () => {
       clearInterval(interval)
@@ -451,20 +427,19 @@ export default function FlowChart() {
     }
   }, [userClick])
 
+  const color = useColorMode()
+
   return (
     <>
       <div
         style={{
-          width:
-            windowDimensions.width >= 997
-              ? `${(100 * ((windowDimensions.width - 300 - (windowDimensions.width >= 1620 ? (windowDimensions.width - 1620) * 0.5 : 0)) / windowDimensions.width) - 2) * widthMultiplier}vw`
-              : '95vw',
           height: '50vh',
         }}
       >
         <ReactFlow
           nodes={nodes}
           edges={edges}
+          colorMode={color.isDarkTheme ? 'dark' : 'light'}
           defaultEdgeOptions={{ focusable: false }}
           onNodeDoubleClick={nodeMouseHandler}
           onNodeClick={nodeMouseHandler}

website/src/components/architecture/FlowChart4.tsx

@@ -1,5 +1,5 @@
-import type { Edge, Node } from 'reactflow'
-import 'reactflow/dist/style.css'
+import type { Edge, Node } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 import BaseFlowChart, { defaultNodeOptions, multiplier } from './BaseFlowChart'
 
 const initialNodes: Node[] = [

website/src/components/bigbotguide/GatewayFlowChart.tsx

@@ -1,5 +1,5 @@
-import ReactFlow, { Background, Controls, type Edge, type Node, Position } from 'reactflow'
-import 'reactflow/dist/style.css'
+import { Background, Controls, type Edge, type Node, Position, ReactFlow } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
 
 export const defaultNodeOptions = {
   targetPosition: Position.Top,
@@ -116,11 +116,14 @@ const edges: Edge<any>[] = [
 ]
 
 function Flow() {
+  const colorMode = document.documentElement.dataset['theme'] || 'light'
+
   return (
     <div style={{ height: '40vh' }}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
+        colorMode={colorMode === 'dark' ? 'dark' : 'light'}
         nodeTypes={{
           baseLineNodeText: (n) => (
             <div

website/src/components/header/index.tsx

@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link'
 import { Button, Header, HeaderBody, Highlight } from '@site/src/styling'
 
-export default function DiscordenoHeader(): JSX.Element {
+export default function DiscordenoHeader() {
   return (
     <>
       <Header>

website/src/components/home/features/feature.tsx

@@ -1,7 +1,7 @@
 import type { FeatureList } from '@site/src/types'
 import clsx from 'clsx'
 
-export default function Feature({ data }: FeatureList): JSX.Element {
+export default function Feature({ data }: FeatureList) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">{data.feature.Svg}</div>

website/src/components/home/features/index.tsx

@@ -109,7 +109,7 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
-export default function DiscordenoFeatures(): JSX.Element {
+export default function DiscordenoFeatures() {
   return (
     <section className={styles.features}>
       <div className="container">

website/src/types.ts

@@ -7,8 +7,8 @@ export interface FeatureList {
 
 export interface FeatureItem {
   title: string
-  Svg: JSX.Element
-  description: JSX.Element
+  Svg: React.JSX.Element
+  description: React.JSX.Element
 }
 
 export enum DiscordLibraries {