feat(storybook): upgrade to storybook 9

apps/web/src/components/feedback/profile-card/ProfileCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within, expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import { CenterDecorator } from "storybook-package";
 import { ProfileCard as Component } from "./ProfileCard";
 import type { ProfileCardProps as Props } from "./ProfileCard";
@@ -22,9 +22,7 @@ const defaultArgs = {
 export const WithData: Story = {
   args: defaultArgs,
   parameters: { viewport: { defaultViewport: "full" } },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     // No text should be visible during loading
     await expect(canvas.getByTestId("profile-card__name-text")).toHaveTextContent("John Doe");
     await expect(canvas.getByTestId("profile-card__email-text")).toHaveTextContent("john.doe@gmail.com");
@@ -39,9 +37,7 @@ export const Loading: Story = {
     name: "",
     email: "",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas }) => {
     // No text should be visible during loading
     await expect(canvas.getByTestId("profile-card__name-text")).not.toHaveTextContent(/./);
     await expect(canvas.getByTestId("profile-card__email-text")).not.toHaveTextContent(/./);

apps/web/src/components/forms/forgot-password/ForgotPasswordForm.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within, expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import { ContainerDecorator } from "storybook-package";
 import { ForgotPasswordForm as Component } from "./ForgotPasswordForm";
 import type { ForgotPasswordFormProps as Props } from "./ForgotPasswordForm";
@@ -24,9 +24,7 @@ export const Standard: Story = {
 
 export const Success: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("forgot-password-form__email-input"), "email@provider.com");
     await userEvent.click(canvas.getByTestId("forgot-password-form__submit-button"));
 
@@ -36,9 +34,7 @@ export const Success: Story = {
 
 export const IncorrectEmail: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("forgot-password-form__email-input"), "incorrect");
     await userEvent.click(canvas.getByTestId("forgot-password-form__submit-button"));
 

apps/web/src/components/forms/login/LoginForm.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within, expect } from "@storybook/test";
+import { expect, waitFor } from "storybook/test";
 import { ContainerDecorator } from "storybook-package";
 import { LoginForm as Component } from "./LoginForm";
 import type { LoginFormProps as Props } from "./LoginForm";
@@ -24,23 +24,21 @@ export const Standard: Story = {
 
 export const Success: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("login-form__email-input"), "email@provider.com");
     await userEvent.type(canvas.getByTestId("login-form__password-input"), "password");
     await userEvent.click(canvas.getByTestId("login-form__submit-button"));
 
-    await expect(canvas.getByTestId("login-form__email-input")).toHaveValue("email@provider.com");
-    await expect(canvas.getByTestId("login-form__password-input")).toHaveValue("password");
+    waitFor(async () => {
+      await expect(canvas.getByTestId("login-form__email-input")).toHaveValue("email@provider.com");
+      await expect(canvas.getByTestId("login-form__password-input")).toHaveValue("password");
+    });
   },
 } satisfies Story;
 
 export const EmailMissing: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("login-form__password-input"), "password");
     await userEvent.click(canvas.getByTestId("login-form__submit-button"));
 
@@ -50,9 +48,7 @@ export const EmailMissing: Story = {
 
 export const EmailInvalid: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("login-form__email-input"), "incorrect");
     await userEvent.type(canvas.getByTestId("login-form__password-input"), "password");
     await userEvent.click(canvas.getByTestId("login-form__submit-button"));
@@ -63,9 +59,7 @@ export const EmailInvalid: Story = {
 
 export const PasswordMissing: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("login-form__email-input"), "email@provider.com");
     await userEvent.click(canvas.getByTestId("login-form__submit-button"));
 

apps/web/src/components/forms/sign-up/SignUpForm.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within, expect } from "@storybook/test";
+import { expect, waitFor } from "storybook/test";
 import { ContainerDecorator } from "storybook-package";
 import { SignUpForm as Component } from "./SignUpForm";
 import type { SignUpFormProps as Props } from "./SignUpForm";
@@ -24,9 +24,7 @@ export const Standard: Story = {
 
 export const Success: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("sign-up-form__username-input"), "username");
     await userEvent.type(canvas.getByTestId("sign-up-form__firstname-input"), "john");
     await userEvent.type(canvas.getByTestId("sign-up-form__lastname-input"), "doe");
@@ -49,23 +47,21 @@ export const Success: Story = {
 
 export const MissingFields: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.click(canvas.getByTestId("sign-up-form__submit-button"));
 
-    await expect(canvas.getByText("We need to call you something")).toBeInTheDocument();
-    await expect(canvas.getByText("Email is required")).toBeInTheDocument();
-    await expect(canvas.getByText("Password is required")).toBeInTheDocument();
-    await expect(canvas.getByText("Password must be confirmed")).toBeInTheDocument();
+    waitFor(async () => {
+      await expect(canvas.getByText("We need to call you something")).toBeInTheDocument();
+      await expect(canvas.getByText("Email is required")).toBeInTheDocument();
+      await expect(canvas.getByText("Password is required")).toBeInTheDocument();
+      await expect(canvas.getByText("Password must be confirmed")).toBeInTheDocument();
+    });
   },
 };
 
 export const IncorrectPassword: Story = {
   args: defaultArgs,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
+  play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByTestId("sign-up-form__username-input"), "username");
     await userEvent.type(canvas.getByTestId("sign-up-form__email-input"), "email@provider.com");
     await userEvent.type(canvas.getByTestId("sign-up-form__password-input"), "short");

configs/storybook/main.ts

@@ -4,10 +4,7 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-a11y",
     "@storybook/addon-coverage",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-themes",
-    "@storybook/addon-viewport",
   ],
   core: {
     builder: {

configs/storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 import { Preview } from "@storybook/react";
 import { IntlProvider } from "react-intl";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";

package.json

@@ -59,17 +59,13 @@
     "@commitlint/types": "19.8.1",
     "@faker-js/faker": "9.8.0",
     "@mocks-server/main": "4.1.0",
-    "@storybook/addon-a11y": "8.6.14",
+    "@storybook/addon-a11y": "9.0.10",
     "@storybook/addon-coverage": "1.0.5",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-themes": "8.6.14",
-    "@storybook/addon-viewport": "8.6.14",
-    "@storybook/builder-vite": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
-    "@storybook/test": "8.6.14",
-    "@storybook/test-runner": "0.22.1",
+    "@storybook/addon-themes": "9.0.10",
+    "@storybook/builder-vite": "9.0.10",
+    "@storybook/react": "9.0.10",
+    "@storybook/react-vite": "9.0.10",
+    "@storybook/test-runner": "0.23.0",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/typography": "0.5.16",
     "@tailwindcss/vite": "4.1.8",
@@ -87,7 +83,7 @@
     "prettier-plugin-tailwindcss": "0.6.12",
     "rimraf": "6.0.1",
     "start-server-and-test": "2.0.12",
-    "storybook": "8.6.14",
+    "storybook": "9.0.10",
     "tailwindcss": "4.1.8",
     "turbo": "2.5.4",
     "typescript": "5.8.3",