feat(joint-react): sync with react plus and general fixes + remove paperProvider

Author: samuelgja

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",

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

@@ -2323,17 +2323,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;
@@ -2342,7 +2342,7 @@ export namespace highlighters {
         attrs?: attributes.NativeSVGAttributes;
     }
 
-    interface MaskHighlighterArguments extends HighlighterView.Options {
+    interface MaskHighlighterArguments extends dia.HighlighterView.Options {
         padding?: number;
         maskClip?: number;
         deep?: boolean;
@@ -4281,8 +4281,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",

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, type HTMLProps, type JSX, type PropsWithChildren } from 'react';
 import {
   createElements,
   createLinks,
   GraphProvider,
   MeasuredNode,
-  Paper,
   useElement,
+  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',
@@ -36,8 +40,8 @@ const initialElements = createElements([
   },
 ]);
 
-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 +56,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 +95,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,12 +112,12 @@ 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>>) {

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,16 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+
+  // 👇 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;