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

examples/joint-react/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",

examples/joint-react/src/App.tsx

@@ -11,7 +11,7 @@ import {
     useCellId,
     useGraph,
     usePaper,
-    useUpdateElement,
+    useCellActions,
     type GraphElement,
     type PaperProps,
     type RenderElement,
@@ -142,6 +142,7 @@ function MessageComponent({
     width,
     height,
     isSelected,
+    id,
 }: ElementWithSelected<MessageElement>) {
     let iconContent;
     let titleText;
@@ -159,8 +160,8 @@ function MessageComponent({
             break;
         }
     }
-    const id = useCellId();
-    const setMessage = useUpdateElement<MessageElement>(id, 'inputText');
+    const { set } = useCellActions<MessageElement>();
+    // const setMessage = useUpdateElement<MessageElement>(id, 'inputText');
     return (
         <Highlighter.Stroke
             padding={10}
@@ -189,7 +190,7 @@ function MessageComponent({
                                 className="w-full border-1 border-solid border-rose-white rounded-lg p-2 mt-3"
                                 placeholder="Type here..."
                                 onChange={({ target: { value }}) => {
-                                    setMessage(value);
+                                    set(id, (previous: MessageElement) => ({ ...previous, inputText: value }));
                                 }}
                             />
                         </div>
@@ -472,7 +473,7 @@ function Main() {
 
 export default function App() {
     return (
-        <GraphProvider initialElements={elements} initialLinks={links}>
+        <GraphProvider elements={elements} links={links}>
             <Main />
         </GraphProvider>
     );

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

@@ -2583,17 +2583,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;
@@ -2602,7 +2602,7 @@ export namespace highlighters {
         attrs?: attributes.NativeSVGAttributes;
     }
 
-    interface MaskHighlighterArguments extends HighlighterView.Options {
+    interface MaskHighlighterArguments extends dia.HighlighterView.Options {
         padding?: number;
         maskClip?: number;
         deep?: boolean;
@@ -4505,8 +4505,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-eslint/eslint.config.mjs

@@ -21,7 +21,7 @@ const tsConfigPath = path.resolve("./", "tsconfig.json");
 const config = [
   // Global ignores
   {
-    ignores: ["node_modules", "dist", "tsconfig.json"],
+    ignores: ["node_modules", "dist", "bundle-dist", "tsconfig.json"],
   },
 
   // Base recommended configs
@@ -124,7 +124,7 @@ const config = [
       "react-hooks/exhaustive-deps": [
         "error",
         {
-          additionalHooks: "useInitAndSync",
+          additionalHooks: "",
         },
       ],
 
@@ -139,6 +139,9 @@ const config = [
       "sonarjs/cognitive-complexity": "error",
       "sonarjs/prefer-immediate-return": "off",
       "sonarjs/todo-tag": "warn",
+      // We do not switch to 19 yet! Remove in major React upgrade (with not support for lower version than react 19!)
+      "@eslint-react/no-use-context": "off",
+      "@eslint-react/no-forward-ref": "off",
 
       // JSDoc
       "jsdoc/require-description": "error",
@@ -167,6 +170,7 @@ const config = [
         "error",
         {
           replacements: {
+            dev: false,
             doc: false,
             Props: false,
             props: false,

packages/joint-react-eslint/package.json

@@ -6,28 +6,31 @@
   "module": "./eslint.config.mjs",
   "sideEffects": false,
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.28.0",
-    "@eslint/compat": "^1.1.1",
-    "@eslint/js": "9.24.0",
-    "@stylistic/eslint-plugin": "4.2.0",
-    "@stylistic/eslint-plugin-jsx": "4.2.0",
-    "@stylistic/eslint-plugin-ts": "4.2.0",
-    "@typescript-eslint/eslint-plugin": "8.29.0",
-    "@typescript-eslint/parser": "8.29.0",
-    "eslint": "9.24.0",
-    "eslint-plugin-depend": "0.12.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "5.1.0",
+    "@eslint-react/eslint-plugin": "1.52.4",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "9.33.0",
+    "@stylistic/eslint-plugin": "5.2.3",
+    "@stylistic/eslint-plugin-jsx": "4.4.1",
+    "@stylistic/eslint-plugin-ts": "4.4.1",
+    "@typescript-eslint/eslint-plugin": "8.39.1",
+    "@typescript-eslint/parser": "8.39.1",
+    "eslint": "9.33.0",
+    "eslint-plugin-depend": "1.2.0",
+    "eslint-plugin-jest": "29.0.1",
+    "eslint-plugin-jsdoc": "54.0.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-perf": "^3.3.3",
     "eslint-plugin-security": "3.0.1",
-    "eslint-plugin-sonarjs": "3.0.2",
-    "eslint-plugin-unicorn": "58.0.0",
-    "typescript-eslint": "8.29.0"
+    "eslint-plugin-sonarjs": "3.0.4",
+    "eslint-plugin-unicorn": "60.0.0",
+    "typescript-eslint": "8.39.1"
   },
   "peerDependencies": {
-    "eslint": "9.24.0",
-    "typescript": "^5.0.0"
+    "eslint": "9.33.0",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   }
 }

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

@@ -1,21 +1,25 @@
 /* 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';
+// @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 {
   createElements,
   createLinks,
   GraphProvider,
-  MeasuredNode,
-  Paper,
   useElement,
+  useNodeSize,
+  type InferElement,
 } 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 = createElements([
   {
     id: '1',
     label: 'Node 1',
@@ -24,6 +28,8 @@ const initialElements = createElements([
     y: 20,
     width: 150,
     height: 50,
+    hoverColor: 'red',
+    angle: 0,
   },
   {
     id: '2',
@@ -33,11 +39,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 = InferElement<typeof testElements>;
+export const testLinks = createLinks([
   {
     id: 'l-1',
     source: '1',
@@ -52,16 +60,16 @@ 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>
   );
 }
@@ -91,7 +99,7 @@ function RenderSimpleRectElement(properties: SimpleElement) {
   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 +116,21 @@ export function RenderPaperWithChildren(properties: Readonly<{ children: JSX.Ele
   );
 }
 
-export function SimpleRenderItemDecorator(Story: any) {
-  return <RenderItemDecorator renderElement={Story} />;
-}
-
-export function SimpleRenderPaperDecorator(Story: any) {
-  return <RenderPaperWithChildren>{Story}</RenderPaperWithChildren>;
+export function SimpleRenderItemDecorator(Story: StoryFunction, { args }: StoryCtx) {
+  const component = useCallback(
+    (element: SimpleElement) => <Story {...element} {...args} />,
+    [Story, args]
+  );
+  return <RenderItemDecorator renderElement={component} />;
 }
 
 export function HTMLNode(props: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
   const { width, height } = useElement();
+  const elementRef = useRef<HTMLDivElement>(null);
+  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;