Merge pull request #2259 from github/koesie10/upgrade-storybook-7

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",
+  framework: {
-  core: {
+    name: "@storybook/react-webpack5",
-    builder: "@storybook/builder-webpack5",
+    options: {},
   },
-  features: {
+  docs: {
-    babelModeV7: true,
+    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,
+  WithTooltip,
-  WithHideFn,
 } 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
+      closeOnOutsideClick
-      tooltip={({ onHide }: WithHideFn) => (
+      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 = (
+export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {
-  StoryFn: StoryFunction<AnyFramework>,
+  const { vscodeTheme } = context.globals;
-  context: StoryContext<AnyFramework>,
-) => {
-  const [{ vscodeTheme }] = useGlobals();
 
   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",
+    "storybook": "storybook dev -p 6006",
-    "build-storybook": "build-storybook",
+    "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-actions": "^7.1.0",
-    "@storybook/addon-essentials": "^6.5.17-alpha.0",
+    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^6.5.17-alpha.0",
+    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^6.5.17-alpha.0",
+    "@storybook/addon-links": "^7.1.0",
-    "@storybook/builder-webpack5": "^6.5.17-alpha.0",
+    "@storybook/components": "^7.1.0",
-    "@storybook/manager-webpack5": "^6.5.17-alpha.0",
+    "@storybook/csf": "^0.1.1",
-    "@storybook/react": "^6.5.17-alpha.0",
+    "@storybook/manager-api": "^7.1.0",
-    "@storybook/testing-library": "^0.0.13",
+    "@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/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
@@ -16,9 +16,9 @@ export default {
       </VariantAnalysisContainer>
     ),
   ],
-} as ComponentMeta<typeof Alert>;
+} as Meta<typeof Alert>;
 
-const Template: ComponentStory<typeof Alert> = (args) => <Alert {...args} />;
+const Template: StoryFn<typeof Alert> = (args) => <Alert {...args} />;
 
 export const Warning = Template.bind({});
 Warning.args = {

extensions/ql-vscode/src/stories/common/CodePaths.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CodePaths } from "../../view/common";
 import type { CodeFlow } from "../../variant-analysis/shared/analysis-result";
@@ -9,11 +9,9 @@ export default {
   title: "Code Paths",
   component: CodePaths,
   decorators: [(Story) => <Story />],
-} as ComponentMeta<typeof CodePaths>;
+} as Meta<typeof CodePaths>;
 
-const Template: ComponentStory<typeof CodePaths> = (args) => (
+const Template: StoryFn<typeof CodePaths> = (args) => <CodePaths {...args} />;
-  <CodePaths {...args} />
-);
 
 export const PowerShell = Template.bind({});
 

extensions/ql-vscode/src/stories/common/FileCodeSnippet.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { FileCodeSnippet } from "../../view/common";
 
 export default {
   title: "File Code Snippet",
   component: FileCodeSnippet,
-} as ComponentMeta<typeof FileCodeSnippet>;
+} as Meta<typeof FileCodeSnippet>;
 
-const Template: ComponentStory<typeof FileCodeSnippet> = (args) => (
+const Template: StoryFn<typeof FileCodeSnippet> = (args) => (
   <FileCodeSnippet {...args} />
 );
 

extensions/ql-vscode/src/stories/common/LastUpdated.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { LastUpdated as LastUpdatedComponent } from "../../view/common/LastUpdated";
 
 export default {
   title: "Last Updated",
   component: LastUpdatedComponent,
-} as ComponentMeta<typeof LastUpdatedComponent>;
+} as Meta<typeof LastUpdatedComponent>;
 
-const Template: ComponentStory<typeof LastUpdatedComponent> = (args) => (
+const Template: StoryFn<typeof LastUpdatedComponent> = (args) => (
   <LastUpdatedComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/common/StarCount.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StarCountComponent from "../../view/common/StarCount";
 
 export default {
   title: "Star Count",
   component: StarCountComponent,
-} as ComponentMeta<typeof StarCountComponent>;
+} as Meta<typeof StarCountComponent>;
 
-const Template: ComponentStory<typeof StarCountComponent> = (args) => (
+const Template: StoryFn<typeof StarCountComponent> = (args) => (
   <StarCountComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/common/TextButton.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import TextButtonComponent from "../../view/common/TextButton";
 
@@ -15,9 +15,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof TextButtonComponent>;
+} as Meta<typeof TextButtonComponent>;
 
-const Template: ComponentStory<typeof TextButtonComponent> = (args) => (
+const Template: StoryFn<typeof TextButtonComponent> = (args) => (
   <TextButtonComponent {...args} />
 );
 

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } 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,9 +17,9 @@ export default {
       options: icons,
     },
   },
-} as ComponentMeta<typeof CodePaths>;
+} as Meta<typeof CodiconComponent>;
 
