@tuan17tui/ui-components

Thư viện UI Components cho React, được build bằng TypeScript và tsup.

🚀 Cài đặt

npm install @tuan17tui/ui-components

hoặc

yarn add @tuan17tui/ui-components

📦 Sử dụng

Import Components

import { Button, Prompt } from '@tuan17tui/ui-components';

function App() {
  return (
    <div>
      <Button variant="primary" size="medium">
        Click me
      </Button>
      
      <Prompt 
        type="success" 
        title="Thành công!"
        message="Thao tác đã được thực hiện thành công."
      />
    </div>
  );
}

🎨 Components

Button

Component button với nhiều variants và sizes.

Props:

• variant: 'primary' | 'secondary' | 'outline' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• loading: boolean (default: false)
• Kế thừa tất cả props của HTML button element

Ví dụ:

<Button variant="primary" size="large" onClick={() => alert('Clicked!')}>
  Primary Button
</Button>

<Button variant="outline" size="small" loading>
  Loading...
</Button>

Prompt

Component hiển thị thông báo với các loại khác nhau.

Props:

• title: string (required) - Tiêu đề prompt
• message: string (required) - Nội dung thông báo
• type: 'info' | 'success' | 'warning' | 'error' (default: 'info')
• closable: boolean (default: true)
• onClose: () => void - Callback khi đóng
• Kế thừa tất cả props của HTML div element

Ví dụ:

<Prompt
  type="error"
  title="Lỗi"
  message="Đã xảy ra lỗi trong quá trình xử lý."
  onClose={() => console.log('Prompt closed')}
/>

🛠️ Development

Build

npm run build

Watch mode

npm run dev

📄 License

MIT © tuan17tui