@raystack/chronicle 0.7.3 → 0.8.0

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

@@ -1,283 +0,0 @@
-'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

@@ -1,126 +0,0 @@
-.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

@@ -1,204 +0,0 @@
-'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 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

@@ -1,24 +0,0 @@
-.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);
-}
-