Consolidate storybook configuration

.gitea/workflows/ci.yaml

@@ -152,7 +152,7 @@ jobs:
       - uses: actions/setup-node@v4
         with: { node-version: 20, cache: npm }
       - run: npm ci
-      - run: npm run build-storybook
+      - run: npm run storybook:build:github
       - run: npm run test:sb
         env: { CI: true }
 
@@ -174,4 +174,4 @@ jobs:
         with: { node-version: 20, cache: npm }
       - run: npm ci
       - run: npm run build
-      - run: npm run build-storybook
+      - run: npm run storybook:build:github

.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;

README.md

@@ -52,59 +52,46 @@ npm run test:sb
 
 ## 📚 Storybook Development
 
-This project includes Storybook for component development and documentation. The setup supports both local development and GitHub Pages deployment.
+This project includes Storybook for component development and documentation. The setup automatically detects the environment and applies the appropriate configuration.
 
 ### Local Development
 
-For local Storybook development (no base path):
+For local Storybook development:
 
 ```bash
 npm run storybook:local
+# or simply
+npm run storybook
 ```
 
 This will:
 
-- Copy local configuration files (without GitHub Pages base path)
 - Start Storybook at `http://localhost:6006`
-- Ignore configuration changes in git
+- Use relative paths for assets (no base path)
 
-### Production Deployment
+### GitHub Pages Deployment
 
-When ready to deploy to GitHub Pages:
+For GitHub Pages deployment with base path:
-
-1. **Restore GitHub Pages configuration:**
 
 ```bash
-   npm run storybook:restore
+npm run storybook:build:github
 ```
 
-2. **Build Storybook:**
+This will:
 
-   ```bash
+- Build Storybook with `/communityrulestorybook/` base path
-   npm run build-storybook
+- Generate files ready for GitHub Pages deployment
-   ```
 
-3. **Deploy to GitHub Pages repository:**
+### CI/CD Integration
 
-   ```bash
+The CI pipeline automatically uses the GitHub Pages configuration when building Storybook.
-   # Copy the build to your GitHub Pages repository
-   cp -r storybook-static/* /path/to/communityrulestorybook/
 
-   # Or if you have it as a git submodule:
+### Configuration
-   cp -r storybook-static/* communityrulestorybook/
-   cd communityrulestorybook
-   git add .
-   git commit -m "Update Storybook build"
-   git push origin main
-   ```
 
-### Switching Between Configurations
+The Storybook configuration automatically detects the environment:
 
-- **Local Development:** `npm run storybook:local`
+- **Local development**: No base path, relative assets
-- **Production Build:** `npm run storybook:restore` then `npm run build-storybook`
+- **CI/Production**: Base path `/communityrulestorybook/` for GitHub Pages
-- **Back to Local:** `npm run storybook:local`
-
-The gitignore is configured to prevent configuration file changes from triggering git changes during local development.
 
 ## 📋 Available Scripts
 
@@ -127,9 +114,10 @@ The gitignore is configured to prevent configuration file changes from triggerin
 
 ### Storybook
 
-- `npm run storybook:local` - Start Storybook with local configuration
+- `npm run storybook:local` - Start Storybook for local development
-- `npm run storybook:restore` - Restore GitHub Pages configuration
+- `npm run storybook:github` - Start Storybook with GitHub Pages configuration
-- `npm run build-storybook` - Build Storybook for production
+- `npm run storybook:build` - Build Storybook for local deployment
+- `npm run storybook:build:github` - Build Storybook for GitHub Pages
 - `npm run storybook` - Start Storybook with current configuration
 
 ## 🏗️ Project Structure

package.json

@@ -9,8 +9,10 @@
     "lint": "next lint",
     "postinstall": "npm rebuild lightningcss",
     "storybook": "storybook dev -p 6006",
-    "storybook:local": "cp .storybook/main.local.js .storybook/main.js && cp .storybook/preview.local.js .storybook/preview.js && storybook dev -p 6006",
+    "storybook:local": "storybook dev -p 6006",
-    "storybook:restore": "cp .storybook/main.github.js .storybook/main.js && cp .storybook/preview.github.js .storybook/preview.js",
+    "storybook:github": "STORYBOOK_BASE_PATH=true storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:build:github": "STORYBOOK_BASE_PATH=true storybook build",
     "build-storybook": "storybook build",
     "test": "vitest run --coverage",
     "test:watch": "vitest",