{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "api-documentation-page", "title": "Api Documentation Page", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/api-documentation-page/api-documentation-page.component.ts", "content": "// Stripe and Mintlify style two-pane API documentation reference page: HTTP method badge,\n// endpoint path, request header/body schema tables, response attributes, interactive\n// multi-language request snippets (cURL, Node.js, Python, Go, Ruby) and status response tabs\n// with copy actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport {\n Check,\n Copy,\n CornerDownRight,\n Globe,\n LucideAngularModule,\n Server,\n ShieldCheck,\n Terminal,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type ApiDocLanguage = 'curl' | 'node' | 'python' | 'go' | 'ruby'\nexport type ApiDocStatus = '200' | '400' | '401'\n\nexport interface ApiDocHeader {\n name: string\n type: string\n required: boolean\n sample: string\n description: string\n}\n\nexport interface ApiDocNestedParam {\n name: string\n type: string\n required: boolean\n description: string\n example?: string\n}\n\nexport interface ApiDocBodyParam {\n name: string\n type: string\n required: boolean\n description: string\n example?: string\n nested?: ApiDocNestedParam[]\n}\n\nexport interface ApiDocResponseAttr {\n name: string\n type: string\n description: string\n example: string\n}\n\nexport interface ApiDocStatusPill {\n code: ApiDocStatus\n label: string\n summary: string\n dotColor: string\n}\n\nconst headersList: ApiDocHeader[] = [\n {\n name: 'Authorization',\n type: 'string',\n required: true,\n sample: 'Bearer uipkge_live_51Msz...',\n description: 'Secret API key prefixed with uipkge_live_ or sk_test_. Pass in the HTTP Authorization header.',\n },\n {\n name: 'Content-Type',\n type: 'string',\n required: true,\n sample: 'application/json',\n description: 'Specifies the media type of the request body. Must be application/json.',\n },\n {\n name: 'Idempotency-Key',\n type: 'string (UUID)',\n required: false,\n sample: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',\n description: 'Unique client-generated key that prevents duplicate executions if a request is retried.',\n },\n]\n\nconst bodyParams: ApiDocBodyParam[] = [\n {\n name: 'customer_id',\n type: 'string',\n required: true,\n description: 'Unique customer identifier for the subscriber. Must begin with the prefix cus_.',\n example: '\"cus_N63vKZbI8O8yWp\"',\n },\n {\n name: 'plan_id',\n type: 'string',\n required: true,\n description: 'Identifier of the subscription tier to enroll the customer into.',\n example: '\"plan_pro_monthly\"',\n },\n {\n name: 'items',\n type: 'array of objects',\n required: true,\n description: 'List of subscription line items defining the base plan and any optional recurring addons.',\n nested: [\n {\n name: 'items[].price_id',\n type: 'string',\n required: true,\n description: 'Unique price object identifier corresponding to a catalog product.',\n example: '\"price_1Msz82eZvKYlo2C\"',\n },\n {\n name: 'items[].quantity',\n type: 'integer',\n required: false,\n description: 'Unit quantity of the specified price item. Defaults to 1 if omitted.',\n example: '1',\n },\n ],\n },\n {\n name: 'payment_method_id',\n type: 'string',\n required: false,\n description: 'Attached payment method ID (pm_...) to charge. If omitted, uses the customer default payment source.',\n example: '\"pm_1OdVq82eZvKYlo2C\"',\n },\n {\n name: 'billing_cycle_anchor',\n type: 'integer (timestamp)',\n required: false,\n description: 'Future Unix timestamp that marks the beginning of recurring billing cycles.',\n example: '1717200000',\n },\n {\n name: 'trial_period_days',\n type: 'integer',\n required: false,\n description: 'Number of zero-charge trial days before regular billing begins (1 to 90).',\n example: '14',\n },\n {\n name: 'coupon_code',\n type: 'string',\n required: false,\n description: 'Valid discount or promotional coupon applied to initial invoices.',\n example: '\"LAUNCH2026\"',\n },\n {\n name: 'metadata',\n type: 'object',\n required: false,\n description: 'Arbitrary key-value map for attribution and custom IDs. Supports up to 50 keys, max 500 chars/value.',\n example: '{\"referrer\": \"onboarding_flow\"}',\n },\n]\n\nconst responseAttributes: ApiDocResponseAttr[] = [\n {\n name: 'id',\n type: 'string',\n description: 'Unique identifier for the subscription entity, prefixed with sub_.',\n example: '\"sub_1Om48B2eZvKYlo2CqO8k2\"',\n },\n {\n name: 'object',\n type: 'string',\n description: 'String representing the object type. Always subscription.',\n example: '\"subscription\"',\n },\n {\n name: 'customer',\n type: 'string',\n description: 'Customer identifier associated with this subscription record.',\n example: '\"cus_N63vKZbI8O8yWp\"',\n },\n {\n name: 'status',\n type: 'string',\n description: 'Current lifecycle status: trialing, active, past_due, canceled, unpaid, or incomplete.',\n example: '\"trialing\"',\n },\n {\n name: 'current_period_start',\n type: 'integer (timestamp)',\n description: 'Unix timestamp marking the start of the current active billing cycle.',\n example: '1717200000',\n },\n {\n name: 'current_period_end',\n type: 'integer (timestamp)',\n description: 'Unix timestamp marking the end of the current cycle and scheduled renewal date.',\n example: '1719792000',\n },\n {\n name: 'trial_end',\n type: 'integer (timestamp) | null',\n description: 'Unix timestamp when the free trial period concludes and billing begins.',\n example: '1718409600',\n },\n {\n name: 'cancel_at_period_end',\n type: 'boolean',\n description: 'If true, the subscription will terminate automatically at the end of the current period.',\n example: 'false',\n },\n {\n name: 'latest_invoice',\n type: 'string',\n description: 'Identifier of the most recent invoice generated for this subscription (in_...).',\n example: '\"in_1Om48B2eZvKYlo2Cj891\"',\n },\n]\n\nconst statusPills: ApiDocStatusPill[] = [\n {\n code: '200',\n label: '200 OK',\n summary: 'Subscription created successfully. Returns full subscription entity.',\n dotColor: 'bg-success',\n },\n {\n code: '400',\n label: '400 Bad Request',\n summary: 'Missing required parameters or malformed JSON payload.',\n dotColor: 'bg-warning',\n },\n {\n code: '401',\n label: '401 Unauthorized',\n summary: 'Missing, expired, or invalid Bearer secret API key.',\n dotColor: 'bg-destructive',\n },\n]\n\nconst requestSnippets: Record = {\n curl: `curl -X POST https://api.acme.com/v1/customers/subscriptions \\\\\n -H \"Authorization: Bearer uipkge_live_51Msz...\" \\\\\n -H \"Content-Type: application/json\" \\\\\n -H \"Idempotency-Key: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\" \\\\\n -d '{\n \"customer_id\": \"cus_N63vKZbI8O8yWp\",\n \"plan_id\": \"plan_pro_monthly\",\n \"payment_method_id\": \"pm_1OdVq82eZvKYlo2C\",\n \"billing_cycle_anchor\": 1717200000,\n \"items\": [\n {\n \"price_id\": \"price_1Msz82eZvKYlo2C\",\n \"quantity\": 1\n },\n {\n \"price_id\": \"price_addon_seats_pro\",\n \"quantity\": 5\n }\n ],\n \"trial_period_days\": 14,\n \"coupon_code\": \"LAUNCH2026\",\n \"metadata\": {\n \"referrer\": \"onboarding_flow\",\n \"account_manager\": \"priya.raman\"\n }\n }'`,\n node: `import Acme from '@acme/sdk'\n\nconst acme = new Acme({\n apiKey: process.env.ACME_SECRET_KEY,\n})\n\nconst subscription = await acme.subscriptions.create({\n customerId: 'cus_N63vKZbI8O8yWp',\n planId: 'plan_pro_monthly',\n paymentMethodId: 'pm_1OdVq82eZvKYlo2C',\n billingCycleAnchor: 1717200000,\n items: [\n { priceId: 'price_1Msz82eZvKYlo2C', quantity: 1 },\n { priceId: 'price_addon_seats_pro', quantity: 5 },\n ],\n trialPeriodDays: 14,\n couponCode: 'LAUNCH2026',\n metadata: {\n referrer: 'onboarding_flow',\n accountManager: 'priya.raman',\n },\n}, {\n idempotencyKey: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',\n})\n\nconsole.log(subscription.id)`,\n python: `import os\nimport acme\n\nacme.api_key = os.environ.get(\"ACME_SECRET_KEY\")\n\nsubscription = acme.Subscription.create(\n customer_id=\"cus_N63vKZbI8O8yWp\",\n plan_id=\"plan_pro_monthly\",\n payment_method_id=\"pm_1OdVq82eZvKYlo2C\",\n billing_cycle_anchor=1717200000,\n items=[\n {\"price_id\": \"price_1Msz82eZvKYlo2C\", \"quantity\": 1},\n {\"price_id\": \"price_addon_seats_pro\", \"quantity\": 5},\n ],\n trial_period_days=14,\n coupon_code=\"LAUNCH2026\",\n metadata={\n \"referrer\": \"onboarding_flow\",\n \"account_manager\": \"priya.raman\",\n },\n idempotency_key=\"9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\",\n)\n\nprint(subscription.id)`,\n go: `package main\n\nimport (\n\t\"context\"\n\t\"fmt\"\n\t\"os\"\n\n\t\"github.com/acme/acme-go\"\n)\n\nfunc main() {\n\tclient := acme.NewClient(os.Getenv(\"ACME_SECRET_KEY\"))\n\n\tparams := &acme.SubscriptionCreateParams{\n\t\tCustomerID: acme.String(\"cus_N63vKZbI8O8yWp\"),\n\t\tPlanID: acme.String(\"plan_pro_monthly\"),\n\t\tPaymentMethodID: acme.String(\"pm_1OdVq82eZvKYlo2C\"),\n\t\tItems: []*acme.SubscriptionItemParams{\n\t\t\t{PriceID: acme.String(\"price_1Msz82eZvKYlo2C\"), Quantity: acme.Int64(1)},\n\t\t\t{PriceID: acme.String(\"price_addon_seats_pro\"), Quantity: acme.Int64(5)},\n\t\t},\n\t\tTrialPeriodDays: acme.Int64(14),\n\t\tCouponCode: acme.String(\"LAUNCH2026\"),\n\t\tMetadata: map[string]string{\n\t\t\t\"referrer\": \"onboarding_flow\",\n\t\t\t\"account_manager\": \"priya.raman\",\n\t\t},\n\t}\n\n\tsub, err := client.Subscriptions.New(context.Background(), params)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\n\tfmt.Printf(\"Created subscription: %s\\\\n\", sub.ID)\n}`,\n ruby: `require \"acme\"\n\nAcme.api_key = ENV[\"ACME_SECRET_KEY\"]\n\nsubscription = Acme::Subscription.create(\n {\n customer_id: \"cus_N63vKZbI8O8yWp\",\n plan_id: \"plan_pro_monthly\",\n payment_method_id: \"pm_1OdVq82eZvKYlo2C\",\n billing_cycle_anchor: 1717200000,\n items: [\n { price_id: \"price_1Msz82eZvKYlo2C\", quantity: 1 },\n { price_id: \"price_addon_seats_pro\", quantity: 5 }\n ],\n trial_period_days: 14,\n coupon_code: \"LAUNCH2026\",\n metadata: {\n referrer: \"onboarding_flow\",\n account_manager: \"priya.raman\"\n }\n },\n { idempotency_key: \"9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d\" }\n)\n\nputs subscription.id`,\n}\n\nconst responseSnippets: Record = {\n '200': `{\n \"id\": \"sub_1Om48B2eZvKYlo2CqO8k2\",\n \"object\": \"subscription\",\n \"customer\": \"cus_N63vKZbI8O8yWp\",\n \"status\": \"trialing\",\n \"plan\": {\n \"id\": \"plan_pro_monthly\",\n \"name\": \"Pro Tier Monthly\",\n \"amount\": 4900,\n \"currency\": \"usd\",\n \"interval\": \"month\"\n },\n \"items\": {\n \"object\": \"list\",\n \"data\": [\n {\n \"id\": \"si_98f12a3bc4d5\",\n \"price\": \"price_1Msz82eZvKYlo2C\",\n \"quantity\": 1\n },\n {\n \"id\": \"si_98f12a3bc4d6\",\n \"price\": \"price_addon_seats_pro\",\n \"quantity\": 5\n }\n ],\n \"total_count\": 2\n },\n \"current_period_start\": 1717200000,\n \"current_period_end\": 1719792000,\n \"trial_start\": 1717200000,\n \"trial_end\": 1718409600,\n \"cancel_at_period_end\": false,\n \"latest_invoice\": \"in_1Om48B2eZvKYlo2Cj891\",\n \"metadata\": {\n \"account_manager\": \"priya.raman\",\n \"referrer\": \"onboarding_flow\"\n },\n \"created_at\": 1717200000\n}`,\n '400': `{\n \"error\": {\n \"type\": \"invalid_request_error\",\n \"code\": \"parameter_missing\",\n \"param\": \"customer_id\",\n \"message\": \"Missing required param: customer_id. Please provide a valid customer identifier.\",\n \"doc_url\": \"https://api.acme.com/docs/errors#parameter_missing\"\n }\n}`,\n '401': `{\n \"error\": {\n \"type\": \"authentication_error\",\n \"code\": \"invalid_api_key\",\n \"message\": \"Invalid API Key provided: uipkge_live_51Msz... Check your secret key in dashboard.\",\n \"doc_url\": \"https://api.acme.com/docs/errors#authentication\"\n }\n}`,\n}\n\nconst ENDPOINT_URL = 'https://api.acme.com/v1/customers/subscriptions'\nconst ENDPOINT_PATH = '/v1/customers/subscriptions'\n\ninterface LanguageOption {\n value: ApiDocLanguage\n label: string\n}\n\nconst languageOptions: LanguageOption[] = [\n { value: 'curl', label: 'cURL' },\n { value: 'node', label: 'Node.js' },\n { value: 'python', label: 'Python' },\n { value: 'go', label: 'Go' },\n { value: 'ruby', label: 'Ruby' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-api-documentation-page, [ui-api-documentation-page]',\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 UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n \n
\n
\n \n
\n
\n Acme Billing API\n /\n Subscriptions\n v2026-03-01\n
\n
\n\n
\n
\n \n Base:\n https://api.acme.com/v1\n
\n \n
\n \n\n \n
\n \n
\n \n
\n
\n \n POST\n \n \n {{ endpointPath }}\n \n
\n\n
\n

Create a subscription

\n

\n Creates a new recurring subscription contract for an existing customer account. If a default payment\n method is attached, initial recurring invoices are calculated and charged upon trial conclusion or cycle\n anchor date.\n

\n
\n\n \n
\n \n \n Idempotent:\n Yes (via Idempotency-Key)\n
\n\n \n \n Auth:\n Bearer Secret Key\n
\n\n \n \n Rate Limit:\n 100 req/min\n
\n
\n \n\n
\n\n \n
\n
\n

Request Headers

\n HTTP/1.1 & HTTP/2\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (header of headersList; track header.name) {\n \n \n \n \n \n \n }\n \n
HeaderTypeRequirementDescription
{{ header.name }}\n \n {{ header.type }}\n \n \n @if (header.required) {\n \n REQUIRED\n \n } @else {\n optional\n }\n \n

{{ header.description }}

\n \n Sample: {{ header.sample }}\n \n
\n
\n
\n
\n\n \n
\n
\n
\n

Request Body Parameters

\n

Provide arguments in a standard JSON payload format.

\n
\n application/json\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (param of bodyParams; track param.name) {\n \n \n \n \n \n \n @if (param.nested) {\n @for (child of param.nested; track child.name) {\n \n \n \n \n \n \n }\n }\n }\n \n
ParameterTypeRequirementDescription & Constraints
{{ param.name }}\n \n {{ param.type }}\n \n \n @if (param.required) {\n \n REQUIRED\n \n } @else {\n optional\n }\n \n

{{ param.description }}

\n @if (param.example) {\n
\n Example: \n {{ param.example }}\n
\n }\n
\n
\n \n {{ child.name }}\n
\n 		\n \n {{ child.type }}\n \n \n @if (child.required) {\n \n REQUIRED\n \n } @else {\n optional\n }\n \n

{{ child.description }}

\n @if (child.example) {\n
\n Example: \n {{ child.example }}\n
\n }\n
\n
\n
\n
\n\n \n
\n
\n

Response Object Attributes

\n

\n Properties returned in the 200 OK HTTP JSON payload representation.\n

\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (attr of responseAttributes; track attr.name) {\n \n \n \n \n \n \n }\n \n
AttributeTypeDescriptionSample Value
{{ attr.name }}\n \n {{ attr.type }}\n \n {{ attr.description }}{{ attr.example }}
\n
\n
\n
\n \n\n \n \n \n \n `,\n})\nexport class UiApiDocumentationPageComponent {\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly CornerDownRight = CornerDownRight\n protected readonly Globe = Globe\n protected readonly Server = Server\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n protected readonly headersList = headersList\n protected readonly bodyParams = bodyParams\n protected readonly responseAttributes = responseAttributes\n protected readonly statusPills = statusPills\n protected readonly languageOptions = languageOptions\n protected readonly endpointPath = ENDPOINT_PATH\n\n @Input() set initialLanguage(v: ApiDocLanguage) {\n if (v) this.selectedLang.set(v)\n }\n @Input() set initialStatus(v: ApiDocStatus) {\n if (v) this.selectedStatus.set(v)\n }\n @Input('class') className?: string\n\n readonly selectedLang = signal('curl')\n readonly selectedStatus = signal('200')\n readonly copiedEndpoint = signal(false)\n readonly copiedRequest = signal(false)\n readonly copiedResponse = signal(false)\n\n private readonly timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n for (const t of this.timers) clearTimeout(t)\n })\n }\n\n get rootClass(): string {\n return cn(\n 'bg-background text-foreground border-border w-full overflow-hidden rounded-xl border shadow-xs',\n this.className,\n )\n }\n\n requestSnippet(): string {\n return requestSnippets[this.selectedLang()]\n }\n\n responseSnippet(): string {\n return responseSnippets[this.selectedStatus()]\n }\n\n activeStatusSummary(): string {\n return statusPills.find((p) => p.code === this.selectedStatus())?.summary ?? ''\n }\n\n langTabClass(lang: ApiDocLanguage): string {\n return cn(\n 'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n this.selectedLang() === lang\n ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n )\n }\n\n statusTabClass(code: ApiDocStatus): string {\n return cn(\n 'flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n this.selectedStatus() === code\n ? 'bg-neutral-800 font-semibold text-neutral-100 shadow-xs'\n : 'text-neutral-400 hover:bg-neutral-800/50 hover:text-neutral-200',\n )\n }\n\n protected cn(...args: Parameters): string {\n return cn(...args)\n }\n\n setLanguage(lang: ApiDocLanguage): void {\n this.selectedLang.set(lang)\n }\n\n setStatus(code: ApiDocStatus): void {\n this.selectedStatus.set(code)\n }\n\n private flash(target: 'endpoint' | 'request' | 'response'): void {\n if (target === 'endpoint') this.copiedEndpoint.set(true)\n if (target === 'request') this.copiedRequest.set(true)\n if (target === 'response') this.copiedResponse.set(true)\n this.timers.push(\n setTimeout(() => {\n if (target === 'endpoint') this.copiedEndpoint.set(false)\n if (target === 'request') this.copiedRequest.set(false)\n if (target === 'response') this.copiedResponse.set(false)\n }, 2000),\n )\n }\n\n async copyEndpoint(): Promise {\n try {\n await navigator.clipboard.writeText(ENDPOINT_URL)\n this.flash('endpoint')\n } catch {\n // Clipboard unavailable — skip the feedback swap.\n }\n }\n\n async copyRequestSnippet(): Promise {\n try {\n await navigator.clipboard.writeText(requestSnippets[this.selectedLang()])\n this.flash('request')\n } catch {\n // Clipboard unavailable — skip the feedback swap.\n }\n }\n\n async copyResponseSnippet(): Promise {\n try {\n await navigator.clipboard.writeText(responseSnippets[this.selectedStatus()])\n this.flash('response')\n } catch {\n // Clipboard unavailable — skip the feedback swap.\n }\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/api-documentation-page/api-documentation-page.component.ts" }, { "path": "packages/registry-angular/blocks/api-documentation-page/index.ts", "content": "export {\n UiApiDocumentationPageComponent,\n type ApiDocBodyParam,\n type ApiDocHeader,\n type ApiDocLanguage,\n type ApiDocNestedParam,\n type ApiDocResponseAttr,\n type ApiDocStatus,\n type ApiDocStatusPill,\n} from './api-documentation-page.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/api-documentation-page/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", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Stripe and Mintlify style two-pane API documentation reference page with HTTP method badge, endpoint path, headers, request parameter tables with nested schema hints, response attributes, interactive multi-language code snippets (cURL, Node.js, Python, Go, Ruby), and status response tabs with copy actions.", "categories": [ "devops", "app" ] }