@raystack/chronicle 0.1.0-canary.e11f924

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);
+}
+

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

@@ -0,0 +1,100 @@
+'use client'
+
+import { Flex, Text, Tabs, CodeBlock } from '@raystack/apsara'
+import type { SchemaField } from '@/lib/schema'
+import { FieldRow } from './field-row'
+import { JsonEditor } from './json-editor'
+import styles from './field-section.module.css'
+
+interface FieldSectionProps {
+  title: string
+  label?: string
+  fields: SchemaField[]
+  locations?: Record<string, string>
+  jsonExample?: string
+  editableJson?: boolean
+  onJsonChange?: (value: string) => void
+  alwaysShow?: boolean
+  editable?: boolean
+  values?: Record<string, unknown>
+  onValuesChange?: (values: Record<string, unknown>) => void
+  children?: React.ReactNode
+}
+
+export function FieldSection({
+  title, label, fields, locations, jsonExample,
+  editableJson, onJsonChange, alwaysShow,
+  editable, values, onValuesChange, children,
+}: FieldSectionProps) {
+  if (fields.length === 0 && !children && !alwaysShow) return null
+
+  const fieldsContent = fields.length > 0 ? (
+    <Flex direction="column">
+      {fields.map((field) => (
+        <FieldRow
+          key={field.name}
+          field={field}
+          location={locations?.[field.name]}
+          editable={editable}
+          value={values?.[field.name]}
+          onChange={editable ? (name, val) => {
+            onValuesChange?.({ ...values, [name]: val })
+          } : undefined}
+        />
+      ))}
+    </Flex>
+  ) : !children ? (
+    <Text size={2} className={styles.noFields}>No fields defined</Text>
+  ) : null
+
+  if (jsonExample !== undefined || alwaysShow) {
+    return (
+      <Flex direction="column">
+        <Flex align="center" justify="between" className={styles.header}>
+          <Text size={4} weight="medium">{title}</Text>
+          {label && <Text size={2} className={styles.label}>{label}</Text>}
+        </Flex>
+        <div className={styles.separator} />
+        <Tabs defaultValue="fields" className={styles.tabs}>
+          <Tabs.List>
+            <Tabs.Trigger value="fields">Fields</Tabs.Trigger>
+            <Tabs.Trigger value="json">JSON</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="fields">
+            {fieldsContent}
+            {children}
+          </Tabs.Content>
+          <Tabs.Content value="json">
+            {editableJson ? (
+              <JsonEditor
+                value={jsonExample ?? '{}'}
+                onChange={onJsonChange}
+              />
+            ) : (
+              <CodeBlock>
+                <CodeBlock.Header>
+                  <CodeBlock.CopyButton />
+                </CodeBlock.Header>
+                <CodeBlock.Content>
+                  <CodeBlock.Code language="json">{jsonExample ?? '{}'}</CodeBlock.Code>
+                </CodeBlock.Content>
+              </CodeBlock>
+            )}
+          </Tabs.Content>
+        </Tabs>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex direction="column">
+      <Flex align="center" justify="between" className={styles.header}>
+        <Text size={4} weight="medium">{title}</Text>
+        {label && <Text size={2} className={styles.label}>{label}</Text>}
+      </Flex>
+      <div className={styles.separator} />
+      {fieldsContent}
+      {children}
+    </Flex>
+  )
+}

package/src/components/api/index.ts

@@ -0,0 +1,8 @@
+export { EndpointPage } from './endpoint-page'
+export { MethodBadge } from './method-badge'
+export { FieldSection } from './field-section'
+export { FieldRow } from './field-row'
+export { CodeSnippets } from './code-snippets'
+export { ResponsePanel } from './response-panel'
+export { JsonEditor } from './json-editor'
+export { KeyValueEditor } from './key-value-editor'

package/src/components/api/json-editor.module.css

@@ -0,0 +1,9 @@
+.editor {
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.editor .cm-editor {
+  font-size: var(--rs-font-size-small);
+}

package/src/components/api/json-editor.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useRef, useEffect } from 'react'
+import { useTheme } from '@raystack/apsara'
+import { EditorView, basicSetup } from 'codemirror'
+import { EditorState } from '@codemirror/state'
+import { json } from '@codemirror/lang-json'
+import { oneDark } from '@codemirror/theme-one-dark'
+import styles from './json-editor.module.css'
+
+interface JsonEditorProps {
+  value: string
+  onChange?: (value: string) => void
+  readOnly?: boolean
+}
+
+export function JsonEditor({ value, onChange, readOnly }: JsonEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  const { theme } = useTheme()
+
+  const isDark = theme === 'dark'
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const extensions = [
+      basicSetup,
+      json(),
+      EditorView.lineWrapping,
+      ...(isDark ? [oneDark] : []),
+      ...(readOnly ? [EditorState.readOnly.of(true)] : []),
+      ...(onChange
+        ? [EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              onChange(update.state.doc.toString())
+            }
+          })]
+        : []),
+    ]
+
+    const state = EditorState.create({ doc: value, extensions })
+    const view = new EditorView({ state, parent: containerRef.current })
+    viewRef.current = view
+
+    return () => view.destroy()
+  }, [isDark, readOnly, onChange])
+
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view) return
+    const current = view.state.doc.toString()
+    if (value !== current) {
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: value },
+      })
+    }
+  }, [value])
+
+  return <div ref={containerRef} className={styles.editor} />
+}

