@raystack/chronicle 0.7.3 → 0.8.0

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