-const Template: ComponentStory<typeof CodiconComponent> = (args) => (
+const Template: StoryFn<typeof CodiconComponent> = (args) => (
   <CodiconComponent {...args} />
 );
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import {
   CodePaths,
@@ -10,9 +10,9 @@ import {
 export default {
   title: "Icon/Error Icon",
   component: ErrorIconComponent,
-} as ComponentMeta<typeof CodePaths>;
+} as Meta<typeof CodePaths>;
 
-const Template: ComponentStory<typeof ErrorIconComponent> = (args) => (
+const Template: StoryFn<typeof ErrorIconComponent> = (args) => (
   <ErrorIconComponent {...args} />
 );
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import {
   CodePaths,
@@ -10,9 +10,9 @@ import {
 export default {
   title: "Icon/Success Icon",
   component: SuccessIconComponent,
-} as ComponentMeta<typeof CodePaths>;
+} as Meta<typeof CodePaths>;
 
-const Template: ComponentStory<typeof SuccessIconComponent> = (args) => (
+const Template: StoryFn<typeof SuccessIconComponent> = (args) => (
   <SuccessIconComponent {...args} />
 );
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import {
   CodePaths,
@@ -10,9 +10,9 @@ import {
 export default {
   title: "Icon/Warning Icon",
   component: WarningIconComponent,
-} as ComponentMeta<typeof CodePaths>;
+} as Meta<typeof CodePaths>;
 
-const Template: ComponentStory<typeof WarningIconComponent> = (args) => (
+const Template: StoryFn<typeof WarningIconComponent> = (args) => (
   <WarningIconComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/data-extensions-editor/DataExtensionsEditor.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Mode } from "../../data-extensions-editor/shared/mode";
 import { DataExtensionsEditor as DataExtensionsEditorComponent } from "../../view/data-extensions-editor/DataExtensionsEditor";
@@ -9,11 +9,11 @@ import { CallClassification } from "../../data-extensions-editor/external-api-us
 export default {
   title: "Data Extensions Editor/Data Extensions Editor",
   component: DataExtensionsEditorComponent,
-} as ComponentMeta<typeof DataExtensionsEditorComponent>;
+} as Meta<typeof DataExtensionsEditorComponent>;
 
-const Template: ComponentStory<typeof DataExtensionsEditorComponent> = (
+const Template: StoryFn<typeof DataExtensionsEditorComponent> = (args) => (
-  args,
+  <DataExtensionsEditorComponent {...args} />
-) => <DataExtensionsEditorComponent {...args} />;
+);
 
 export const DataExtensionsEditor = Template.bind({});
 DataExtensionsEditor.args = {

extensions/ql-vscode/src/stories/data-extensions-editor/MethodRow.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { MethodRow as MethodRowComponent } from "../../view/data-extensions-editor/MethodRow";
 import { CallClassification } from "../../data-extensions-editor/external-api-usage";
@@ -8,9 +8,9 @@ import { CallClassification } from "../../data-extensions-editor/external-api-us
 export default {
   title: "Data Extensions Editor/Method Row",
   component: MethodRowComponent,
-} as ComponentMeta<typeof MethodRowComponent>;
+} as Meta<typeof MethodRowComponent>;
 
-const Template: ComponentStory<typeof MethodRowComponent> = (args) => (
+const Template: StoryFn<typeof MethodRowComponent> = (args) => (
   <MethodRowComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/data-flow-paths/DataFlowPaths.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { DataFlowPaths as DataFlowPathsComponent } from "../../view/data-flow-paths/DataFlowPaths";
 import { createMockDataFlowPaths } from "../../../test/factories/variant-analysis/shared/data-flow-paths";
 export default {
   title: "Data Flow Paths/Data Flow Paths",
   component: DataFlowPathsComponent,
-} as ComponentMeta<typeof DataFlowPathsComponent>;
+} as Meta<typeof DataFlowPathsComponent>;
 
-const Template: ComponentStory<typeof DataFlowPathsComponent> = (args) => (
+const Template: StoryFn<typeof DataFlowPathsComponent> = (args) => (
   <DataFlowPathsComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/AnalysisAlertResult.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import AnalysisAlertResult from "../../view/variant-analysis/AnalysisAlertResult";
 import type { AnalysisAlert } from "../../variant-analysis/shared/analysis-result";
@@ -8,9 +8,9 @@ import type { AnalysisAlert } from "../../variant-analysis/shared/analysis-resul
 export default {
   title: "Variant Analysis/Analysis Alert Result",
   component: AnalysisAlertResult,
-} as ComponentMeta<typeof AnalysisAlertResult>;
+} as Meta<typeof AnalysisAlertResult>;
 
-const Template: ComponentStory<typeof AnalysisAlertResult> = (args) => (
+const Template: StoryFn<typeof AnalysisAlertResult> = (args) => (
   <AnalysisAlertResult {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/FailureReasonAlert.stories.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { VariantAnalysisFailureReason } from "../../variant-analysis/shared/variant-analysis";
 import { FailureReasonAlert } from "../../view/variant-analysis/FailureReasonAlert";
 
 export default {
   title: "Variant Analysis/Failure reason alert",
   component: FailureReasonAlert,
-} as ComponentMeta<typeof FailureReasonAlert>;
+} as Meta<typeof FailureReasonAlert>;
 
-const Template: ComponentStory<typeof FailureReasonAlert> = (args) => (
+const Template: StoryFn<typeof FailureReasonAlert> = (args) => (
   <FailureReasonAlert {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/QueryDetails.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { QueryDetails as QueryDetailsComponent } from "../../view/variant-analysis/QueryDetails";
@@ -29,9 +29,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof QueryDetailsComponent>;
+} as Meta<typeof QueryDetailsComponent>;
 
-const Template: ComponentStory<typeof QueryDetailsComponent> = (args) => (
+const Template: StoryFn<typeof QueryDetailsComponent> = (args) => (
   <QueryDetailsComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/RepoRow.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import {
@@ -27,9 +27,9 @@ export default {
       </VariantAnalysisContainer>
     ),
   ],
-} as ComponentMeta<typeof RepoRow>;
+} as Meta<typeof RepoRow>;
 
-const Template: ComponentStory<typeof RepoRow> = (args: RepoRowProps) => (
+const Template: StoryFn<typeof RepoRow> = (args: RepoRowProps) => (
   <RepoRow {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/RepositoriesFilter.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { RepositoriesFilter as RepositoriesFilterComponent } from "../../view/variant-analysis/RepositoriesFilter";
 import { FilterKey } from "../../variant-analysis/shared/variant-analysis-filter-sort";
@@ -16,7 +16,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof RepositoriesFilterComponent>;
+} as Meta<typeof RepositoriesFilterComponent>;
 
 export const RepositoriesFilter = () => {
   const [value, setValue] = useState(FilterKey.All);

extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearch.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { RepositoriesSearch as RepositoriesSearchComponent } from "../../view/variant-analysis/RepositoriesSearch";
 
@@ -15,7 +15,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof RepositoriesSearchComponent>;
+} as Meta<typeof RepositoriesSearchComponent>;
 
 export const RepositoriesSearch = () => {
   const [value, setValue] = useState("");

extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearchSortRow.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { RepositoriesSearchSortRow as RepositoriesSearchSortRowComponent } from "../../view/variant-analysis/RepositoriesSearchSortRow";
 import { defaultFilterSortState } from "../../variant-analysis/shared/variant-analysis-filter-sort";
@@ -16,7 +16,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof RepositoriesSearchSortRowComponent>;
+} as Meta<typeof RepositoriesSearchSortRowComponent>;
 
 export const RepositoriesSearchSortRow = () => {
   const [value, setValue] = useState(defaultFilterSortState);

extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSort.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { RepositoriesSort as RepositoriesSortComponent } from "../../view/variant-analysis/RepositoriesSort";
 import { SortKey } from "../../variant-analysis/shared/variant-analysis-filter-sort";
@@ -16,7 +16,7 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof RepositoriesSortComponent>;
+} as Meta<typeof RepositoriesSortComponent>;
 
 export const RepositoriesSort = () => {
   const [value, setValue] = useState(SortKey.Alphabetically);

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysis.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysis as VariantAnalysisComponent } from "../../view/variant-analysis/VariantAnalysis";
 import {
@@ -18,9 +18,9 @@ import { createMockRepositoryWithMetadata } from "../../../test/factories/varian
 export default {
   title: "Variant Analysis/Variant Analysis",
   component: VariantAnalysisComponent,
-} as ComponentMeta<typeof VariantAnalysisComponent>;
+} as Meta<typeof VariantAnalysisComponent>;
 
-const Template: ComponentStory<typeof VariantAnalysisComponent> = (args) => (
+const Template: StoryFn<typeof VariantAnalysisComponent> = (args) => (
   <VariantAnalysisComponent {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisActions.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis";
@@ -36,9 +36,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof VariantAnalysisActions>;
+} as Meta<typeof VariantAnalysisActions>;
 
-const Template: ComponentStory<typeof VariantAnalysisActions> = (args) => (
+const Template: StoryFn<typeof VariantAnalysisActions> = (args) => (
   <VariantAnalysisActions {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisAnalyzedRepos.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { faker } from "@faker-js/faker";
 
@@ -28,11 +28,11 @@ export default {
       </VariantAnalysisContainer>
     ),
   ],
-} as ComponentMeta<typeof VariantAnalysisAnalyzedRepos>;
+} as Meta<typeof VariantAnalysisAnalyzedRepos>;
 
-const Template: ComponentStory<typeof VariantAnalysisAnalyzedRepos> = (
+const Template: StoryFn<typeof VariantAnalysisAnalyzedRepos> = (args) => (
-  args,
+  <VariantAnalysisAnalyzedRepos {...args} />
-) => <VariantAnalysisAnalyzedRepos {...args} />;
+);
 
 const interpretedResultsForRepo = (
   nwo: string,

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisHeader.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisHeader } from "../../view/variant-analysis/VariantAnalysisHeader";
@@ -59,9 +59,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof VariantAnalysisHeader>;
+} as Meta<typeof VariantAnalysisHeader>;
 
-const Template: ComponentStory<typeof VariantAnalysisHeader> = (args) => (
+const Template: StoryFn<typeof VariantAnalysisHeader> = (args) => (
   <VariantAnalysisHeader {...args} />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisLoading.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisLoading as VariantAnalysisLoadingComponent } from "../../view/variant-analysis/VariantAnalysisLoading";
@@ -16,9 +16,9 @@ export default {
     ),
   ],
   argTypes: {},
-} as ComponentMeta<typeof VariantAnalysisLoadingComponent>;
+} as Meta<typeof VariantAnalysisLoadingComponent>;
 
-const Template: ComponentStory<typeof VariantAnalysisLoadingComponent> = () => (
+const Template: StoryFn<typeof VariantAnalysisLoadingComponent> = () => (
   <VariantAnalysisLoadingComponent />
 );
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisOutcomePanels.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisOutcomePanels } from "../../view/variant-analysis/VariantAnalysisOutcomePanels";
@@ -27,11 +27,9 @@ export default {
       </VariantAnalysisContainer>
     ),
   ],
-} as ComponentMeta<typeof VariantAnalysisOutcomePanels>;
+} as Meta<typeof VariantAnalysisOutcomePanels>;
 
-const Template: ComponentStory<typeof VariantAnalysisOutcomePanels> = (
+const Template: StoryFn<typeof VariantAnalysisOutcomePanels> = (args) => {
-  args,
-) => {
   const [filterSortState, setFilterSortState] =
     useState<RepositoriesFilterSortState>(defaultFilterSortState);
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisSkippedRepositoriesTab.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisSkippedRepositoriesTab } from "../../view/variant-analysis/VariantAnalysisSkippedRepositoriesTab";
@@ -16,9 +16,9 @@ export default {
       </VariantAnalysisContainer>
     ),
   ],
-} as ComponentMeta<typeof VariantAnalysisSkippedRepositoriesTab>;
+} as Meta<typeof VariantAnalysisSkippedRepositoriesTab>;
 
-const Template: ComponentStory<typeof VariantAnalysisSkippedRepositoriesTab> = (
+const Template: StoryFn<typeof VariantAnalysisSkippedRepositoriesTab> = (
   args,
 ) => <VariantAnalysisSkippedRepositoriesTab {...args} />;
 

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisStats.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer";
 import { VariantAnalysisStats } from "../../view/variant-analysis/VariantAnalysisStats";
@@ -24,9 +24,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof VariantAnalysisStats>;
+} as Meta<typeof VariantAnalysisStats>;
 
-const Template: ComponentStory<typeof VariantAnalysisStats> = (args) => (
+const Template: StoryFn<typeof VariantAnalysisStats> = (args) => (
   <VariantAnalysisStats {...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);
   });