Update Storybook configuration and readme

.gitignore

@@ -42,3 +42,9 @@ next-env.d.ts
 
 *storybook.log
 storybook-static
+
+# storybook config files (to avoid git changes when switching between local and production)
+.storybook/main.js
+.storybook/preview.js
+.storybook/main.local.js
+.storybook/preview.local.js

.storybook/main.js

@@ -16,12 +16,7 @@ const config = {
     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 ??= {};

.storybook/preview.js

@@ -1,62 +1,15 @@
 import "../app/globals.css";
 
-/** @type { import('@storybook/nextjs-vite').Preview } */
+/** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    nextjs: { appDirectory: true },
+    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: "todo",
-    },
-
-    backgrounds: {
-      default: "dark",
-      values: [
-        {
-          name: "dark",
-          value: "#000000",
-        },
-        {
-          name: "light",
-          value: "#ffffff",
-        },
-      ],
-    },
-
-    viewport: {
-      defaultViewport: "md",
-      viewports: {
-        xsm: {
-          name: "XSmall (≤429px)",
-          styles: { width: "429px", height: "800px" },
-        },
-        sm: {
-          name: "Small (≥430px)",
-          styles: { width: "430px", height: "800px" },
-        },
-        md: {
-          name: "Medium (≥640px)",
-          styles: { width: "640px", height: "800px" },
-        },
-        lg: {
-          name: "Large (≥1024px)",
-          styles: { width: "1024px", height: "800px" },
-        },
-        xl: {
-          name: "XLarge (≥1440px)",
-          styles: { width: "1440px", height: "900px" },
-        },
-      },
-    },
   },
 };
 

README.md

@@ -1,36 +1,79 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Community Rule
+
+A Next.js application for community decision-making and governance documentation.
 
 ## Getting Started
 
-First, run the development server:
+Run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+## Storybook Development
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This project includes Storybook for component development and documentation. The setup supports both local development and GitHub Pages deployment.
 
-## Learn More
+### Local Development
 
-To learn more about Next.js, take a look at the following resources:
+For local Storybook development (no base path):
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+```bash
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+npm run storybook:local
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+This will:
 
-## Deploy on Vercel
+- Copy local configuration files (without GitHub Pages base path)
+- Start Storybook at `http://localhost:6006`
+- Ignore configuration changes in git
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Production Deployment
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+When ready to deploy to GitHub Pages:
+
+1. **Restore GitHub Pages configuration:**
+
+   ```bash
+   npm run storybook:restore
+   ```
+
+2. **Build Storybook:**
+
+   ```bash
+   npm run build-storybook
+   ```
+
+3. **Deploy to GitHub Pages repository:**
+
+   ```bash
+   # Copy the build to your GitHub Pages repository
+   cp -r storybook-static/* /path/to/communityrulestorybook/
+
+   # Or if you have it as a git submodule:
+   cp -r storybook-static/* communityrulestorybook/
+   cd communityrulestorybook
+   git add .
+   git commit -m "Update Storybook build"
+   git push origin main
+   ```
+
+### Switching Between Configurations
+
+- **Local Development:** `npm run storybook:local`
+- **Production Build:** `npm run storybook:restore` then `npm run build-storybook`
+- **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
+
+- `npm run dev` - Start Next.js development server
+- `npm run build` - Build Next.js application for production
+- `npm run start` - Start Next.js production server
+- `npm run storybook:local` - Start Storybook with local configuration
+- `npm run storybook:restore` - Restore GitHub Pages configuration
+- `npm run build-storybook` - Build Storybook for production
+- `npm run storybook` - Start Storybook with current configuration

app/components/LogoWall.js

@@ -45,7 +45,7 @@ const LogoWall = ({ logos = [] }) => {
 
   return (
     <section className="p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)]">
-      <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xlg:gap-[var(--spacing-scale-032)]">
+      <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
         {/* Label */}
         <p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
           Trusted by leading cooperators

package.json

@@ -9,6 +9,8 @@
     "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:restore": "git checkout .storybook/main.js .storybook/preview.js",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -31,7 +33,7 @@
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9",
-    "eslint-config-next": "15.2.4",
+    "eslint-config-next": "15.2.0",
     "eslint-plugin-storybook": "^9.1.2",
     "playwright": "^1.54.2",
     "postcss": "^8.5.6",

stories/LogoWall.stories.js

@@ -5,32 +5,70 @@ export default {
   component: LogoWall,
   parameters: {
     layout: "fullscreen",
+    docs: {
+      description: {
+        component: `A responsive logo wall component that displays partner/sponsor logos in a grid layout. Features responsive breakpoints with different layouts and sizing for mobile, tablet, and desktop views.
+
+## Responsive Behavior
+
+- **Mobile**: 3 rows × 2 columns grid with 32px gaps
+- **SM**: 2 rows × 3 columns grid with 48px row gap and 32px column gap
+- **MD**: Single row with space-between layout and 24px gap between text and logos
+- **LG**: Larger logo sizes and 64px horizontal padding
+- **XL**: Largest logo sizes, 160px horizontal padding, and 14px label text
+
+## Props
+
+- **logos** (optional): Array of logo objects with src, alt, size, and order properties. If not provided, uses default partner logos.
+
+## Usage Examples
+
+### Custom Logos
+\`\`\`jsx
+<LogoWall 
+  logos={[
+    { 
+      src: "assets/Section/Logo_CUBoulder.png", 
+      alt: "CU Boulder",
+      size: "h-10 lg:h-12 xl:h-[60px]",
+      order: "order-1 sm:order-2"
+    },
+    { 
+      src: "assets/Section/Logo_FoodNotBombs.png", 
+      alt: "Food Not Bombs",
+      size: "h-11 lg:h-14 xl:h-[70px]",
+      order: "order-2 sm:order-1"
+    }
+  ]} 
+/>
+\`\`\`
+
+### Empty State
+\`\`\`jsx
+<LogoWall logos={[]} />
+\`\`\`
+This will fall back to the default partner logos.`,
+      },
+    },
   },
   tags: ["autodocs"],
   argTypes: {
     logos: {
       control: "object",
-      description: "Array of logo objects with src and alt properties",
+      description:
+        "Array of logo objects with src, alt, size, and order properties. If not provided, uses default partner logos.",
     },
   },
 };
 
 export const Default = {
   args: {},
-};
+  parameters: {
-
+    docs: {
-export const CustomLogos = {
+      description: {
-  args: {
+        story:
-    logos: [
+          "Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens.",
-      { src: "assets/Section/Logo_CUBoulder.png", alt: "CU Boulder" },
+      },
-      { src: "assets/Section/Logo_FoodNotBombs.png", alt: "Food Not Bombs" },
+    },
-      { src: "assets/Section/Logo_Metagov.png", alt: "Metagov" },
-    ],
-  },
-};
-
-export const EmptyState = {
-  args: {
-    logos: [],
   },
 };