Upgrade to Storybook 7

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

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/core-common";
+import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -8,13 +8,13 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "./vscode-theme-addon/preset.ts",
   ],
-  framework: "@storybook/react",
-  core: {
-    builder: "@storybook/builder-webpack5",
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
   },
-  features: {
-    babelModeV7: true,
+  docs: {
+    autodocs: "tag",
   },
 };
 
-module.exports = config;
+export default config;

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

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

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

@@ -1,31 +1,36 @@
+import { Preview } from "@storybook/react";
 import { themes } from "@storybook/theming";
 import { action } from "@storybook/addon-actions";
 
 // Allow all stories/components to use Codicons
 import "@vscode/codicons/dist/codicon.css";
 
-// https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
-export const parameters = {
-  // All props starting with `on` will automatically receive an action as a prop
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  // All props matching these names will automatically get the correct control
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  // Use a dark theme to be aligned with VSCode
-  docs: {
-    theme: themes.dark,
-  },
-  backgrounds: {
-    // The background is injected by our theme CSS files
-    disable: true,
-  },
-};
-
 (window as any).acquireVsCodeApi = () => ({
   postMessage: action("post-vscode-message"),
   setState: action("set-vscode-state"),
 });
+
+// https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+const preview: Preview = {
+  parameters: {
+    // All props starting with `on` will automatically receive an action as a prop
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    // All props matching these names will automatically get the correct control
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    // Use a dark theme to be aligned with VSCode
+    docs: {
+      theme: themes.dark,
+    },
+    backgrounds: {
+      // The background is injected by our theme CSS files
+      disable: true,
+    },
+  },
+};
+
+export default preview;

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

@@ -1,14 +1,12 @@
 import * as React from "react";
 import { FunctionComponent, useCallback } from "react";
 
-import { useGlobals } from "@storybook/api";
+import { useGlobals } from "@storybook/manager-api";
 import {
   IconButton,
   Icons,
-  WithTooltip,
   TooltipLinkList,
-  Link,
-  WithHideFn,
+  WithTooltip,
 } from "@storybook/components";
 
 import { themeNames, VSCodeTheme } from "./theme";
