Storybook created

2025-08-11 08:22:21 -06:00
parent fb412b7415
commit acc572e6be
37 changed files with 4880 additions and 13 deletions
@@ -0,0 +1,161 @@
+# Storybook Setup
+
+This project has been configured with Storybook for component development and documentation.
+
+## Getting Started
+
+### Running Storybook
+
+```bash
+# Start Storybook in development mode
+npm run storybook
+
+# Build Storybook for production
+npm run build-storybook
+```
+
+Storybook will be available at `http://localhost:6006`
+
+## Project Structure
+
+- `.storybook/` - Storybook configuration files
+- `stories/` - Story files for components
+- `app/components/` - React components
+
+## Available Stories
+
+### Button Component
+
+- **Location**: `stories/Button.stories.js`
+- **Component**: `app/components/Button.js`
+- **Variants**: Default, Secondary
+- **Sizes**: xsmall, small, large, xlarge
+- **States**: Disabled, As Link
+
+### Avatar Component
+
+- **Location**: `stories/Avatar.stories.js`
+- **Component**: `app/components/Avatar.js`
+- **Sizes**: small, medium, large, xlarge
+
+### AvatarContainer Component
+
+- **Location**: `stories/AvatarContainer.stories.js`
+- **Component**: `app/components/AvatarContainer.js`
+- **Sizes**: small, medium, large, xlarge
+- **Features**: Overlapping avatar groups
+
+### Logo Component
+
+- **Location**: `stories/Logo.stories.js`
+- **Component**: `app/components/Logo.js`
+- **Sizes**: Multiple size variants for different contexts
+- **Features**: Icon only mode, responsive sizing
+
+### MenuBar Component
+
+- **Location**: `stories/MenuBar.stories.js`
+- **Component**: `app/components/MenuBar.js`
+- **Sizes**: xsmall, default, medium, large
+- **Features**: Navigation container with MenuBarItems
+
+### MenuBarItem Component
+
+- **Location**: `stories/MenuBarItem.stories.js`
+- **Component**: `app/components/MenuBarItem.js`
+- **Variants**: default, home
+- **Sizes**: Multiple size variants
+- **States**: Disabled
+
+### HeaderTab Component
+
+- **Location**: `stories/HeaderTab.stories.js`
+- **Component**: `app/components/HeaderTab.js`
+- **Features**: Stretchable header tab with decorative elements
+
+### Separator Component
+
+- **Location**: `stories/Separator.stories.js`
+- **Component**: `app/components/Separator.js`
+- **Features**: Simple horizontal divider
+
+### Header Component
+
+- **Location**: `stories/Header.stories.js`
+- **Component**: `app/components/Header.js`
+- **Features**: Main navigation header with responsive design
+- **Includes**: Logo, navigation menu, login button, create rule button
+
+### HomeHeader Component
+
+- **Location**: `stories/HomeHeader.stories.js`
+- **Component**: `app/components/HomeHeader.js`
+- **Features**: Special home page header with transparent background
+- **Includes**: HeaderTab styling, different navigation behavior
+- **States**: Can toggle to regular Header
+
+### Footer Component
+
+- **Location**: `stories/Footer.stories.js`
+- **Component**: `app/components/Footer.js`
+- **Features**: Site footer with contact info, social links, navigation
+- **Includes**: Responsive logo, contact information, social media links
+
+## Adding New Stories
+
+To create a story for a new component:
+
+1. Create a new file in the `stories/` directory: `ComponentName.stories.js`
+2. Import the component from `app/components/`
+3. Export the default configuration with:
+   - `title`: The story title (e.g., 'Components/ComponentName')
+   - `component`: The imported component
+   - `parameters`: Layout and other settings
+   - `argTypes`: Controls for component props
+   - `args`: Default props
+
+Example:
+
+```javascript
+import MyComponent from "../app/components/MyComponent";
+
+export default {
+  title: "Components/MyComponent",
+  component: MyComponent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // Define controls for component props
+  },
+  args: {
+    // Default props
+  },
+};
+
+export const Default = {
+  args: {
+    // Props for this story
+  },
+};
+```
+
+## Features
+
+- **Auto-documentation**: Stories with the `autodocs` tag automatically generate documentation
+- **Accessibility testing**: Built-in a11y testing with `@storybook/addon-a11y`
+- **Testing integration**: Vitest integration for component testing
+- **Responsive design**: Test components at different screen sizes
+- **Interactive controls**: Modify component props in real-time
+
+## Configuration
+
+The Storybook configuration is in `.storybook/main.js` and includes:
+
+- Next.js Vite framework
+- Tailwind CSS support
+- Public assets directory
+- Accessibility and testing addons
+
+Global styles are imported in `.storybook/preview.js` to ensure consistent styling across stories.