⬆️ Migrate to storybook 8

apps/storybook/.storybook/main.ts

@@ -1,22 +1,28 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
   framework: {
-    name: "@storybook/react-vite",
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  features: {
-    storyStoreV7: true,
-  },
-  docs: {
-    autodocs: true,
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-mdx-gfm"),
+    "@chromatic-com/storybook"
+  ],
+  docs: {},
+  features: {},
+  typescript: {
+    reactDocgen: false,
   },
 };
 
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/storybook/package.json

@@ -12,31 +12,33 @@
   "dependencies": {
     "@parte-ds/icons": "workspace:*",
     "@parte-ds/ui": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-select": "^5.7.4",
-    "react-select-async-paginate": "^0.7.3",
-    "styled-components": "^6.0.7",
-    "stylis": "^4.3.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-select": "^5.8.0",
+    "react-select-async-paginate": "^0.7.4",
+    "styled-components": "^6.1.11",
+    "stylis": "^4.3.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1",
     "@parte-ds/tsconfig": "workspace:*",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-docs": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@storybook/addon-actions": "^8.1.8",
+    "@storybook/addon-docs": "^8.1.8",
+    "@storybook/addon-essentials": "^8.1.8",
+    "@storybook/addon-interactions": "^8.1.8",
+    "@storybook/addon-links": "^8.1.8",
+    "@storybook/addon-mdx-gfm": "^8.1.8",
+    "@storybook/react": "^8.1.8",
+    "@storybook/react-vite": "^8.1.8",
+    "@storybook/test": "^8.1.8",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "chromatic": "^6.24.1",
     "eslint-config-parte": "workspace:*",
-    "serve": "^14.2.1",
-    "storybook": "^7.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "serve": "^14.2.3",
+    "storybook": "^8.1.8",
+    "typescript": "^5.4.5",
+    "vite": "^4.5.3"
   }
 }