Merge pull request #3480 from github/dependabot/npm_and_yarn/extensions/ql-vscode/storybook-ea1bb043e9

Bump the storybook group in /extensions/ql-vscode with 11 updates

Author: koesie10

extensions/ql-vscode/.babelrc.json

@@ -1,7 +1,7 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     "./vscode-theme-addon/preset.ts",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {

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

@@ -5,10 +5,10 @@ import { useCallback } from "react";
 import { useGlobals } from "@storybook/manager-api";
 import {
   IconButton,
-  Icons,
   TooltipLinkList,
   WithTooltip,
 } from "@storybook/components";
+import { DashboardIcon } from "@storybook/icons";
 
 import { themeNames, VSCodeTheme } from "./theme";
 
@@ -53,7 +53,7 @@ export const ThemeSelector: FunctionComponent = () => {
         title="Change the theme of the preview"
         active={vscodeTheme !== VSCodeTheme.Dark}
       >
-        <Icons icon="dashboard" />
+        <DashboardIcon />
       </IconButton>
     </WithTooltip>
   );

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

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 import { useEffect } from "react";
 import type {
   PartialStoryFn as StoryFunction,
@@ -6,31 +8,20 @@ import type {
 
 import { VSCodeTheme } from "./theme";
 
+import darkThemeStyle from "../../src/stories/vscode-theme-dark.css?url";
+import lightThemeStyle from "../../src/stories/vscode-theme-light.css?url";
+import lightHighContrastThemeStyle from "../../src/stories/vscode-theme-light-high-contrast.css?url";
+import darkHighContrastThemeStyle from "../../src/stories/vscode-theme-dark-high-contrast.css?url";
+import githubLightDefaultThemeStyle from "../../src/stories/vscode-theme-github-light-default.css?url";
+import githubDarkDefaultThemeStyle from "../../src/stories/vscode-theme-github-dark-default.css?url";
+
 const themeFiles: { [key in VSCodeTheme]: string } = {
-  [VSCodeTheme.Dark]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark.css")
-      .default,
-  [VSCodeTheme.Light]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-light.css")
-      .default,
-  [VSCodeTheme.LightHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-light-high-contrast.css")
-      .default,
-  [VSCodeTheme.DarkHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark-high-contrast.css")
-      .default,
-  [VSCodeTheme.GitHubLightDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-light-default.css")
-      .default,
-  [VSCodeTheme.GitHubDarkDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-dark-default.css")
-      .default,
+  [VSCodeTheme.Dark]: darkThemeStyle,
+  [VSCodeTheme.Light]: lightThemeStyle,
+  [VSCodeTheme.LightHighContrast]: lightHighContrastThemeStyle,
+  [VSCodeTheme.DarkHighContrast]: darkHighContrastThemeStyle,
+  [VSCodeTheme.GitHubLightDefault]: githubLightDefaultThemeStyle,
+  [VSCodeTheme.GitHubDarkDefault]: githubDarkDefaultThemeStyle,
 };
 
 export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {