feat(joint-react): update dependencies, refactor components, and enhance performance

- Updated dependencies in yarn.lock, including Babel and added unplugin.
- Refactored GraphProvider and Paper components for improved performance and clarity.
- Removed unused files and hooks to streamline the codebase.
- Enhanced the Storybook setup with a new script for loading react-scan.
- Improved element rendering logic and optimized hooks for better state management.
- Added tests for new functionalities and ensured existing tests are up to date.

Author: samuelgja

packages/joint-react-eslint/eslint.config.mjs

@@ -170,6 +170,7 @@ const config = [
         "error",
         {
           replacements: {
+            dev: false,
             doc: false,
             Props: false,
             props: false,

packages/joint-react/.storybook/preview-head.html

@@ -1,3 +1,58 @@
 <!-- Loads a font from a CDN -->
+<!-- react-scan: Load with delay to avoid freezing Storybook -->
+<script>
+    // Load react-scan UI overlay after Storybook initializes
+    (function () {
+        if (typeof window === 'undefined') return;
+
+        // Wait for DOM and React to be ready
+        function loadReactScan() {
+            if (window.__REACT_SCAN_LOADED) return;
+
+            const script = document.createElement('script');
+            script.src = 'https://unpkg.com/react-scan@latest/dist/auto.global.js';
+            script.async = true;
+            script.onload = function () {
+                window.__REACT_SCAN_LOADED = true;
+
+
+                // Wait a bit for react-scan to initialize, then configure it for iframe
+                setTimeout(function () {
+                    // Access react-scan global API
+                    const reactScan = window.reactScan;
+
+                    if (reactScan && typeof reactScan === 'function') {
+                        // Configure react-scan to work in iframe (Storybook uses iframes)
+                        try {
+                            reactScan({
+                                enabled: false, // Disabled by default - user can enable via toolbar
+                                allowInIframe: true,
+                                showToolbar: true, // Show toolbar so user can toggle it on/off
+                            });
+
+                        } catch (error) {
+                            console.error('❌ Error configuring react-scan:', error);
+                        }
+                    } else {
+                        console.warn('⚠️ react-scan function not found');
+                    }
+                }, 500);
+            };
+            script.onerror = function () {
+                console.error('❌ Failed to load react-scan');
+            };
+            document.head.appendChild(script);
+        }
+
+        // Try loading after a delay
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', function () {
+                setTimeout(loadReactScan, 3000);
+            });
+        } else {
+            setTimeout(loadReactScan, 3000);
+        }
+    })();
+</script>
 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

packages/joint-react/.storybook/preview.ts

@@ -1,4 +1,3 @@
-import './wdyr';
 import type { Preview } from '@storybook/react';
 import { withPerformance } from 'storybook-addon-performance';
 import { theme } from './theme';

packages/joint-react/.storybook/wdyr.ts

@@ -73,9 +73,9 @@
     "@types/react": "19.1.12",
     "@types/react-dom": "19.1.9",
     "@types/react-test-renderer": "19.1.0",
+    "@types/scheduler": "^0",
     "@types/use-sync-external-store": "1.5.0",
     "@vitejs/plugin-react": "^5.0.2",
-    "@welldone-software/why-did-you-render": "10.0.1",
     "canvas": "^3.1.0",
     "eslint": "9.33.0",
     "glob": "^11.0.1",
@@ -88,6 +88,7 @@
     "react-docgen-typescript-plugin": "^1.0.8",
     "react-dom": "^19.1.1",
     "react-redux": "^9.2.0",
+    "react-scan": "^0.4.3",
     "react-test-renderer": "^19.1.1",
     "redux": "^5.0.1",
     "storybook": "^8.6.14",
@@ -108,6 +109,7 @@
   },
   "dependencies": {
     "@joint/core": "workspace:*",
+    "scheduler": "^0.27.0",
     "use-sync-external-store": "^1.4.0"
   },
   "peerDependencies": {

packages/joint-react/package.json

@@ -121,11 +121,7 @@ function Component() {
       setIsReady(true);
     }, 1000);
   }, []);
-  return (
-    isReady && (
-      <Paper interactive={false} className={PAPER_CLASSNAME} renderElement={RenderHTMLElement} />
-    )
-  );
+  return isReady && <Paper className={PAPER_CLASSNAME} renderElement={RenderHTMLElement} />;
 }
 
 export const ConditionalRender: Story = {