Fix Storybook runner tests

.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>
     ),