npx storybook upgrade

coder · aslilac · Aug 8, 2025 · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025
commit 498c3dc6e830e3f623c721ceb13534e6afd7ccde
diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
-	"_comment": "This version doesn't matter, it's just to allow importing from other repos.",
-	"name": "coder",
-	"version": "0.0.0",
-	"packageManager": "pnpm@9.14.4",
-	"scripts": {
-		"format-docs": "markdown-table-formatter $(find docs -name '*.md') *.md",
-		"lint-docs": "markdownlint-cli2 --fix $(find docs -name '*.md') *.md",
-		"storybook": "pnpm run -C site/ storybook"
-	},
-	"devDependencies": {
-		"markdown-table-formatter": "^1.6.1",
-		"markdownlint-cli2": "^0.16.0",
-		"quicktype": "^23.0.0"
-	}
+  "_comment": "This version doesn't matter, it's just to allow importing from other repos.",
+  "name": "coder",
+  "version": "0.0.0",
+  "packageManager": "pnpm@9.14.4",
+  "scripts": {
+    "format-docs": "markdown-table-formatter $(find docs -name '*.md') *.md",
+    "lint-docs": "markdownlint-cli2 --fix $(find docs -name '*.md') *.md",
+    "storybook": "pnpm run -C site/ storybook"
+  },
+  "devDependencies": {
+    "markdown-table-formatter": "^1.6.1",
+    "markdownlint-cli2": "^0.16.0",
+    "quicktype": "^23.0.0"
+  }
 }
@@ -5,18 +5,10 @@ module.exports = {
 
 	addons: [
 		"@chromatic-com/storybook",
-		{
-			name: "@storybook/addon-essentials",
-			options: {
-				backgrounds: false,
-			},
-		},
 		"@storybook/addon-links",
-		"@storybook/addon-mdx-gfm",
 		"@storybook/addon-themes",
-		"@storybook/addon-actions",
-		"@storybook/addon-interactions",
 		"storybook-addon-remix-react-router",
+		"@storybook/addon-docs",
 	],
 
 	staticDirs: ["../static"],

@@ -9,8 +9,8 @@
  * @typedef {import("react").PropsWithChildren} PropsWithChildren
  * @typedef {import("react").FC<PropsWithChildren>} FC
  *
- * @typedef {import("@storybook/react").StoryContext} StoryContext
- * @typedef {import("@storybook/react").Preview} Preview
+ * @typedef {import("@storybook/react-vite").StoryContext} StoryContext
+ * @typedef {import("@storybook/react-vite").Preview} Preview
  *
  * @typedef {(Story: FC, Context: StoryContext) => React.JSX.Element} Decorator A
  * Storybook decorator function used to inject baseline data dependencies into

@@ -103,7 +103,7 @@
 		"react-markdown": "9.0.3",
 		"react-query": "npm:@tanstack/react-query@5.77.0",
 		"react-resizable-panels": "3.0.3",
-		"react-router-dom": "6.26.2",
+		"react-router": "7.7.0",
 		"react-syntax-highlighter": "15.6.1",
 		"react-textarea-autosize": "8.5.9",
 		"react-virtualized-auto-sizer": "1.0.24",
@@ -125,19 +125,12 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@chromatic-com/storybook": "3.2.2",
+		"@chromatic-com/storybook": "^4.0.1",
 		"@octokit/types": "12.3.0",
 		"@playwright/test": "1.47.0",
-		"@storybook/addon-actions": "8.5.2",
-		"@storybook/addon-essentials": "8.4.6",
-		"@storybook/addon-interactions": "8.5.3",
-		"@storybook/addon-links": "8.5.2",
-		"@storybook/addon-mdx-gfm": "8.5.2",
-		"@storybook/addon-themes": "8.4.6",
-		"@storybook/preview-api": "8.5.3",
-		"@storybook/react": "8.4.6",
-		"@storybook/react-vite": "8.4.6",
-		"@storybook/test": "8.4.6",
+		"@storybook/addon-links": "9.0.17",
+		"@storybook/addon-themes": "9.0.17",
+		"@storybook/react-vite": "9.0.17",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.16",
@@ -182,16 +175,21 @@
 		"rollup-plugin-visualizer": "5.14.0",
 		"rxjs": "7.8.1",
 		"ssh2": "1.16.0",
-		"storybook": "8.5.3",
-		"storybook-addon-remix-react-router": "3.1.0",
+		"storybook": "9.0.17",
+		"storybook-addon-remix-react-router": "^5.0.0",
 		"tailwindcss": "3.4.17",
 		"ts-proto": "1.164.0",
 		"typescript": "5.6.3",
 		"vite": "6.3.5",
 		"vite-plugin-checker": "0.9.3",
-		"vite-plugin-turbosnap": "1.0.3"
+		"vite-plugin-turbosnap": "1.0.3",
+		"@storybook/addon-docs": "9.0.17"
 	},
