Upgrade Storybook from 8.6.14 to 10.0.8

.gitignore

@@ -5,6 +5,9 @@
 .vscode/
 .DS_Store
 
+# Claude Code working files
+.claude/wip/
+
 # Binaries for programs and plugins
 *.exe
 *.exe~

ui/dashboard/.storybook/main.ts

@@ -6,11 +6,11 @@ module.exports = {
 
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
-    "storybook-dark-mode",
-    "storybook-addon-react-router-v6",
+    "@storybook/addon-themes",
+    "storybook-addon-remix-react-router",
     "@chromatic-com/storybook",
+    "@storybook/addon-docs"
   ],
 
   typescript: {
@@ -32,7 +32,12 @@ module.exports = {
       ...config.resolve.alias,
       "@powerpipe": path.resolve(__dirname, "../src"),
     };
-    config = set(config, "resolve.fallback.fs", false);
+    // Webpack 5 no longer includes Node.js polyfills by default
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      path: false,
+    };
     return config;
   },
 

ui/dashboard/.storybook/preview.jsx

@@ -1,7 +1,8 @@
 import StoryWrapper from "./StoryWrapper";
 import { ThemeProvider } from "../src/hooks/useStorybookTheme";
-import { themes } from "@storybook/theming";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { themes } from "storybook/theming";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import { withRouter } from "storybook-addon-remix-react-router";
 import "../src/styles/index.css";
 
 const viewports = {
@@ -57,6 +58,14 @@ const viewports = {
 
 export const decorators = [
   withRouter,
+  withThemeByDataAttribute({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+    attributeName: "data-mode",
+  }),
   (Story) => (
     <ThemeProvider>
       <StoryWrapper>
@@ -67,7 +76,6 @@ export const decorators = [
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   darkMode: {
     // Override the default dark theme
     dark: {
@@ -78,6 +86,6 @@ export const parameters = {
     light: { ...themes.normal },
   },
   viewport: {
-    viewports,
+    options: viewports,
   },
 };

ui/dashboard/package.json

@@ -12,9 +12,10 @@
     "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "storybook": "yarn run setup-material-symbols && NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
-    "build-storybook": "storybook build -s public"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.4.0",
     "@headlessui/react": "1.7.19",
     "@heroicons/react": "2.2.0",
     "@material-symbols/svg-300": "0.36.0",
@@ -43,7 +44,8 @@
     "react-papaparse": "4.4.0",
     "react-placeholder": "4.1.0",
     "react-popper": "2.3.0",
-    "react-router-dom": "6.30.1",
+    "react-router": "^7.9.6",
+    "react-router-dom": "^7.9.6",
     "react-router-hash-link": "2.4.3",
     "react-select": "5.10.2",
     "react-syntax-highlighter": "15.6.6",
@@ -58,17 +60,13 @@
     "web-vitals": "4.2.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.4",
+    "@chromatic-com/storybook": "^4.1.3",
     "@craco/craco": "7.1.0",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/node-logger": "8.6.14",
-    "@storybook/preset-create-react-app": "8.6.14",
-    "@storybook/preview-api": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
-    "@storybook/theming": "8.6.14",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/preset-create-react-app": "10.0.8",
+    "@storybook/react-webpack5": "10.0.8",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/line-clamp": "0.4.4",
     "@tailwindcss/typography": "0.5.18",
@@ -95,9 +93,8 @@
     "prop-types": "15.8.1",
     "react-scripts": "5.0.1",
     "source-map-explorer": "2.5.3",
-    "storybook": "8.6.14",
-    "storybook-addon-react-router-v6": "2.0.15",
-    "storybook-dark-mode": "4.0.2",
+    "storybook": "10.0.8",
+    "storybook-addon-remix-react-router": "^5.0.0",
     "stream-browserify": "3.0.0",
     "tailwindcss": "3.4.17",
     "typescript": "4.5.5",

ui/dashboard/src/components/dashboards/Table/index.stories.tsx

@@ -1,6 +1,6 @@
 import Table from "./index";
 import { PanelStoryDecorator } from "@powerpipe/utils/storybook";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react-webpack5";
 
 export default {
   title: "Primitives/Table",

ui/dashboard/src/components/dashboards/Text/index.stories.tsx

@@ -1,6 +1,6 @@
 import Text from "./index";
 import { PanelStoryDecorator } from "@powerpipe/utils/storybook";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react-webpack5";
 
 export default {
   title: "Primitives/Text",

ui/dashboard/src/components/dashboards/common/DashboardIcon.stories.tsx

@@ -1,5 +1,5 @@
 import DashboardIcon from "./DashboardIcon";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react-webpack5";
 
 export default {
   title: "Dashboard Icon",

ui/dashboard/src/utils/storybook.tsx

@@ -84,6 +84,11 @@ export const PanelStoryDecorator = ({
             error: null,
             dashboards: [],
             dashboardsMap: {},
+            dashboardsMetadata: {
+              "storybook.dashboard.storybook_dashboard_wrapper": {
+                supports_search_path: false,
+              },
+            },
             selectedDashboard: {
               title: "Storybook Dashboard Wrapper",
               full_name: "storybook.dashboard.storybook_dashboard_wrapper",