@raystack/chronicle 0.1.0-canary.111b55a

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

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

@@ -0,0 +1,44 @@
+'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>
+  )
+}

package/src/components/common/breadcrumb.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Breadcrumb } from '@raystack/apsara'

package/src/components/common/button.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Button } from '@raystack/apsara'

package/src/components/common/callout.module.css

@@ -0,0 +1,7 @@
+.callout {
+  margin: var(--rs-space-5) 0;
+}
+
+.callout p:last-child {
+  margin-bottom: 0;
+}

package/src/components/common/callout.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import React from 'react'
+import { Callout } from '@raystack/apsara'
+import styles from './callout.module.css'
+
+function CalloutContainer(props: React.ComponentProps<typeof Callout>) {
+  return <Callout outline width="100%" className={styles.callout} {...props} />
+}
+
+function CalloutTitle({ children }: { children: React.ReactNode }) {
+  return <strong>{children}</strong>
+}
+
+function CalloutDescription({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function MdxBlockquote(props: React.ComponentProps<'blockquote'>) {
+  return (
+    <Callout type="grey" outline width="100%" className={styles.callout}>
+      {props.children}
+    </Callout>
+  )
+}
+
+export { Callout, CalloutContainer, CalloutTitle, CalloutDescription, MdxBlockquote }

package/src/components/common/code-block.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { CodeBlock } from '@raystack/apsara'

package/src/components/common/dialog.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Dialog } from '@raystack/apsara'

package/src/components/common/index.ts

@@ -0,0 +1,10 @@
+export { Sidebar } from './sidebar'
+export { Table } from './table'
+export { Dialog } from './dialog'
+export { InputField } from './input-field'
+export { Tabs } from './tabs'
+export { Breadcrumb } from './breadcrumb'
+export { Button } from './button'
+export { CodeBlock } from './code-block'
+export { Callout } from './callout'
+export { Switch } from './switch'

package/src/components/common/input-field.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { InputField } from '@raystack/apsara'

package/src/components/common/sidebar.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Sidebar } from '@raystack/apsara'

package/src/components/common/switch.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Switch } from '@raystack/apsara'

package/src/components/common/table.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Table } from '@raystack/apsara'

package/src/components/common/tabs.tsx

@@ -0,0 +1,3 @@
+'use client'
+
+export { Tabs } from '@raystack/apsara'

package/src/components/mdx/code.module.css

@@ -0,0 +1,42 @@
+.codeBlock {
+  border-radius: var(--rs-radius-2);
+  overflow: hidden;
+  margin: var(--rs-space-5) 0;
+  border: 1px solid var(--rs-color-border-base-primary);
+}
+
+.codeHeader {
+  padding: var(--rs-space-3) var(--rs-space-4);
+  background: var(--rs-color-background-base-secondary);
+  border-bottom: 1px solid var(--rs-color-border-base-primary);
+  font-size: var(--rs-font-size-mini);
+  color: var(--rs-color-text-base-secondary);
+}
+
+.pre {
+  margin: 0;
+  padding: var(--rs-space-4);
+  overflow-x: auto;
+  background: var(--rs-color-background-base-primary);
+}
+
+.pre code {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-small);
+  line-height: 1.6;
+}
+
+.pre code span {
+  color: var(--shiki-light);
+}
+
+:global([data-theme=dark]) .pre code span {
+  color: var(--shiki-dark);
+}
+
+.inlineCode {
+  background: var(--rs-color-background-neutral-secondary);
+  padding: var(--rs-space-1) var(--rs-space-2);
+  border-radius: var(--rs-radius-1);
+  font-size: inherit;
+}

