115 lines
5.8 KiB
JSON
115 lines
5.8 KiB
JSON
{
|
|
"name": "ProductCardFour",
|
|
"description": "E-commerce product card with name, variant description, and price in horizontal layout with favorite toggle.",
|
|
"details": "Use for fashion/apparel e-commerce with product variants. Card displays product image with favorite toggle at top. Below shows product name and variant description (e.g., 'Dark Grey 3 Colors') stacked vertically on left, with price aligned to top right. Clean, minimal layout ideal for clothing, accessories, and variant-heavy products. Automatically switches between grid (1-4 items) and carousel (5+ items) modes. Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports all textbox layouts (default, split, split-actions, split-description). Supports inverted background with shouldUseInvertedText utility for proper text color in cards.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Featured Products",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Discover our latest collection of premium apparel",
|
|
"minChars": 5,
|
|
"maxChars": 200
|
|
},
|
|
"tag": {
|
|
"required": false,
|
|
"example": "New Arrivals",
|
|
"minChars": 2,
|
|
"maxChars": 30
|
|
}
|
|
},
|
|
"buttonRules": {
|
|
"maxButtons": 2,
|
|
"structure": {
|
|
"text": "string - Button label (required)",
|
|
"href": "string - Link destination (optional)",
|
|
"onClick": "() => void - Click handler (optional)",
|
|
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
|
},
|
|
"note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
|
|
},
|
|
"productCardRules": {
|
|
"name": {
|
|
"required": true,
|
|
"example": "Represent X Puma Graphic T-Shirt",
|
|
"minChars": 2,
|
|
"maxChars": 100
|
|
},
|
|
"price": {
|
|
"required": true,
|
|
"example": "$100",
|
|
"note": "Display price with currency symbol"
|
|
},
|
|
"variant": {
|
|
"required": true,
|
|
"example": "Dark Grey 3 Colors",
|
|
"minChars": 2,
|
|
"maxChars": 100,
|
|
"note": "Product variant description (color, size options, etc.)"
|
|
},
|
|
"imageSrc": {
|
|
"required": true,
|
|
"example": "/product.jpg",
|
|
"note": "Product image URL"
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"products?": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items",
|
|
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
|
"gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
|
|
"uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
|
|
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
|
|
"title": "string",
|
|
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
|
"description": "string",
|
|
"tag?": "string",
|
|
"tagIcon?": "LucideIcon",
|
|
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
|
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
|
"useInvertedBackground": "boolean (required)",
|
|
"ariaLabel?": "string (default: 'Product section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"cardClassName?": "string",
|
|
"imageClassName?": "string",
|
|
"textBoxTitleClassName?": "string",
|
|
"textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
|
|
"textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
|
|
"textBoxDescriptionClassName?": "string",
|
|
"cardNameClassName?": "string",
|
|
"cardPriceClassName?": "string",
|
|
"cardVariantClassName?": "string",
|
|
"actionButtonClassName?": "string - Styles the action button on product image",
|
|
"gridClassName?": "string",
|
|
"carouselClassName?": "string",
|
|
"controlsClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"textBoxTagClassName?": "string",
|
|
"textBoxButtonContainerClassName?": "string",
|
|
"textBoxButtonClassName?": "string",
|
|
"textBoxButtonTextClassName?": "string"
|
|
},
|
|
"usageExample": "<ProductCardFour products={[{ id: '1', name: 'Represent X Puma Graphic T-Shirt', price: '$100', variant: 'Dark Grey 3 Colors', imageSrc: '/product.jpg', imageAlt: 'Product image', isFavorited: false, onFavorite: () => console.log('favorited'), onProductClick: () => window.open('/product', '_blank') }]} title=\"Featured Products\" description=\"Discover our latest collection\" tag=\"New Arrivals\" tagIcon={Package} textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
|
"do": [
|
|
"Use for product catalogs",
|
|
"Use for e-commerce",
|
|
"Requires products[]",
|
|
"Requires titleSegments?[]",
|
|
"Requires buttons?[]"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|