chore(client): system upgrade react 19 and react-resizable to native …

…approach (#286) * chore: fix redundant config duplication Signed-off-by: Vitaly Kuprin <vitas_s@inbox.lv> * chore: native resizing approach Signed-off-by: Vitaly Kuprin <vitas_s@inbox.lv> * chore: libs upgrade Signed-off-by: Vitaly Kuprin <vitas_s@inbox.lv> --------- Signed-off-by: Vitaly Kuprin <vitas_s@inbox.lv>
ligomoku · Dec 8, 2024 · 008ab6c · 008ab6c
1 parent b7d1507
commit 008ab6c
Show file tree

Hide file tree

Showing 10 changed files with 747 additions and 774 deletions.
diff --git a/GomokuClient/package.json b/GomokuClient/package.json
@@ -28,9 +28,9 @@
     "clean": "find . -name node_modules -type d -prune -exec rm -rf '{}' + && find . -name .turbo -type d -prune -exec rm -rf '{}' + && find . -name dist -type d -prune -exec rm -rf '{}' +"
   },
   "devDependencies": {
-    "@tanstack/router-cli": "^1.84.4",
-    "prettier": "^3.4.1",
-    "prettier-plugin-classnames": "^0.7.4",
+    "@tanstack/router-cli": "^1.86.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-classnames": "^0.7.5",
     "prettier-plugin-merge": "^0.7.1",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "turbo": "^2.3.3"

diff --git a/GomokuClient/packages/eslint-config/package.json b/GomokuClient/packages/eslint-config/package.json
@@ -12,17 +12,17 @@
   },
   "dependencies": {
     "@eslint/js": "^9.16.0",
-    "@tanstack/eslint-plugin-query": "^5.61.6",
-    "@tanstack/eslint-plugin-router": "^1.82.12",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
+    "@tanstack/eslint-plugin-router": "^1.85.3",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "eslint": "^9.16.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.11.1",
-    "typescript-eslint": "^8.16.0"
+    "typescript-eslint": "^8.17.0"
   }
 }
diff --git a/GomokuClient/packages/gomoku-api/package.json b/GomokuClient/packages/gomoku-api/package.json
@@ -22,6 +22,6 @@
     "@kubb/swagger": "^2.28.4",
     "@kubb/swagger-client": "^2.28.4",
     "@kubb/swagger-tanstack-query": "^2.28.4",
-    "@tanstack/react-query": "^5.62.0"
+    "@tanstack/react-query": "^5.62.3"
   }
 }
diff --git a/GomokuClient/packages/gomoku-core/package.json b/GomokuClient/packages/gomoku-core/package.json
@@ -26,52 +26,52 @@
     "messages:compile": "lingui compile --typescript"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^5.17.1",
+    "@clerk/clerk-react": "^5.19.0",
     "@gomoku/api": "*",
     "@gomoku/story": "*",
     "@gomoku/tailwind-config": "*",
-    "@lingui/macro": "^5.0.0",
-    "@lingui/react": "^5.0.0",
+    "@lingui/macro": "^5.1.0",
+    "@lingui/react": "^5.1.0",
     "@microsoft/signalr": "^8.0.7",
-    "@sentry/react": "^8.41.0",
-    "@sentry/vite-plugin": "^2.22.6",
-    "@tanstack/react-query": "^5.62.0",
-    "@tanstack/react-query-devtools": "5.62.0",
-    "@tanstack/react-router": "^1.85.0",
+    "@sentry/react": "^8.42.0",
+    "@sentry/vite-plugin": "^2.22.7",
+    "@tanstack/react-query": "^5.62.3",
+    "@tanstack/react-query-devtools": "5.62.3",
+    "@tanstack/react-router": "^1.87.0",
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-react": "^4.3.4",
     "clsx": "^2.1.1",
     "jwt-decode": "^4.0.0",
-    "lucide-react": "^0.462.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recharts": "^2.13.3",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.14.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "typed-local-store": "^2.0.2",
     "uuid": "^11.0.3",
