{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-product-card", "title": "Data Product Card", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/data-product-card/DataProductCard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n Check,\n ChevronRight,\n Copy,\n Database,\n HardDrive,\n KeyRound,\n Layers,\n Radio,\n Server,\n ShieldCheck,\n Award,\n Users,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface OutputPort {\n id: string\n name: string\n type: 'snowflake' | 'kafka' | 'graphql' | 's3' | 'postgres'\n typeLabel: string\n uri: string\n latency: string\n status: 'online' | 'degraded' | 'syncing'\n}\n\nexport interface DataProductData {\n id: string\n name: string\n version: string\n domain: string\n tier: 'Gold Tier 1' | 'Silver Tier 2' | 'Bronze Tier 3'\n description: string\n slaCompliance: number\n freshness: string\n completenessPct: number\n activeConsumersCount: number\n owner: {\n name: string\n role: string\n team: string\n avatar?: string\n fallback: string\n }\n outputPorts: OutputPort[]\n tags: string[]\n certifiedCompliance: string\n lastUpdated: string\n}\n\nexport const DEFAULT_DATA_PRODUCT: DataProductData = {\n id: 'dp-cust-360',\n name: 'dp_customer_360_profile',\n version: 'v3.2.0',\n domain: 'Customer Intelligence & Growth',\n tier: 'Gold Tier 1',\n description:\n 'Unified customer identity graph consolidating CRM accounts, Stripe transaction volumes, and behavioral product telemetry into clean semantic marts.',\n slaCompliance: 99.8,\n freshness: 'Updated 8m ago ยท Hourly sync',\n completenessPct: 99.4,\n activeConsumersCount: 14,\n owner: {\n name: 'Marcus Vance',\n role: 'Staff Data Architect',\n team: 'Data Platform Squad',\n fallback: 'MV',\n },\n outputPorts: [\n {\n id: 'port-snow',\n name: 'analytics.gold_customer_360',\n type: 'snowflake',\n typeLabel: 'Snowflake Table',\n uri: 'snowflake://analytics_prod.dw/analytics.gold_customer_360',\n latency: '< 1h Batch SLA',\n status: 'online',\n },\n {\n id: 'port-kafka',\n name: 'events.customer.updates.v2',\n type: 'kafka',\n typeLabel: 'Kafka Stream',\n uri: 'kafka://events.kafka.internal:9092/events.customer.updates.v2',\n latency: '< 100ms Event Time',\n status: 'online',\n },\n {\n id: 'port-gql',\n name: 'GraphQL Query Port',\n type: 'graphql',\n typeLabel: 'GraphQL API',\n uri: 'https://api.uipkge.dev/graphql?query=customer360',\n latency: '< 45ms p99',\n status: 'online',\n },\n {\n id: 'port-s3',\n name: 'Parquet Lake Export',\n type: 's3',\n typeLabel: 'Parquet S3 Lake',\n uri: 's3://lakehouse-gold/customer_360/snapshot_latest.parquet',\n latency: '24h Partitioned',\n status: 'online',\n },\n ],\n tags: ['#customer360', '#revenue', '#identity', '#gold_marts', '#dbt_certified'],\n certifiedCompliance: 'SOC2 Type II & GDPR Art. 15 Compliant',\n lastUpdated: 'Aug 21, 2026',\n}\n\nexport interface DataProductCardProps {\n product?: DataProductData\n variant?: 'full' | 'compact' | 'minimal'\n className?: string\n}\n\nexport function DataProductCard({ product = DEFAULT_DATA_PRODUCT, variant = 'full', className }: DataProductCardProps) {\n const [copiedPortId, setCopiedPortId] = React.useState(null)\n const [accessRequested, setAccessRequested] = React.useState(false)\n const [isQueryingPort, setIsQueryingPort] = React.useState(false)\n const [selectedPortId, setSelectedPortId] = React.useState(product.outputPorts[0]?.id || 'port-snow')\n\n const selectedPort = product.outputPorts.find((p) => p.id === selectedPortId) || product.outputPorts[0]\n\n function copyUri(port: OutputPort) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(port.uri)\n setCopiedPortId(port.id)\n setTimeout(() => {\n setCopiedPortId(null)\n }, 2000)\n }\n }\n\n function handleRequestAccess() {\n setAccessRequested(true)\n setTimeout(() => {\n setAccessRequested(false)\n }, 4000)\n }\n\n function handleQueryPort() {\n setIsQueryingPort(true)\n setTimeout(() => {\n setIsQueryingPort(false)\n }, 1200)\n }\n\n return (\n
\n \n \n {/* Badges & Governance Ribbon */}\n
\n
\n {/* Domain Tag */}\n \n \n {product.domain}\n \n\n {/* Tier Tag */}\n \n \n {product.tier}\n \n
\n\n {/* Compliance Seal */}\n
\n \n {product.certifiedCompliance}\n SOC2 Certified\n
\n
\n\n {/* Title & Version Lockup */}\n
\n
\n
\n

\n {product.name}\n

\n {product.version}\n
\n\n \n \n {product.slaCompliance}% SLA\n \n
\n\n {/* Business Value Description */}\n \n {product.description}\n \n
\n \n\n \n {/* 4 Key Telemetry Metrics Strip */}\n
\n
\n SLA Compliance\n
\n \n {product.slaCompliance}%\n \n โœ“\n
\n \n
\n\n
\n Data Freshness\n \n {product.freshness}\n \n SLA: < 1h Target\n
\n\n
\n Completeness\n \n {product.completenessPct}%\n \n 0.6% Max Nulls\n
\n\n
\n Active Consumers\n
\n \n \n {product.activeConsumersCount} Apps\n \n
\n Certified Live Ports\n
\n
\n\n {/* Multi-Modal Output Ports Selector */}\n
\n
\n \n Certified Multi-Modal Output Ports ({product.outputPorts.length})\n \n Click port to inspect URI\n
\n\n
\n {product.outputPorts.map((port) => (\n setSelectedPortId(port.id)}\n >\n
\n
\n {port.type === 'snowflake' && }\n {port.type === 'kafka' && }\n {port.type === 'graphql' && }\n {port.type !== 'snowflake' && port.type !== 'kafka' && port.type !== 'graphql' && (\n \n )}\n
\n
\n
\n {port.typeLabel}\n \n
\n

{port.name}

\n

{port.latency}

\n
\n
\n\n
\n {selectedPortId === port.id ? (\n \n โœ“\n \n ) : (\n \n )}\n
\n \n ))}\n
\n
\n\n {/* Active Selected Port URI Inspector Box */}\n
\n
\n Selected Endpoint URI:\n

