Re-enable MDX documentation support in Storybook v10

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

@@ -3,6 +3,7 @@ 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-a11y",
     "./vscode-theme-addon/preset.ts",

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")];
 }

extensions/ql-vscode/package.json

@@ -2110,6 +2110,7 @@
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
     "@playwright/test": "^1.50.1",
     "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
     "@storybook/components": "^8.6.14",
     "@storybook/csf": "^0.1.13",

extensions/ql-vscode/src/stories/Overview.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 import iframeImage from './images/update-css-variables-iframe.png';
 import stylesImage from './images/update-css-variables-styles.png';