feat: upgrade to storybook@10 (#22187)

Continuation of #22186 (without `vitest` addon)

Upgrades the dependency so that we can actively make use of new
features/speed/less-dependencies. Short simple sweet and lovely 🙂

site/.storybook/preview.tsx

@@ -33,7 +33,7 @@ export const parameters: Parameters = {
 		},
 	},
 	viewport: {
-		viewports: {
+		options: {
 			ipad: {
 				name: "iPad Mini",
 				styles: {

site/package.json

@@ -122,13 +122,13 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.2.4",
-		"@chromatic-com/storybook": "4.1.3",
+		"@chromatic-com/storybook": "5.0.1",
 		"@octokit/types": "12.6.0",
 		"@playwright/test": "1.50.1",
-		"@storybook/addon-docs": "9.1.16",
-		"@storybook/addon-links": "9.1.16",
-		"@storybook/addon-themes": "9.1.16",
-		"@storybook/react-vite": "9.1.16",
+		"@storybook/addon-docs": "10.2.10",
+		"@storybook/addon-links": "10.2.10",
+		"@storybook/addon-themes": "10.2.10",
+		"@storybook/react-vite": "10.2.10",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.19",
@@ -174,8 +174,8 @@
 		"rollup-plugin-visualizer": "5.14.0",
 		"rxjs": "7.8.2",
 		"ssh2": "1.17.0",
-		"storybook": "9.1.16",
-		"storybook-addon-remix-react-router": "5.0.0",
+		"storybook": "10.2.10",
+		"storybook-addon-remix-react-router": "6.0.0",
 		"tailwindcss": "3.4.18",
 		"ts-proto": "1.181.2",
 		"typescript": "5.6.3",

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

@@ -199,12 +199,10 @@ export const ConnectionError: Story = {
 // together with the error message
 export const BottomMessage: Story = {
 	decorators: [withWebSocket],
+
 	parameters: {
 		...meta.parameters,
-		// Forcing smaller viewport to make it easier to identify the issue
-		viewport: {
-			defaultViewport: "terminal",
-		},
+
 		webSocket: [
 			{
 				event: "message",
@@ -215,6 +213,14 @@ export const BottomMessage: Story = {
 				event: "close",
 			},
 		],
+
 		queries: [...meta.parameters.queries, createWorkspaceWithAgent("ready")],
 	},
+
+	globals: {
+		viewport: {
+			value: "terminal",
+			isRotated: false,
+		},
+	},
 };

site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx

@@ -8,7 +8,7 @@ import type {
 } from "api/typesGenerated";
 import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
 import { useQueryClient } from "react-query";
-import { action } from "storybook/internal/actions";
+import { action } from "storybook/actions";
 import { expect, screen, userEvent, within } from "storybook/test";
 import { BatchUpdateModalForm } from "./BatchUpdateModalForm";