feat: redesign API reference page

packages/chronicle/src/components/api/api-code-snippet.module.css

@@ -0,0 +1,23 @@
+.container {
+  border: 0.5px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  overflow: hidden;
+  width: 100%;
+}
+
+.header {
+  justify-content: space-between;
+}
+
+.title {
+  font-size: var(--rs-font-size-regular);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-regular);
+  letter-spacing: var(--rs-letter-spacing-regular);
+  color: var(--rs-color-foreground-base-primary);
+  white-space: nowrap;
+}
+
+.body {
+  background: var(--rs-color-background-base-primary);
+}

packages/chronicle/src/components/api/api-code-snippet.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { CodeBlock, Flex } from '@raystack/apsara'
+import {
+  generateCurl,
+  generatePython,
+  generateGo,
+  generateTypeScript,
+} from '@/lib/snippet-generators'
+import styles from './api-code-snippet.module.css'
+
+interface ApiCodeSnippetProps {
+  title: string
+  method: string
+  url: string
+  headers: Record<string, string>
+  body?: string
+}
+
+const languages = [
+  { value: 'curl', label: 'cURL', lang: 'bash', generate: generateCurl },
+  { value: 'python', label: 'Python', lang: 'python', generate: generatePython },
+  { value: 'go', label: 'Go', lang: 'go', generate: generateGo },
+  { value: 'typescript', label: 'TypeScript', lang: 'typescript', generate: generateTypeScript },
+]
+
+export function ApiCodeSnippet({ title, method, url, headers, body }: ApiCodeSnippetProps) {
+  const [selected, setSelected] = useState('curl')
+  const current = languages.find((l) => l.value === selected) ?? languages[0]
+
+  const code = useMemo(
+    () => current.generate({ method, url, headers, body }),
+    [current.generate, method, url, headers, body],
+  )
+
+  return (
+    <CodeBlock
+      value={selected}
+      onValueChange={setSelected}
+      className={styles.container}
+    >
+      <CodeBlock.Header className={styles.header}>
+        <CodeBlock.Label className={styles.title}>{title}</CodeBlock.Label>
+        <Flex align='center' gap={4}>
+          <CodeBlock.LanguageSelect>
+            <CodeBlock.LanguageSelectTrigger />
+            <CodeBlock.LanguageSelectContent>
+              {languages.map((l) => (
+                <CodeBlock.LanguageSelectItem key={l.value} value={l.value}>
+                  {l.label}
+                </CodeBlock.LanguageSelectItem>
+              ))}
+            </CodeBlock.LanguageSelectContent>
+          </CodeBlock.LanguageSelect>
+          <CodeBlock.CopyButton />
+        </Flex>
+      </CodeBlock.Header>
+      <CodeBlock.Content className={styles.body}>
+        <CodeBlock.Code value={selected} language={current.lang}>{code}</CodeBlock.Code>
+      </CodeBlock.Content>
+    </CodeBlock>
+  )
+}

packages/chronicle/src/components/api/api-field-list.module.css

@@ -0,0 +1,62 @@
+.sectionTitle {
+  font-size: var(--rs-font-size-large);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-large);
+  letter-spacing: var(--rs-letter-spacing-large);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.fieldItem {
+  padding-bottom: var(--rs-space-5);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+}
+
+.fieldItem:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.fieldType {
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.fieldDescription {
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.statusDescription {
+  font-size: var(--rs-font-size-regular);
+  line-height: var(--rs-line-height-regular);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.expandButton {
+  padding: var(--rs-space-3) var(--rs-space-4);
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  background: var(--rs-color-background-base-secondary);
+  cursor: pointer;
+  width: 100%;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.expandButton:hover {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
+.expandLabel {
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.childFields {
+  padding-left: var(--rs-space-5);
+  margin-top: var(--rs-space-3);
+}

packages/chronicle/src/components/api/api-field-list.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+import { Badge, Flex } from '@raystack/apsara'
+import { ChevronRightIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import type { SchemaField } from '@/lib/schema'
+import styles from './api-field-list.module.css'
+
+interface ApiFieldSectionProps {
+  title: string
+  fields: SchemaField[]
+  headerRight?: ReactNode
+  description?: string
+}
+
+export function ApiFieldSection({ title, fields, headerRight, description }: ApiFieldSectionProps) {
+  if (fields.length === 0 && !description) return null
+
+  return (
+    <Flex direction="column" gap={6}>
+      <Flex align="center" justify="between">
+        <span className={styles.sectionTitle}>{title}</span>
+        {headerRight && (
+          <Flex align="center" gap={3}>
+            {headerRight}
+          </Flex>
+        )}
+      </Flex>
+      {description && <span className={styles.statusDescription}>{description}</span>}
+      <Flex direction="column" gap={5}>
+        {fields.map((field) => (
+          <FieldItem key={field.name} field={field} />
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+function FieldItem({ field }: { field: SchemaField }) {
+  const hasChildren = field.children && field.children.length > 0
+
+  return (
+    <Flex direction="column" gap={4} className={styles.fieldItem}>
+      <Flex align="center" gap={3}>
+        <Badge variant="neutral" size="micro">{field.name}</Badge>
+        <span className={styles.fieldType}>{field.type}</span>
+      </Flex>
+      {field.description && (
+        <span className={styles.fieldDescription}>{field.description}</span>
+      )}
+      {hasChildren && <ExpandableChildren field={field} />}
+    </Flex>
+  )
+}
+
+function ExpandableChildren({ field }: { field: SchemaField }) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <Flex direction="column">
+      <Flex
+        align="center"
+        justify="between"
+        className={styles.expandButton}
+        onClick={() => setExpanded(!expanded)}
+        role="button"
+        tabIndex={0}
+      >
+        <span className={styles.expandLabel}>
+          {expanded ? 'Hide' : 'Show'} child attributes
+        </span>
+        {expanded ? (
+          <ChevronDownIcon width={16} height={16} />
+        ) : (
+          <ChevronRightIcon width={16} height={16} />
+        )}
+      </Flex>
+      {expanded && (
+        <Flex direction="column" gap={5} className={styles.childFields}>
+          {field.children!.map((child) => (
+            <FieldItem key={child.name} field={child} />
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  )
+}

packages/chronicle/src/components/api/api-overview.module.css

@@ -0,0 +1,65 @@
+.layout {
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-left: var(--rs-space-9);
+  padding-right: var(--rs-space-9);
+  width: 100%;
+}
+
+.left {
+  min-width: 0;
+  flex: 0 1 545px;
+}
+
+.right {
+  min-width: 376px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.title {
+  font-family: var(--rs-font-title);
+  font-size: var(--rs-font-size-t3);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-t3);
+  letter-spacing: var(--rs-letter-spacing-t3);
+  color: var(--rs-color-foreground-base-primary);
+  margin: 0;
+}
+
+.description {
+  font-size: var(--rs-font-size-regular);
+  line-height: var(--rs-line-height-regular);
+  letter-spacing: var(--rs-letter-spacing-regular);
+  color: var(--rs-color-foreground-base-secondary);
+  margin: 0;
+}
+
+.methodBar {
+  padding: var(--rs-space-3) 0;
+  border-radius: var(--rs-radius-2);
+}
+
+.path {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-regular);
+  line-height: var(--rs-line-height-regular);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.divider {
+  padding: 0;
+  margin: var(--rs-space-2) 0;
+}
+
+@media (max-width: 1100px) {
+  .layout {
+    flex-direction: column;
+    gap: var(--rs-space-9);
+  }
+
+  .left,
+  .right {
+    width: 100%;
+  }
+}