Upgrade Storybook from v8 to v9

Breaking changes addressed:
- Update storybook packages to v9.1.6
- Remove packages now consolidated into core storybook:
  - @storybook/addon-actions (now storybook/actions)
  - @storybook/addon-essentials (built-in)
  - @storybook/addon-interactions (built-in)
  - @storybook/blocks (now @storybook/addon-docs/blocks)
  - @storybook/components (now storybook/internal/components)
  - @storybook/manager-api (now storybook/manager-api)
  - @storybook/theming (now storybook/theming)
- Add @storybook/addon-docs for MDX support
- Update import paths to new package structure
- Convert preset.ts from CommonJS to ESM
- Update Overview.mdx to use @storybook/addon-docs/blocks

Author: ginsbach

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

@@ -3,9 +3,8 @@ 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",
   ],

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,10 @@
-export function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("./preview.ts")];
+const previewPath = new URL("./preview.ts", import.meta.url).pathname;
+const managerPath = new URL("./manager.tsx", import.meta.url).pathname;
+
+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];
 }