Merge pull request #4263 from github/copilot/fix-github-actions-workflow-again

Re-enable MDX documentation support in Storybook v10

Author: d10c

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-lock.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/package.json

@@ -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';

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

@@ -1,4 +1,4 @@
-import type { ChangeEvent, SetStateAction } from "react";
+import type { SetStateAction } from "react";
 import { useCallback } from "react";
 import {
   VscodeOption,
@@ -25,8 +25,8 @@ export const CodeFlowsDropdown = ({
   setSelectedCodeFlow,
 }: CodeFlowsDropdownProps) => {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const selectedOption = e.target;
+    (e: Event) => {
+      const selectedOption = e.target as HTMLSelectElement;
       const selectedIndex = parseInt(selectedOption.value);
       setSelectedCodeFlow(codeFlows[selectedIndex]);
     },

extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx

@@ -83,7 +83,7 @@ export const DataGridRow = forwardRef(
       "data-testid": testId,
       onClick,
     }: DataGridRowProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => (
     <StyledDataGridRow
       $focused={focused}
@@ -135,7 +135,7 @@ export const DataGridCell = forwardRef(
       className,
       children,
     }: DataGridCellProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => {
     return (
       <StyledDataGridCell

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 
 type Size = "x-small" | "small" | "medium" | "large" | "x-large";
 
-const StyledButton = styled.button<{ $size: Size }>`
+const StyledButton = styled.button<{ $size?: Size }>`
   background: none;
   color: var(--vscode-textLink-foreground);
   border: none;

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

@@ -20,7 +20,7 @@ type Props = {
 
 export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);