@raystack/chronicle 0.7.4 → 0.9.0

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

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

@@ -1,100 +0,0 @@
-'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.Tab value="fields">Fields</Tabs.Tab>
-            <Tabs.Tab value="json">JSON</Tabs.Tab>
-          </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/key-value-editor.module.css

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

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

@@ -1,62 +0,0 @@
-'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/response-panel.module.css

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

package/src/components/api/response-panel.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import { CodeBlock } from '@raystack/apsara'
-import styles from './response-panel.module.css'
-
-interface ResponsePanelProps {
-  responses: {
-    status: string
-    description?: string
-    jsonExample?: string
-  }[]
-}
-
-export function ResponsePanel({ responses }: ResponsePanelProps) {
-  const withExamples = responses.filter((r) => r.jsonExample)
-  if (withExamples.length === 0) return null
-
-  const defaultValue = withExamples[0].status
-
-  return (
-    <CodeBlock defaultValue={defaultValue} className={styles.panel}>
-      <CodeBlock.Header>
-        <CodeBlock.LanguageSelect>
-          <CodeBlock.LanguageSelectTrigger />
-          <CodeBlock.LanguageSelectContent>
-            {withExamples.map((resp) => (
-              <CodeBlock.LanguageSelectItem key={resp.status} value={resp.status}>
-                {resp.status} {resp.description ?? resp.status}
-              </CodeBlock.LanguageSelectItem>
-            ))}
-          </CodeBlock.LanguageSelectContent>
-        </CodeBlock.LanguageSelect>
-        <CodeBlock.CopyButton />
-      </CodeBlock.Header>
-      <CodeBlock.Content>
-        {withExamples.map((resp) => (
-          <CodeBlock.Code key={resp.status} value={resp.status} language="json">
-            {resp.jsonExample!}
-          </CodeBlock.Code>
-        ))}
-      </CodeBlock.Content>
-    </CodeBlock>
-  )
-}