chore(site): upgrade storybook to v8 (#12831)

site/.storybook/main.js

@@ -2,6 +2,7 @@ import turbosnap from "vite-plugin-turbosnap";
 
 module.exports = {
   stories: ["../src/**/*.stories.tsx"],
+
   addons: [
     {
       name: "@storybook/addon-essentials",
@@ -14,12 +15,16 @@ module.exports = {
     "@storybook/addon-themes",
     "@storybook/addon-actions",
     "@storybook/addon-interactions",
+    "storybook-addon-remix-react-router",
   ],
+
   staticDirs: ["../static"],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+
   async viteFinal(config, { configType }) {
     config.plugins = config.plugins || [];
     // return the customized config
@@ -33,4 +38,8 @@ module.exports = {
     }
     return config;
   },
+
+  docs: {
+    autodocs: false,
+  },
 };

site/.storybook/preview.jsx

@@ -5,7 +5,7 @@ import {
 } from "@mui/material/styles";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
-import { withRouter } from "storybook-addon-react-router-v6";
+import { withRouter } from "storybook-addon-remix-react-router";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
 import themes from "theme";
@@ -14,6 +14,15 @@ import "theme/globalFonts";
 DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
 
 export const decorators = [
+  withRouter,
+  withQuery,
+  (Story) => {
+    return (
+      <HelmetProvider>
+        <Story />
+      </HelmetProvider>
+    );
+  },
   (Story, context) => {
     const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
     const { themeOverride } = DecoratorHelpers.useThemeParameters();
@@ -30,15 +39,6 @@ export const decorators = [
       </StyledEngineProvider>
     );
   },
-  withRouter,
-  (Story) => {
-    return (
-      <HelmetProvider>
-        <Story />
-      </HelmetProvider>
-    );
-  },
-  withQuery,
 ];
 
 export const parameters = {
@@ -49,9 +49,6 @@ export const parameters = {
       locales: "en-US",
     },
   },
-  actions: {
-    argTypesRegex: "^(on|handler)[A-Z].*",
-  },
   controls: {
     expanded: true,
     matchers: {

site/package.json

@@ -96,16 +96,16 @@
   "devDependencies": {
     "@octokit/types": "12.3.0",
     "@playwright/test": "1.42.1",
-    "@storybook/addon-actions": "7.6.11",
+    "@storybook/addon-actions": "8.0.5",
-    "@storybook/addon-essentials": "7.6.11",
+    "@storybook/addon-essentials": "8.0.5",
-    "@storybook/addon-interactions": "7.6.11",
+    "@storybook/addon-interactions": "8.0.5",
-    "@storybook/addon-links": "7.6.11",
+    "@storybook/addon-links": "8.0.5",
-    "@storybook/addon-mdx-gfm": "7.6.11",
+    "@storybook/addon-mdx-gfm": "8.0.5",
-    "@storybook/addon-themes": "7.6.11",
+    "@storybook/addon-themes": "8.0.5",
-    "@storybook/preview-api": "7.6.11",
+    "@storybook/preview-api": "8.0.5",
-    "@storybook/react": "7.6.11",
+    "@storybook/react": "8.0.5",
-    "@storybook/react-vite": "7.6.11",
+    "@storybook/react-vite": "8.0.5",
-    "@storybook/test": "7.6.11",
+    "@storybook/test": "8.0.5",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "6.1.2",
@@ -133,7 +133,7 @@
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-react": "4.1.0",
-    "chromatic": "10.6.1",
+    "chromatic": "11.3.0",
     "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.6.0",
@@ -144,7 +144,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-testing-library": "6.1.0",
     "eslint-plugin-unicorn": "49.0.0",
     "eventsourcemock": "2.0.0",
@@ -161,8 +161,8 @@
     "protobufjs": "7.2.4",
     "rxjs": "7.8.1",
     "ssh2": "1.14.0",
-    "storybook": "7.6.11",
+    "storybook": "8.0.5",
-    "storybook-addon-react-router-v6": "2.0.0",
+    "storybook-addon-remix-react-router": "3.0.0",
     "storybook-react-context": "0.6.0",
     "ts-node": "10.9.1",
     "ts-proto": "1.164.0",

site/src/pages/HealthPage/storybook.tsx

@@ -3,7 +3,7 @@ import {
   reactRouterParameters,
   reactRouterOutlet,
   type RouteDefinition,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
 import { chromatic } from "testHelpers/chromatic";
 import {

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx

@@ -1,5 +1,5 @@
-import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
 import { chromatic } from "testHelpers/chromatic";
 import { MockTemplateVersion } from "testHelpers/entities";
 import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
@@ -14,29 +14,19 @@ const meta: Meta<typeof ProvisionerTagsPopover> = {
   args: {
     tags: MockTemplateVersion.job.tags,
   },
-  render: function Render(args) {
-    const [{ tags }, updateArgs] = useArgs();
-
-    return (
-      <ProvisionerTagsPopover
-        {...args}
-        tags={tags}
-        onSubmit={({ key, value }) => {
-          updateArgs({ tags: { ...tags, [key]: value } });
-        }}
-        onDelete={(key) => {
-          const newTags = { ...tags };
-          delete newTags[key];
-          updateArgs({ tags: newTags });
-        }}
-      />
-    );
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof ProvisionerTagsPopover>;
 
-const Example: Story = {};
+const Example: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Open popover", async () => {
+      await userEvent.click(canvas.getByRole("button"));
+    });
+  },
+};
 
 export { Example as ProvisionerTagsPopover };

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx

@@ -42,7 +42,7 @@ const validationSchema = Yup.object({
     }),
 });
 
-interface ProvisionerTagsPopoverProps {
+export interface ProvisionerTagsPopoverProps {
   tags: Record<string, string>;
   onSubmit: (values: typeof initialValues) => void;
   onDelete: (key: string) => void;
@@ -54,7 +54,6 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
   onDelete,
 }) => {
   const theme = useTheme();
-
   const form = useFormik({
     initialValues,
     validationSchema,

site/src/pages/TerminalPage/TerminalPage.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   reactRouterOutlet,
   reactRouterParameters,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { getAuthorizationKey } from "api/queries/authCheck";
 import { workspaceByOwnerAndNameKey } from "api/queries/workspaces";
 import type { Workspace, WorkspaceAgentLifecycle } from "api/typesGenerated";