chore: upgrade storybook to V8 (#149)

* Update dependencies and configure Storybook

* Update @nx/storybook version to 19.1.0

---------

Co-authored-by: Yucong Jin <[email protected]>

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/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/core-server": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@storybook/test-runner": "^0.18.2",
     "@swc-node/register": "~1.8.0",
     "@swc/core": "~1.3.85",
     "@swc/helpers": "~0.5.2",
@@ -62,7 +62,7 @@
     "react-jss": "^10.10.0",
     "react-test-renderer": "^18.3.1",
     "sass": "^1.55.0",
-    "storybook": "7.6.19",
+    "storybook": "^8.1.9",
     "toposort": "^2.0.2",
     "ts-jest": "^29.1.4",
     "ts-node": "10.9.1",

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"],
+  stories: ["../src/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+  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")));
+}

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

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