{"_id":"@2thuancr/react-shopping-cart","name":"@2thuancr/react-shopping-cart","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@2thuancr/react-shopping-cart","version":"1.0.0","description":"A React library for shopping cart functionality with reusable UI components","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","lint":"eslint src --ext .ts,.tsx","prepare":"npm run build"},"keywords":["react","shopping-cart","ecommerce","ui-components","typescript"],"author":{"name":"2thuancr"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@tailwindcss/postcss":"^4.1.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","autoprefixer":"^10.4.21","eslint":"^8.0.0","eslint-plugin-react":"^7.0.0","eslint-plugin-react-hooks":"^4.0.0","postcss":"^8.5.6","rollup":"^3.0.0","rollup-plugin-dts":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tailwindcss":"^4.1.13","tslib":"^2.8.1","typescript":"^5.0.0"},"repository":{"type":"git","url":"git+https://github.com/2thuancr/react-shopping-cart-library.git"},"bugs":{"url":"https://github.com/2thuancr/react-shopping-cart-library/issues"},"homepage":"https://github.com/2thuancr/react-shopping-cart-library#readme","_id":"@2thuancr/react-shopping-cart@1.0.0","gitHead":"87e51f50710fd3d4f8ec008007c2da2bdd4aff2e","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-FG2bpQWlXVWLLc1vqLamOuzYC3SznYGPKiiQssYMUTUxzIpxrg6Rp35S2eQiMFq8hTesRe6W9+DN8kaErtnnlg==","shasum":"e5ba7c764f6e75fca840dbe01b92ffb44f78ad4f","tarball":"https://registry.npmjs.org/@2thuancr/react-shopping-cart/-/react-shopping-cart-1.0.0.tgz","fileCount":24,"unpackedSize":184269,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDy6UQ/CnQ9t16+qZMqycEBoRbpwwX7HepLY5AK6EYeNQIgKKVgsPcqQfiPMzy7rOGxl9HfLBpA+3+O68ox7oeoyPg="}]},"_npmUser":{"name":"2thuancr","email":"2thuancr03@gmail.com"},"directories":{},"maintainers":[{"name":"2thuancr","email":"2thuancr03@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-shopping-cart_1.0.0_1757787125871_0.2046740199008945"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-13T18:12:05.778Z","1.0.0":"2025-09-13T18:12:06.072Z","modified":"2025-09-13T18:12:06.403Z"},"maintainers":[{"name":"2thuancr","email":"2thuancr03@gmail.com"}],"description":"A React library for shopping cart functionality with reusable UI components","homepage":"https://github.com/2thuancr/react-shopping-cart-library#readme","keywords":["react","shopping-cart","ecommerce","ui-components","typescript"],"repository":{"type":"git","url":"git+https://github.com/2thuancr/react-shopping-cart-library.git"},"author":{"name":"2thuancr"},"bugs":{"url":"https://github.com/2thuancr/react-shopping-cart-library/issues"},"license":"MIT","readme":"# React Shopping Cart Library\r\n\r\nA comprehensive React library for shopping cart functionality with reusable UI components built with TypeScript and Tailwind CSS.\r\n\r\n## 🚀 Features\r\n\r\n- **Complete Shopping Cart Management**: Add, edit, remove, and clear cart items\r\n- **Reusable UI Components**: Button, Card, Input, Modal components\r\n- **TypeScript Support**: Full type definitions for all components\r\n- **Custom Hook**: `useShoppingCart` for easy state management\r\n- **Responsive Design**: Mobile-first approach with Tailwind CSS\r\n- **Vietnamese Localization**: Built-in Vietnamese text support\r\n- **Modern UI**: Clean, accessible, and user-friendly interface\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install react-shopping-cart-library\r\n```\r\n\r\n## 🎯 Quick Start\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { ShoppingCart, useShoppingCart } from 'react-shopping-cart-library';\r\n\r\nfunction App() {\r\n  const { cart, addItem, updateItem, removeItem, clearCart } = useShoppingCart();\r\n\r\n  const handleCheckout = () => {\r\n    console.log('Checkout:', cart);\r\n  };\r\n\r\n  return (\r\n    <div className=\"min-h-screen bg-gray-100 py-8\">\r\n      <div className=\"container mx-auto px-4\">\r\n        <ShoppingCart\r\n          items={cart.items}\r\n          onAddItem={addItem}\r\n          onUpdateItem={updateItem}\r\n          onRemoveItem={removeItem}\r\n          onClearCart={clearCart}\r\n          onCheckout={handleCheckout}\r\n          showCheckout={true}\r\n          className=\"max-w-4xl mx-auto\"\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## 🧩 Components\r\n\r\n### ShoppingCart\r\n\r\nThe main shopping cart component with full CRUD functionality.\r\n\r\n```tsx\r\n<ShoppingCart\r\n  items={cart.items}\r\n  onAddItem={addItem}\r\n  onUpdateItem={updateItem}\r\n  onRemoveItem={removeItem}\r\n  onClearCart={clearCart}\r\n  onCheckout={handleCheckout}\r\n  showCheckout={true}\r\n  className=\"custom-class\"\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `items`: Array of cart items\r\n- `onAddItem`: Function to add new item\r\n- `onUpdateItem`: Function to update existing item\r\n- `onRemoveItem`: Function to remove item\r\n- `onClearCart`: Function to clear all items\r\n- `onCheckout`: Function called on checkout\r\n- `showCheckout`: Boolean to show/hide checkout button\r\n- `className`: Additional CSS classes\r\n\r\n### Button\r\n\r\nReusable button component with multiple variants and sizes.\r\n\r\n```tsx\r\n<Button\r\n  variant=\"primary\"\r\n  size=\"medium\"\r\n  onClick={handleClick}\r\n  disabled={false}\r\n>\r\n  Click me\r\n</Button>\r\n```\r\n\r\n**Props:**\r\n- `variant`: 'primary' | 'secondary' | 'danger' | 'success'\r\n- `size`: 'small' | 'medium' | 'large'\r\n- `disabled`: boolean\r\n- `onClick`: click handler\r\n- `type`: 'button' | 'submit' | 'reset'\r\n\r\n### Card\r\n\r\nFlexible card component for displaying content.\r\n\r\n```tsx\r\n<Card\r\n  title=\"Card Title\"\r\n  subtitle=\"Card Subtitle\"\r\n  image=\"image-url\"\r\n  onClick={handleClick}\r\n>\r\n  Card content\r\n</Card>\r\n```\r\n\r\n### Input\r\n\r\nForm input component with validation support.\r\n\r\n```tsx\r\n<Input\r\n  type=\"text\"\r\n  label=\"Name\"\r\n  placeholder=\"Enter your name\"\r\n  value={value}\r\n  onChange={setValue}\r\n  required\r\n  error={errorMessage}\r\n/>\r\n```\r\n\r\n### Modal\r\n\r\nModal component with backdrop and keyboard support.\r\n\r\n```tsx\r\n<Modal\r\n  isOpen={isOpen}\r\n  onClose={handleClose}\r\n  title=\"Modal Title\"\r\n  size=\"medium\"\r\n>\r\n  Modal content\r\n</Modal>\r\n```\r\n\r\n## 🎣 Hooks\r\n\r\n### useShoppingCart\r\n\r\nCustom hook for managing shopping cart state.\r\n\r\n```tsx\r\nconst {\r\n  cart,\r\n  addItem,\r\n  updateItem,\r\n  removeItem,\r\n  clearCart\r\n} = useShoppingCart(initialItems);\r\n```\r\n\r\n**Returns:**\r\n- `cart`: Cart object with items, total, and itemCount\r\n- `addItem`: Function to add new item\r\n- `updateItem`: Function to update existing item\r\n- `removeItem`: Function to remove item\r\n- `clearCart`: Function to clear all items\r\n\r\n## 📝 Types\r\n\r\n```tsx\r\ninterface CartItem {\r\n  id: string;\r\n  name: string;\r\n  price: number;\r\n  quantity: number;\r\n  image?: string;\r\n  description?: string;\r\n}\r\n\r\ninterface Cart {\r\n  items: CartItem[];\r\n  total: number;\r\n  itemCount: number;\r\n}\r\n```\r\n\r\n## 🎨 Styling\r\n\r\nThis library uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project:\r\n\r\n```bash\r\nnpm install tailwindcss\r\n```\r\n\r\nAdd to your CSS:\r\n```css\r\n@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n```\r\n\r\n## 📱 Responsive Design\r\n\r\nAll components are built with mobile-first responsive design:\r\n- Mobile: Optimized for small screens\r\n- Tablet: Enhanced layout for medium screens\r\n- Desktop: Full-featured layout for large screens\r\n\r\n## 🌐 Localization\r\n\r\nCurrently supports Vietnamese language. The library includes:\r\n- Vietnamese text for all UI elements\r\n- Vietnamese number formatting (VNĐ currency)\r\n- Vietnamese date/time formatting\r\n\r\n## 🤝 Contributing\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## 🐛 Issues\r\n\r\nIf you find any bugs or have feature requests, please open an issue on [GitHub](https://github.com/yourusername/react-shopping-cart-library/issues).\r\n\r\n## 📞 Support\r\n\r\nFor support, email your-email@example.com or create an issue on GitHub.\r\n\r\n---\r\n\r\nMade with ❤️ by [Your Name](https://github.com/yourusername)","readmeFilename":"README.md","_rev":"1-033be80b507b224cd1ae0a0c2457f656"}