diff --git a/.gitignore b/.gitignore index a46e550..7657b58 100644 --- a/.gitignore +++ b/.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 diff --git a/.storybook/main.js b/.storybook/main.js index c3d3eb1..6e3993d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -16,12 +16,7 @@ const config = { options: {}, }, staticDirs: ["../public"], - managerHead: (head) => `${head}`, - previewHead: (head) => `${head}`, 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 ??= {}; diff --git a/.storybook/preview.js b/.storybook/preview.js index bd769ce..1fd25df 100644 --- a/.storybook/preview.js +++ b/.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" }, - }, - }, - }, }, }; diff --git a/README.md b/README.md index 66bb426..b70ece1 100644 --- a/README.md +++ b/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. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +```bash +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 diff --git a/app/components/LogoWall.js b/app/components/LogoWall.js index 8836fc7..3625854 100644 --- a/app/components/LogoWall.js +++ b/app/components/LogoWall.js @@ -45,7 +45,7 @@ const LogoWall = ({ logos = [] }) => { return (
-
+
{/* Label */}

Trusted by leading cooperators diff --git a/package.json b/package.json index 233af71..296fde1 100644 --- a/package.json +++ b/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", diff --git a/stories/LogoWall.stories.js b/stories/LogoWall.stories.js index c5e5540..90644e3 100644 --- a/stories/LogoWall.stories.js +++ b/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 + +\`\`\` + +### Empty State +\`\`\`jsx + +\`\`\` +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: {}, -}; - -export const CustomLogos = { - args: { - logos: [ - { 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: [], + parameters: { + docs: { + description: { + story: + "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.", + }, + }, }, };