@atom_design/cardslist

A responsive React Native product cards grid component with auto-adjusting columns and request quote functionality. Part of the Atom Design System.

Features

• 📱 Responsive Grid - Auto-adjusts columns based on screen width
• 🎨 Customizable - Style cards, images, buttons with custom props
• 🛒 Product Cards - Display product image, name, brand
• 📞 Quote Button - Built-in request quote functionality
• ♿ Accessible - Full screen reader support
• ⚡ Optimized - Memoized rendering for performance
• 💪 TypeScript - Full type definitions included

📦 Installation

npm install @atom_design/cardslist
# or
yarn add @atom_design/cardslist

Peer Dependencies

npm install react react-native prop-types

🚀 Basic Usage

import React from 'react';
import { View } from 'react-native';
import CardsList from '@atom_design/cardslist';

const App = () => {
  const products = [
    { id: 1, name: 'Honeywell Camera', brand: 'Honeywell', image: 'https://picsum.photos/200' },
    { id: 2, name: 'Samsung Monitor', brand: 'Samsung', image: 'https://picsum.photos/201' },
  ];

  return (
    <View style={{ flex: 1 }}>
      <CardsList
        products={products}
        buttonText="Request Quote"
        onProductPress={(product) => console.log('Product:', product)}
        onQuotePress={(product) => console.log('Quote:', product)}
      />
    </View>
  );
};

export default App;

🧩 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | products | Product[] | [] | Array of product objects | | onProductPress | (product) => void | - | Callback when card is pressed | | onQuotePress | (product) => void | - | Callback when quote button is pressed | | numColumns | number | auto | Override auto column count | | cardStyle | ViewStyle | - | Custom card container style | | imageStyle | ImageStyle | - | Custom image style | | buttonStyle | ViewStyle | - | Custom button style | | buttonTextStyle | TextStyle | - | Custom button text style | | buttonText | string | - | Custom button text (required when showButton is true) | | showBrand | boolean | true | Show/hide brand name | | showButton | boolean | true | Show/hide action button | | testID | string | - | Test ID for testing |

📱 Responsive Columns

The grid automatically adjusts based on screen width:

| Screen Width | Columns | |-------------|---------| | > 1200px | 5 | | > 992px | 4 | | > 768px | 3 | | < 768px | 2 |

Override with numColumns prop:

<CardsList products={products} numColumns={3} />

📁 Product Structure

interface Product {
  id: string | number;  // Required - unique identifier
  name: string;         // Required - product name
  brand?: string;       // Optional - brand name
  image?: string;       // Optional - image URL
}

🧪 Test Screen Example

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
} from 'react-native';
import CardsList from '@atom_design/cardslist';

const products = [
  {
    id: 1,
    name: 'Honeywell 6MP Indoor Camera',
    brand: 'Honeywell',
    image: 'https://picsum.photos/200?random=1',
  },
  {
    id: 2,
    name: 'Samsung Security Camera HD',
    brand: 'Samsung',
    image: 'https://picsum.photos/200?random=2',
  },
  {
    id: 3,
    name: 'Bosch Motion Sensor',
    brand: 'Bosch',
    image: 'https://picsum.photos/200?random=3',
  },
  {
    id: 4,
    name: 'Philips Smart Light Bulb',
    brand: 'Philips',
    image: 'https://picsum.photos/200?random=4',
  },
];

const CardsListTestScreen = () => {
  const handleProductPress = (product) => {
    console.log('Product pressed:', product.name);
  };

  const handleQuotePress = (product) => {
    console.log('Quote requested for:', product.name);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>@atom_design/cardslist - Test</Text>

      <CardsList
        products={products}
        buttonText="Request Quote"
        onProductPress={handleProductPress}
        onQuotePress={handleQuotePress}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
  },
});

export default CardsListTestScreen;

📝 TypeScript

Full TypeScript support included:

import CardsList, { Product } from '@atom_design/cardslist';

const products: Product[] = [
  { id: 1, name: 'Product', brand: 'Brand', image: 'https://...' },
];

<CardsList
  products={products}
  buttonText="Get Price"
  onProductPress={(product: Product) => console.log(product)}
/>

👤 Author

Atom Design Team

📄 License

MIT © Atom Design