React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

# lvq

`lvq` là một thư viện React cung cấp các thành phần UI linh hoạt và tiện dụng, được thiết kế để giúp bạn xây dựng giao diện người dùng nhanh chóng và hiệu quả. Thư viện này cung cấp một bộ các thành phần UI cơ bản nhưng mạnh mẽ, với khả năng tùy biến cao, hỗ trợ việc phát triển các ứng dụng web hiện đại.

## Cài đặt

Để cài đặt `lvq`, bạn có thể sử dụng npm hoặc yarn:

npm install lvq

hoặc

yarn add lvq

Sử dụng

Dưới đây là một ví dụ đơn giản về cách sử dụng các thành phần từ lvq trong ứng dụng React của bạn:

import React from 'react';
import { Container, Button, Avatar, Form, Input } from 'lvq';

const App = () => (
  <Container withShadow>
    <Avatar src="avatar.png" name="John Doe" />
    <Form onSubmit={(data) => console.log(data)}>
      <Input name="username" placeholder="Username" />
      <Button title="Submit" type="submit" />
    </Form>
  </Container>
);

export default App;

Các thành phần chính

lvq cung cấp nhiều thành phần UI giúp bạn xây dựng giao diện một cách linh hoạt:

• Avatar: Hiển thị avatar với nhiều tùy chọn kích thước và hình dạng.
• Button: Nút với các kiểu chủ đề (default, success, warning, error), kích thước và sự kiện tùy chỉnh.
• Card: Thẻ chứa hình ảnh, tiêu đề và mô tả, có thể sử dụng trong các layout khác nhau.
• Container: Thành phần bao quanh các phần tử khác với tùy chọn bóng đổ và padding.
• Flex: Container flexbox với các tùy chọn căn chỉnh và sắp xếp các phần tử con.
• Form: Form với các tùy chọn xử lý sự kiện gửi và các thành phần con như Input, Button.
• Grid: Hệ thống lưới responsive với nhiều tùy chọn cột, khoảng cách giữa các cột, và các class responsive.
• Input: Trường input với các tùy chọn kích thước, placeholder và chủ đề.
• Pagination: Thành phần phân trang với các tùy chọn trang hiện tại và sự kiện thay đổi trang.
• Table: Bảng hiển thị dữ liệu với các tùy chọn cột, hàng xen kẽ và chủ đề tùy chỉnh.

Các công cụ tiện ích

Thư viện cũng cung cấp một số công cụ tiện ích để hỗ trợ việc phát triển:

• cn: Kết hợp và xử lý xung đột các classnames, giúp quản lý style hiệu quả hơn.
• RenderIf: Hiển thị các phần tử con dựa trên điều kiện logic, giúp mã nguồn gọn gàng hơn.

Cấu trúc thư mục

Dưới đây là cấu trúc thư mục cơ bản cho dự án sử dụng lvq:

my-react-app/

├── src/
│   ├── components/        # Các thành phần React dùng chung
│   ├── pages/             # Các trang của ứng dụng
│   ├── lib/               # Các thư viện sử dụng, hãy thêm thư viện `lvq` vào đây !
│       ├── index.js       # Tệp lib chính
│       └── lvq.config.js  # Tệp config thư viện `lvq` vào dự án để thêm, sửa các chủ đề tùy chỉnh
│   ├── App.jsx            # Component chính của ứng dụng
│   ├── index.js           # Điểm khởi đầu của ứng dụng: trong tệp này thêm ThemeProvider để áp dụng chủ đề thư viện `lvq`
│
├── package.json           # Thông tin dự án và dependencies
└── tailwind.config.js     # Thêm Tailwind để kết hợp tốt hơn với thư viện `lvq`

Đóng góp

Chúng tôi luôn chào đón sự đóng góp từ cộng đồng. Hãy tạo các issue hoặc pull request trên GitHub nếu bạn muốn đóng góp hoặc cải tiến thư viện.

License

Thư viện lvq được phát hành dưới giấy phép MIT. Vui lòng tham khảo file LICENSE để biết thêm chi tiết.

README này cung cấp thông tin đầy đủ về cách cài đặt, sử dụng và cấu trúc của `lvq`, giúp bạn nhanh chóng bắt đầu với thư viện.