chore: Upgrade storybook to V8 and init react-dag-editor-next package

nx.json

@@ -36,7 +36,9 @@
   ],
   "generators": {
     "@nx/react": {
-      "library": {}
+      "library": {
+        "unitTestRunner": "jest"
+      }
     }
   }
 }

package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "build": "yarn nx run-many --target=build --all",
-    "lint": "yarn nx run-many --target=lint --all",
-    "test": "yarn nx test react-dag-editor"
+    "build": "yarn nx run-many --target=build",
+    "lint": "yarn nx run-many --target=lint",
+    "test": "yarn nx run-many --target=test"
   },
   "private": true,
   "dependencies": {
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
+    "@chromatic-com/storybook": "1",
     "@fluentui/merge-styles": "^8.6.8",
     "@nx/eslint": "19.1.0",
     "@nx/eslint-plugin": "19.1.0",
@@ -25,13 +26,12 @@
     "@nx/storybook": "19.1.0",
     "@nx/vite": "19.1.0",
     "@nx/web": "19.1.0",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/core-server": "7.6.19",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react-vite": "7.6.19",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/core-server": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
+    "@storybook/test": "8.1.5",
     "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "~1.8.0",
     "@swc/core": "~1.3.85",
     "@swc/helpers": "~0.5.2",
@@ -45,6 +45,7 @@
     "@typescript-eslint/parser": "^7.3.0",
     "@vitejs/plugin-react": "^4.2.0",
     "@vitest/ui": "^1.3.1",
+    "babel-jest": "^29.4.1",
     "dompurify": "^3.1.4",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "^9.0.0",
@@ -62,14 +63,15 @@
     "react-jss": "^10.10.0",
     "react-test-renderer": "^18.3.1",
     "sass": "^1.55.0",
-    "storybook": "7.6.19",
+    "storybook": "^8.1.5",
     "toposort": "^2.0.2",
     "ts-jest": "^29.1.4",
     "ts-node": "10.9.1",
     "typescript": "^5.4.5",
     "uuid": "^9.0.1",
     "vite": "~5.0.0",
     "vite-plugin-dts": "~3.8.1",
+    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.3.1"
   },
   "workspaces": [

packages/react-dag-editor-next/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/react-dag-editor-next/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/react-dag-editor-next/.storybook/main.ts

@@ -0,0 +1,46 @@
+import { dirname, join } from "path";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    "@chromatic-com/storybook",
+  ],
+  async viteFinal(viteConfig) {
+    return mergeConfig(viteConfig, {
+      plugins: [
+        tsconfigPaths({
+          projects: ["../../tsconfig.base.json"],
+        }),
+      ],
+    });
+  },
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {
+      builder: {
+        viteConfigPath: "vite.config.ts",
+      },
+    },
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

packages/react-dag-editor-next/.storybook/preview.ts

@@ -0,0 +1 @@
+export const tags = ["autodocs"];

packages/react-dag-editor-next/README.md

