npm package: @innotechjsc/ui-kit
Description: UI Component library for Innotech JSC React projects, built with Vite, TypeScript, Tailwind CSS v4, and Radix UI.
Latest version: 0.2.1

# @innotechjsc/ui-kit

Thư viện Component UI chuẩn mực dành riêng cho các dự án React của Innotech JSC, được xây dựng với **Vite**, **TypeScript**, và **Tailwind CSS v4**.

---

## 🚀 Dành cho Nhà phát triển (Human Developers)

### 📦 Cài đặt

Sử dụng **PNPM** (khuyên dùng) hoặc các package manager khác:

```bash
pnpm add @innotechjsc/ui-kit
```

### ⚙️ Cấu hình ban đầu

Import file CSS toàn cục vào file entry point của dự án (ví dụ: `main.tsx` hoặc `App.tsx`):

```tsx
import "@innotechjsc/ui-kit/dist/index.css";
```

### 🧩 Hướng dẫn sử dụng các Components chính

Thư viện cung cấp các components được tối ưu về UI/UX. Dưới đây là cách sử dụng một số component phổ biến nhất:

#### 1. Button (Nút bấm)

Hỗ trợ 3 variants chính: `primary`, `secondary`, `danger`.

```tsx
import { Button } from "@innotechjsc/ui-kit";

<Button variant="primary" onClick={() => console.log("Clicked")}>
  Xác nhận
</Button>
<Button variant="secondary" disabled>
  Vô hiệu hóa
</Button>
```

#### 2. Input (Ô nhập liệu)

Tích hợp sẵn label, thông báo lỗi và icon.

```tsx
import { Input } from "@innotechjsc/ui-kit";
import { User } from "lucide-react";

<Input
  label="Email"
  placeholder="example@gmail.com"
  startIcon={<User size={16} />}
  error="Email không hợp lệ"
/>;
```

#### 3. Select (Hộp chọn)

Xây dựng trên nền tảng Radix UI, hỗ trợ chọn một hoặc nhiều item.

```tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@innotechjsc/ui-kit";

<Select onValueChange={(value) => console.log(value)}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Chọn ngôn ngữ" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="vi">Tiếng Việt</SelectItem>
    <SelectItem value="en">Tiếng Anh</SelectItem>
  </SelectContent>
</Select>;
```

#### 4. DatePicker (Chọn ngày)

Tích hợp `date-fns` và hỗ trợ đa ngôn ngữ (vi/en).

```tsx
import { DatePicker } from "@innotechjsc/ui-kit";
import { useState } from "react";

const [date, setDate] = useState<Date>();

<DatePicker date={date} setDate={setDate} label="Ngày sinh" language="vi" />;
```

#### 5. Modal (Hội thoại)

Sử dụng Portal để đảm bảo hiển thị trên cùng.

```tsx
import { Modal, Button } from "@innotechjsc/ui-kit";
import { useState } from "react";

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen(true)}>Mở Modal</Button>

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Tiêu đề Modal"
>
  <p>Nội dung hiển thị bên trong modal...</p>
</Modal>
```

### 📚 Toàn bộ Component

Để xem chi tiết danh sách tất cả props và demo trực quan, hãy chạy:

```bash
pnpm storybook
```

---

## 🤖 Dành cho AI Agents (Cursor, Copilot, etc.)

Phần này giúp AI hiểu cấu trúc và quy chuẩn của project để hỗ trợ code chính xác hơn.

### 📂 Cấu trúc dự án

- `src/components/`: Chứa mã nguồn của tất cả components. Mỗi component đặt trong một thư mục riêng.
- `src/styles/`: Chứa `globals.css` và `tokens.ts`.
- `index.ts`: Entry point chính, export tất cả components và styles.

### 🛠 Tech Stack sử dụng

- **React 19 + TypeScript**: Strict mode.
- **Tailwind CSS v4**: Sử dụng các tiện ích CSS mới nhất.
- **Radix UI**: Primitive components cho accessibility (Checkbox, Popover, Select, v.v.).
- **CVA (class-variance-authority)**: Quản lý variants cho components (ví dụ: `variant="primary"`, `size="sm"`).
- **Lucide React**: Thư viện icon chuẩn.

### 📝 Quy trình tạo Component mới

1. Tạo thư mục `src/components/NewComponent`.
2. Sử dụng `Radix UI` if possible để đảm bảo tính tiếp cận (a11y).
3. Sử dụng `cva` để định nghĩa styles và variants.
4. Export component qua `index.ts` trong thư mục component và `src/index.ts`.
5. Tạo file Storybook `*.stories.tsx` để test.

### 🔍 Cách tìm kiếm Code

- Nếu cần xem logic của Input, hãy tìm tại `src/components/Input/Input.tsx`.
- Nếu cần xem cách define theme/màu sắc, hãy tìm tại `src/styles/tokens.ts` và `tailwind.config.ts`.

---

## ⚙️ Quy trình Build & Publish (Maintainers)

1. **Thay đổi code**: Thực hiện logic fix/thêm mới.
2. **Khai báo version**:
   ```bash
   npx changeset
   ```
3. **Build**:
   ```bash
   pnpm build
   ```
4. **Publish**:
   ```bash
   pnpm publish
   ```

---

_Developed with ❤️ by Innotech JSC_