Cart Library

A React library for shopping cart functionality with reusable UI components.

Features

• 🛒 Complete shopping cart functionality
• 🎨 Beautiful and customizable UI components
• 📱 Responsive design
• 🔧 TypeScript support
• 🎯 Easy to integrate

Components

• Cart: Main shopping cart component
• CartItem: Individual cart item component
• Button: Customizable button component
• Input: Form input component
• Modal: Modal dialog component
• Card: Card container component

Installation

npm install @your-username/cart-library

Usage

Basic Cart Usage

import React from 'react';
import { Cart } from '@your-username/cart-library';

function App() {
  const handleItemsChange = (items) => {
    console.log('Cart items changed:', items);
  };

  return (
    <div>
      <Cart onItemsChange={handleItemsChange} />
    </div>
  );
}

export default App;

Individual Components

import React, { useState } from 'react';
import { Button, Input, Modal, Card, CartItem } from '@your-username/cart-library';

function MyComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <Button 
        variant="primary" 
        size="large" 
        onClick={() => setIsModalOpen(true)}
      >
        Open Modal
      </Button>
      
      <Input
        value={inputValue}
        placeholder="Enter text..."
        onChange={(e) => setInputValue(e.target.value)}
      />
      
      <Modal
        isVisible={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="My Modal"
        content={<p>Modal content here</p>}
      />
      
      <Card
        title="My Card"
        content={<p>Card content here</p>}
        actions={<Button>Action</Button>}
      />
    </div>
  );
}

API Reference

Cart Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | "" | Additional CSS class | | style | React.CSSProperties | {} | Inline styles | | onItemsChange | (items: CartItemType[]) => void | undefined | Callback when items change |

CartItemType

interface CartItemType {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

Button Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | Button content | | onClick | () => void | undefined | Click handler | | variant | "primary" \| "secondary" \| "danger" | "primary" | Button style variant | | size | "small" \| "medium" \| "large" | "medium" | Button size | | disabled | boolean | false | Disabled state | | className | string | "" | Additional CSS class |

Input Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | Input value | | onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | - | Change handler | | placeholder | string | undefined | Placeholder text | | type | "text" \| "email" \| "password" \| "number" | "text" | Input type | | disabled | boolean | false | Disabled state | | className | string | "" | Additional CSS class | | style | React.CSSProperties | {} | Inline styles |

Modal Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | isVisible | boolean | - | Modal visibility | | onClose | () => void | - | Close handler | | content | React.ReactNode | - | Modal content | | title | string | undefined | Modal title | | showCloseButton | boolean | true | Show close button | | className | string | "" | Additional CSS class |

Card Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | undefined | Card title | | content | React.ReactNode | - | Card content | | actions | React.ReactNode | undefined | Action buttons | | className | string | "" | Additional CSS class | | style | React.CSSProperties | {} | Inline styles |

Styling

All components support custom styling through:

• className prop for CSS classes
• style prop for inline styles
• Built-in responsive design

TypeScript Support

This library is built with TypeScript and includes full type definitions.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.