Webhooks

Endpoints that get your events, with a test button and a signing secret shown once.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Toaster, Webhooks } from '@weft-js/warp'import type { Webhook } from '@weft-js/warp'export function Endpoints() {  const hooks = state<readonly Webhook[]>(WEBHOOKS)  const add = async (url: string, events: string[]) => {    await wait(500)    hooks.value = [...hooks.value, { id: url, url, events, healthy: true }]    return 'whsec_sample_not_a_real_secret'  }  const test = async () => {    await wait(400)    return { status: 200, ms: 82 }  }  return (    <>      <Webhooks hooks={hooks} events={WEBHOOK_EVENTS} onAdd={add} onTest={test} />      <Toaster />    </>  )}const WEBHOOKS: Webhook[] = [  { id: 'h1', url: 'https://hooks.weft.dev/deploys', events: ['deploy.succeeded', 'deploy.failed'], lastDelivery: '200 · 18 min ago', healthy: true },  { id: 'h2', url: 'https://ops.weft.dev/alerts', events: ['deploy.failed'], lastDelivery: '503 · 1 h ago', healthy: false },]const WEBHOOK_EVENTS = ['deploy.succeeded', 'deploy.failed', 'deploy.rolled_back', 'member.added']const min = 60_000const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { Webhooks } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`hooks`	`readonly Webhook[] \| State<readonly Webhook[]>`	—	The endpoints.
`events`	`string[]`	—	The events people can pick.

Event	Type	Default	Description
`onAdd`	`(url: string, events: string[]) => Promise<string>`	—	Adds the endpoint and returns its signing secret.
`onTest`	`(hook: Webhook) => Promise<{ status: number; ms: number; }>`	—	Sends a sample event and returns the status and time.

RelatedApi keys Integrations grid