@@ -26,7 +24,7 @@ export const ThemeSelector: FunctionComponent = () => {
   );
 
   const createLinks = useCallback(
-    (onHide: () => void): Link[] =>
+    (onHide: () => void) =>
       Object.values(VSCodeTheme).map((theme) => ({
         id: theme,
         onClick() {
@@ -44,8 +42,8 @@ export const ThemeSelector: FunctionComponent = () => {
     <WithTooltip
       placement="top"
       trigger="click"
-      closeOnClick
-      tooltip={({ onHide }: WithHideFn) => (
+      closeOnOutsideClick
+      tooltip={({ onHide }: { onHide: () => void }) => (
         <TooltipLinkList links={createLinks(onHide)} />
       )}
     >

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { addons, types } from "@storybook/addons";
+import { addons, types } from "@storybook/manager-api";
 import { ThemeSelector } from "./ThemeSelector";
 
 const ADDON_ID = "vscode-theme-addon";

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

@@ -1,4 +1,4 @@
-export function config(entry = []) {
+export function previewAnnotations(entry = []) {
   return [...entry, require.resolve("./preview.ts")];
 }
 

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

@@ -1,6 +1,5 @@
-import { useEffect, useGlobals } from "@storybook/addons";
+import { useEffect } from "react";
 import type {
-  AnyFramework,
   PartialStoryFn as StoryFunction,
   StoryContext,
 } from "@storybook/csf";
@@ -34,11 +33,8 @@ const themeFiles: { [key in VSCodeTheme]: string } = {
       .default,
 };
 
-export const withTheme = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>,
-) => {
-  const [{ vscodeTheme }] = useGlobals();
+export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {
+  const { vscodeTheme } = context.globals;
 
   useEffect(() => {
     const styleSelectorId =

extensions/ql-vscode/package.json

@@ -1733,8 +1733,8 @@
     "lint": "eslint . --ext .js,.ts,.tsx --max-warnings=0",
     "lint:markdown": "markdownlint-cli2 \"../../**/*.{md,mdx}\" \"!**/node_modules/**\" \"!**/.vscode-test/**\" \"!**/build/cli/v*/**\"",
     "format-staged": "lint-staged",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint:scenarios": "ts-node scripts/lint-scenarios.ts",
     "check-types": "find . -type f -name \"tsconfig.json\" -not -path \"./node_modules/*\" | sed -r 's|/[^/]+$||' | sort | uniq | xargs -I {} sh -c \"echo Checking types in {} && cd {} && npx tsc --noEmit\"",
     "postinstall": "patch-package",
@@ -1786,17 +1786,22 @@
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@faker-js/faker": "^8.0.2",
     "@github/markdownlint-github": "^0.3.0",
     "@octokit/plugin-throttling": "^5.0.1",
-    "@storybook/addon-actions": "^6.5.17-alpha.0",
-    "@storybook/addon-essentials": "^6.5.17-alpha.0",
-    "@storybook/addon-interactions": "^6.5.17-alpha.0",
-    "@storybook/addon-links": "^6.5.17-alpha.0",
-    "@storybook/builder-webpack5": "^6.5.17-alpha.0",
-    "@storybook/manager-webpack5": "^6.5.17-alpha.0",
-    "@storybook/react": "^6.5.17-alpha.0",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/components": "^7.1.0",
+    "@storybook/csf": "^0.1.1",
+    "@storybook/manager-api": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-webpack5": "^7.1.0",
+    "@storybook/theming": "^7.1.0",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -1837,6 +1842,7 @@
     "@vscode/vsce": "^2.19.0",
     "ansi-colors": "^4.1.1",
     "applicationinsights": "^2.3.5",
+    "cosmiconfig": "^7.1.0",
     "cross-env": "^7.0.3",
     "css-loader": "~6.8.1",
     "del": "^6.0.0",
@@ -1868,6 +1874,7 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^7.0.0",
     "prettier": "^3.0.0",
+    "storybook": "^7.1.0",
     "tar-stream": "^3.0.0",
     "through2": "^4.0.2",
     "ts-jest": "^29.0.1",

extensions/ql-vscode/src/stories/common/icon/Codicon.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { CodePaths, Codicon as CodiconComponent } from "../../../view/common";
+import { Codicon as CodiconComponent } from "../../../view/common";
 
 // To regenerate the icons, use the following command from the `extensions/ql-vscode` directory:
 // jq -R '[inputs | [splits(", *")] as $row | $row[0]]' < node_modules/@vscode/codicons/dist/codicon.csv > src/stories/common/icon/vscode-icons.json
@@ -17,7 +17,7 @@ export default {
       options: icons,
     },
   },
-} as ComponentMeta<typeof CodePaths>;
+} as ComponentMeta<typeof CodiconComponent>;
 
 const Template: ComponentStory<typeof CodiconComponent> = (args) => (
   <CodiconComponent {...args} />

extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisStats.spec.tsx

@@ -5,7 +5,7 @@ import {
   VariantAnalysisStats,
   VariantAnalysisStatsProps,
 } from "../VariantAnalysisStats";
-import { userEvent } from "@storybook/testing-library";
+import userEvent from "@testing-library/user-event";
 
 describe(VariantAnalysisStats.name, () => {
   const onViewLogsClick = jest.fn();
@@ -141,13 +141,13 @@ describe(VariantAnalysisStats.name, () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders 'View logs' link when the variant analysis status is succeeded", () => {
+  it("renders 'View logs' link when the variant analysis status is succeeded", async () => {
     render({
       variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
       completedAt: new Date(),
     });
 
-    userEvent.click(screen.getByText("View logs"));
+    await userEvent.click(screen.getByText("View logs"));
     expect(onViewLogsClick).toHaveBeenCalledTimes(1);
   });