Merge pull request #4276 from github/ginsbach/upgrade-storybook-9

Upgrade Storybook from v8 to v9

Author: ginsbach

extensions/ql-vscode/.storybook/main.ts

@@ -3,19 +3,15 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-a11y",
     "./vscode-theme-addon/preset.ts",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
 };
 
 export default config;

extensions/ql-vscode/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from "@storybook/manager-api";
-import { themes } from "@storybook/theming";
+import { addons } from "storybook/manager-api";
+import { themes } from "storybook/theming";
 
 addons.setConfig({
   theme: themes.dark,

extensions/ql-vscode/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
-import { themes } from "@storybook/theming";
-import { action } from "@storybook/addon-actions";
+import { themes } from "storybook/theming";
+import { action } from "storybook/actions";
 
 // Allow all stories/components to use Codicons
 import "@vscode/codicons/dist/codicon.css";

extensions/ql-vscode/.storybook/vscode-theme-addon/ThemeSelector.tsx

@@ -2,12 +2,12 @@ import * as React from "react";
 import type { FunctionComponent } from "react";
 import { useCallback } from "react";
 
-import { useGlobals } from "@storybook/manager-api";
+import { useGlobals } from "storybook/manager-api";
 import {
   IconButton,
   TooltipLinkList,
   WithTooltip,
-} from "@storybook/components";
+} from "storybook/internal/components";
 import { DashboardIcon } from "@storybook/icons";
 
 import { themeNames, VSCodeTheme } from "./theme";

extensions/ql-vscode/.storybook/vscode-theme-addon/manager.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import { Addon_TypesEnum } from "storybook/internal/types";
 import { ThemeSelector } from "./ThemeSelector";
 

extensions/ql-vscode/.storybook/vscode-theme-addon/preset.ts

@@ -1,7 +1,11 @@
-export function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("./preview.ts")];
+import { fileURLToPath } from "node:url";
+
+const previewPath = fileURLToPath(new URL("./preview.ts", import.meta.url));
+const managerPath = fileURLToPath(new URL("./manager.tsx", import.meta.url));
+export function previewAnnotations(entry: string[] = []) {
+  return [...entry, previewPath];
 }
 
-export function managerEntries(entry = []) {
-  return [...entry, require.resolve("./manager.tsx")];
+export function managerEntries(entry: string[] = []) {
+  return [...entry, managerPath];
 }