NTV Scaffolding MCP Server

# ✅ Card Component Usage Fix ## 🔍 **Issue Found** The MCP had outdated Card component properties that didn't match the actual implementation. **Was documenting:** - `elevation` (property) - `padding` (property) - `hoverable` (property) **Actually has:** - `variant` (default, elevated, outlined, filled) - `rounded` (border radius) - `shadow` (shadow intensity) - `backgroundColor`, `borderColor`, `gradient` - `hoverEffect`, `clickable`, `fullWidth` - `adaptToTheme` - **Config pattern support** ✅ --- ## 📋 **Updated Card Component Properties** ### **Individual Properties:** | Property | Type | Default | Description | |----------|------|---------|-------------| | `variant` | CardVariant | `default` | Visual variant (default, elevated, outlined, filled) | | `rounded` | CardRounded | `md` | Border radius (none, sm, md, lg, xl, full) | | `shadow` | CardShadow | `sm` | Shadow intensity (none, sm, md, lg, xl) | | `backgroundColor` | string | `` | Custom background color (hex or CSS) | | `borderColor` | string | `` | Custom border color (hex or CSS) | | `gradient` | string | `` | CSS gradient background | | `hoverEffect` | boolean | `false` | Apply hover effects | | `clickable` | boolean | `false` | Make card clickable | | `fullWidth` | boolean | `false` | Take full width | | `adaptToTheme` | boolean | `true` | Adapt colors to dark/light mode | ### **Config Interface:** ```typescript interface CardConfig { variant?: CardVariant; rounded?: CardRounded; shadow?: CardShadow; backgroundColor?: string; borderColor?: string; gradient?: string; hoverEffect?: boolean; clickable?: boolean; fullWidth?: boolean; adaptToTheme?: boolean; } ``` --- ## 🎯 **Correct Usage Patterns** ### ✅ **Config Pattern (Recommended):** ```typescript import { Card } from '@ntv-scaffolding/component-pantry'; @Component({ standalone: true, imports: [Card], template: ` <ntv-card [config]="cardConfig"> <h2>My Card</h2> <p>Content here</p> </ntv-card> ` }) export class MyComponent { cardConfig = { variant: 'elevated', shadow: 'md', rounded: 'lg', hoverEffect: true }; } ``` ### ✅ **Individual Properties:** ```html <ntv-card variant="outlined" rounded="md" shadow="sm" [clickable]="true" (cardClick)="handleCardClick($event)"> Clickable card </ntv-card> ``` ### ✅ **Advanced - With Theme Adaptation:** ```html <ntv-card [config]="{ gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', adaptToTheme: true, hoverEffect: true }"> Beautiful gradient card </ntv-card> ``` --- ## 📊 **Events** | Event | Type | Description | |-------|------|-------------| | `cardClick` | Event | Emitted when card is clicked (only when clickable=true) | **Example:** ```html <ntv-card [clickable]="true" (cardClick)="onCardClicked($event)"> Click me </ntv-card> ``` --- ## 🎨 **Variants** ``` default → Standard card appearance elevated → Card with shadow, appears raised outlined → Card with border, no fill filled → Card with filled background ``` **Example:** ```html <ntv-card variant="elevated">Elevated card</ntv-card> <ntv-card variant="outlined">Outlined card</ntv-card> <ntv-card variant="filled">Filled card</ntv-card> ``` --- ## 🌓 **Dark Mode Support** The Card component supports automatic theme adaptation: ```html <ntv-card [config]="{ backgroundColor: '#FF6B6B', adaptToTheme: true }"> Colors auto-adjust for dark mode </ntv-card> ``` When `adaptToTheme: true`: - Light colors darken in dark mode - Dark colors lighten in dark mode - Maintains contrast and readability --- ## ✨ **Key Features** ✅ **Config Pattern Support** - Like Button and Input ✅ **Theme Adaptation** - Dark/light mode support ✅ **Clickable Cards** - With keyboard accessibility ✅ **Custom Colors** - Background, border, gradients ✅ **Flexible Styling** - Variants, shadows, rounded corners --- ## 🔄 **Migration Note** If you were using the old (incorrect) Card properties: ### ❌ **Old (Incorrect):** ```html <ntv-card [elevation]="2" padding="2rem"> ``` ### ✅ **New (Correct):** ```html <ntv-card [config]="{ shadow: 'md', variant: 'elevated' }"> ``` --- **Version**: 1.0.4 (Card Fix) **Status**: ✅ Fully corrected **Date**: November 3, 2025