@clikvn/react-ui-library

🚀 @clikvn/react-ui-library là một thư viện UI component cho React, được xây dựng bằng TypeScript và TailwindCSS. Hỗ trợ Storybook để kiểm thử component và có thể dễ dàng cài đặt qua npm/yarn.

📦 Xem trên npm: @clikvn/react-ui-library

✨ Đặc điểm nổi bật

• ✅ Viết bằng TypeScript
• 🎨 Hỗ trợ TailwindCSS
• 📖 Storybook để xem trước component
• 📦 Tích hợp TSUP để build gọn nhẹ
• ⚡ Hỗ trợ React từ phiên bản 16+

📦 Cài đặt

Bạn có thể cài đặt thư viện này bằng yarn hoặc npm:

Với Yarn:

yarn add @clikvn/react-ui-library

Với npm:

npm install @clikvn/react-ui-library

🚀 Sử dụng

Dưới đây là cách sử dụng SmallCard trong một dự án React:

import { SmallCard } from "@clikvn/react-ui-library";

const App = () => {
  return (
    <SmallCard
      imageSrc="https://cdn3.clik.vn/clikotrip/ci/media/MED_7Y9TXAZD74A3/4_UCLV6HFD74A3.jpg"
      title="Explore Hanoi"
      description="Discover Hanoi’s culture and history in a day."
      rating={4.8}
      reviewCount={2300}
      price="From $45 per person"
      isFavorite={false}
    />
  );
};

export default App;

📌 Props hỗ trợ:

• imageSrc (string): URL của ảnh.
• title (string): Tiêu đề của card.
• description (string): Mô tả nội dung.
• rating (number): Điểm đánh giá (0 - 5).
• reviewCount (number): Số lượng đánh giá.
• price (string): Giá hiển thị.
• isFavorite (boolean): Trạng thái yêu thích.
• showFavorite (boolean, optional): Hiển thị icon yêu thích.
• onFavoriteClick (function, optional): Xử lý khi bấm vào icon yêu thích.
• onClick (function, optional): Xử lý khi bấm vào card.

📜 Scripts

Trong package.json, bạn có thể sử dụng các script sau:

| Lệnh | Mô tả | | ---------------- | ----------------------------------------- | | yarn build | Build thư viện bằng TSUP | | yarn storybook | Chạy Storybook để xem trước component | | yarn deploy | Build và publish lên npm |

📖 Storybook

Để chạy Storybook và kiểm tra các component, dùng lệnh:

yarn storybook

Sau đó, truy cập: http://localhost:6006 để xem UI.

📄 License

MIT License - Bạn có thể tự do sử dụng và đóng góp.

🤝 Đóng góp

Nếu bạn muốn đóng góp vào dự án, vui lòng fork repository và tạo pull request. Mọi đóng góp đều được hoan nghênh! 😊