{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "data-product-card", "title": "Data Product Card", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/data-product-card/data-product-card.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input, OnDestroy, signal } from '@angular/core'\nimport {\n Activity,\n Award,\n Check,\n ChevronRight,\n Copy,\n Database,\n HardDrive,\n KeyRound,\n Layers,\n LucideAngularModule,\n Radio,\n Server,\n ShieldCheck,\n Users,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\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\n/**\n * DataProductCard -- the React block, 1:1: a Data Mesh data product card with the\n * governance ribbon, telemetry strip, selectable output ports, a URI inspector with\n * copy, the owner/tags bar and Query Port / Request Access actions.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-data-product-card, [ui-data-product-card]',\n standalone: true,\n host: { class: 'block' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n \n
\n
\n \n \n \n {{ product.domain }}\n \n\n \n \n \n {{ product.tier }}\n \n
\n\n \n
\n \n {{ product.certifiedCompliance }}\n SOC2 Certified\n
\n
\n\n \n
\n
\n
\n

\n {{ product.name }}\n

\n {{ product.version }}\n
\n\n \n \n {{ product.slaCompliance }}% SLA\n \n
\n\n \n

\n {{ product.description }}\n

\n
\n
\n\n
\n \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 \n
\n
\n \n Certified Multi-Modal Output Ports ({{ product.outputPorts.length }})\n \n Click port to inspect URI\n
\n\n
\n @for (port of product.outputPorts; track port.id) {\n \n
\n \n @switch (port.type) {\n @case ('snowflake') {\n \n }\n @case ('kafka') {\n \n }\n @case ('graphql') {\n \n }\n @default {\n \n }\n }\n
\n
\n
\n {{ port.typeLabel }}\n \n
\n

{{ port.name }}

\n

{{ port.latency }}

\n
\n
\n\n
\n @if (isSelected(port)) {\n \n โœ“\n \n } @else {\n \n }\n
\n \n }\n
\n
\n\n \n \n
\n Selected Endpoint URI:\n

{{ selectedPort()?.uri }}

\n
\n\n
\n \n @if (isCopied()) {\n \n } @else {\n \n }\n {{ isCopied() ? 'Copied' : 'Copy URI' }}\n \n
\n \n\n \n
\n \n
\n \n \n {{ product.owner.fallback }}\n \n \n
\n

{{ product.owner.name }}

\n

{{ product.owner.team }}

\n
\n
\n\n \n
\n @for (tag of product.tags.slice(0, 3); track tag) {\n \n {{ tag }}\n \n }\n
\n
\n \n\n \n\n \n
\n
\n Last contract verified: {{ product.lastUpdated }}\n
\n\n
\n \n @if (!isQueryingPort()) {\n \n }\n @if (isQueryingPort()) {\n Running Test Query...\n } @else {\n Query Port\n }\n \n\n \n \n {{ accessRequested() ? 'Access Requested โœ“' : 'Request Access' }}\n \n
\n
\n \n \n `,\n})\nexport class UiDataProductCardComponent implements OnDestroy {\n @Input() product: DataProductData = DEFAULT_DATA_PRODUCT\n @Input() variant: 'full' | 'compact' | 'minimal' = 'full'\n @Input('class') className?: string\n\n protected readonly cn = cn\n protected readonly Activity = Activity\n protected readonly Award = Award\n protected readonly Check = Check\n protected readonly ChevronRight = ChevronRight\n protected readonly Copy = Copy\n protected readonly Database = Database\n protected readonly HardDrive = HardDrive\n protected readonly KeyRound = KeyRound\n protected readonly Layers = Layers\n protected readonly Radio = Radio\n protected readonly Server = Server\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Users = Users\n protected readonly Zap = Zap\n\n readonly copiedPortId = signal(null)\n readonly accessRequested = signal(false)\n readonly isQueryingPort = signal(false)\n /** null until the user picks a port: React seeds it from the first port (or 'port-snow'). */\n readonly selectedPortId = signal(null)\n\n private readonly timers = new Set>()\n\n private currentPortId(): string {\n return this.selectedPortId() ?? this.product.outputPorts[0]?.id ?? 'port-snow'\n }\n\n selectedPort(): OutputPort | undefined {\n const id = this.currentPortId()\n return this.product.outputPorts.find((p) => p.id === id) ?? this.product.outputPorts[0]\n }\n\n isSelected(port: OutputPort): boolean {\n return this.currentPortId() === port.id\n }\n\n isCopied(): boolean {\n const port = this.selectedPort()\n return this.copiedPortId() === port?.id\n }\n\n portClass(port: OutputPort): string {\n return cn(\n 'group flex items-start justify-between rounded-lg border p-2.5 text-left transition-[colors,transform] duration-150 active:scale-[0.98]',\n this.isSelected(port)\n ? 'border-primary/50 bg-primary/5 ring-primary/30 ring-1'\n : 'border-border bg-card hover:border-primary/25 hover:bg-muted/40',\n )\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timers.delete(t)\n fn()\n }, ms)\n this.timers.add(t)\n }\n\n copyUri(port: OutputPort): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(port.uri)\n this.copiedPortId.set(port.id)\n this.later(() => this.copiedPortId.set(null), 2000)\n }\n }\n\n copySelected(): void {\n const port = this.selectedPort()\n if (port) this.copyUri(port)\n }\n\n handleRequestAccess(): void {\n this.accessRequested.set(true)\n this.later(() => this.accessRequested.set(false), 4000)\n }\n\n handleQueryPort(): void {\n this.isQueryingPort.set(true)\n this.later(() => this.isQueryingPort.set(false), 1200)\n }\n\n ngOnDestroy(): void {\n for (const t of this.timers) clearTimeout(t)\n this.timers.clear()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/data-product-card/data-product-card.component.ts" }, { "path": "packages/registry-angular/blocks/data-product-card/index.ts", "content": "export {\n UiDataProductCardComponent,\n DEFAULT_DATA_PRODUCT,\n type DataProductData,\n type OutputPort,\n} from './data-product-card.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/data-product-card/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/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" ] }