@raystack/chronicle 0.1.0-canary.5a2be79

package/src/components/api/endpoint-page.tsx

@@ -0,0 +1,283 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import type { OpenAPIV3 } from 'openapi-types'
+import { Flex, Text, Headline, Button, CodeBlock } from '@raystack/apsara'
+import { MethodBadge } from './method-badge'
+import { FieldSection } from './field-section'
+import { KeyValueEditor, type KeyValueEntry } from './key-value-editor'
+import { CodeSnippets } from './code-snippets'
+import { ResponsePanel } from './response-panel'
+import { flattenSchema, generateExampleJson, type SchemaField } from '@/lib/schema'
+import styles from './endpoint-page.module.css'
+
+interface EndpointPageProps {
+  method: string
+  path: string
+  operation: OpenAPIV3.OperationObject
+  serverUrl: string
+  specName: string
+  auth?: { type: string; header: string; placeholder?: string }
+}
+
+export function EndpointPage({ method, path, operation, serverUrl, specName, auth }: EndpointPageProps) {
+  const params = (operation.parameters ?? []) as OpenAPIV3.ParameterObject[]
+  const body = getRequestBody(operation.requestBody as OpenAPIV3.RequestBodyObject | undefined)
+
+  const headerFields = paramsToFields(params.filter((p) => p.in === 'header'))
+  const headerLocations = Object.fromEntries(headerFields.map((f) => [f.name, 'header']))
+  const pathFields = paramsToFields(params.filter((p) => p.in === 'path'))
+  const pathLocations = Object.fromEntries(pathFields.map((f) => [f.name, 'path']))
+  const queryFields = paramsToFields(params.filter((p) => p.in === 'query'))
+  const queryLocations = Object.fromEntries(queryFields.map((f) => [f.name, 'query']))
+  const responses = getResponseSections(operation.responses as Record<string, OpenAPIV3.ResponseObject>)
+
+  // State for editable fields
+  const [customHeaders, setCustomHeaders] = useState<KeyValueEntry[]>(() => {
+    const initial: KeyValueEntry[] = []
+    if (auth) initial.push({ key: auth.header, value: '' })
+    return initial
+  })
+  const [headerValues, setHeaderValues] = useState<Record<string, unknown>>({})
+  const [pathValues, setPathValues] = useState<Record<string, unknown>>({})
+  const [queryValues, setQueryValues] = useState<Record<string, unknown>>({})
+  const [bodyValues, setBodyValues] = useState<Record<string, unknown>>(() => {
+    try { return body?.jsonExample ? JSON.parse(body.jsonExample) : {} }
+    catch { return {} }
+  })
+  const [bodyJsonStr, setBodyJsonStr] = useState(body?.jsonExample ?? '{}')
+  const [responseBody, setResponseBody] = useState<{ status: number; statusText: string; body: unknown } | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  // Two-way sync: fields → JSON
+  const handleBodyValuesChange = useCallback((values: Record<string, unknown>) => {
+    setBodyValues(values)
+    setBodyJsonStr(JSON.stringify(values, null, 2))
+  }, [])
+
+  // Two-way sync: JSON → fields
+  const handleBodyJsonChange = useCallback((jsonStr: string) => {
+    setBodyJsonStr(jsonStr)
+    try {
+      setBodyValues(JSON.parse(jsonStr))
+    } catch { /* ignore invalid JSON while typing */ }
+  }, [])
+
+  // Try it handler
+  const handleTryIt = useCallback(async () => {
+    setLoading(true)
+    setResponseBody(null)
+
+    let resolvedPath = path
+    for (const [key, value] of Object.entries(pathValues)) {
+      resolvedPath = resolvedPath.replace(`{${key}}`, encodeURIComponent(String(value)))
+    }
+
+    const queryEntries = Object.entries(queryValues).filter(([, v]) => v !== undefined && v !== '')
+    const queryString = queryEntries
+      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`)
+      .join('&')
+    const fullPath = queryString ? `${resolvedPath}?${queryString}` : resolvedPath
+
+    const reqHeaders: Record<string, string> = {}
+    for (const [key, value] of Object.entries(headerValues)) {
+      if (value !== undefined && value !== null && value !== '') reqHeaders[key] = String(value)
+    }
+    for (const entry of customHeaders) {
+      if (entry.key && entry.value) reqHeaders[entry.key] = entry.value
+    }
+    if (body && bodyJsonStr) {
+      reqHeaders['Content-Type'] = body.contentType ?? 'application/json'
+    }
+
+    try {
+      const res = await fetch('/api/apis-proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          specName,
+          method,
+          path: fullPath,
+          headers: reqHeaders,
+          body: body ? bodyValues : undefined,
+        }),
+      })
+      const data = await res.json()
+      if (data.status !== undefined) {
+        setResponseBody(data)
+      } else {
+        setResponseBody({ status: res.status, statusText: res.statusText, body: data.error ?? data })
+      }
+    } catch (err) {
+      console.error('API request failed:', err)
+      setResponseBody({ status: 0, statusText: 'Error', body: 'Failed to send request' })
+    } finally {
+      setLoading(false)
+    }
+  }, [specName, method, path, pathValues, queryValues, headerValues, customHeaders, bodyValues, bodyJsonStr, body])
+
+  // Snippet display values
+  const fullUrl = '{domain}' + path
+  const snippetHeaders: Record<string, string> = {}
+  if (auth) {
+    snippetHeaders[auth.header] = auth.placeholder ?? 'YOUR_API_KEY'
+  }
+  if (body) {
+    snippetHeaders['Content-Type'] = body.contentType ?? 'application/json'
+  }
+
+  return (
+    <div className={styles.layout}>
+      <Flex direction="column" className={styles.left}>
+        {operation.summary && (
+          <Headline size="small" as="h1" className={styles.title}>{operation.summary}</Headline>
+        )}
+        {operation.description && (
+          <Text size={3} className={styles.description}>{operation.description}</Text>
+        )}
+
+        <Flex align="center" className={styles.methodPath}>
+          <MethodBadge method={method} />
+          <Text size={3} className={styles.path}>{path}</Text>
+          <Button variant="solid" size="small" className={styles.tryButton} onClick={handleTryIt} disabled={loading}>
+            {loading ? 'Sending...' : 'Send'}
+          </Button>
+        </Flex>
+
+        <FieldSection
+          title="Headers"
+          fields={headerFields}
+          locations={headerLocations}
+          editable
+          values={headerValues}
+          onValuesChange={setHeaderValues}
+        >
+          <KeyValueEditor entries={customHeaders} onChange={setCustomHeaders} />
+        </FieldSection>
+        <FieldSection
+          title="Path"
+          fields={pathFields}
+          locations={pathLocations}
+          editable
+          values={pathValues}
+          onValuesChange={setPathValues}
+        />
+        <FieldSection
+          title="Query Parameters"
+          fields={queryFields}
+          locations={queryLocations}
+          editable
+          values={queryValues}
+          onValuesChange={setQueryValues}
+        />
+        {body && (
+          <FieldSection
+            title="Body"
+            label={body?.contentType}
+            fields={body?.fields ?? []}
+            jsonExample={bodyJsonStr}
+            editableJson
+            onJsonChange={handleBodyJsonChange}
+            alwaysShow
+            editable
+            values={bodyValues}
+            onValuesChange={handleBodyValuesChange}
+          />
+        )}
+
+        {responses.map((resp) => (
+          <FieldSection
+            key={resp.status}
+            title={`${resp.status}${resp.description ? ` — ${resp.description}` : ''}`}
+            fields={resp.fields}
+            jsonExample={resp.jsonExample}
+          />
+        ))}
+      </Flex>
+      <Flex direction="column" className={styles.right}>
+        <CodeSnippets
+          method={method}
+          url={fullUrl}
+          headers={snippetHeaders}
+          body={body ? bodyJsonStr : undefined}
+        />
+        <ResponsePanel responses={responses} />
+        {responseBody && (
+          <Flex direction="column" gap="small">
+            <Text size={3} weight="medium">
+              Response — {responseBody.status} {responseBody.statusText}
+            </Text>
+            <CodeBlock>
+              <CodeBlock.Header>
+                <CodeBlock.CopyButton />
+              </CodeBlock.Header>
+              <CodeBlock.Content>
+                <CodeBlock.Code language="json">
+                  {typeof responseBody.body === 'string'
+                    ? (responseBody.body || 'No response body')
+                    : (JSON.stringify(responseBody.body, null, 2) ?? 'No response body')}
+                </CodeBlock.Code>
+              </CodeBlock.Content>
+            </CodeBlock>
+          </Flex>
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+function paramsToFields(params: OpenAPIV3.ParameterObject[]): SchemaField[] {
+  return params.map((p) => {
+    const schema = (p.schema ?? {}) as OpenAPIV3.SchemaObject
+    return {
+      name: p.name,
+      type: schema.type ? String(schema.type) : 'string',
+      required: p.required ?? false,
+      description: p.description,
+      default: schema.default,
+    }
+  })
+}
+
+interface RequestBody {
+  contentType: string
+  fields: SchemaField[]
+  jsonExample: string
+}
+
+function getRequestBody(body: OpenAPIV3.RequestBodyObject | undefined): RequestBody | null {
+  if (!body?.content) return null
+  const contentType = Object.keys(body.content)[0]
+  if (!contentType) return null
+  const schema = body.content[contentType]?.schema as OpenAPIV3.SchemaObject | undefined
+  if (!schema) return null
+  return {
+    contentType,
+    fields: flattenSchema(schema),
+    jsonExample: JSON.stringify(generateExampleJson(schema), null, 2),
+  }
+}
+
+interface ResponseSection {
+  status: string
+  description?: string
+  fields: SchemaField[]
+  jsonExample?: string
+}
+
+function getResponseSections(responses: Record<string, OpenAPIV3.ResponseObject>): ResponseSection[] {
+  return Object.entries(responses).map(([status, resp]) => {
+    const content = resp.content ?? {}
+    const contentType = Object.keys(content)[0]
+    const schema = contentType
+      ? (content[contentType]?.schema as OpenAPIV3.SchemaObject | undefined)
+      : undefined
+
+    return {
+      status,
+      description: resp.description,
+      fields: schema ? flattenSchema(schema) : [],
+      jsonExample: schema ? JSON.stringify(generateExampleJson(schema), null, 2) : undefined,
+    }
+  })
+}

package/src/components/api/field-row.module.css

@@ -0,0 +1,126 @@
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-2);
+  padding: var(--rs-space-4) 0;
+}
+
+.row + .row {
+  border-top: 1px solid var(--rs-color-border-base-primary);
+}
+
+.main {
+  gap: var(--rs-space-2);
+}
+
+.badges {
+  gap: var(--rs-space-3);
+  flex-wrap: wrap;
+}
+
+.name {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.type {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 1px var(--rs-space-2);
+  border-radius: 4px;
+  background: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.location {
+  font-size: 12px;
+  padding: 1px var(--rs-space-2);
+  border-radius: 4px;
+  background: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.required {
+  font-size: 11px;
+  padding: 1px var(--rs-space-2);
+  border-radius: 4px;
+  background: var(--rs-color-background-danger-primary);
+  color: var(--rs-color-foreground-danger-primary);
+}
+
+.description {
+  color: var(--rs-color-foreground-base-secondary);
+  font-size: 13px;
+}
+
+.example {
+  color: var(--rs-color-foreground-base-secondary);
+  font-size: 12px;
+}
+
+.example code {
+  font-family: monospace;
+  background: var(--rs-color-background-neutral-secondary);
+  padding: 1px var(--rs-space-2);
+  border-radius: 3px;
+}
+
+.accordion {
+  border: none;
+}
+
+.accordion :global([class*="accordion-header"]) {
+  margin: 0;
+}
+
+.accordion button {
+  min-height: unset;
+  padding: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.accordion button:hover,
+.accordion button:focus-visible {
+  background: transparent;
+}
+
+.accordion :global([class*="accordion-content-inner"]) {
+  padding: var(--rs-space-3) 0 0 0;
+  border: none;
+  box-shadow: none;
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--rs-space-5);
+  width: 100%;
+}
+
+.trigger {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.fieldInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.fieldInput {
+  flex: 1;
+  min-width: 0;
+}
+
+.arrayItems {
+  gap: var(--rs-space-3);
+}
+
+.arrayItem {
+  align-items: center;
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: 8px;
+  padding: var(--rs-space-3) var(--rs-space-4);
+}

package/src/components/api/field-row.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import { Flex, Text, Accordion, InputField, Switch, Select, IconButton } from '@raystack/apsara'
+import { TrashIcon, PlusIcon } from '@heroicons/react/24/outline'
+import type { SchemaField } from '@/lib/schema'
+import styles from './field-row.module.css'
+
+interface FieldRowProps {
+  field: SchemaField
+  location?: string
+  editable?: boolean
+  value?: unknown
+  onChange?: (name: string, value: unknown) => void
+}
+
+export function FieldRow({ field, location, editable, value, onChange }: FieldRowProps) {
+  const hasChildren = field.children && field.children.length > 0
+  const isArray = field.type.endsWith('[]')
+
+  const label = (
+    <Flex align="center" className={styles.badges}>
+      <Text size={2} className={styles.name}>{field.name}</Text>
+      <Text size={1} className={styles.type}>{field.type}</Text>
+      {location && <Text size={1} className={styles.location}>{location}</Text>}
+      {field.required && <Text size={1} className={styles.required}>required</Text>}
+    </Flex>
+  )
+
+  if (hasChildren && !isArray) {
+    const objValue = (value ?? {}) as Record<string, unknown>
+    return (
+      <div className={styles.row}>
+        <Accordion collapsible className={styles.accordion}>
+          <Accordion.Item value={field.name}>
+            <Accordion.Trigger className={styles.trigger}>{label}</Accordion.Trigger>
+            <Accordion.Content>
+              <div className={styles.children}>
+                {field.children!.map((child) => (
+                  <FieldRow
+                    key={child.name}
+                    field={child}
+                    editable={editable}
+                    value={objValue[child.name]}
+                    onChange={editable ? (name, val) => {
+                      onChange?.(field.name, { ...objValue, [name]: val })
+                    } : undefined}
+                  />
+                ))}
+              </div>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </div>
+    )
+  }
+
+  if (isArray && editable) {
+    const items = (Array.isArray(value) ? value : []) as unknown[]
+    const itemChildren = field.children
+
+    return (
+      <div className={styles.row}>
+        <Flex direction="column" className={styles.main}>
+          <Flex align="center" justify="between">
+            {label}
+            <IconButton size={1} onClick={() => {
+              const newItem = itemChildren ? {} : ''
+              onChange?.(field.name, [...items, newItem])
+            }}>
+              <PlusIcon width={14} height={14} />
+            </IconButton>
+          </Flex>
+          {field.description && <Text size={2} className={styles.description}>{field.description}</Text>}
+          <Flex direction="column" className={styles.arrayItems}>
+            {items.map((item, i) => (
+              <Flex key={i} align="start" gap="small" className={styles.arrayItem}>
+                {itemChildren ? (
+                  <Flex direction="column" className={styles.children}>
+                    {itemChildren.map((child) => (
+                      <FieldRow
+                        key={child.name}
+                        field={child}
+                        editable
+                        value={(item as Record<string, unknown>)?.[child.name]}
+                        onChange={(name, val) => {
+                          const updated = [...items]
+                          updated[i] = { ...(updated[i] as Record<string, unknown>), [name]: val }
+                          onChange?.(field.name, updated)
+                        }}
+                      />
+                    ))}
+                  </Flex>
+                ) : (
+                  <EditableInput
+                    field={{
+                      ...field,
+                      name: `${field.name}[${i}]`,
+                      type: field.type.replace('[]', ''),
+                    }}
+                    value={item}
+                    onChange={(_, val) => {
+                      const updated = [...items]
+                      updated[i] = val
+                      onChange?.(field.name, updated)
+                    }}
+                  />
+                )}
+                <IconButton size={1} onClick={() => {
+                  const updated = items.filter((_, j) => j !== i)
+                  onChange?.(field.name, updated)
+                }}>
+                  <TrashIcon width={14} height={14} />
+                </IconButton>
+              </Flex>
+            ))}
+          </Flex>
+        </Flex>
+      </div>
+    )
+  }
+
+  // Leaf field — inline layout
+  return (
+    <div className={styles.row}>
+      <Flex align="center" gap="medium">
+        <Flex direction="column" gap="extra-small" className={styles.fieldInfo}>
+          {label}
+          {field.description && <Text size={2} className={styles.description}>{field.description}</Text>}
+        </Flex>
+        {editable ? (
+          <div className={styles.fieldInput}>
+            <EditableInput field={field} value={value} onChange={onChange} />
+          </div>
+        ) : (
+          field.default !== undefined && (
+            <Text size={1} className={styles.example}>
+              Default: <code>{JSON.stringify(field.default)}</code>
+            </Text>
+          )
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+function EditableInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: SchemaField
+  value: unknown
+  onChange?: (name: string, value: unknown) => void
+}) {
+  if (field.enum) {
+    const enumMap = new Map(field.enum.map((opt) => [String(opt), opt]))
+    return (
+      <Select value={String(value ?? '')} onValueChange={(v) => onChange?.(field.name, enumMap.get(v) ?? v)}>
+        <Select.Trigger size="small">
+          <Select.Value placeholder={`Select ${field.name}`} />
+        </Select.Trigger>
+        <Select.Content>
+          {field.enum.map((opt) => (
+            <Select.Item key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+    )
+  }
+
+  const baseType = field.type.replace('[]', '').replace(/\(.*\)/, '')
+
+  if (baseType === 'boolean') {
+    return (
+      <Switch
+        checked={Boolean(value)}
+        onCheckedChange={(checked) => onChange?.(field.name, checked)}
+      />
+    )
+  }
+
+  if (baseType === 'integer' || baseType === 'number') {
+    return (
+      <InputField
+        size="small"
+        type="number"
+        placeholder={field.description ?? field.name}
+        value={String(value ?? '')}
+        onChange={(e) => onChange?.(field.name, Number(e.target.value))}
+      />
+    )
+  }
+
+  return (
+    <InputField
+      size="small"
+      placeholder={field.description ?? field.name}
+      value={String(value ?? '')}
+      onChange={(e) => onChange?.(field.name, e.target.value)}
+    />
+  )
+}

package/src/components/api/field-section.module.css

@@ -0,0 +1,24 @@
+.header {
+  padding-bottom: var(--rs-space-3);
+}
+
+.label {
+  font-family: monospace;
+  color: var(--rs-color-foreground-base-secondary);
+  font-size: 13px;
+}
+
+.separator {
+  height: 1px;
+  background: var(--rs-color-border-base-primary);
+}
+
+.tabs {
+  margin-top: var(--rs-space-3);
+}
+
+.noFields {
+  color: var(--rs-color-foreground-base-secondary);
+  padding: var(--rs-space-5);
+}
+