🐝 Bee-Good Design System

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.

🌟 Features

• 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

🚀 Live Demo

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

📦 Components

BeeGoodButton

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

BeeGoodProductCard

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

🛠 Installation

Prerequisites

• Node.js 16 or higher
• npm or yarn

Setup

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

🎨 Usage

Using Components in Your Project

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>
  );
}

🧪 Development

Available Scripts

# 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

Adding New Components

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

🔧 MCP Figma Server

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

Setup

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

🎯 Browser Support

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

🤝 Contributing

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

Development Guidelines

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

📚 Documentation

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

🔄 Version History

v1.0.0 (Current)

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

📄 License

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

🙏 Acknowledgments

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

📞 Support

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! 🐝✨