package/src/components/api/key-value-editor.module.css

@@ -0,0 +1,13 @@
+.editor {
+  padding: var(--rs-space-3) 0;
+}
+
+.row {
+  width: 100%;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+}
+

package/src/components/api/key-value-editor.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { Flex, InputField, IconButton, Button } from '@raystack/apsara'
+import { TrashIcon, PlusIcon } from '@heroicons/react/24/outline'
+import styles from './key-value-editor.module.css'
+
+export interface KeyValueEntry {
+  key: string
+  value: string
+}
+
+interface KeyValueEditorProps {
+  entries: KeyValueEntry[]
+  onChange: (entries: KeyValueEntry[]) => void
+}
+
+export function KeyValueEditor({ entries, onChange }: KeyValueEditorProps) {
+  const updateEntry = (index: number, field: 'key' | 'value', val: string) => {
+    const updated = [...entries]
+    updated[index] = { ...updated[index], [field]: val }
+    onChange(updated)
+  }
+
+  const removeEntry = (index: number) => {
+    onChange(entries.filter((_, i) => i !== index))
+  }
+
+  const addEntry = () => {
+    onChange([...entries, { key: '', value: '' }])
+  }
+
+  return (
+    <Flex direction="column" gap="small" className={styles.editor}>
+      {entries.map((entry, i) => (
+        <Flex key={i} align="center" gap="small" className={styles.row}>
+          <div className={styles.input}>
+            <InputField
+              size="small"
+              placeholder="Header name"
+              value={entry.key}
+              onChange={(e) => updateEntry(i, 'key', e.target.value)}
+            />
+          </div>
+          <div className={styles.input}>
+            <InputField
+              size="small"
+              placeholder="Value"
+              value={entry.value}
+              onChange={(e) => updateEntry(i, 'value', e.target.value)}
+            />
+          </div>
+          <IconButton size={1} aria-label={`Delete ${entry.key || 'entry'}`} onClick={() => removeEntry(i)}>
+            <TrashIcon width={14} height={14} />
+          </IconButton>
+        </Flex>
+      ))}
+      <Button variant="ghost" size="small" onClick={addEntry}>
+        <PlusIcon width={14} height={14} /> Add header
+      </Button>
+    </Flex>
+  )
+}

package/src/components/api/method-badge.module.css

@@ -0,0 +1,4 @@
+.badge {
+  font-family: monospace;
+  letter-spacing: 0.5px;
+}

package/src/components/api/method-badge.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Badge } from '@raystack/apsara'
+import styles from './method-badge.module.css'
+
+type BadgeVariant = 'accent' | 'danger' | 'success' | 'neutral' | 'warning' | 'gradient'
+
+const methodVariants: Record<string, BadgeVariant> = {
+  GET: 'accent',
+  POST: 'success',
+  PUT: 'warning',
+  DELETE: 'danger',
+  PATCH: 'neutral',
+}
+
+interface MethodBadgeProps {
+  method: string
+  size?: 'micro' | 'small' | 'regular'
+}
+
+export function MethodBadge({ method, size = 'small' }: MethodBadgeProps) {
+  const variant = methodVariants[method.toUpperCase()] ?? 'neutral'
+
+  return (
+    <Badge variant={variant} size={size} className={styles.badge}>
+      {method.toUpperCase()}
+    </Badge>
+  )
+}

package/src/components/api/response-panel.module.css

@@ -0,0 +1,8 @@
+.panel {
+  width: 100%;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+.panel :global([class*="code-block-module_header"]) {
+  justify-content: space-between;
+}