@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:

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):

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.

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.

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

<Input
  label="Email"
  placeholder="[email protected]"
  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.

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).

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.

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:

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:

   npx changeset

3. Build:

   pnpm build

4. Publish:

   pnpm publish

Developed with ❤️ by Innotech JSC