Consolidate storybook configuration

.storybook/main.github.js

@@ -1,35 +0,0 @@
-/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
-const config = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
-  addons: [
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest",
-  ],
-  framework: {
-    name: "@storybook/nextjs-vite",
-    options: {},
-  },
-  staticDirs: ["../public"],
-  managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
-  previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
-  async viteFinal(cfg) {
-    // IMPORTANT: Set base path for GitHub Pages sub-path hosting
-    cfg.base = "/communityrulestorybook/";
-    // Ensure esbuild treats .js as JSX during dep pre-bundling
-    cfg.optimizeDeps ??= {};
-    cfg.optimizeDeps.esbuildOptions ??= {};
-    cfg.optimizeDeps.esbuildOptions.loader = {
-      ...(cfg.optimizeDeps.esbuildOptions.loader || {}),
-      ".js": "jsx",
-      ".ts": "tsx",
-    };
-    return cfg;
-  },
-};
-export default config;

.storybook/main.js

@@ -17,7 +17,30 @@ const config = {
     options: {},
   },
   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;
+  },
+
   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 ??= {};
@@ -29,4 +52,5 @@ const config = {
     return cfg;
   },
 };
+
 export default config;

.storybook/main.local.js

@@ -1,31 +0,0 @@
-/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
-const config = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
-  addons: [
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest",
-  ],
-  framework: {
-    name: "@storybook/nextjs-vite",
-    options: {},
-  },
-  staticDirs: ["../public"],
-  async viteFinal(cfg) {
-    // Ensure esbuild treats .js as JSX during dep pre-bundling
-    cfg.optimizeDeps ??= {};
-    cfg.optimizeDeps.esbuildOptions ??= {};
-    cfg.optimizeDeps.esbuildOptions.loader = {
-      ...(cfg.optimizeDeps.esbuildOptions.loader || {}),
-      ".js": "jsx",
-      ".ts": "tsx",
-    };
-    return cfg;
-  },
-};
-export default config;

.storybook/preview.github.js

@@ -1,49 +0,0 @@
-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,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable} font-sans`}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default preview;

.storybook/preview.js

@@ -34,9 +34,6 @@ const preview = {
         date: /Date$/i,
       },
     },
-    a11y: { element: '#storybook-root', manual: false },
-    viewport: { defaultViewport: 'responsive' },
-    chromatic: { viewports: [360, 768, 1024, 1440] } // breakpoints
   },
   decorators: [
     (Story) => (

.storybook/preview.local.js

@@ -1,49 +0,0 @@
-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,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable} font-sans`}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default preview;