.storybook/main.js

@@ -5,10 +5,9 @@ const config = {
     "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-a11y",
+    "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@chromatic-com/storybook",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/nextjs-vite",
@@ -16,30 +15,8 @@ const config = {
   },
   staticDirs: ["../public"],
 
-  // Auto-detect environment and apply appropriate settings
-  managerHead: (head) => {
-    // Only add base href for GitHub Pages (when CI=true or specific environment)
-    if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
-      return `${head}<base href="/communityrulestorybook/">`;
-    }
-    return head;
-  },
-
-  previewHead: (head) => {
-    // Only add base href for GitHub Pages
-    if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
-      return `${head}<base href="/communityrulestorybook/">`;
-    }
-    return head;
-  },
-
+  // Ensure esbuild treats .js as JSX during dep pre-bundling
   async viteFinal(cfg) {
-    // Set base path for GitHub Pages when needed
-    if (process.env.CI || process.env.STORYBOOK_BASE_PATH) {
-      cfg.base = "/communityrulestorybook/";
-    }
-
-    // Ensure esbuild treats .js as JSX during dep pre-bundling
     cfg.optimizeDeps ??= {};
     cfg.optimizeDeps.esbuildOptions ??= {};
     cfg.optimizeDeps.esbuildOptions.loader = {

.storybook/preview.js

@@ -1,33 +1,8 @@
 import "../app/globals.css";
 
-// Import Google Fonts for Storybook
-import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-inter",
-  display: "swap",
-});
-
-const bricolageGrotesque = Bricolage_Grotesque({
-  subsets: ["latin"],
-  weight: ["400", "500", "700", "800"],
-  variable: "--font-bricolage-grotesque",
-  display: "swap",
-});
-
-const spaceGrotesk = Space_Grotesk({
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
-  variable: "--font-space-grotesk",
-  display: "swap",
-});
-
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -37,9 +12,7 @@ const preview = {
   },
   decorators: [
     (Story) => (
-      <div
-        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable} font-sans`}
-      >
+      <div className="font-sans">
         <Story />
       </div>
     ),

package.json

@@ -42,21 +42,20 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@chromatic-com/storybook": "^4.1.0",
     "@eslint/eslintrc": "^3",
     "@lhci/cli": "^0.15.1",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
     "@storybook/addon-onboarding": "^9.1.2",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-viewport": "^9.0.8",
     "@storybook/addon-vitest": "^9.1.2",
     "@storybook/nextjs-vite": "^9.1.2",
-    "@storybook/test": "^8.6.14",
+    "@storybook/test": "^9.0.0-alpha.2",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.11",

stories/Header.responsive.stories.js

@@ -197,18 +197,18 @@ export const Interactive = {
     const canvas = within(canvasElement);
 
     await step("Click navigation items", async () => {
-      const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
+      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
       await userEvent.click(useCasesLink);
 
-      const learnLink = canvas.getByRole("link", { name: /learn/i });
+      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
       await userEvent.click(learnLink);
 
-      const aboutLink = canvas.getByRole("link", { name: /about/i });
+      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
       await userEvent.click(aboutLink);
     });
 
     await step("Click authentication elements", async () => {
-      const loginLink = canvas.getByRole("link", {
+      const loginLink = canvas.getByRole("menuitem", {
         name: /log in to your account/i,
       });
       await userEvent.click(loginLink);
@@ -238,22 +238,22 @@ export const HoverStates = {
     const canvas = within(canvasElement);
 
     await step("Hover over navigation items", async () => {
-      const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
+      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
       await userEvent.hover(useCasesLink);
       // Wait for hover state to be visible
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      const learnLink = canvas.getByRole("link", { name: /learn/i });
+      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
       await userEvent.hover(learnLink);
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      const aboutLink = canvas.getByRole("link", { name: /about/i });
+      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
       await userEvent.hover(aboutLink);
       await new Promise((resolve) => setTimeout(resolve, 100));
     });
 
     await step("Hover over authentication elements", async () => {
-      const loginLink = canvas.getByRole("link", {
+      const loginLink = canvas.getByRole("menuitem", {
         name: /log in to your account/i,
       });
       await userEvent.hover(loginLink);
@@ -285,21 +285,21 @@ export const FocusStates = {
     const canvas = within(canvasElement);
 
     await step("Focus on navigation items", async () => {
-      const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
+      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
       useCasesLink.focus();
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      const learnLink = canvas.getByRole("link", { name: /learn/i });
+      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
       learnLink.focus();
       await new Promise((resolve) => setTimeout(resolve, 100));
 
-      const aboutLink = canvas.getByRole("link", { name: /about/i });
+      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
       aboutLink.focus();
       await new Promise((resolve) => setTimeout(resolve, 100));
     });
 
     await step("Focus on authentication elements", async () => {
-      const loginLink = canvas.getByRole("link", {
+      const loginLink = canvas.getByRole("menuitem", {
         name: /log in to your account/i,
       });
       loginLink.focus();