Interactive Product Card Story

Create a Storybook story for a Product Card component with interactive, live-editable properties.

Requirements

Build a story that allows users to manipulate the product card's properties in real-time through Storybook's controls interface.

Product Card Component Properties

The Product Card accepts the following properties:

• name (string): Product name
• price (number): Product price
• imageUrl (string): URL to product image
• description (string): Product description
• inStock (boolean): Availability status
• featured (boolean): Featured flag

Story Configuration Requirements

Your story must:

1. Define default values for all properties
2. Enable live editing through Storybook's controls panel
3. Support URL parameter serialization for sharing specific property states

Default Values

Use the following default values:

• name: "Wireless Headphones"
• price: 99.99
• imageUrl: "https://example.com/headphones.jpg"
• description: "Premium wireless headphones with noise cancellation"
• inStock: true
• featured: true

Test Cases

• The story renders with the correct default values for name, price, and featured status @test
• The story's args are properly configured to enable live editing through controls @test
• Multiple stories can be created with different arg values using object composition @test

Implementation

@generates

API

import type { Meta, StoryObj } from '@storybook/react';

interface ProductCardProps {
  name: string;
  price: number;
  imageUrl: string;
  description: string;
  inStock: boolean;
  featured: boolean;
}

declare const ProductCard: React.FC<ProductCardProps>;

// Export meta configuration with component and default args
export const meta: Meta<typeof ProductCard>;

// Export a story with configurable args
export const Default: StoryObj<typeof ProductCard>;

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides Storybook integration for React components, including the Meta and StoryObj types for type-safe story definitions.

@satisfied-by