@@ -0,0 +1,7 @@
+# react-dag-editor-next
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test react-dag-editor-next` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/react-dag-editor-next/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: "react-dag-editor-next",
+  preset: "../../jest.preset.js",
+  transform: {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nx/react/plugins/jest",
+    "^.+\\.[tj]sx?$": ["babel-jest", { presets: ["@nx/react/babel"] }],
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../coverage/packages/react-dag-editor-next",
+};

packages/react-dag-editor-next/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "react-dag-editor-next",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

packages/react-dag-editor-next/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "react-dag-editor-next",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-dag-editor-next/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project react-dag-editor-next --web",
+  "targets": {}
+}

packages/react-dag-editor-next/src/components/Canvas.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import { ReactDagEditor, Graph, createGraphState, IDispatch, GraphConfigBuilder } from "react-dag-editor";
+import { IGraphState } from "../types/core";
+import { SingleGraphViewModel } from "../viewmodels/SingleGraphViewModel";
+
+export interface ICanvasProps {
+  viewModel: SingleGraphViewModel;
+}
+
+export const Canvas: FC<ICanvasProps> = ({ viewModel }) => {
+  const graphConfig = GraphConfigBuilder.default<never, never, never>().build();
+  const state: IGraphState = createGraphState<never, never, never>({
+    data: viewModel.getData(),
+    settings: {
+      graphConfig,
+    },
+  });
+
+  return (
+    <ReactDagEditor state={state} dispatch={viewModel.dispatch.bind(viewModel) as IDispatch}>
+      <Graph />
+    </ReactDagEditor>
+  );
+};

packages/react-dag-editor-next/src/components/Palette.tsx

@@ -0,0 +1,5 @@
+import { FC } from "react";
+
+export const Palette: FC = () => {
+  return <>Palette</>;
+};

packages/react-dag-editor-next/src/components/ReactDagEditor.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { SingleGraphViewModel } from "../viewmodels/SingleGraphViewModel";
+import { Canvas } from "./Canvas";
+
+export interface IReactDagEditorProps {
+  viewModel: SingleGraphViewModel;
+}
+
+export const ReactDagEditor: FC<IReactDagEditorProps> = ({ viewModel }) => {
+  return (
+    <div>
+      <Canvas viewModel={viewModel} />
+    </div>
+  );
+};

packages/react-dag-editor-next/src/components/Toolbar.tsx

@@ -0,0 +1,5 @@
+import { FC } from "react";
+
+export const Toolbar: FC = () => {
+  return <>Toolbar</>;
+};

packages/react-dag-editor-next/src/index.ts

@@ -0,0 +1,11 @@
+// components
+export * from "./components/ReactDagEditor";
+export * from "./components/Canvas";
+export * from "./components/Toolbar";
+export * from "./components/Palette";
+
+// viewmodels
+export * from "./viewmodels/SingleGraphViewModel";
+
+// types
+export * from "./types/core";

packages/react-dag-editor-next/src/types/core.ts

@@ -0,0 +1,5 @@
+import { ICanvasData as ICanvasData$, GraphModel as GraphModel$, IGraphState as IGraphState$ } from "react-dag-editor";
+
+export type ICanvasData = ICanvasData$<never, never, never>;
+export type GraphModel = GraphModel$<never, never, never>;
+export type IGraphState = IGraphState$<never, never, never>;

packages/react-dag-editor-next/src/viewmodels/SingleGraphViewModel.ts

@@ -0,0 +1,26 @@
+import { GraphModel, IEvent, createGraphState, getGraphReducer } from "react-dag-editor";
+import { ICanvasData, IGraphState } from "../types/core";
+
+export class SingleGraphViewModel {
+  private graphModel = GraphModel.empty<never, never, never>();
+
+  public getData(): GraphModel<never, never, never> {
+    return this.graphModel;
+  }
+
+  public setData(data: ICanvasData): SingleGraphViewModel {
+    this.graphModel = GraphModel.fromJSON<never, never, never>(data);
+
+    return this;
+  }
+
+  public dispatch(action: IEvent<never, never, never>): void {
+    const prevState: IGraphState = createGraphState({
+      data: this.graphModel,
+    });
+
+    const nextState = getGraphReducer<never, never, never>()(prevState, action);
+
+    this.graphModel = nextState.data.present;
+  }
+}

packages/react-dag-editor-next/stories/ReactDagEditor.stories.tsx

@@ -0,0 +1,9 @@
+export { ReactDagEditorStory } from "./components/ReactDagEditorStory";
+export { CanvasStory } from "./components/CanvasStory";
+export { ToolbarStory } from "./components/ToolbarStory";
+export { PaletteStory } from "./components/PaletteStory";
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: "React-Dag-Editor-Next",
+};

packages/react-dag-editor-next/stories/components/CanvasStory.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { Canvas, SingleGraphViewModel } from "../../src";
+
+const viewModel = new SingleGraphViewModel();
+
+export const CanvasStory: FC = () => {
+  return <Canvas viewModel={viewModel} />;
+};

packages/react-dag-editor-next/stories/components/PaletteStory.tsx

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { Palette } from "../../src";
+
+export const PaletteStory: FC = () => {
+  return <Palette />;
+};

packages/react-dag-editor-next/stories/components/ReactDagEditorStory.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import { ICanvasData, ReactDagEditor, SingleGraphViewModel } from "../../src";
+
+const initData: ICanvasData = {
+  nodes: [
+    {
+      id: "0",
+      x: 100,
+      y: 100,
+    },
+  ],
+  edges: [],
+};
+
+const viewModel = new SingleGraphViewModel();
+
+export const ReactDagEditorStory: FC = () => {
+  return (
+    <div>
+      <button onClick={() => viewModel.setData(initData)}>Load init data</button>
+      <ReactDagEditor viewModel={viewModel} />
+    </div>
+  );
+};

packages/react-dag-editor-next/stories/components/ToolbarStory.tsx

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { Toolbar } from "../../src";
+
+export const ToolbarStory: FC = () => {
+  return <Toolbar />;
+};

packages/react-dag-editor-next/stories/viewmodels/SingleGraphViewModel.ts

@@ -0,0 +1,7 @@
+import { GraphModel } from "react-dag-editor";
+
+export class SingleGraphViewModel {
+  private graphModel: GraphModel;
+
+  constructor() {}
+}

packages/react-dag-editor-next/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}