package/src/components/mdx/code.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { type ComponentProps, isValidElement, Children } from 'react'
+import { Mermaid } from './mermaid'
+import styles from './code.module.css'
+
+type PreProps = ComponentProps<'pre'> & {
+  'data-language'?: string
+  title?: string
+}
+
+export function MdxCode({ children, className, ...props }: ComponentProps<'code'>) {
+  if (className || (typeof children === 'object')) {
+    return <code className={className} {...props}>{children}</code>
+  }
+  return <code className={styles.inlineCode} {...props}>{children}</code>
+}
+
+export function MdxPre({ children, title, className, ...props }: PreProps) {
+  // Detect mermaid code blocks
+  if (isValidElement(children)) {
+    const childProps = children.props as { className?: string; children?: string }
+    if (childProps.className?.includes('language-mermaid') && typeof childProps.children === 'string') {
+      return <Mermaid chart={childProps.children} />
+    }
+  }
+
+  return (
+    <div className={styles.codeBlock}>
+      {title && <div className={styles.codeHeader}>{title}</div>}
+      <pre className={`${styles.pre} ${className ?? ''}`} {...props}>
+        {children}
+      </pre>
+    </div>
+  )
+}

package/src/components/mdx/details.module.css

@@ -0,0 +1,14 @@
+.details {
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  margin: var(--rs-space-5) 0;
+}
+
+.trigger {
+  font-weight: 500;
+  font-size: var(--rs-font-size-small);
+}
+
+.content {
+  padding: var(--rs-space-4) var(--rs-space-5);
+}

package/src/components/mdx/details.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react'
+
+export function MdxDetails({ children, className, ...props }: ComponentProps<'details'>) {
+  return (
+    <details className={className} {...props}>
+      {children}
+    </details>
+  )
+}
+
+export function MdxSummary({ children, className, ...props }: ComponentProps<'summary'>) {
+  return (
+    <summary className={className} {...props}>
+      {children}
+    </summary>
+  )
+}

package/src/components/mdx/image.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+
+type ImageProps = Omit<ComponentProps<'img'>, 'src'> & {
+  src?: string
+  width?: number | string
+  height?: number | string
+}
+
+export function Image({ src, alt, width, height, ...props }: ImageProps) {
+  if (!src || typeof src !== 'string') return null
+
+  return (
+    <img
+      src={src}
+      alt={alt ?? ''}
+      width={width}
+      height={height}
+      loading="lazy"
+      {...props}
+    />
+  )
+}

package/src/components/mdx/index.tsx

@@ -0,0 +1,35 @@
+import type { MDXComponents } from 'mdx/types'
+import { Image } from './image'
+import { MdxLink } from './link'
+import { MdxTable, MdxThead, MdxTbody, MdxTr, MdxTh, MdxTd } from './table'
+import { MdxPre, MdxCode } from './code'
+import { MdxDetails, MdxSummary } from './details'
+import { Mermaid } from './mermaid'
+import { MdxParagraph } from './paragraph'
+import { CalloutContainer, CalloutTitle, CalloutDescription, MdxBlockquote } from '@/components/common/callout'
+import { Tabs } from '@raystack/apsara'
+
+export const mdxComponents: MDXComponents = {
+  p: MdxParagraph,
+  img: Image,
+  a: MdxLink,
+  table: MdxTable,
+  thead: MdxThead,
+  tbody: MdxTbody,
+  tr: MdxTr,
+  th: MdxTh,
+  td: MdxTd,
+  code: MdxCode,
+  pre: MdxPre,
+  details: MdxDetails,
+  summary: MdxSummary,
+  blockquote: MdxBlockquote,
+  Callout: CalloutContainer,
+  CalloutTitle,
+  CalloutDescription,
+  Tabs,
+  Mermaid,
+}
+
+export { Image } from './image'
+export { MdxLink } from './link'

package/src/components/mdx/link.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Link } from 'react-router-dom'
+import type { ComponentProps } from 'react'
+
+type LinkProps = ComponentProps<'a'>
+
+export function MdxLink({ href, children, ...props }: LinkProps) {
+  if (!href) {
+    return <span {...props}>{children}</span>
+  }
+
+  const isExternal = href.startsWith('http://') || href.startsWith('https://')
+  const isAnchor = href.startsWith('#')
+
+  if (isExternal) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  if (isAnchor) {
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <Link to={href} className={props.className}>
+      {children}
+    </Link>
+  )
+}

package/src/components/mdx/mermaid.module.css

@@ -0,0 +1,9 @@
+.mermaid {
+  margin: var(--rs-space-5) 0;
+  overflow-x: auto;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}