@ledangdung/ui

Thư viện UI components hiện đại được xây dựng trên Radix UI và Tailwind CSS, cung cấp các components đẹp mắt, có thể tùy chỉnh và dễ sử dụng cho các ứng dụng React.

✨ Tính năng nổi bật

• 🎨 Hệ thống theme linh hoạt - Tùy chỉnh màu sắc và border radius
• 🌗 Hỗ trợ dark/light mode - Tự động theo system hoặc manual
• ♿ Accessibility tuyệt vời - Được xây dựng trên Radix UI
• 📱 Responsive design - Tương thích với mọi thiết bị
• 🎯 TypeScript support - Full type safety
• 🚀 Tree-shakeable - Chỉ import những gì cần thiết
• 💅 Tailwind CSS - Dễ dàng custom styling

📦 Cài đặt

npm install @ledangdung/ui
# hoặc
yarn add @ledangdung/ui
# hoặc
pnpm add @ledangdung/ui

Peer Dependencies

Đảm bảo project của bạn có các peer dependencies sau:

npm install react react-dom

🚀 Quick Start

1. Cài đặt Tailwind CSS

Thêm @tailwindcss/vite vào project (nếu chưa có):

npm install @tailwindcss/vite

Cấu hình vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

2. Wrap ứng dụng với ThemeProvider

import { ThemeProvider } from '@ledangdung/ui'

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
      <YourApp />
    </ThemeProvider>
  )
}

3. Sử dụng components

import { Button, Card, CardContent, CardHeader, CardTitle } from '@ledangdung/ui'

function Example() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => alert('Hello!')}>
          Click me
        </Button>
      </CardContent>
    </Card>
  )
}

📚 Components

Form Components

• Button - Nút bấm với nhiều variants
• Input - Ô nhập liệu
• Textarea - Vùng nhập văn bản nhiều dòng
• Label - Nhãn form
• Checkbox - Hộp kiểm
• RadioGroup - Nhóm radio button
• Switch - Công tắc bật/tắt
• Select - Dropdown select

Layout Components

• Card - Thẻ container
• Avatar - Ảnh đại diện
• Separator - Đường phân cách
• Tabs - Tab navigation

Overlay Components

• Dialog - Modal dialog
• DropdownMenu - Menu dropdown
• Tooltip - Tooltip hiển thị khi hover

Feedback Components

• Alert - Thông báo cảnh báo
• Badge - Nhãn badge
• Progress - Thanh tiến trình
• Spinner - Loading spinner

🎨 Theme System

Sử dụng useTheme hook

import { useTheme } from '@ledangdung/ui'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  )
}

Custom màu sắc

import { useTheme, colorPresets } from '@ledangdung/ui'

function CustomTheme() {
  const { applyConfig } = useTheme()
  
  return (
    <div className="space-x-2">
      <button onClick={() => applyConfig({ primary: colorPresets.blue })}>
        Blue
      </button>
      <button onClick={() => applyConfig({ primary: colorPresets.purple })}>
        Purple
      </button>
      <button onClick={() => applyConfig({ primary: colorPresets.green })}>
        Green
      </button>
      {/* Custom OKLCH color */}
      <button onClick={() => applyConfig({ primary: "0.65 0.15 252" })}>
        Custom
      </button>
    </div>
  )
}

Presets màu sắc có sẵn

import { colorPresets } from '@ledangdung/ui'

// Các màu có sẵn:
colorPresets.blue     // "0.55 0.15 252"
colorPresets.purple   // "0.55 0.15 290"
colorPresets.green    // "0.52 0.14 150"
colorPresets.orange   // "0.58 0.14 35"
colorPresets.red      // "0.52 0.18 15"
colorPresets.pink     // "0.55 0.16 340"
colorPresets.teal     // "0.52 0.13 180"
colorPresets.indigo   // "0.48 0.16 270"
colorPresets.emerald  // "0.52 0.13 160"
colorPresets.amber    // "0.58 0.15 50"

🎯 Ví dụ sử dụng

Form với validation

import { 
  Button, 
  Input, 
  Label, 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle 
} from '@ledangdung/ui'

function ContactForm() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Liên hệ</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Họ tên</Label>
          <Input id="name" placeholder="Nhập họ tên" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Nhập email" />
        </div>
        <Button className="w-full">Gửi</Button>
      </CardContent>
    </Card>
  )
}

Dialog với form

import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogTrigger,
  Button,
  Input,
  Label
} from '@ledangdung/ui'

function CreateUser() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Tạo người dùng</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Tạo người dùng mới</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="username">Tên người dùng</Label>
            <Input id="username" placeholder="Nhập tên người dùng" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="Nhập email" />
          </div>
          <Button className="w-full">Tạo</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

Bundle Size

Để tối ưu bundle size, chỉ import những components cần thiết:

// ✅ Tốt
import { Button } from '@ledangdung/ui'

// ❌ Không tốt
import { Button } from '@ledangdung/ui/dist/index.js'

Source Maps

Source maps được disable để giảm bundle size. Nếu cần debug, bạn có thể:

• Xem source code trực tiếp trên GitHub
• Sử dụng TypeScript definitions để hiểu interfaces
• Clone repository để debug locally nếu cần thiết

🤝 Đóng góp

Nếu bạn muốn đóng góp cho project này, vui lòng:

1. Fork repository
2. Tạo branch mới (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Mở Pull Request

📄 License

MIT License - xem file LICENSE để biết thêm chi tiết.

🔗 Links

• Radix UI - Headless UI primitives
• Tailwind CSS - Utility-first CSS framework
• Lucide Icons - Beautiful icons library