Yiftee Design System

A modern, accessible, and performant design system for Yiftee applications. Built with React, TypeScript, Tailwind CSS, and Radix UI.

🎨 Overview

The Yiftee Design System provides a comprehensive set of reusable components, design tokens, and patterns that ensure consistency across all Yiftee applications. It's built for performance, accessibility, and developer experience.

Key Features

• 🚀 Performance First - Tree-shakeable, optimized bundle sizes
• ♿ Accessible - WCAG 2.1 AA compliant components
• 🎨 Themeable - Customizable design tokens and CSS variables
• 📱 Responsive - Mobile-first responsive design
• 🔧 TypeScript - Full TypeScript support with exported types
• 📚 Well Documented - Comprehensive docs and interactive examples
• ⚡ Modern Stack - React 18, Vite, Tailwind CSS, Radix UI

🚀 Getting Started

Installation

# Using npm
npm install @yiftee/design-system

# Using yarn
yarn add @yiftee/design-system

# Using pnpm
pnpm add @yiftee/design-system

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react@^18.0.0 react-dom@^18.0.0

Setup

1. Import the CSS (in your app's entry point):

import '@yiftee/design-system/styles';

2. Configure Tailwind (if using Tailwind in your app):

// tailwind.config.js
module.exports = {
  presets: [require('@yiftee/design-system/tailwind.config')],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@yiftee/design-system/dist/**/*.js'
  ],
};

3. Start using components:

import { Button, Card, Input } from '@yiftee/design-system';

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome to Yiftee</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="Enter your email" />
        <Button variant="primary">Get Started</Button>
      </Card.Content>
    </Card>
  );
}

📦 What's Included

Components

• Core: Button, Input, Select, Checkbox, Radio, Switch
• Layout: Container, Grid, Flex, Spacer
• Navigation: Header, Sidebar, Tabs, Breadcrumb, Pagination
• Feedback: Toast, Alert, Badge, Progress, Skeleton
• Overlays: Modal, Popover, Tooltip, Dropdown
• Data Display: Table, Card, Avatar, List
• Forms: Form, FormField, ValidatedForm, InputGroup

Utilities

• Hooks: useToast, useModal, useTheme, useMediaQuery
• Utils: cn (class names), validation helpers
• Tokens: Colors, typography, spacing, breakpoints

🎨 Design Tokens

Brand Colors

--yiftee-orange: #F37726;
--yiftee-teal: #2EC4B6;
--yiftee-green: #4D9D2A;
--yiftee-white: #FCF8F8;
--yiftee-black: #2C2D2E;

Using Tokens

// In CSS/Tailwind
<div className="text-yiftee-orange bg-yiftee-white" />

// In JavaScript
import { tokens } from '@yiftee/design-system';
console.log(tokens.colors.primary); // #F37726

📚 Documentation

Interactive Documentation

• 🎨 Storybook - Live component playground
• 📖 Component Docs - Detailed API documentation
• 🎯 Design Guidelines - Usage patterns and best practices

Quick Links

• Getting Started Guide
• Migration Guide
• Theming Guide
• Contributing Guide

🛠️ Development

# Clone the repository
git clone https://github.com/yiftee/design-system.git
cd design-system

# Install dependencies
npm install

# Start Storybook (development)
npm run storybook

# Build library
npm run build

# Run tests
npm run test

# Run linting
npm run lint

Available Scripts

• npm run storybook - Start Storybook dev server
• npm run build - Build the library for production
• npm run test - Run all tests
• npm run lint - Lint code
• npm run format - Format code with Prettier
• npm run typecheck - Run TypeScript type checking

🏗️ Project Structure

design-system/
├── src/
│   ├── components/      # React components
│   │   ├── core/       # Basic building blocks
│   │   ├── forms/      # Form components
│   │   ├── layout/     # Layout components
│   │   ├── navigation/ # Navigation components
│   │   ├── feedback/   # Feedback components
│   │   └── overlays/   # Modal, popover, etc.
│   ├── hooks/          # Custom React hooks
│   ├── utils/          # Utility functions
│   ├── tokens/         # Design tokens
│   └── styles/         # Global styles
├── docs/               # Documentation
├── stories/            # Storybook stories
└── tests/              # Test utilities

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Code of Conduct
• Development workflow
• Submitting pull requests
• Reporting issues

📄 License

MIT © Yiftee, Inc.

🙏 Acknowledgments

Built with amazing open source projects:

• Radix UI - Unstyled, accessible components
• Tailwind CSS - Utility-first CSS framework
• Vite - Next generation frontend tooling
• Storybook - Component development environment