{selectedPort?.uri}

\n
\n\n
\n selectedPort && copyUri(selectedPort)}\n >\n {copiedPortId === selectedPort?.id ? (\n \n ) : (\n \n )}\n {copiedPortId === selectedPort?.id ? 'Copied' : 'Copy URI'}\n \n
\n
\n\n {/* Product Owner & Tags Bar */}\n
\n {/* Owner Profile */}\n
\n \n \n {product.owner.fallback}\n \n \n
\n

{product.owner.name}

\n

{product.owner.team}

\n
\n
\n\n {/* Tags */}\n
\n {product.tags.slice(0, 3).map((tag) => (\n \n {tag}\n \n ))}\n
\n
\n \n\n \n\n {/* Footer Action Controls */}\n \n
\n Last contract verified: {product.lastUpdated}\n
\n\n
\n \n {!isQueryingPort && }\n {isQueryingPort ? Running Test Query... : Query Port}\n \n\n \n \n {accessRequested ? 'Access Requested โœ“' : 'Request Access'}\n \n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/DataProductCard.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Data Mesh architectural Data Product Card (DPC) featuring SLA compliance health, multi-modal output ports (Snowflake, Kafka, GraphQL, Parquet S3), domain ownership, consumer counts, and access request triggers.", "categories": [ "devops", "app", "data", "analytics" ] }