feat(joint-react): sync with @joint/react-plus + general updates

packages/joint-core/types/joint.d.ts

@@ -2584,17 +2584,17 @@ export namespace dia {
 
 export namespace highlighters {
 
-    import HighlighterView = dia.HighlighterView;
+    type HighlighterView = dia.HighlighterView; 
 
-    interface AddClassHighlighterArguments extends HighlighterView.Options {
+    interface AddClassHighlighterArguments extends dia.HighlighterView.Options {
         className?: string;
     }
 
-    interface OpacityHighlighterArguments extends HighlighterView.Options {
+    interface OpacityHighlighterArguments extends dia.HighlighterView.Options {
         alphaValue?: number;
     }
 
-    interface StrokeHighlighterArguments extends HighlighterView.Options {
+    interface StrokeHighlighterArguments extends dia.HighlighterView.Options {
         padding?: number;
         rx?: number;
         ry?: number;
@@ -2603,7 +2603,7 @@ export namespace highlighters {
         attrs?: attributes.NativeSVGAttributes;
     }
 
-    interface MaskHighlighterArguments extends HighlighterView.Options {
+    interface MaskHighlighterArguments extends dia.HighlighterView.Options {
         padding?: number;
         maskClip?: number;
         deep?: boolean;
@@ -4507,8 +4507,8 @@ export namespace attributes {
         filter?: string | dia.SVGFilterJSON;
         fill?: string | dia.SVGPatternJSON | dia.SVGGradientJSON;
         stroke?: string | dia.SVGPatternJSON | dia.SVGGradientJSON;
-        sourceMarker?: dia.SVGMarkerJSON;
-        targetMarker?: dia.SVGMarkerJSON;
+        sourceMarker?: dia.SVGMarkerJSON | null;
+        targetMarker?: dia.SVGMarkerJSON | null;
         vertexMarker?: dia.SVGMarkerJSON;
         props?: SVGAttributeProps;
         text?: string;

packages/joint-react/.storybook/decorators/with-simple-data.tsx

@@ -1,21 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-perf/jsx-no-new-object-as-prop */
-//@ts-expect-error its js package without types
-import JsonViewer from '@andypf/json-viewer/dist/esm/react/JsonViewer';
 
-import type { HTMLProps, JSX, PropsWithChildren } from 'react';
-import type { InferElement } from '@joint/react';
-import {
-  createElements,
-  createLinks,
-  GraphProvider,
-  MeasuredNode,
-  Paper,
-  useElement,
-} from '@joint/react';
+// @ts-expect-error do not provide typings.
+import JsonViewer from '@andypf/json-viewer/dist/esm/react/JsonViewer';
+import { useCallback, useRef, type HTMLProps, type JSX, type PropsWithChildren } from 'react';
+import { GraphProvider, useNodeSize, type GraphLink } from '@joint/react';
 import { PAPER_CLASSNAME, PRIMARY } from '../theme';
+import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
+import { Paper } from '../../src/components/paper/paper';
+
+export type StoryFunction = PartialStoryFn<any, any>;
+export type StoryCtx = StoryContext<any, any>;
 
-const initialElements = createElements([
+export const testElements = [
   {
     id: '1',
     label: 'Node 1',
@@ -24,6 +21,8 @@ const initialElements = createElements([
     y: 20,
     width: 150,
     height: 50,
+    hoverColor: 'red',
+    angle: 0,
   },
   {
     id: '2',
@@ -33,11 +32,13 @@ const initialElements = createElements([
     y: 250,
     width: 150,
     height: 50,
+    hoverColor: 'blue',
+    angle: 0,
   },
-]);
+];
 
-export type SimpleElement = InferElement<typeof initialElements>;
-const initialLinks = createLinks([
+export type SimpleElement = (typeof testElements)[number];
+export const testLinks: GraphLink[] = [
   {
     id: 'l-1',
     source: '1',
@@ -48,27 +49,28 @@ const initialLinks = createLinks([
       },
     },
   },
-]);
+];
 
 export function SimpleGraphProviderDecorator({ children }: Readonly<PropsWithChildren>) {
   return (
-    <GraphProvider initialElements={initialElements} initialLinks={initialLinks}>
+    <GraphProvider elements={testElements} links={testLinks}>
       {children}
     </GraphProvider>
   );
 }
 
-export function SimpleGraphDecorator(Story: any) {
+export function SimpleGraphDecorator(Story: StoryFunction, { args }: StoryCtx) {
   return (
     <SimpleGraphProviderDecorator>
-      <Story />
+      <Story {...args} />
     </SimpleGraphProviderDecorator>
   );
 }
 
 export function RenderItemDecorator(
   properties: Readonly<{
     renderElement: (element: SimpleElement) => JSX.Element;
+    renderLink?: (link: any) => JSX.Element;
   }>
 ) {
   return (
@@ -79,19 +81,20 @@ export function RenderItemDecorator(
           height={450}
           className={PAPER_CLASSNAME}
           renderElement={properties.renderElement}
+          renderLink={properties.renderLink}
           linkPinning={false}
         />
       </SimpleGraphProviderDecorator>
     </div>
   );
 }
 
-function RenderSimpleRectElement(properties: SimpleElement) {
+function RenderSimpleRectElement(properties: Readonly<SimpleElement>) {
   const { width, color, height } = properties;
   return <rect width={width} height={height} fill={color} />;
 }
 
-export function RenderPaperWithChildren(properties: Readonly<{ children: JSX.Element }>) {
+export function RenderGraphViewWithChildren(properties: Readonly<{ children: JSX.Element }>) {
   return (
     <div style={{ width: '100%', height: 350 }}>
       <SimpleGraphProviderDecorator>
@@ -108,21 +111,35 @@ export function RenderPaperWithChildren(properties: Readonly<{ children: JSX.Ele
   );
 }
 
-export function SimpleRenderItemDecorator(Story: any) {
-  return <RenderItemDecorator renderElement={Story} />;
+export function SimpleRenderItemDecorator(Story: StoryFunction, { args }: StoryCtx) {
+  const component = useCallback(
+    (element: SimpleElement) => <Story {...element} {...args} />,
+    [Story, args]
+  );
+  return <RenderItemDecorator renderElement={component} />;
 }
 
-export function SimpleRenderPaperDecorator(Story: any) {
-  return <RenderPaperWithChildren>{Story}</RenderPaperWithChildren>;
+export function SimpleRenderLinkDecorator(Story: StoryFunction, { args }: StoryCtx) {
+  const component = useCallback(
+    (element: SimpleElement) => <Story {...element} {...args} />,
+    [Story, args]
+  );
+  return (
+    <RenderItemDecorator
+      renderLink={component}
+      // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+      renderElement={({ id }) => <HTMLNode className="node">{id}</HTMLNode>}
+    />
+  );
 }
 
 export function HTMLNode(props: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
-  const { width, height } = useElement();
+  const elementRef = useRef<HTMLDivElement>(null);
+  const { width, height } = useNodeSize(elementRef);
+
   return (
     <foreignObject width={width} height={height} overflow="visible">
-      <MeasuredNode>
-        <div {...props} />
-      </MeasuredNode>
+      <div ref={elementRef} {...props} />
     </foreignObject>
   );
 }

packages/joint-react/.storybook/decorators/with-strict-mode.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 export function withStrictMode(Story: any) {
   return (
-    <React.StrictMode>
-      <Story />
-    </React.StrictMode>
+    //  <React.StrictMode>
+    <Story />
+    // </React.StrictMode>
   );
 }

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

@@ -1,4 +1,7 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable no-shadow */
 import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'node:path';
 import { configureSort } from 'storybook-multilevel-sort';
 
 configureSort({
@@ -23,8 +26,6 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
-    // TODO: this library is not compatible with Vite storybook, so we will wait to fix it and then we can again enable.
-    // '@storybook/addon-storysource',
     '@storybook/addon-links',
     'storybook-addon-performance',
     '@codesandbox/storybook-addon',
@@ -37,5 +38,25 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  tags: {
+    // Custom tags for organizing stories
+    component: {},
+    hook: {},
+    example: {},
+    demo: {},
+    tutorial: {},
+    utils: {},
+  },
+
+  // 👇 extend Vite config here to resolve libraries properly (in storybook)
+  viteFinal: async (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@joint/react': path.resolve(__dirname, '../src/index.ts'),
+      '@joint/react/src/*': path.resolve(__dirname, '../src/*'),
+    };
+    return config;
+  },
 };
 export default config;

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';