{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "webhooks", "title": "Webhooks", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/webhooks/webhooks.component.ts", "content": "// Webhook manager in two SectionCards: endpoints with event chips, live success rate\n// and a pause/resume switch, plus a delivery log pairing relative timestamps with HTTP\n// status pills, durations, retry counts and retry actions. Includes an add-endpoint dialog.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { LucideAngularModule, Plus, RotateCw, Webhook } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiChipComponent } from '@/ui/chip/chip.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiRelativeTimeComponent } from '@/ui/relative-time/relative-time.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\n\nexport type WebhookEvent = 'order.created' | 'order.refunded' | 'customer.updated' | 'invoice.paid'\n\nexport interface WebhookEndpoint {\n id: string\n url: string\n enabled: boolean\n events: WebhookEvent[]\n successRate: string\n}\n\nexport interface WebhookDelivery {\n id: string\n endpointId: string\n event: WebhookEvent\n status: number\n durationMs: number\n retries: number\n date: Date\n}\n\nconst now = Date.now()\nconst minutesAgo = (m: number) => new Date(now - m * 60_000)\n\nconst stubEndpoints: WebhookEndpoint[] = [\n {\n id: 'e1',\n url: 'https://api.acme.com/hooks/orders',\n enabled: true,\n events: ['order.created', 'order.refunded'],\n successRate: '99.2% · 24h',\n },\n {\n id: 'e2',\n url: 'https://hooks.billing.io/acme',\n enabled: true,\n events: ['invoice.paid'],\n successRate: '97.8% · 24h',\n },\n {\n id: 'e3',\n url: 'https://staging.acme.dev/hooks/all',\n enabled: false,\n events: ['order.created', 'customer.updated', 'invoice.paid'],\n successRate: '—',\n },\n]\n\nconst stubDeliveries: WebhookDelivery[] = [\n { id: 'd1', endpointId: 'e1', event: 'order.created', status: 200, durationMs: 312, retries: 0, date: minutesAgo(2) },\n { id: 'd2', endpointId: 'e2', event: 'invoice.paid', status: 200, durationMs: 188, retries: 0, date: minutesAgo(9) },\n {\n id: 'd3',\n endpointId: 'e1',\n event: 'order.refunded',\n status: 500,\n durationMs: 10_240,\n retries: 2,\n date: minutesAgo(26),\n },\n { id: 'd4', endpointId: 'e1', event: 'order.created', status: 404, durationMs: 96, retries: 1, date: minutesAgo(41) },\n { id: 'd5', endpointId: 'e2', event: 'invoice.paid', status: 200, durationMs: 244, retries: 0, date: minutesAgo(58) },\n {\n id: 'd6',\n endpointId: 'e3',\n event: 'customer.updated',\n status: 410,\n durationMs: 51,\n retries: 0,\n date: minutesAgo(75),\n },\n]\n\nconst allEvents: WebhookEvent[] = ['order.created', 'order.refunded', 'customer.updated', 'invoice.paid']\n\nfunction cloneEndpoints(list: WebhookEndpoint[]): WebhookEndpoint[] {\n return list.map((e) => ({ ...e, events: [...e.events] }))\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-webhooks, [ui-webhooks]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiChipComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiRelativeTimeComponent,\n UiSectionCardComponent,\n ],\n template: `\n
\n
\n \n\n
    \n @for (endpoint of endpointList(); track endpoint.id) {\n
  • \n \n \n \n
    \n

    {{ endpoint.url }}

    \n
    \n @for (event of endpoint.events; track event) {\n {{ event }}\n }\n
    \n
    \n
    \n

    {{ endpoint.enabled ? endpoint.successRate : 'Paused' }}

    \n

    {{ endpoint.events.length }} events

    \n
    \n \n \n \n
    • \n }\n
\n
\n\n
\n
    \n @for (delivery of deliveryList(); track delivery.id) {\n
  • \n \n \n {{ delivery.status }}\n \n

    {{ delivery.event }}

    \n \n @if (delivery.retries > 0) {\n

    retry {{ delivery.retries }}

    \n }\n @if (delivery.status >= 400) {\n \n }\n
    • \n }\n @if (deliveryList().length === 0) {\n
  • \n No deliveries yet — payloads will appear here once endpoints receive events.\n
    • \n }\n
\n
\n\n \n \n
\n

Add endpoint

\n

Choose the events this URL should receive.

\n
\n \n
\n @for (event of allEvents; track event) {\n \n {{ event }}\n \n }\n
\n
\n \n \n
\n \n \n
\n `,\n})\nexport class UiWebhooksComponent {\n protected readonly Plus = Plus\n protected readonly RotateCw = RotateCw\n protected readonly Webhook = Webhook\n\n protected readonly allEvents = allEvents\n\n @Input() set endpoints(v: WebhookEndpoint[] | undefined) {\n this.endpointList.set(cloneEndpoints(v ?? stubEndpoints))\n }\n @Input() set deliveries(v: WebhookDelivery[] | undefined) {\n this.deliveryList.set(v ?? stubDeliveries)\n }\n @Input('class') className?: string\n\n readonly endpointList = signal(cloneEndpoints(stubEndpoints))\n readonly deliveryList = signal(stubDeliveries)\n\n readonly createOpen = signal(false)\n readonly newUrl = signal('')\n readonly newEvents = signal([])\n\n readonly endpointCount = computed(() => this.endpointList().length)\n\n get rootClass(): string {\n return cn('space-y-4', this.className)\n }\n\n switchClass(enabled: boolean): string {\n return cn(\n 'focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2',\n enabled ? 'bg-primary' : 'bg-muted-foreground/30',\n )\n }\n\n toggleEndpoint(endpoint: WebhookEndpoint): void {\n this.endpointList.update((list) => list.map((e) => (e.id === endpoint.id ? { ...e, enabled: !e.enabled } : e)))\n }\n\n toggleEvent(event: WebhookEvent): void {\n this.newEvents.update((events) => (events.includes(event) ? events.filter((e) => e !== event) : [...events, event]))\n }\n\n createEndpoint(): void {\n if (!this.newUrl() || this.newEvents().length === 0) return\n this.endpointList.update((list) => [\n ...list,\n { id: `e${list.length + 1}`, url: this.newUrl(), enabled: true, events: [...this.newEvents()], successRate: '—' },\n ])\n this.newUrl.set('')\n this.newEvents.set([])\n this.createOpen.set(false)\n }\n\n statusTone(status: number): 'success' | 'warning' | 'destructive' {\n if (status < 300) return 'success'\n if (status < 500) return 'warning'\n return 'destructive'\n }\n\n formatDuration(durationMs: number): string {\n return durationMs >= 1000 ? `${(durationMs / 1000).toFixed(1)} s` : `${durationMs} ms`\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/webhooks/webhooks.component.ts" }, { "path": "packages/registry-angular/blocks/webhooks/index.ts", "content": "export {\n UiWebhooksComponent,\n type WebhookEvent,\n type WebhookEndpoint,\n type WebhookDelivery,\n} from './webhooks.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/webhooks/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/chip.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/relative-time.json", "https://uipkge.dev/r/angular/section-card.json" ], "description": "Webhook manager in two SectionCards: endpoints with event chips, live success rate and a pause/resume switch, plus a delivery log pairing relative timestamps with HTTP status pills, durations, retry counts and retry actions. Includes an add-endpoint dialog. Stateful demo — swap the stub data for your source.", "categories": [ "devops", "dashboard", "communication" ] }