@phihiep/cart-ui-library

A complete, reusable shopping cart UI library with base components for React applications.

Features

• ✅ Base Components: Button, Input, Card, Modal
• 🛒 Cart Components: CartList, CartItem, CartSummary
• 🎨 Modern Design: Clean, responsive UI
• 📦 Lightweight: No external UI dependencies
• 🔧 Customizable: Easy to style and extend
• 📱 Responsive: Mobile-friendly design

Installation

npm install @phihiep/cart-ui-library

Usage

Base Components

import { Button, Input, Card, Modal } from '@phihiep/cart-ui-library';
import '@phihiep/cart-ui-library/style.css';

function App() {
  return (
    <>
      <Button variant="primary" size="medium">Click Me</Button>
      <Input placeholder="Enter text..." />
      <Card title="Card Title">Card content</Card>
    </>
  );
}

Cart Components

import { CartList } from '@phihiep/cart-ui-library';
import '@phihiep/cart-ui-library/style.css';

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([
    {
      id: '1',
      product: {
        name: 'Product 1',
        description: 'Product description',
        image: 'https://example.com/image.jpg'
      },
      quantity: 2,
      price: 29.99,
      selected: true
    }
  ]);

  const handleUpdateQuantity = (itemId, newQuantity) => {
    setCartItems(items =>
      items.map(item =>
        item.id === itemId ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  const handleRemoveItem = (itemId) => {
    setCartItems(items => items.filter(item => item.id !== itemId));
  };

  const handleSelectItem = (itemId, selected) => {
    setCartItems(items =>
      items.map(item =>
        item.id === itemId ? { ...item, selected } : item
      )
    );
  };

  const handleSelectAll = (selected) => {
    setCartItems(items => items.map(item => ({ ...item, selected })));
  };

  const handleCheckout = () => {
    const selectedItems = cartItems.filter(item => item.selected);
    console.log('Checkout:', selectedItems);
  };

  return (
    <CartList
      items={cartItems}
      onUpdateQuantity={handleUpdateQuantity}
      onRemoveItem={handleRemoveItem}
      onSelectItem={handleSelectItem}
      onSelectAll={handleSelectAll}
      onClearCart={() => setCartItems([])}
      onCheckout={handleCheckout}
    />
  );
}

Components API

Button

• variant: 'primary' | 'secondary' | 'danger' | 'ghost'
• size: 'small' | 'medium' | 'large'
• disabled: boolean
• onClick: function

Input

• type: string
• placeholder: string
• value: string | number
• onChange: function
• disabled: boolean
• error: string

Card

• title: string
• hoverable: boolean
• children: ReactNode

Modal

• visible: boolean
• title: string
• onClose: function
• footer: ReactNode
• width: string

CartList

• items: Array of cart items
• onUpdateQuantity: (itemId, quantity) => void
• onRemoveItem: (itemId) => void
• onSelectItem: (itemId, selected) => void
• onSelectAll: (selected) => void
• onClearCart: () => void
• onCheckout: () => void

License

MIT © Hoàng Phi Hiệp