-	"browserslist": ["chrome 110", "firefox 111", "safari 16.0"],
+	"browserslist": [
+		"chrome 110",
+		"firefox 111",
+		"safari 16.0"
+	],
 	"resolutions": {
 		"optionator": "0.9.3",
 		"semver": "7.6.2"

@@ -9,7 +9,7 @@ import {
 } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 import { ThemeProvider } from "./contexts/ThemeProvider";
 import { AuthProvider } from "./contexts/auth/AuthProvider";

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Abbr } from "./Abbr";
 
 const meta: Meta<typeof Abbr> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ActiveUserChart } from "./ActiveUserChart";
 
 const meta: Meta<typeof ActiveUserChart> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { Alert } from "./Alert";
 

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { mockApiError } from "testHelpers/entities";
 import { ErrorAlert } from "./ErrorAlert";

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "./Avatar";
 
 const meta: Meta<typeof Avatar> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarCard } from "./AvatarCard";
 
 const meta: Meta<typeof AvatarCard> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarData } from "./AvatarData";
 
 const meta: Meta<typeof AvatarData> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AvatarDataSkeleton } from "./AvatarDataSkeleton";
 
 const meta: Meta<typeof AvatarDataSkeleton> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, TriangleAlert } from "lucide-react";
 import { Badge } from "./Badge";
 

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	AlphaBadge,
 	Badges,

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	Breadcrumb,
 	BreadcrumbEllipsis,

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { BuildIcon } from "./BuildIcon";
 
 const meta: Meta<typeof BuildIcon> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PlusIcon } from "lucide-react";
 import { Button } from "./Button";
 

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	type ChartConfig,

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Checkbox } from "./Checkbox";
 

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CodeExample } from "./CodeExample";
 
 const meta: Meta<typeof CodeExample> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { ChevronsUpDown } from "lucide-react";
 import {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "../Button/Button";
 import { CollapsibleSummary } from "./CollapsibleSummary";
 

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, screen, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Combobox } from "./Combobox";
 
 const simpleOptions = ["Go", "Gleam", "Kotlin", "Rust"];

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChooseOne, Cond } from "./ChooseOne";
 
 const meta: Meta<typeof ChooseOne> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CopyButton } from "./CopyButton";
 
 const meta: Meta<typeof CopyButton> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CopyableValue } from "./CopyableValue";
 
 const meta: Meta<typeof CopyableValue> = {

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
+import { userEvent, within } from "storybook/test";
 import {
 	Dialog,
 	DialogContent,

@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { action } from "storybook/actions";
 import { ConfirmDialog } from "./ConfirmDialog";
 
 const meta: Meta<typeof ConfirmDialog> = {

@@ -1,7 +1,7 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { within } from "@testing-library/react";
+import { action } from "storybook/actions";
+import { userEvent } from "storybook/test";
 import { DeleteDialog } from "./DeleteDialog";
 
 const meta: Meta<typeof DeleteDialog> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { chromatic } from "testHelpers/chromatic";
 import { DropdownArrow } from "./DropdownArrow";
 

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
+import { userEvent, within } from "storybook/test";
 import {
 	DropdownMenu,
 	DropdownMenuContent,

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { DurationField } from "./DurationField";
 
 const meta: Meta<typeof DurationField> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { EmptyState } from "./EmptyState";
 

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { within } from "@testing-library/react";
-import type { ErrorResponse } from "react-router-dom";
+import type { ErrorResponse } from "react-router";
+import { expect, userEvent } from "storybook/test";
 import { GlobalErrorBoundaryInner } from "./GlobalErrorBoundary";
 
 /**
@@ -80,7 +80,7 @@ export const ReactRouterErrorResponse: Story = {
 
 export const UnparsableError: Story = {
 	args: {
-		error: class WellThisIsDefinitelyWrong {},
+		error: class WellThisIsDefinitelyWrong { },
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);

@@ -9,7 +9,7 @@ import {
 	isRouteErrorResponse,
 	useLocation,
 	useRouteError,
-} from "react-router-dom";
+} from "react-router";
 
 const errorPageTitle = "Something went wrong";
 

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Expander } from "./Expander";
 
 const meta: Meta<typeof Expander> = {

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FeatureStageBadge } from "./FeatureStageBadge";
 
 const meta: Meta<typeof FeatureStageBadge> = {

@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FileUpload } from "./FileUpload";
 
 const meta: Meta<typeof FileUpload> = {

@@ -16,7 +16,7 @@ import { useDebouncedFunction } from "hooks/debounce";
 import { ExternalLinkIcon } from "lucide-react";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
-import type { useSearchParams } from "react-router-dom";
+import type { useSearchParams } from "react-router";
 
 type PresetFilter = {
 	name: string;

@@ -1,8 +1,8 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar } from "components/Avatar/Avatar";
 import { useState } from "react";
+import { action } from "storybook/actions";
+import { expect, userEvent, within } from "storybook/test";
 import { withDesktopViewport } from "testHelpers/storybook";
 import {
 	SelectFilter,

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import type { UseFilterResult } from "./Filter";
 import type { UseFilterMenuResult } from "./menu";