Major dependency updates

.node-version

@@ -0,0 +1 @@
+20.13.1

.storybook/main.ts

@@ -6,32 +6,34 @@ const addons = [
   "@storybook/addon-interactions",
   "@storybook/addon-designs",
   "@storybook/addon-themes",
-  "storybook-addon-jsx",
 ];
 
 if (process.env.NODE_ENV === "development") {
   addons.push("@storybook/addon-a11y");
 }
 
 const config: StorybookConfig = {
-  stories: [
-    "../src/**/*.mdx",
-    "../src/**/!(__ComponentTemplate__)*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../src/**/!(__ComponentTemplate__)*.stories.@(js|jsx|ts|tsx)"],
+
   addons,
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  features: {
-    storyStoreV7: true,
-  },
+
   viteFinal: (config) => {
     return {
       ...config,
       publicDir: "res",
     };
   },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 
 export default config;

.storybook/manager.ts

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

.storybook/preview.ts

@@ -1,6 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { Decorator, Parameters } from "@storybook/react";
-import { jsxDecorator } from "storybook-addon-jsx";
 
 import "@fontsource/inconsolata/700.css";
 import "@fontsource/inter/400.css";
@@ -31,5 +30,5 @@ export const decorators: Decorator[] = [
     },
     defaultTheme: "light",
   }),
-  jsxDecorator,
 ];
+export const tags = ["autodocs"];

package.json

@@ -52,16 +52,15 @@
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-designs": "7.0.5",
-    "@storybook/addon-essentials": "7.4.2",
-    "@storybook/addon-interactions": "7.4.2",
-    "@storybook/addon-links": "7.4.2",
-    "@storybook/addon-themes": "^7.4.2",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/react": "7.4.2",
-    "@storybook/react-vite": "7.4.2",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/addon-a11y": "^8.1.1",
+    "@storybook/addon-designs": "8.0.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-themes": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -89,18 +88,17 @@
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.1",
     "serve": "^14.2.1",
-    "storybook": "^7.4.2",
-    "storybook-addon-jsx": "^7.3.14",
+    "storybook": "^8.1.1",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-plugin-defensive-css": "^0.9.1",
     "stylelint-use-logical": "^2.1.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^5.2.11",
     "vite-plugin-dts": "^3.5.3",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.4"
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.9",
@@ -111,6 +109,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@storybook/manager-api": "^8.1.1",
     "classnames": "^2.3.2",
     "graphemer": "^1.4.0",
     "vaul": "^0.7.0"

playwright/visual.test.ts

@@ -17,24 +17,22 @@ limitations under the License.
 import { expect, test } from "@playwright/test";
 import fs from "fs";
 
-interface Story {
+interface StoryEntry {
   id: string;
+  type: string;
   title: string;
   name: string;
   importPath: string;
   tags: string[];
 }
 
 interface Stories {
-  [id: string]: Story;
+  [id: string]: StoryEntry;
 }
 
 test.describe.configure({ mode: "parallel" });
 
-const storiesPath = new URL(
-  "../storybook-static/stories.json",
-  import.meta.url,
-);
+const storiesPath = new URL("../storybook-static/index.json", import.meta.url);
 if (!fs.existsSync(storiesPath)) {
   console.error(
     "Storybook manifest not found, please rebuild with 'yarn build-storybook'",
@@ -43,12 +41,12 @@ if (!fs.existsSync(storiesPath)) {
 }
 
 const stories = JSON.parse(fs.readFileSync(storiesPath, "utf8"))
-  .stories as Stories;
+  .entries as Stories;
 
 // Perform visual testing on each story
 for (const story of Object.values(stories)) {
   // Ignore things that are not stories (e.g. doc pages)
-  if (story.tags.includes("story")) {
+  if (story.type === "story") {
     test(`${story.title} ${story.name}`, async ({ page }) => {
       const search = new URLSearchParams({ viewMode: "story", id: story.id });
       await page.goto(`iframe.html?${search.toString()}`, {

src/components/Button/Button.stories.tsx

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Button as ButtonComponent } from "./Button";
 import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
@@ -23,9 +24,6 @@ export default {
   title: "Button",
   component: ButtonComponent,
   tags: ["autodocs"],
-  parameters: {
-    actions: { argTypesRegex: "^on.*" },
-  },
   argTypes: {
     size: {
       options: ["sm", "lg"],
@@ -59,6 +57,7 @@ export default {
     destructive: false,
     disabled: false,
     children: "Click me!",
+    onClick: fn(),
   },
 } as Meta<typeof ButtonComponent>;
 

src/components/Button/IconButton/IconButton.stories.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { IconButton as IconButtonComponent } from "./IconButton";
 
@@ -25,9 +26,6 @@ export default {
   title: "Button/IconButton",
   component: IconButtonComponent,
   tags: ["autodocs"],
-  parameters: {
-    actions: { argTypesRegex: "^on.*" },
-  },
   argTypes: {
     control: { type: "boolean" },
     onClick: { action: "onClick" },
@@ -36,6 +34,7 @@ export default {
     size: "32px",
     disabled: false,
     children: <UserIcon />,
+    onClick: fn(),
   },
 } as Meta<typeof IconButtonComponent>;
 

src/components/Form/Controls/MFA/__snapshots__/MFA.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`PasswordControl > renders 1`] = `
           maxlength="6"
           minlength="0"
           name="mfa"
-          pattern="\\\\d{6}"
+          pattern="\\d{6}"
           placeholder="000000"
           title=""
           type="text"

src/components/Form/Controls/Password/Password.stories.tsx

@@ -20,8 +20,8 @@ import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import { PasswordInput } from "./";
-import { within } from "@storybook/testing-library";
-import { userEvent } from "@storybook/testing-library";
+import { within } from "@storybook/test";
+import { userEvent } from "@storybook/test";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof PasswordInput>;
 

src/components/Icon/IndicatorIcon/IndicatorIcon.stories.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { IndicatorIcon as IndicatorIconComponent } from "./IndicatorIcon";
 
@@ -25,9 +26,6 @@ export default {
   title: "Icon/IndicatorIcon",
   component: IndicatorIconComponent,
   tags: ["autodocs"],
-  parameters: {
-    actions: { argTypesRegex: "^on.*" },
-  },
   argTypes: {
     control: { type: "boolean" },
     onClick: { action: "onClick" },
@@ -36,6 +34,7 @@ export default {
     size: "32px",
     disabled: false,
     children: <ThreadIcon />,
+    onClick: fn(),
   },
 } as Meta<typeof IndicatorIconComponent>;
 

src/components/Tooltip/Tooltip.stories.tsx

@@ -40,10 +40,10 @@ export default {
       control: "boolean",
     },
     label: {
-      control: "string",
+      control: "text",
     },
     caption: {
-      control: "string",
+      control: "text",
     },
   },
   args: {

src/setupTests.ts

@@ -18,7 +18,7 @@ limitations under the License.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/vitest";
+import "@testing-library/jest-dom";
 
 import { TextEncoder, TextDecoder } from "util";