Fix Storybook 9 compatibility after Dependabot upgrade

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";
@@ -20,6 +20,7 @@ window.acquireVsCodeApi = () => ({
 
 // https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
 const preview: Preview = {
+  tags: ["autodocs"],
   parameters: {
     // All props starting with `on` will automatically receive an action as a prop
     actions: { argTypesRegex: "^on[A-Z].*" },

extensions/ql-vscode/.storybook/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "target": "es2021",
     "outDir": "out",
     "lib": ["ES2021", "dom"],

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,12 @@
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 export function previewAnnotations(entry = []) {
-  return [...entry, require.resolve("./preview.ts")];
+  return [...entry, join(__dirname, "preview.ts")];
 }
 
 export function managerEntries(entry = []) {
-  return [...entry, require.resolve("./manager.tsx")];
+  return [...entry, join(__dirname, "manager.tsx")];
 }