Product Card Component

Create an interactive product card component with dynamic controls for customization.

Overview

Build a product card component that displays product information with configurable styling and behavior. The component should support various customization options that users can interact with through Storybook's control panel.

Requirements

Product Card Component

The component should accept the following properties:

• title: Product name (text)
• price: Product price in dollars (number)
• description: Product description (text)
• inStock: Whether the product is available (boolean)
• category: Product category selection from predefined options (select)
• tags: Multiple tag selection from predefined options (multi-select)
• rating: Product rating from 1-5 (range)
• imageUrl: URL to product image (text)
• discount: Discount percentage 0-100 (range)

Story Configuration

Create stories that demonstrate:

• Default product card with standard values
• Out of stock product with different styling
• Premium product with high rating and specific tags

Control Requirements

The controls should be configured with:

• Appropriate control types for each property
• Default values that make sense for a product card
• Min/max constraints where applicable (rating: 1-5, discount: 0-100)
• Predefined options for category (Electronics, Clothing, Books, Home & Garden)
• Predefined options for tags (New, Sale, Featured, Limited Edition, Best Seller)
• Control descriptions explaining what each property does
• Organized controls with proper categories where helpful

Test Cases

• Renders a product card with title "Laptop", price 999, and description "High-performance laptop" @test
• Displays "Out of Stock" styling when inStock is false @test
• Shows rating with correct number of stars for rating value 4 @test

Implementation

@generates

API

interface ProductCardProps {
  title: string;
  price: number;
  description: string;
  inStock: boolean;
  category: 'Electronics' | 'Clothing' | 'Books' | 'Home & Garden';
  tags: Array<'New' | 'Sale' | 'Featured' | 'Limited Edition' | 'Best Seller'>;
  rating: number;
  imageUrl: string;
  discount: number;
}

export function ProductCard(props: ProductCardProps): JSX.Element;

Stories

@generates

The stories file should:

• Export a default meta configuration with the component
• Define argTypes with appropriate control types and configurations
• Include default args with sensible values
• Create at least three story variations (default, out of stock, premium)

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides Storybook support for React components including story format and controls.

@satisfied-by

React { .dependency }

React library for building the component.

@satisfied-by