{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "api-1", "title": "API 1: request explorer", "author": "Ballmac ", "description": "An API explorer: a method, an address, headers and a JSON body, then the answer with its status in words, time and size and the body as a tree; a broken body is caught before sending, with history and Copy as cURL.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/json-viewer.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json", "https://ui.ballmac.com/r/textarea.json" ], "files": [ { "path": "registry/ballmac/components/blocks/api-1/api-1.tsx", "content": "// Ballmac UI: API 1. https://ui.ballmac.com/blocks/api-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { CircleAlert, History, Loader2, Plus, Send, Terminal, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { CopyButton } from \"@/components/ballmac/copy-button\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { JsonViewer } from \"@/components/ballmac/json-viewer\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { Textarea } from \"@/components/ballmac/textarea\"\nimport { cn } from \"@/lib/utils\"\n\ntype Api1Method = \"GET\" | \"POST\" | \"PUT\" | \"PATCH\" | \"DELETE\"\ntype Api1Pair = { id: string; key: string; value: string }\ntype Api1Request = { method: Api1Method; url: string; headers: Api1Pair[]; body: string }\ntype Api1Response = { status: number; statusText: string; ms: number; headers: Record; body: unknown }\n\ntype Api1Props = Omit, \"title\"> &\n StateProps & {\n title?: string\n /** Starting request. */\n defaultRequest?: Partial\n /** Called to send the request. Return the response; reject for a network failure. Without it a built-in demo API answers. */\n onSend?: (request: Api1Request) => Promise\n /** Show a response at first, for showing that screen. */\n defaultResponse?: Api1Response\n}\n\nconst methods: Api1Method[] = [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"]\nconst methodDot: Record = { GET: \"bg-chart-2\", POST: \"bg-chart-1\", PUT: \"bg-amber-500\", PATCH: \"bg-amber-500\", DELETE: \"bg-destructive\" }\n\nconst users = [\n { id: \"usr_1\", name: \"Mara Ellison\", email: \"mara@acme.com\", role: \"owner\" },\n { id: \"usr_2\", name: \"Theo Nakamura\", email: \"theo@acme.com\", role: \"admin\" },\n { id: \"usr_3\", name: \"Priya Shah\", email: \"priya@acme.com\", role: \"member\" },\n]\n\n// A tiny pretend API so the block works with no server. It checks the same things a real one would.\nasync function demoApi(r: Api1Request): Promise {\n const path = r.url.replace(/^https?:\\/\\/[^/]+/, \"\").split(\"?\")[0]!\n const authed = r.headers.some((h) => h.key.toLowerCase() === \"authorization\" && h.value.trim().length > 7)\n const base = { headers: { \"content-type\": \"application/json\", \"x-request-id\": \"req_8f3a1c\" } }\n const ms = 90 + ((path.length * 37) % 140)\n await new Promise((res) => setTimeout(res, 350))\n if (!authed) return { ...base, status: 401, statusText: \"Unauthorized\", ms, body: { error: { code: \"missing_credentials\", message: \"Add an Authorization header with a Bearer token.\" } } }\n if (path === \"/v1/users\" && r.method === \"GET\") return { ...base, status: 200, statusText: \"OK\", ms, body: { data: users, has_more: false } }\n const one = path.match(/^\\/v1\\/users\\/(\\w+)$/)\n if (one && r.method === \"GET\") {\n const u = users.find((x) => x.id === one[1])\n return u ? { ...base, status: 200, statusText: \"OK\", ms, body: u } : { ...base, status: 404, statusText: \"Not Found\", ms, body: { error: { code: \"not_found\", message: `No user with id ${one[1]}.` } } }\n }\n if (path === \"/v1/users\" && r.method === \"POST\") {\n let b: unknown\n try {\n b = JSON.parse(r.body || \"{}\")\n } catch {\n return { ...base, status: 400, statusText: \"Bad Request\", ms, body: { error: { code: \"invalid_json\", message: \"The body is not valid JSON.\" } } }\n }\n const o = b as { name?: string; email?: string }\n if (!o.email) return { ...base, status: 422, statusText: \"Unprocessable Entity\", ms, body: { error: { code: \"invalid_request\", message: \"email is required.\", param: \"email\" } } }\n return { ...base, status: 201, statusText: \"Created\", ms, body: { id: \"usr_4\", name: o.name ?? \"\", email: o.email, role: \"member\" } }\n }\n return { ...base, status: 404, statusText: \"Not Found\", ms, body: { error: { code: \"not_found\", message: `No route for ${r.method} ${path}.` } } }\n}\n\nconst pair = (id: string, key = \"\", value = \"\"): Api1Pair => ({ id, key, value })\n\nfunction Skel() {\n return (\n
\n \n \n
\n )\n}\n\nconst statusTone = (s: number) => (s >= 500 ? \"bg-destructive/10 border-destructive/40\" : s >= 400 ? \"bg-amber-500/15 border-amber-500/40\" : \"bg-chart-2/10 border-chart-2/30\")\n\n/**\n * An API explorer: choose a method, type an address, add headers and a JSON body, send, and read the answer: its status in words, how long it\n * took, how big it was, and the body as a collapsible tree. A broken body is caught before sending, every request is kept in a history you can go\n * back to, and \"Copy as cURL\" writes the matching command. A built-in demo API answers when no handler is passed.\n */\nfunction Api1({ title = \"API explorer\", defaultRequest, onSend, defaultResponse, state = \"ready\", onRetry, errorState, className, ...props }: Api1Props) {\n const id = React.useId()\n const [req, setReq] = React.useState({ method: \"GET\", url: \"https://api.acme.com/v1/users\", headers: [pair(\"h1\", \"Authorization\", \"Bearer sk_test_4eC39HqLyjWDarjtT1zdp7dc\"), pair(\"h2\", \"Accept\", \"application/json\")], body: '{\\n \"name\": \"Sam Okafor\",\\n \"email\": \"sam@acme.com\"\\n}', ...defaultRequest })\n // Ids for added rows count up from a ref, so they are the same on the server and in the browser.\n const nextId = React.useRef(3)\n const [tab, setTab] = React.useState<\"headers\" | \"body\">(\"headers\")\n const [resTab, setResTab] = React.useState<\"body\" | \"headers\">(\"body\")\n const [res, setRes] = React.useState(defaultResponse ?? null)\n const [sending, setSending] = React.useState(false)\n const [failure, setFailure] = React.useState()\n const [history, setHistory] = React.useState<{ req: Api1Request; status: number | null }[]>([])\n const hasBody = req.method !== \"GET\" && req.method !== \"DELETE\"\n\n const bodyError = React.useMemo(() => {\n if (!hasBody || !req.body.trim()) return null\n try {\n JSON.parse(req.body)\n return null\n } catch (e) {\n return e instanceof Error ? e.message.replace(/^JSON\\.parse: /, \"\") : \"Not valid JSON\"\n }\n }, [hasBody, req.body])\n const urlError = /^https?:\\/\\/\\S+$/.test(req.url.trim()) ? null : \"Enter a full address that starts with https://\"\n\n const curl = React.useMemo(() => {\n const parts = [`curl -X ${req.method} '${req.url}'`, ...req.headers.filter((h) => h.key.trim()).map((h) => ` -H '${h.key}: ${h.value}'`)]\n if (hasBody && req.body.trim()) parts.push(` -d '${req.body.replace(/\\s*\\n\\s*/g, \" \").replace(/'/g, \"'\\\\''\")}'`)\n return parts.join(\" \\\\\\n\")\n }, [req, hasBody])\n\n async function send() {\n if (urlError || bodyError || sending) return\n setSending(true)\n setFailure(undefined)\n try {\n const r = await (onSend ?? demoApi)(req)\n setRes(r)\n setHistory((h) => [{ req, status: r.status }, ...h].slice(0, 6))\n } catch (e) {\n setRes(null)\n setFailure(e instanceof Error ? e.message : \"The request could not be sent.\")\n setHistory((h) => [{ req, status: null }, ...h].slice(0, 6))\n } finally {\n setSending(false)\n }\n }\n const setPair = (pid: string, p: Partial) => setReq((r) => ({ ...r, headers: r.headers.map((h) => (h.id === pid ? { ...h, ...p } : h)) }))\n const size = res ? new Blob([JSON.stringify(res.body)]).size : 0\n\n const content = (\n
\n
{ e.preventDefault(); void send() }} noValidate>\n
\n \n setReq({ ...req, url: e.target.value })} className=\"flex-1 font-mono text-sm\" spellCheck={false} />\n \n
\n {urlError ?

{urlError}

: null}\n
\n\n
\n
\n
\n {([[\"headers\", `Headers ยท ${req.headers.filter((h) => h.key.trim()).length}`], [\"body\", \"Body\"]] as const).map(([k, l]) => (\n \n ))}\n
\n
\n {tab === \"headers\" ? (\n
\n {req.headers.map((h, i) => (\n
\n setPair(h.id, { key: e.target.value })} placeholder=\"Name\" className=\"w-2/5 font-mono text-xs\" spellCheck={false} />\n setPair(h.id, { value: e.target.value })} placeholder=\"Value\" className=\"flex-1 font-mono text-xs\" spellCheck={false} />\n \n
\n ))}\n \n
\n ) : hasBody ? (\n
\n