chore: Update ReactDagEditor to accept viewModel prop

Author: JYC-99

package.json

@@ -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",
@@ -63,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/.storybook/main.ts

@@ -1,20 +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/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+  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: "@storybook/react-vite",
+    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/tsconfig.lib.json

@@ -2,7 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite/client"]
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
   },
   "exclude": [
     "**/*.spec.ts",
@@ -12,11 +17,16 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js",
-    "**/*.stories.jsx",
-    "**/*.stories.tsx"
+    "**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "stories/**/*.js",
+    "stories/**/*.jsx",
+    "stories/**/*.ts",
+    "stories/**/*.tsx"
+  ]
+}

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

@@ -26,6 +26,10 @@
     "stories/**/*.stories.jsx",
     "stories/**/*.stories.tsx",
     "stories/**/*.stories.mdx",
+    "stories/**/*.ts",
+    "stories/**/*.js",
+    "stories/**/*.jsx",
+    "stories/**/*.tsx",
     ".storybook/*.js",
     ".storybook/*.ts"
   ]

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

@@ -1,9 +1,9 @@
 /// <reference types='vitest' />
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
 import * as path from "path";
 import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
 
 export default defineConfig({
   root: __dirname,

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

@@ -1,20 +1,36 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    "@chromatic-com/storybook",
+  ],
+
   framework: {
-    name: "@storybook/react-vite",
+    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")));
+}