{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-interactive-api-curl-builder", "title": "Feature Interactive Api Curl Builder", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-interactive-api-curl-builder/feature-interactive-api-curl-builder.component.ts", "content": "// Interactive edge API console: endpoint + payload flag config on the left, live multi-language\n// snippet generation (cURL / Fetch / Python / Go) with copy on the right, and a simulated HTTP\n// response payload. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, Check, Copy, Globe, LucideAngularModule, Play, Terminal } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport type CurlHttpMethod = 'GET' | 'POST'\nexport type CurlLanguage = 'curl' | 'javascript' | 'python' | 'go'\n\nexport interface CurlExecutionData {\n bundleId: string\n name: string\n frameworks: string[]\n astCompiled: boolean\n sizeBytes: number\n oklchTokensInlined: number\n edgeDeliveryTime: string\n}\n\nexport interface CurlExecutionResult {\n status: number\n latencyMs: number\n data: CurlExecutionData\n}\n\nexport const CURL_ENDPOINTS = ['/v1/components/bundle', '/v1/tokens/compile'] as const\n\nexport const CURL_LANGUAGES: { id: CurlLanguage; label: string }[] = [\n { id: 'curl', label: 'cURL' },\n { id: 'javascript', label: 'Fetch' },\n { id: 'python', label: 'Python' },\n { id: 'go', label: 'Go' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-interactive-api-curl-builder, [ui-feature-interactive-api-curl-builder]',\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: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Interactive Edge API Console\n \n \n\n

{{ title }}

\n\n

{{ description }}

\n
\n\n \n
\n \n
\n
\n
\n
\n Request Parameters\n \n Edge v1\n \n
\n\n \n
\n \n
\n @for (ep of endpoints; track ep) {\n \n {{ ep }}\n \n }\n
\n
\n\n \n
\n \n
\n \n Emit AST Syntax Tree\n \n \n \n Inline OKLCH CSS Tokens\n \n \n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n \n
\n
\n @for (lang of languages; track lang.id) {\n \n {{ lang.label }}\n \n }\n
\n\n \n @if (copiedSnippet()) {\n \n } @else {\n \n }\n {{ copiedSnippet() ? 'Copied' : 'Copy' }}\n \n
\n\n
\n {{ generatedCode() }}\n
\n
\n\n \n
\n
\n
\n \n Response Payload\n
\n
\n HTTP {{ executionResult().status }} OK\n {{ executionResult().latencyMs }}ms\n
\n
\n {{ responseJson() }}\n
\n
\n
\n
\n
\n `,\n})\nexport class UiFeatureInteractiveApiCurlBuilderComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Globe = Globe\n protected readonly Play = Play\n protected readonly Terminal = Terminal\n\n protected readonly endpoints: readonly string[] = CURL_ENDPOINTS\n protected readonly languages = CURL_LANGUAGES\n\n @Input() title = 'Composable REST APIs designed for programmatic automation.'\n @Input() description =\n 'Synthesize type-safe HTTP payloads, test endpoints in real time, and export snippets directly to your production workflow.'\n @Input('class') className?: string\n\n readonly selectedMethod = signal('POST')\n readonly selectedEndpoint = signal('/v1/components/bundle')\n readonly selectedLanguage = signal('curl')\n readonly enableAstTree = signal(true)\n readonly enableOklchTokens = signal(true)\n readonly copiedSnippet = signal(false)\n readonly isExecuting = signal(false)\n readonly executionResult = signal({\n status: 200,\n latencyMs: 14,\n data: {\n bundleId: 'pkg_9981x2',\n name: 'button',\n frameworks: ['vue', 'react'],\n astCompiled: true,\n sizeBytes: 1480,\n oklchTokensInlined: 48,\n edgeDeliveryTime: '0.8ms',\n },\n })\n private copyTimer: ReturnType | undefined\n\n readonly generatedCode = computed(() => {\n const method = this.selectedMethod()\n const endpoint = this.selectedEndpoint()\n const language = this.selectedLanguage()\n const payload = JSON.stringify(\n {\n component: 'button',\n framework: 'vue',\n astTree: this.enableAstTree(),\n inlineTokens: this.enableOklchTokens(),\n },\n null,\n 2,\n )\n\n if (language === 'curl') {\n return `curl -X ${method} https://api.uipkge.dev${endpoint} \\\\\n -H \"Authorization: Bearer uipkge_sec_89201\" \\\\\n -H \"Content-Type: application/json\" \\\\\n -d '${payload.replace(/\\n/g, '\\n ')}'`\n }\n\n if (language === 'javascript') {\n return `const res = await fetch(\"https://api.uipkge.dev${endpoint}\", {\n method: \"${method}\",\n headers: {\n \"Authorization\": \"Bearer uipkge_sec_89201\",\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(${payload})\n});\nconst data = await res.json();`\n }\n\n if (language === 'python') {\n return `import requests\n\nres = requests.${method.toLowerCase()}(\n \"https://api.uipkge.dev${endpoint}\",\n headers={\"Authorization\": \"Bearer uipkge_sec_89201\"},\n json=${payload.replace(/true/g, 'True').replace(/false/g, 'False')}\n)\ndata = res.json()`\n }\n\n return `// Go HTTP Request\nreq, _ := http.NewRequest(\"${method}\", \"https://api.uipkge.dev${endpoint}\", payload)\nreq.Header.Set(\"Authorization\", \"Bearer uipkge_sec_89201\")\nres, _ := client.Do(req)`\n })\n\n readonly responseJson = computed(() => JSON.stringify(this.executionResult().data, null, 2))\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n endpointClass(ep: string): string {\n return cn(\n this.selectedEndpoint() === ep\n ? 'bg-background text-foreground font-bold shadow-2xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n languageClass(lang: CurlLanguage): string {\n return cn(\n this.selectedLanguage() === lang\n ? 'bg-background text-foreground font-bold shadow-2xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n selectEndpoint(ep: string): void {\n this.selectedEndpoint.set(ep)\n }\n\n selectLanguage(lang: CurlLanguage): void {\n this.selectedLanguage.set(lang)\n }\n\n async copySnippet(): Promise {\n try {\n await navigator.clipboard.writeText(this.generatedCode())\n this.copiedSnippet.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedSnippet.set(false), 2000)\n } catch {\n // Clipboard unavailable (insecure context / jsdom): leave the label unchanged.\n }\n }\n\n executeRequest(): void {\n if (this.isExecuting()) return\n this.isExecuting.set(true)\n setTimeout(() => {\n this.isExecuting.set(false)\n const endpoint = this.selectedEndpoint()\n const ast = this.enableAstTree()\n const tokens = this.enableOklchTokens()\n this.executionResult.set({\n status: 200,\n latencyMs: Math.floor(Math.random() * 8) + 11,\n data: {\n bundleId: `pkg_${Math.random().toString(36).substring(2, 8)}`,\n name: endpoint.includes('bundle') ? 'button' : 'tokens',\n frameworks: ['vue', 'react'],\n astCompiled: ast,\n sizeBytes: ast ? 1480 : 1120,\n oklchTokensInlined: tokens ? 48 : 0,\n edgeDeliveryTime: '0.8ms',\n },\n })\n }, 350)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-interactive-api-curl-builder/feature-interactive-api-curl-builder.component.ts" }, { "path": "packages/registry-angular/blocks/feature-interactive-api-curl-builder/index.ts", "content": "export {\n UiFeatureInteractiveApiCurlBuilderComponent,\n CURL_ENDPOINTS,\n CURL_LANGUAGES,\n type CurlHttpMethod,\n type CurlLanguage,\n type CurlExecutionData,\n type CurlExecutionResult,\n} from './feature-interactive-api-curl-builder.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-interactive-api-curl-builder/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/card.json" ], "description": "Interactive API cURL builder and live payload testing sandbox with multi-language code export.", "categories": [ "feature", "marketing" ] }