{"_id":"@atom_design/cardslist","_rev":"2-15a5f2a0eb672ea374cb2091aa30eb32","name":"@atom_design/cardslist","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom_design/cardslist","version":"1.0.0","keywords":["react-native","cards","products","grid","list","responsive","ui-component","atom-design"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/cardslist@1.0.0","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"a6b59fe151c6aaa8967892a1540c2b95394b104a","tarball":"https://registry.npmjs.org/@atom_design/cardslist/-/cardslist-1.0.0.tgz","fileCount":5,"integrity":"sha512-yAKOwmw1yNi3j2dLfiLukvCtv6Fe6F6O00NPmhNGSQJoxL/LkrmmTFR4OnWBCYfbKbaeIMhmBNLu8vDLg3tYdQ==","signatures":[{"sig":"MEQCIFTWEmQ5eEVgWcp9nSCjWDOjkIWMmCDyNBWTLt+BSz+gAiBg5+TocsmhlS3iN7U4Z1pg5Zs9Yp6RjITiqWiUk4C6yw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15976},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A responsive React Native product cards grid component with auto-adjusting columns and request quote functionality.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0"},"_npmOperationalInternal":{"tmp":"tmp/cardslist_1.0.0_1764746384980_0.9799215268222288","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom_design/cardslist","version":"1.0.1","description":"A responsive React Native product cards grid component with auto-adjusting columns and request quote functionality.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","cards","products","grid","list","responsive","ui-component","atom-design"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0"},"_id":"@atom_design/cardslist@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-7O0H30+dDxmZoyjAmXRQzAFz4OOwV/FRc0z6bmB8H9L8dPXxwTU2pGoR3HvJHLMNqxVzcgbJWRW5QqxUGRGwYA==","shasum":"a16394cc05b58cbd08e5cc54a5bf1fa984dca837","tarball":"https://registry.npmjs.org/@atom_design/cardslist/-/cardslist-1.0.1.tgz","fileCount":5,"unpackedSize":16559,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDflI6yr1kD2oE0JNKy74Csp4NytfxNjmJvJM//C2qFkQIgE87G7U+dg8u5jRdTXpiveczNlPCa9BangUsjeh0wD2M="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cardslist_1.0.1_1764746731622_0.9073256869110697"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T07:19:44.912Z","modified":"2025-12-03T07:25:32.010Z","1.0.0":"2025-12-03T07:19:45.165Z","1.0.1":"2025-12-03T07:25:31.778Z"},"author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","cards","products","grid","list","responsive","ui-component","atom-design"],"description":"A responsive React Native product cards grid component with auto-adjusting columns and request quote functionality.","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom_design/cardslist\n\nA responsive React Native product cards grid component with auto-adjusting columns and request quote functionality. Part of the Atom Design System.\n\n[![npm version](https://img.shields.io/npm/v/@atom_design/cardslist.svg)](https://www.npmjs.com/package/@atom_design/cardslist)\n[![license](https://img.shields.io/npm/l/@atom_design/cardslist.svg)](https://github.com/atom-design/cardslist/blob/main/LICENSE)\n\n## Features\n\n- 📱 **Responsive Grid** - Auto-adjusts columns based on screen width\n- 🎨 **Customizable** - Style cards, images, buttons with custom props\n- 🛒 **Product Cards** - Display product image, name, brand\n- 📞 **Quote Button** - Built-in request quote functionality\n- ♿ **Accessible** - Full screen reader support\n- ⚡ **Optimized** - Memoized rendering for performance\n- 💪 **TypeScript** - Full type definitions included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @atom_design/cardslist\n# or\nyarn add @atom_design/cardslist\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types\n```\n\n---\n\n## 🚀 Basic Usage\n\n```jsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport CardsList from '@atom_design/cardslist';\n\nconst App = () => {\n  const products = [\n    { id: 1, name: 'Honeywell Camera', brand: 'Honeywell', image: 'https://picsum.photos/200' },\n    { id: 2, name: 'Samsung Monitor', brand: 'Samsung', image: 'https://picsum.photos/201' },\n  ];\n\n  return (\n    <View style={{ flex: 1 }}>\n      <CardsList\n        products={products}\n        buttonText=\"Request Quote\"\n        onProductPress={(product) => console.log('Product:', product)}\n        onQuotePress={(product) => console.log('Quote:', product)}\n      />\n    </View>\n  );\n};\n\nexport default App;\n```\n\n---\n\n## 🧩 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `products` | `Product[]` | `[]` | Array of product objects |\n| `onProductPress` | `(product) => void` | - | Callback when card is pressed |\n| `onQuotePress` | `(product) => void` | - | Callback when quote button is pressed |\n| `numColumns` | `number` | auto | Override auto column count |\n| `cardStyle` | `ViewStyle` | - | Custom card container style |\n| `imageStyle` | `ImageStyle` | - | Custom image style |\n| `buttonStyle` | `ViewStyle` | - | Custom button style |\n| `buttonTextStyle` | `TextStyle` | - | Custom button text style |\n| `buttonText` | `string` | - | Custom button text (required when showButton is true) |\n| `showBrand` | `boolean` | `true` | Show/hide brand name |\n| `showButton` | `boolean` | `true` | Show/hide action button |\n| `testID` | `string` | - | Test ID for testing |\n\n---\n\n## 📱 Responsive Columns\n\nThe grid automatically adjusts based on screen width:\n\n| Screen Width | Columns |\n|-------------|---------|\n| > 1200px | 5 |\n| > 992px | 4 |\n| > 768px | 3 |\n| < 768px | 2 |\n\nOverride with `numColumns` prop:\n\n```jsx\n<CardsList products={products} numColumns={3} />\n```\n\n---\n\n## 📁 Product Structure\n\n```typescript\ninterface Product {\n  id: string | number;  // Required - unique identifier\n  name: string;         // Required - product name\n  brand?: string;       // Optional - brand name\n  image?: string;       // Optional - image URL\n}\n```\n\n---\n\n## 🧪 Test Screen Example\n\n```jsx\nimport React from 'react';\nimport {\n  View,\n  Text,\n  StyleSheet,\n  SafeAreaView,\n} from 'react-native';\nimport CardsList from '@atom_design/cardslist';\n\nconst products = [\n  {\n    id: 1,\n    name: 'Honeywell 6MP Indoor Camera',\n    brand: 'Honeywell',\n    image: 'https://picsum.photos/200?random=1',\n  },\n  {\n    id: 2,\n    name: 'Samsung Security Camera HD',\n    brand: 'Samsung',\n    image: 'https://picsum.photos/200?random=2',\n  },\n  {\n    id: 3,\n    name: 'Bosch Motion Sensor',\n    brand: 'Bosch',\n    image: 'https://picsum.photos/200?random=3',\n  },\n  {\n    id: 4,\n    name: 'Philips Smart Light Bulb',\n    brand: 'Philips',\n    image: 'https://picsum.photos/200?random=4',\n  },\n];\n\nconst CardsListTestScreen = () => {\n  const handleProductPress = (product) => {\n    console.log('Product pressed:', product.name);\n  };\n\n  const handleQuotePress = (product) => {\n    console.log('Quote requested for:', product.name);\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <Text style={styles.header}>@atom_design/cardslist - Test</Text>\n\n      <CardsList\n        products={products}\n        buttonText=\"Request Quote\"\n        onProductPress={handleProductPress}\n        onQuotePress={handleQuotePress}\n      />\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginVertical: 20,\n  },\n});\n\nexport default CardsListTestScreen;\n```\n\n---\n\n## 📝 TypeScript\n\nFull TypeScript support included:\n\n```tsx\nimport CardsList, { Product } from '@atom_design/cardslist';\n\nconst products: Product[] = [\n  { id: 1, name: 'Product', brand: 'Brand', image: 'https://...' },\n];\n\n<CardsList\n  products={products}\n  buttonText=\"Get Price\"\n  onProductPress={(product: Product) => console.log(product)}\n/>\n```\n\n---\n\n## 👤 Author\n\nAtom Design Team\n\n---\n\n## 📄 License\n\nMIT © [Atom Design](https://github.com/atom-design)\n","readmeFilename":"README.md"}