chore: upgrade to storybook 9 (#18983)

site/.storybook/main.js

@@ -5,17 +5,9 @@ module.exports = {
 
 	addons: [
 		"@chromatic-com/storybook",
-		{
-			name: "@storybook/addon-essentials",
-			options: {
-				backgrounds: false,
-			},
-		},
+		"@storybook/addon-docs",
 		"@storybook/addon-links",
-		"@storybook/addon-mdx-gfm",
 		"@storybook/addon-themes",
-		"@storybook/addon-actions",
-		"@storybook/addon-interactions",
 		"storybook-addon-remix-react-router",
 	],
 

site/.storybook/preview.jsx

@@ -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

site/e2e/setup/addUsersAndLicense.spec.ts

@@ -20,7 +20,7 @@ test("setup deployment", async ({ page }) => {
 	await page.getByLabel(Language.passwordLabel).fill(users.owner.password);
 	await page.getByTestId("create").click();
 
-	await expectUrl(page).toHavePathName("/workspaces");
+	await expectUrl(page).toHavePathName("/templates");
 	await page.getByTestId("button-select-template").isVisible();
 
 	for (const user of Object.values(users)) {

site/package.json

@@ -14,7 +14,7 @@
 		"format": "biome format --write .",
 		"format:check": "biome format .",
 		"lint": "pnpm run lint:check && pnpm run lint:types && pnpm run lint:circular-deps && knip",
-		"lint:check": " biome lint --error-on-warnings .",
+		"lint:check": "biome lint --error-on-warnings .",
 		"lint:circular-deps": "dpdm --no-tree --no-warning -T ./src/App.tsx",
 		"lint:knip": "knip",
 		"lint:fix": "biome lint --error-on-warnings --write . && knip --fix",
@@ -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.8.0",
 		"react-syntax-highlighter": "15.6.1",
 		"react-textarea-autosize": "8.5.9",
 		"react-virtualized-auto-sizer": "1.0.24",
@@ -125,19 +125,13 @@
 	},
 	"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-docs": "9.0.17",
+		"@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,8 +176,8 @@
 		"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",
@@ -197,7 +191,7 @@
 		"semver": "7.6.2"
 	},
 	"engines": {
-		"npm": ">=9.0.0 <10.0.0",
+		"pnpm": ">=9.0.0 <10.0.0",
 		"node": ">=18.0.0 <21.0.0"
 	},
 	"pnpm": {

site/src/@types/storybook.d.ts

@@ -9,7 +9,7 @@ import type {
 import type { Permissions } from "modules/permissions";
 import type { QueryKey } from "react-query";
 
-declare module "@storybook/react" {
+declare module "@storybook/react-vite" {
 	type WebSocketEvent =
 		| { event: "message"; data: string }
 		| { event: "error" | "close" };

site/src/App.tsx

@@ -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";

site/src/components/Abbr/Abbr.stories.tsx

@@ -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> = {

site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx

@@ -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> = {

site/src/components/Alert/Alert.stories.tsx

@@ -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";
 

site/src/components/Alert/ErrorAlert.stories.tsx

@@ -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";

site/src/components/Avatar/Avatar.stories.tsx

@@ -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> = {

site/src/components/Avatar/AvatarCard.stories.tsx

@@ -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> = {

site/src/components/Avatar/AvatarData.stories.tsx

@@ -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> = {

site/src/components/Avatar/AvatarDataSkeleton.stories.tsx

@@ -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> = {

site/src/components/Badge/Badge.stories.tsx

@@ -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";
 

site/src/components/Badges/Badges.stories.tsx

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

site/src/components/Breadcrumb/Breadcrumb.stories.tsx

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

site/src/components/BuildIcon/BuildIcon.stories.tsx

@@ -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> = {

site/src/components/Button/Button.stories.tsx

@@ -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";
 

site/src/components/Chart/Chart.stories.tsx

@@ -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,

site/src/components/Checkbox/Checkbox.stories.tsx

@@ -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";
 

site/src/components/CodeExample/CodeExample.stories.tsx

@@ -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> = {

site/src/components/Collapsible/Collapsible.stories.tsx

@@ -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 {

site/src/components/CollapsibleSummary/CollapsibleSummary.stories.tsx

@@ -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";
 

site/src/components/Combobox/Combobox.stories.tsx

@@ -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"];
@@ -31,7 +31,9 @@ const advancedOptions = [
 
 const ComboboxWithHooks = ({
 	options = advancedOptions,
-}: { options?: React.ComponentProps<typeof Combobox>["options"] }) => {
+}: {
+	options?: React.ComponentProps<typeof Combobox>["options"];
+}) => {
 	const [value, setValue] = useState("");
 	const [open, setOpen] = useState(false);
 	const [inputValue, setInputValue] = useState("");

site/src/components/Conditionals/ChooseOne.stories.tsx

@@ -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> = {

site/src/components/CopyButton/CopyButton.stories.tsx

@@ -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> = {

site/src/components/CopyableValue/CopyableValue.stories.tsx

@@ -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> = {

site/src/components/Dialog/Dialog.stories.tsx

@@ -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,

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -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> = {

site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

@@ -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> = {

site/src/components/DropdownArrow/DropdownArrow.stories.tsx

@@ -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";
 

site/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -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,

site/src/components/DurationField/DurationField.stories.tsx

@@ -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> = {

site/src/components/EmptyState/EmptyState.stories.tsx

@@ -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";
 

site/src/components/ErrorBoundary/GlobalErrorBoundary.stories.tsx

@@ -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";
 
 /**

site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx

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

site/src/components/Expander/Expander.stories.tsx

@@ -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> = {

site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx

@@ -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> = {

site/src/components/FileUpload/FileUpload.stories.tsx

@@ -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> = {

site/src/components/Filter/Filter.tsx

@@ -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;

site/src/components/Filter/SelectFilter.stories.tsx

@@ -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,

site/src/components/Filter/storyHelpers.ts

@@ -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";
 

site/src/components/Form/Form.stories.tsx

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

site/src/components/FullPageForm/FullPageForm.stories.tsx

@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "components/Button/Button";
 import { FormFooter } from "components/Form/Form";
 import type { FC } from "react";

site/src/components/FullPageLayout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {

site/src/components/GlobalSnackbar/EnterpriseSnackbar.stories.tsx

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

site/src/components/HelpTooltip/HelpTooltip.stories.tsx

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

site/src/components/IconField/IconField.stories.tsx

@@ -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 { IconField } from "./IconField";
 
 const meta: Meta<typeof IconField> = {

site/src/components/InfoTooltip/InfoTooltip.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { InfoTooltip } from "./InfoTooltip";
 
 const meta = {

site/src/components/Input/Input.stories.tsx

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

site/src/components/InputGroup/InputGroup.stories.tsx

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

site/src/components/Label/Label.stories.tsx

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

site/src/components/LastSeen/LastSeen.stories.tsx

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

site/src/components/Latency/Latency.stories.tsx

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

site/src/components/Link/Link.stories.tsx

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

site/src/components/Loader/Loader.stories.tsx

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

site/src/components/Logs/LogLine.stories.tsx

@@ -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 { LogLine, LogLinePrefix } from "./LogLine";
 

site/src/components/Logs/Logs.stories.tsx

@@ -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 { MockWorkspaceBuildLogs } from "testHelpers/entities";
 import type { Line } from "./LogLine";

site/src/components/Margins/Margins.stories.tsx

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

site/src/components/Markdown/Markdown.stories.tsx

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

site/src/components/MultiSelectCombobox/MultiSelectCombobox.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { MockOrganization, MockOrganization2 } from "testHelpers/entities";
 import { MultiSelectCombobox } from "./MultiSelectCombobox";
 

site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx

@@ -1,6 +1,6 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { action } from "storybook/actions";
+import { userEvent, within } from "storybook/test";
 import {
 	MockOrganization,
 	MockOrganization2,

site/src/components/OverflowY/OverflowY.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { OverflowY } from "./OverflowY";
 
 const numbers: number[] = [];

site/src/components/PageHeader/PageHeader.stories.tsx

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

site/src/components/PaginationWidget/PaginationContainer.stories.tsx

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

site/src/components/PaginationWidget/PaginationWidgetBase.stories.tsx

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

site/src/components/PasswordField/PasswordField.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, spyOn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { API } from "api/api";
 import { useState } from "react";
+import { expect, spyOn, userEvent, waitFor, within } from "storybook/test";
 import { PasswordField } from "./PasswordField";
 
 const meta: Meta<typeof PasswordField> = {

site/src/components/Paywall/Paywall.stories.tsx

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

site/src/components/Paywall/PopoverPaywall.stories.tsx

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

site/src/components/Pill/Pill.stories.tsx

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

site/src/components/Popover/Popover.stories.tsx

@@ -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 { Button } from "components/Button/Button";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 
 const meta: Meta<typeof Popover> = {

site/src/components/RadioGroup/RadioGroup.stories.tsx

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

site/src/components/RichParameterInput/RichParameterInput.stories.tsx

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

site/src/components/Search/Search.stories.tsx

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

site/src/components/SearchField/SearchField.stories.tsx

@@ -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 { useState } from "react";
+import { userEvent, within } from "storybook/test";
 import { SearchField } from "./SearchField";
 
 const meta: Meta<typeof SearchField> = {

site/src/components/Select/Select.stories.tsx

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

site/src/components/SelectMenu/SelectMenu.stories.tsx

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

site/src/components/SettingsHeader/SettingsHeader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { docs } from "utils/docs";
 import {
 	SettingsHeader,

site/src/components/Sidebar/Sidebar.stories.tsx

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

site/src/components/Sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import type { ElementType, FC, ReactNode } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router";
 import { cn } from "utils/cn";
 
 interface SidebarProps {

site/src/components/Slider/Slider.stories.tsx

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

site/src/components/Spinner/Spinner.stories.tsx

@@ -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 { Spinner } from "./Spinner";
 

site/src/components/Stack/Stack.stories.tsx

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

site/src/components/StatusIndicator/StatusIndicator.stories.tsx

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

site/src/components/Switch/Switch.stories.tsx

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

site/src/components/Table/Table.stories.tsx

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

site/src/components/TableEmpty/TableEmpty.stories.tsx

@@ -1,7 +1,7 @@
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { TableEmpty } from "./TableEmpty";
 

site/src/components/TableLoader/TableLoader.stories.tsx

@@ -1,7 +1,7 @@
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableContainer from "@mui/material/TableContainer";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { TableLoader } from "./TableLoader";
 
 const meta: Meta<typeof TableLoader> = {

site/src/components/TableToolbar/TableToolbar.stories.tsx

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

site/src/components/Tabs/Tabs.stories.tsx

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

site/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { type FC, type HTMLAttributes, createContext, useContext } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router";
 import { cn } from "utils/cn";
 
 // Keeping this for now because of a workaround in WorkspaceBUildPageView

site/src/components/TagInput/TagInput.stories.tsx

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

site/src/components/Textarea/Textarea.stories.tsx

@@ -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 { Textarea } from "./Textarea";
 
 const meta: Meta<typeof Textarea> = {

site/src/components/Tooltip/Tooltip.stories.tsx

@@ -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 {
 	Tooltip,

site/src/components/UserAutocomplete/MemberAutocomplete.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MockOrganizationMember } from "testHelpers/entities";
 import { MemberAutocomplete } from "./UserAutocomplete";
 

site/src/components/UserAutocomplete/UserAutocomplete.stories.tsx

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

site/src/components/Welcome/Welcome.stories.tsx

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

site/src/components/deprecated/Popover/Popover.stories.tsx

@@ -1,6 +1,6 @@
 import Button from "@mui/material/Button";
-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 { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 
 const meta: Meta<typeof Popover> = {