Upgrade Storybook to v10

.github/workflows/storybook-tests.yml

@@ -12,6 +12,7 @@ jobs:
       - uses: oven-sh/setup-bun@v2
       - run: bun install
       - run: bunx playwright install --with-deps
-      - run: bun run test-storybook
-        env:
-          TARGET_URL: "${{ github.event.deployment_status.environment_url }}"
+      - run: bun run build-storybook
+      - run: bunx serve storybook-static -l 6006 &
+      - run: bunx wait-on http://127.0.0.1:6006
+      - run: bun run test-storybook --url http://127.0.0.1:6006 --ci

.storybook/main.ts

@@ -5,11 +5,9 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
     "@storybook/addon-a11y",
-    "@storybook/addon-queryparams",
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -1,6 +1,11 @@
+/// <reference lib="dom" />
+
 import "../src/index.css";
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
 import { initialize, mswLoader } from "msw-storybook-addon";
+import { useEffect } from "react";
+import React from "react";
+import { client } from "../src/api/infra/gitHub/gitHubClient";
 
 // Initialize MSW
 initialize();
@@ -20,6 +25,30 @@ const preview: Preview = {
   tags: ["autodocs"],
   // Provide the MSW addon loader globally
   loaders: [mswLoader],
+  decorators: [
+    (Story, context) => {
+      const QueryParamsDecorator = () => {
+        useEffect(() => {
+          client.cache.reset();
+
+          const queryParams = context.parameters?.query;
+          if (queryParams && typeof queryParams === "object") {
+            const url = new URL(window.location.href);
+            Object.entries(queryParams).forEach(([key, value]) => {
+              if (value) {
+                url.searchParams.set(key, String(value));
+              }
+            });
+            window.history.replaceState({}, "", url.toString());
+          }
+        }, []);
+
+        return React.createElement(Story);
+      };
+
+      return React.createElement(QueryParamsDecorator);
+    },
+  ],
 };
 
 export default preview;

package.json

@@ -19,26 +19,21 @@
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@storybook/test-runner": "^0.20.1",
     "graphql": "^16.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.25.1",
     "@faker-js/faker": "^9.7.0",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/addon-queryparams": "^7.0.1",
-    "@storybook/blocks": "^8.6.12",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
     "@storybook/eslint-config-storybook": "^4.0.0",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/react-vite": "^10.1.11",
+    "@storybook/test-runner": "^0.24.2",
     "@tanstack/eslint-plugin-query": "^5.74.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -55,14 +50,14 @@
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^10.1.11",
     "happy-dom": "^15.11.7",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.1",
     "msw": "^2.7.5",
     "msw-storybook-addon": "^2.0.4",
     "prettier": "^3.5.3",
-    "storybook": "^8.6.12",
+    "storybook": "^10.1.11",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.31.0",
     "vite": "^6.3.3",

src/api/infra/gitHub/gitHubClient.ts

@@ -5,6 +5,8 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
+export { client };
+
 export interface GitHubTeam {
   name: string;
 }

src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import Button from "./Button";
 

src/components/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Card from "./Card";
 
 const meta: Meta<typeof Card> = {

src/components/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Footer from "./Footer";
 
 const meta = {

src/components/GradeImage/GradeImage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Card from "./GradeImage";
 
 const meta: Meta<typeof Card> = {

src/components/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Header from "./Header";
 
 const meta = {

src/components/Layout/Layout.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Layout from "./Layout";
 
 const meta = {

src/components/Link/Link.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 import Link from "./Link";
 
 const meta = {

src/components/NotFound/NotFound.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import NotFound from "./NotFound";
 

src/components/Pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Pagination from "./Pagination";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 const meta = {
   component: Pagination,

src/components/SearchBar/SearchBar.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 import SearchBar from "./SearchBar";
 
 const meta = {

src/components/ServerError/ServerError.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import ServerError from "./ServerError";
 
 const meta = {

src/components/Sidebar/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Sidebar from "./Sidebar.tsx";
 
 const meta = {

src/components/Spinner/Spinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Spinner from "./Spinner";
 
 const meta: Meta<typeof Spinner> = {

src/components/Table/Table.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Table } from "./Table";
 
 const meta: Meta<typeof Table> = {

src/components/Unqualified/Unqualified.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import Unqualified from "./Unqualified";
 
 export default {

src/pages/Certificate/Certificate.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { delay, graphql, HttpResponse } from "msw";
 
 import Certificate from "./Certificate";

src/pages/Leaderboard/Leaderboard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { delay, graphql, HttpResponse } from "msw";
 import Leaderboard from "./Leaderboard";
 

src/pages/Progress/Progress.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { delay, graphql, HttpResponse } from "msw";
 
 import Progress from "./Progress";

tsconfig.node.json

@@ -18,5 +18,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", ".storybook/**/*.ts"]
 }