npm package: @lamquangho/shopping-cart-library
Description: A reusable shopping cart component library with standardized UI components
Author: lamquangho bachphuc018@gmail.com
Latest version: 1.0.0

# 🛒 Shopping Cart Library

Một thư viện React component chuẩn hóa cho chức năng giỏ hàng với UI đẹp và dễ sử dụng.

## ✨ Tính năng

- 🎨 **UI Components chuẩn hóa**: Input, Button, Modal, Card
- 🛍️ **Shopping Cart hoàn chỉnh**: Thêm, sửa, xóa sản phẩm
- 📱 **Responsive Design**: Tối ưu cho mọi thiết bị
- 🎯 **TypeScript Support**: Type safety đầy đủ
- 🔧 **Customizable**: Dễ dàng tùy chỉnh giao diện
- 📦 **Lightweight**: Kích thước nhỏ gọn
- 🚀 **Easy Integration**: Dễ dàng tích hợp vào dự án

## 📦 Cài đặt

```bash
npm install shopping-cart-library
```

## 🚀 Sử dụng cơ bản

### 1. Thiết lập CartProvider

```tsx
import React from 'react';
import { CartProvider } from 'shopping-cart-library';

function App() {
  return (
    <CartProvider>
      <YourApp />
    </CartProvider>
  );
}
```

### 2. Sử dụng ShoppingCart component

```tsx
import React from 'react';
import { ShoppingCart } from 'shopping-cart-library';

function CartPage() {
  const handleCheckout = (items) => {
    console.log('Checkout items:', items);
    // Xử lý thanh toán
  };

  return (
    <ShoppingCart
      onCheckout={handleCheckout}
      showCheckoutButton={true}
      showClearButton={true}
    />
  );
}
```

### 3. Thêm sản phẩm vào giỏ hàng

```tsx
import React from 'react';
import { useCart } from 'shopping-cart-library';

function ProductCard({ product }) {
  const { addItem } = useCart();

  const handleAddToCart = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      description: product.description,
      category: product.category
    });
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={handleAddToCart}>
        Add to Cart
      </button>
    </div>
  );
}
```

## 🎨 Components

### Input

```tsx
import { Input } from 'shopping-cart-library';

<Input
  type="text"
  placeholder="Enter your name"
  value={value}
  onChange={setValue}
  label="Name"
  error={error}
/>
```

### Button

```tsx
import { Button } from 'shopping-cart-library';

<Button
  variant="primary"
  size="medium"
  onClick={handleClick}
  loading={isLoading}
>
  Click me
</Button>
```

### Modal

```tsx
import { Modal } from 'shopping-cart-library';

<Modal
  isOpen={isOpen}
  onClose={handleClose}
  title="Confirmation"
  size="medium"
>
  <p>Are you sure you want to delete this item?</p>
</Modal>
```

### Card

```tsx
import { Card } from 'shopping-cart-library';

<Card
  title="Product Card"
  subtitle="Product description"
  hover={true}
  padding="medium"
>
  <p>Card content</p>
</Card>
```

### CartItem

```tsx
import { CartItem } from 'shopping-cart-library';

<CartItem
  item={cartItem}
  onUpdateQuantity={handleUpdateQuantity}
  onRemove={handleRemove}
  showImage={true}
  showDescription={true}
/>
```

## 🔧 API Reference

### ShoppingCart Props

| Prop | Type | Default | Mô tả |
|------|------|---------|-------|
| `onCheckout` | `(items: CartItem[]) => void` | - | Callback khi người dùng checkout |
| `onItemUpdate` | `(item: CartItem) => void` | - | Callback khi cập nhật sản phẩm |
| `onItemRemove` | `(id: string \| number) => void` | - | Callback khi xóa sản phẩm |
| `showCheckoutButton` | `boolean` | `true` | Hiển thị nút checkout |
| `showClearButton` | `boolean` | `true` | Hiển thị nút xóa tất cả |
| `maxItems` | `number` | - | Số lượng sản phẩm tối đa |
| `className` | `string` | - | CSS class tùy chỉnh |

### CartItem Type

```tsx
interface CartItem {
  id: string | number;
  name: string;
  price: number;
  quantity: number;
  image?: string;
  description?: string;
  category?: string;
  inStock?: boolean;
  maxQuantity?: number;
}
```

### useCart Hook

```tsx
const {
  items,              // Danh sách sản phẩm trong giỏ
  addItem,           // Thêm sản phẩm
  removeItem,        // Xóa sản phẩm
  updateQuantity,    // Cập nhật số lượng
  clearCart,         // Xóa tất cả
  getTotalPrice,     // Tính tổng tiền
  getTotalItems,     // Tính tổng số lượng
  getItemQuantity    // Lấy số lượng của sản phẩm
} = useCart();
```

## 🎨 Customization

### CSS Variables

Bạn có thể tùy chỉnh màu sắc thông qua CSS variables:

```css
:root {
  --primary-color: #3b82f6;
  --secondary-color: #6b7280;
  --danger-color: #ef4444;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --background-color: #ffffff;
  --text-color: #111827;
  --border-color: #e5e7eb;
  --border-radius: 8px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
```

### Custom Styling

```tsx
<ShoppingCart
  className="my-custom-cart"
  style={{
    '--primary-color': '#your-color',
    '--border-radius': '12px'
  }}
/>
```

## 📱 Responsive Design

Thư viện được thiết kế responsive và tối ưu cho:
- 📱 Mobile (320px+)
- 📱 Tablet (768px+)
- 💻 Desktop (1024px+)

## 🧪 Demo

Chạy demo để xem thư viện hoạt động:

```bash
# Mở file example/index.html trong trình duyệt
open example/index.html
```

## 🔨 Development

### Cài đặt dependencies

```bash
npm install
```

### Build thư viện

```bash
npm run build
```

### Development mode

```bash
npm run dev
```

### Linting

```bash
npm run lint
```

## 📄 License

MIT License - xem file [LICENSE](LICENSE) để biết thêm chi tiết.

## 🤝 Contributing

Mọi đóng góp đều được chào đón! Vui lòng:

1. Fork repository
2. Tạo feature branch (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing-feature`)
5. Tạo Pull Request

## 📞 Support

Nếu bạn gặp vấn đề hoặc có câu hỏi, vui lòng tạo issue trên GitHub.

---

Được tạo với ❤️ bởi [Your Name]