{"_id":"@atom-design-mog/cardslist","_rev":"2-1ec22ba04113cecad96913ff66d3951f","name":"@atom-design-mog/cardslist","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/cardslist","version":"1.0.0","keywords":["react-native","cards","products","list","ui-component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/cardslist@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"e9f8a850ae2ab994cc5a764923c94e91bbfb4353","tarball":"https://registry.npmjs.org/@atom-design-mog/cardslist/-/cardslist-1.0.0.tgz","fileCount":3,"integrity":"sha512-suLop6/6D3b8vZtQd3F+cW8iMxJ+08mqf1QaSwH0CTyTWMLHH2JlBGwYr36VTrpPH+eSNR0S7viIiycdkqwKYg==","signatures":[{"sig":"MEUCIB//iumcAT4Y1q9nSjQMYeiFMq5S+pA+ZInEWtqyMjFcAiEAipGOJRioccDHItQP2UKpQSzx2oiReEw6E+3b7pg8Rp8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4066},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A React Native CardsList component for displaying product cards with responsive columns and request quote button.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/cardslist_1.0.0_1763727804737_0.1697863275380853","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/cardslist","version":"1.0.1","description":"A React Native CardsList component for displaying product cards with responsive columns and request quote button.","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","cards","products","list","ui-component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"_id":"@atom-design-mog/cardslist@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Z0E6HwUY2gsZAxOga/cF/h7BKSXyOX21CYBovbvi30moljwv0i6zfQfbYk7amne/VEH/d/Gq1Pu/FIQjTmJQ5Q==","shasum":"aec1e67377983f1e3da58c0c4217fc7046e71a62","tarball":"https://registry.npmjs.org/@atom-design-mog/cardslist/-/cardslist-1.0.1.tgz","fileCount":4,"unpackedSize":7833,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE4FHT2KgIxmtS6DiQGYqi8B7zk/aErdwa3goYKg6TRoAiEAx3lJQlqVBY2zpeVR6cAjzmeqxXDTCpKfnMxntS3silw="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cardslist_1.0.1_1763969775564_0.1380247497864595"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:23:24.667Z","modified":"2025-11-24T07:36:15.925Z","1.0.0":"2025-11-21T12:23:24.905Z","1.0.1":"2025-11-24T07:36:15.735Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","cards","products","list","ui-component"],"description":"A React Native CardsList component for displaying product cards with responsive columns and request quote button.","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/cardslist\n\nA fully responsive, customizable product cards grid component for React Native, built for the Atom Design System (Moglix). The layout automatically adjusts based on screen size and supports custom column counts, touch events, and quote actions.\n\n---\n\n## 📦 Installation\n\nInstall with npm:\n\n```bash\nnpm install @atom-design-mog/cardslist\n```\n\nOr with yarn:\n\n```bash\nyarn add @atom-design-mog/cardslist\n```\n\n---\n\n## 🚀 Usage\n\n```javascript\nimport React from 'react';\nimport CardsList from '@atom-design-mog/cardslist';\n\nexport default function Example() {\n  const products = [\n    {\n      id: 1,\n      name: \"Honeywell 6MP Indoor & Outdoor Fisheye IR IP Camera, HFD6GR1\",\n      brand: \"Honeywell\",\n      image: \"https://cdn.moglix.com/p/foh39PihRTWbF-xxlarge.jpg\",\n    },\n    {\n      id: 2,\n      name: \"Digital Security Camera HD 1080p\",\n      brand: \"Samsung\",\n      image: \"https://atom-react.moglix.com/_next/image?url=%2Fassets%2Fimg%2Fcatedummy.jpg&w=256&q=75\",\n    },\n  ];\n\n  return (\n    <CardsList\n      products={products}\n      numColumns={3}\n      onProductPress={(product) => console.log('Product pressed:', product)}\n      onQuotePress={(product) => console.log('Quote requested:', product)}\n    />\n  );\n}\n```\n\n---\n\n## 🧩 Component Features\n\n- Responsive column layout that adapts to screen width\n- Supports custom number of columns via `numColumns`\n- Grid auto-adjusts based on screen width with sensible defaults\n- Product image, name & brand display\n- “Request Quote” button with callback\n- Works inside `ScrollView` or standalone\n- Press handlers for product tap & quote request\n- Beautiful shadows, spacing and Atom styling\n- Memoized card rendering for performance\n\n---\n\n## 📱 Responsive Behavior (Default Auto Columns)\n\n| Screen Width | Columns |\n| ---: | :--- |\n| > 1200 px | 5 |\n| > 992 px  | 4 |\n| > 768 px  | 3 |\n| Below 768 px | 2 |\n\nOverride by passing `numColumns={1}` (or any number) to force a layout.\n\n---\n\n## 🧲 Props\n\n| Prop             | Type              | Description                           |\n| ---------------- | ----------------- | ------------------------------------- |\n| `products`       | `Array`           | Product list (id, name, brand, image) |\n| `numColumns`     | `number`          | Optional — override auto layout       |\n| `onProductPress` | `(product)=>void` | Callback when card image is pressed   |\n| `onQuotePress`   | `(product)=>void` | Callback for quote button             |\n\n\n---\n\n## 🛒 Product Structure\n\nEach product object should have the shape:\n\n```json\n{\n  \"id\": 1,\n  \"name\": \"Product name\",\n  \"brand\": \"Brand name\",\n  \"image\": \"https://.../image.jpg\"\n}\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```javascript\nimport React from 'react';\nimport { View, Text, ScrollView } from 'react-native';\nimport CardsList from '@atom-design-mog/cardslist';\n\nexport default function TestCardsScreen() {\n  const products = [\n    {\n      id: 1,\n      name: \"Honeywell 6MP Fisheye Camera\",\n      brand: \"Honeywell\",\n      image: \"https://cdn.moglix.com/p/foh39PihRTWbF-xxlarge.jpg\",\n    },\n    {\n      id: 2,\n      name: \"Digital Security Camera HD 1080p\",\n      brand: \"Samsung\",\n      image: \"https://atom-react.moglix.com/_next/image?url=%2Fassets%2Fimg%2Fcatedummy.jpg&w=256&q=75\",\n    },\n  ];\n\n  return (\n    <ScrollView>\n      <View style={{ padding: 10 }}>\n        <Text style={{ marginBottom: 15, fontSize: 18, fontWeight: '600' }}>\n          Cards List\n        </Text>\n\n        <CardsList\n          products={products}\n          numColumns={1}\n          onProductPress={(p) => console.log('Product pressed:', p)}\n          onQuotePress={(p) => console.log('Quote pressed:', p)}\n        />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## 👤 Author\n\nAvi Gupta\n","readmeFilename":"README.md"}