Merge pull request #1 from natebass/initialize-component-tests

* Initialize component tests.
* Release version 1.0.0-alpha.1

Author: natebass

.github/workflows/deploy-gh-pages.yml

@@ -2,7 +2,7 @@
 #
 # To get started with Next.js see: https://nextjs.org/docs/getting-started
 #
-name: Deploy Next.js static site to GitHub Pages
+name: Deploy Storybook Next.js static site to GitHub Pages
 
 on:
   # Runs on pushes targeting the default branch
@@ -81,7 +81,7 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
 
-      - name: Build with Next.js
+      - name: Build with Storybook
         env:
           GITHUB_ACTIONS: true
           GITHUB_REPOSITORY: ${{ github.repository }}

.gitignore

@@ -615,8 +615,8 @@ $RECYCLE.BIN/
 ### macOS template
 # General
 
-# Icon must end with two \r
-Icon
+# Ignore the Icon file
+*/Icon
 
 # Thumbnails
 

.storybook/main.js

@@ -1,12 +1,18 @@
 /** @type { import('@storybook/nextjs-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../src/stories/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
   addons: [
     "@chromatic-com/storybook",
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
     "@storybook/addon-vitest",
   ],
+  docs: {
+    autodocs: true,
+  },
   framework: {
     name: "@storybook/nextjs-vite",
     options: {},

.storybook/preview.js

@@ -1,20 +1,24 @@
+import "../src/app/global.css";
+
 /** @type { import('@storybook/nextjs-vite').Preview } */
 const preview = {
   parameters: {
+    options: {
+      storySort: {
+        order: ['Introduction', 'Get Started', '*'],
+      },
+    },
     controls: {
+      sort: 'alpha', // or 'requiredFirst', or 'none'
       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",
     },
   },
 };
 
-export default preview;
+export default preview;

.storybook/vitest.setup.js

@@ -2,6 +2,4 @@ import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { setProjectAnnotations } from "@storybook/nextjs-vite";
 import * as projectAnnotations from "./preview";
 
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

README.md

@@ -0,0 +1,69 @@
+# Open Fresno Storybook (Next.js)
+
+This repository hosts the **Storybook + Next.js testing environment** for Open Fresno. It provides a sandbox for building, documenting, and testing UI components in isolation before they are integrated into the main site.
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js
+
+### Installation
+
+Clone the repo and install dependencies:
+
+```
+git clone [https://github.com/openfresno/fe-openfresno-doc.git](https://github.com/openfresno/fe-openfresno-doc.git)
+cd fe-openfresno-doc
+npm install
+```
+
+### Running Storybook
+
+Start the Storybook development server:
+
+```
+npm run storybook
+# or
+yarn storybook
+```
+
+Storybook will be available at **http://localhost:6006**.
+
+### Running Next.js
+
+If you want to preview components inside a Next.js app shell:
+
+```
+npm run dev
+```
+
+## Testing
+
+This repo is designed for component-driven development. We use:
+
+- **Storybook** for isolated UI development
+- **Jest + React Testing Library** for unit tests
+- **Playwright** (optional) for visual regression and interaction tests
+
+Run tests with:
+
+```
+npm test
+```
+
+## Contribute
+
+We welcome contributions! Here are a few ways to help:
+
+1. Look for Issues tagged `help wanted` or `good first issue`.
+2. Add or improve component stories to increase coverage.
+3. Write tests for new components or edge cases.
+4. Submit a pull request with clear commit messages.
+
+## Resources
+
+- [Storybook Docs](https://storybook.js.org/docs/ "null")
+- [Next.js Docs](https://nextjs.org/docs "null")
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/ "null")
+- [Code of Conduct](https://www.google.com/search?q=https://github.com/openfresno/fe-openfresno-doc/blob/main/CODE_OF_CONDUCT.md "null")