A modern, accessible design system built with React, TypeScript, and Storybook. This design system provides reusable components with consistent styling and behavior for building beautiful user interfaces.

• Modern React Components - Built with React 18 and TypeScript
• Storybook Integration - Interactive component documentation and testing
• Visual Testing - Automated visual regression testing with Chromatic
• Figma Integration - MCP server for Figma API integration
• Accessible - Components built with accessibility best practices
• Customizable - Easy to theme and customize for your brand

• Storybook: View Live Design System
• Chromatic: Visual Testing Dashboard

A versatile button component with multiple variants and sizes.

Features:

• Primary, Secondary, and Disabled variants
• Small, Medium, and Large sizes
• Accessible keyboard navigation
• Custom styling support

A product card component perfect for e-commerce applications.

Features:

• Product image display
• Bio/organic labels
• Favorite heart icon with interaction
• Responsive design
• Product information display

• Node.js 16 or higher
• npm or yarn

1. Clone the repository

   git clone <your-repo-url>
   cd Bee-Good-DesignSystem

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local
   # Edit .env.local with your actual values

4. Start Storybook

   npm run storybook

import { BeeGoodButton, BeeGoodProductCard } from 'bee-good-design-system';

function App() {
  return (
    <div>
      <BeeGoodButton 
        variant="primary" 
        size="medium"
        onClick={() => console.log('Button clicked!')}
      >
        Click Me
      </BeeGoodButton>
      
      <BeeGoodProductCard
        imageUrl="/path/to/product-image.jpg"
        title="Organic Honey"
        price="$12.99"
        isBio={true}
        onFavoriteClick={() => console.log('Added to favorites')}
      />
    </div>
  );
}

# Start Storybook development server
npm run storybook

# Build Storybook for production
npm run build-storybook

# Run tests
npm test

# Deploy to Chromatic
npm run chromatic

# Start MCP Figma server
cd mcp-figma-server && npm start

1. Create component files in src/components/YourComponent/
2. Include .tsx, .css, .stories.tsx, and index.ts files
3. Export from main index.ts
4. Add stories to Storybook
5. Update this README

This project includes an MCP (Model Context Protocol) server for Figma integration.

1. Navigate to the MCP server directory:

   cd mcp-figma-server

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.example .env.local
   # Add your Figma API token

4. Start the server:

   npm start

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow TypeScript best practices
• Write comprehensive Storybook stories
• Ensure components are accessible
• Add CSS custom properties for theming
• Test components thoroughly

• Storybook: Interactive component documentation
• TypeScript: Full type definitions included
• CSS Custom Properties: Theming documentation in Storybook

• Initial release
• BeeGoodButton component
• BeeGoodProductCard component
• Storybook setup
• Chromatic integration
• MCP Figma server integration

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with Storybook
• Visual testing with Chromatic
• Icons and assets from Figma design system
• Inspired by modern design system best practices

If you have any questions or need support, please:

• Open an issue on GitHub
• Check the Storybook documentation
• Review component stories for usage examples

Happy coding! 🐝✨