-    "vite": "^6.0.1"
+    "vite": "^6.0.3"
   },
   "devDependencies": {
-    "@clerk/types": "^4.35.0",
+    "@clerk/types": "^4.39.0",
     "@gomoku/eslint-config": "*",
-    "@lingui/cli": "^5.0.0",
-    "@tanstack/eslint-plugin-query": "^5.61.6",
-    "@tanstack/router-devtools": "^1.85.0",
-    "@tanstack/router-plugin": "^1.84.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@lingui/cli": "^5.1.0",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
+    "@tanstack/router-devtools": "^1.87.0",
+    "@tanstack/router-plugin": "^1.86.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "babel-plugin-macros": "^3.1.0",
     "eslint": "^9.16.0",
     "globals": "^15.13.0",
     "postcss": "^8.4.49",
-    "prettier": "3.4.1",
+    "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.16.0"
+    "typescript-eslint": "^8.17.0"
   },
   "exports": {
     ".": {

diff --git a/GomokuClient/packages/gomoku-core/tailwind.config.js b/GomokuClient/packages/gomoku-core/tailwind.config.js
@@ -1,4 +1,3 @@
-// gomoku-story/tailwind.config.js and gomoku-core/tailwind.config.js
 const sharedConfig = require("@gomoku/tailwind-config");
 
 /** @type {import('tailwindcss').Config} */

diff --git a/GomokuClient/packages/gomoku-story/package.json b/GomokuClient/packages/gomoku-story/package.json
@@ -43,27 +43,25 @@
     "@radix-ui/react-toast": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.462.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-resizable": "^3.0.5"
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.5.0-alpha.14",
-    "@storybook/addon-interactions": "^8.4.6",
-    "@storybook/addon-links": "^8.5.0-alpha.14",
+    "@storybook/addon-essentials": "^8.5.0-alpha.18",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.5.0-alpha.18",
     "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addons": "7.6.20",
-    "@storybook/blocks": "^8.5.0-alpha.14",
-    "@storybook/react": "^8.5.0-alpha.14",
-    "@storybook/react-vite": "^8.4.6",
-    "@storybook/test": "^8.5.0-alpha.14",
-    "@types/react-resizable": "^3.0.8",
+    "@storybook/blocks": "^8.5.0-alpha.18",
+    "@storybook/react": "^8.5.0-alpha.18",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.5.0-alpha.18",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.49",
-    "storybook": "^8.5.0-alpha.14",
-    "tailwindcss": "^3.4.15",
-    "vite": "^6.0.1",
+    "storybook": "^8.5.0-alpha.18",
+    "tailwindcss": "^3.4.16",
+    "vite": "^6.0.3",
     "vite-plugin-dts": "^4.3.0"
   }
 }
diff --git a/GomokuClient/packages/gomoku-story/src/components/Board/Board.tsx b/GomokuClient/packages/gomoku-story/src/components/Board/Board.tsx
@@ -1,12 +1,10 @@
 import { cva } from "class-variance-authority";
-import { memo, useMemo, useState } from "react";
-import { ResizableBox } from "react-resizable";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 
 import type { TileColor } from "@/hooks";
 import type { SignalClientMessages, SwaggerTypes } from "@gomoku/api";
-import type { CSSProperties } from "react";
+import type { CSSProperties, MouseEvent } from "react";
 
-import "react-resizable/css/styles.css";
 import { useMobileDesign } from "@/hooks";
 import { Button } from "@/ui";
 
@@ -81,7 +79,6 @@ const Tile = memo(
       prevProps.yIndex === nextProps.yIndex &&
       prevProps.showAnnotations === nextProps.showAnnotations &&
       prevProps.onTileClick === nextProps.onTileClick &&
-      //TODO: check if we need to do JSON.stringify here
       prevProps.winningSequence?.length === nextProps.winningSequence?.length
     );
   },
@@ -119,6 +116,45 @@ export const Board = ({
   const isMobile = useMobileDesign(1488);
   const [boardSize, setBoardSize] = useState(window.innerWidth / 2.2);
   const [showAnnotations, setShowAnnotations] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeRef = useRef<HTMLDivElement>(null);
+  const minSize = isMobile ? 300 : 400;
+
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: globalThis.MouseEvent) => {
+      if (!isResizing) return;
+
+      const container = resizeRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const newSize = Math.max(
+        minSize,
+        Math.min(e.clientX - rect.left, e.clientY - rect.top),
+      );
+
+      setBoardSize(newSize);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, minSize]);
 
   const tilesElements = useMemo(
     () =>
@@ -141,27 +177,19 @@ export const Board = ({
 
   const calculatedSize = boardSize / size;
   const calculatedMobileSize = isMobile ? 100 : 80;
-  const minConstraints = isMobile ? [300, 300] : [400, 400];
 
   if (!isMobile) {
     return (
-      <ResizableBox
-        width={boardSize}
-        height={boardSize}
-        onResize={(_event, { size }) => {
-          setBoardSize(size.width);
+      <div
+        ref={resizeRef}
+        className="relative"
+        style={{
+          width: `${boardSize}px`,
+          height: `${boardSize}px`,
         }}
-        resizeHandles={["se"]}
-        minConstraints={[minConstraints[0], minConstraints[1]]}
       >
-        <div className="flex flex-col items-center">
-          <div
-            className={"rounded-lg bg-[#ba8c63] shadow-md"}
-            style={{
-              width: "100%",
-              height: "100%",
-            }}
-          >
+        <div className="flex h-full flex-col items-center">
+          <div className="h-full w-full rounded-lg bg-[#ba8c63] shadow-md">
             <div
               className="grid rounded-lg"
               style={{
@@ -181,13 +209,18 @@ export const Board = ({
                 hover:bg-[#4a4a4a] focus-visible:outline-none focus-visible:ring-1
                 disabled:pointer-events-none disabled:opacity-50"
             >
-              {showAnnotations && !isMobile
-                ? "Hide Annotations"
-                : "Show Annotations"}
+              {showAnnotations ? "Hide Annotations" : "Show Annotations"}
             </Button>
           </div>
         </div>
-      </ResizableBox>
+        <div
+          className="absolute bottom-0 right-0 h-4 w-4 cursor-se-resize"
+          onMouseDown={handleMouseDown}
+          style={{
+            background: "linear-gradient(135deg, transparent 50%, #666 50%)",
+          }}
+        />
+      </div>
     );
   }
 
@@ -207,3 +240,5 @@ export const Board = ({
     </div>
   );
 };
+
+export default Board;