{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "webhooks", "title": "Webhooks", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/webhooks/Webhooks.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Plus, RotateCw, Webhook } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Chip } from '@/components/ui/chip'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { RelativeTime } from '@/components/ui/relative-time'\nimport { SectionCard } from '@/components/ui/section-card'\n\ntype WebhookEvent = 'order.created' | 'order.refunded' | 'customer.updated' | 'invoice.paid'\n\nexport interface Endpoint {\n id: string\n url: string\n enabled: boolean\n events: WebhookEvent[]\n successRate: string\n}\n\nexport interface Delivery {\n id: string\n endpointId: string\n event: WebhookEvent\n status: number\n durationMs: number\n retries: number\n date: Date\n}\n\nexport interface WebhooksProps {\n endpoints?: Endpoint[]\n deliveries?: Delivery[]\n className?: string\n}\n\nconst now = Date.now()\nconst minutesAgo = (m: number) => new Date(now - m * 60_000)\n\nconst stubEndpoints: Endpoint[] = [\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: Delivery[] = [\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 statusTone(status: number): 'success' | 'warning' | 'destructive' {\n if (status < 300) return 'success'\n if (status < 500) return 'warning'\n return 'destructive'\n}\n\nexport function Webhooks({ endpoints, deliveries, className }: WebhooksProps) {\n const [endpointList, setEndpointList] = React.useState(endpoints ?? stubEndpoints)\n const deliveryList = deliveries ?? stubDeliveries\n\n const [createOpen, setCreateOpen] = React.useState(false)\n const [newUrl, setNewUrl] = React.useState('')\n const [newEvents, setNewEvents] = React.useState([])\n\n function toggleEndpoint(endpoint: Endpoint) {\n setEndpointList((list) => list.map((e) => (e.id === endpoint.id ? { ...e, enabled: !e.enabled } : e)))\n }\n\n function toggleEvent(event: WebhookEvent) {\n setNewEvents((events) => (events.includes(event) ? events.filter((e) => e !== event) : [...events, event]))\n }\n\n function createEndpoint() {\n if (!newUrl || newEvents.length === 0) return\n setEndpointList((list) => [\n ...list,\n { id: `e${list.length + 1}`, url: newUrl, enabled: true, events: [...newEvents], successRate: '—' },\n ])\n setNewUrl('')\n setNewEvents([])\n setCreateOpen(false)\n }\n\n return (\n
\n \n \n \n \n \n \n Add endpoint\n Choose the events this URL should receive.\n \n setNewUrl(e.target.value)}\n placeholder=\"https://api.yourapp.com/hooks/…\"\n className=\"font-mono text-xs\"\n />\n
\n {allEvents.map((event) => (\n toggleEvent(event)}\n >\n {event}\n \n ))}\n
\n \n \n \n \n \n \n }\n >\n
    \n {endpointList.map((endpoint) => (\n
  • \n \n \n \n
    \n

    {endpoint.url}

    \n
    \n {endpoint.events.map((event) => (\n \n {event}\n \n ))}\n
    \n
    \n
    \n

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

    \n

    {endpoint.events.length} events

    \n
    \n toggleEndpoint(endpoint)}\n >\n \n \n
    • \n ))}\n
\n \n\n \n
    \n {deliveryList.map((delivery) => (\n
  • \n \n \n {delivery.status}\n \n

    {delivery.event}

    \n \n {delivery.retries > 0 && (\n

    retry {delivery.retries}

    \n )}\n {delivery.status >= 400 && (\n \n )}\n
    • \n ))}\n
\n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/Webhooks.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/chip.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/relative-time.json", "https://uipkge.dev/r/react/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" ] }