BJD Design System

E-commerce focused React UI components with TypeScript support

🚀 Quick Start

npm install bjd-design-system

import { Button, Card, Header } from 'bjd-design-system';
import 'bjd-design-system/dist/index.css';

function App() {
  return (
    <div>
      <Header title="My App" showBackButton />
      <Card variant="lg">
        <Button variant="primary" size="lg">
          Get Started
        </Button>
      </Card>
    </div>
  );
}

📦 What's Included

🧩 13 Components

• Button - TextButton, BoxButton (4 variants × 3 sizes)
• Icon - 10 built-in icons
• Checkbox - 3 sizes with indeterminate state
• Chip - 4 sizes × 3 variants
• Card - 3 layout variants
• Tab - Horizontal navigation
• BrandItem - Profile display
• ListItem - Title + labels
• Textarea - Auto-resize with counter
• BottomBar - Mobile navigation
• Header - Mobile app header
• HomeIndicator - iOS-style indicator
• Divider - Horizontal/vertical separators

📱 3 Complete Pages

• SearchResultPage - Mobile search results
• ProductDetailPage - E-commerce product detail
• HomeIndicatorDemo - Interactive component demo

🎨 Design Features

• 📱 Mobile-First - Optimized for 393px viewport
• 🎯 Figma-Based - 100% accurate implementation
• 🎨 Consistent Colors - Primary #006CE0, Amazon Ember font
• ♿ Accessible - ARIA support, keyboard navigation
• 📚 Documented - Complete Storybook documentation

💻 Technical Features

• TypeScript - Complete type definitions
• Tree Shaking - Import only what you need
• Zero Dependencies - Minimal bundle size
• ESM + CJS - Dual module support
• React 18 - Latest React features
• CSS Modules - Scoped styling

📖 Documentation

Visit our Storybook for interactive documentation and examples.

🛠️ Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

# Type check
npm run type-check

📄 License

MIT © BJD Team

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Docs: Storybook Documentation