@raystack/chronicle 0.1.0-canary.e11f924

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,27 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+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) {
+  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,37 @@
+.details {
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  margin: var(--rs-space-5) 0;
+}
+
+.summary {
+  padding: var(--rs-space-4) var(--rs-space-5);
+  cursor: pointer;
+  font-weight: 500;
+  font-size: var(--rs-font-size-small);
+  color: var(--rs-color-text-base-primary);
+  background: var(--rs-color-background-base-secondary);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::before {
+  content: '▶';
+  font-size: 10px;
+  transition: transform 0.2s ease;
+  color: var(--rs-color-text-base-secondary);
+}
+
+.details[open] > .summary::before {
+  transform: rotate(90deg);
+}
+
+.content {
+  padding: var(--rs-space-4) var(--rs-space-5);
+}

package/src/components/mdx/details.tsx

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

package/src/components/mdx/image.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import NextImage from 'next/image'
+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
+
+  const isExternal = src.startsWith('http://') || src.startsWith('https://')
+
+  if (isExternal) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={src}
+        alt={alt ?? ''}
+        width={width}
+        height={height}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <NextImage
+      src={src}
+      alt={alt ?? ''}
+      width={typeof width === 'string' ? parseInt(width, 10) : (width ?? 800)}
+      height={typeof height === 'string' ? parseInt(height, 10) : (height ?? 400)}
+    />
+  )
+}

package/src/components/mdx/index.tsx

@@ -0,0 +1,35 @@
+import type { MDXComponents } from 'mdx/types'
+import { Image } from './image'
+import { Link } 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: Link,
+  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 { Link } from './link'

package/src/components/mdx/link.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import NextLink from 'next/link'
+import { Link as ApsaraLink } from '@raystack/apsara'
+import type { ComponentProps } from 'react'
+
+type LinkProps = ComponentProps<'a'>
+
+export function Link({ href, children, ...props }: LinkProps) {
+  if (!href) {
+    return <span {...props}>{children}</span>
+  }
+
+  const isExternal = href.startsWith('http://') || href.startsWith('https://')
+  const isAnchor = href.startsWith('#')
+
+  if (isAnchor) {
+    return (
+      <ApsaraLink href={href} {...props}>
+        {children}
+      </ApsaraLink>
+    )
+  }
+
+  if (isExternal) {
+    return (
+      <ApsaraLink href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </ApsaraLink>
+    )
+  }
+
+  return (
+    <NextLink href={href} className={props.className}>
+      {children}
+    </NextLink>
+  )
+}

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

package/src/components/mdx/mermaid.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect, useId, useState } from 'react'
+import styles from './mermaid.module.css'
+
+interface MermaidProps {
+  chart: string
+}
+
+export function Mermaid({ chart }: MermaidProps) {
+  const mermaidId = useId().replace(/:/g, '-')
+  const [svg, setSvg] = useState<string>('')
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function render() {
+      const { default: mermaid } = await import('mermaid')
+      mermaid.initialize({ startOnLoad: false, theme: 'default' })
+      const { svg: rendered } = await mermaid.render(
+        mermaidId,
+        chart
+      )
+      if (!cancelled) setSvg(rendered)
+    }
+
+    render()
+    return () => { cancelled = true }
+  }, [chart])
+
+  return (
+    <div
+      className={styles.mermaid}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}

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

@@ -0,0 +1,8 @@
+.paragraph {
+  font-size: var(--rs-font-size-regular);
+  margin-bottom: var(--rs-space-5);
+}
+
+.paragraph :global(a) {
+  font-size: inherit;
+}

package/src/components/mdx/paragraph.tsx

@@ -0,0 +1,19 @@
+import { Children, isValidElement, type ComponentProps } from 'react'
+import styles from './paragraph.module.css'
+
+const BLOCK_ELEMENTS = new Set(['summary', 'details', 'div', 'table', 'ul', 'ol'])
+
+function hasBlockChild(children: React.ReactNode): boolean {
+  return Children.toArray(children).some(
+    (child) => isValidElement(child) && typeof child.type === 'string' && BLOCK_ELEMENTS.has(child.type)
+  )
+}
+
+export function MdxParagraph({ children, className, ...props }: ComponentProps<'p'>) {
+  const Tag = hasBlockChild(children) ? 'div' : 'p'
+  return (
+    <Tag className={`${styles.paragraph} ${className ?? ''}`} {...props}>
+      {children}
+    </Tag>
+  )
+}

package/src/components/mdx/table.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Table } from '@raystack/apsara'
+import type { ComponentProps, ReactNode } from 'react'
+
+type TableProps = ComponentProps<'table'>
+
+export function MdxTable({ children, ...props }: TableProps) {
+  return <Table {...props}>{children}</Table>
+}
+
+type TheadProps = ComponentProps<'thead'>
+
+export function MdxThead({ children, ...props }: TheadProps) {
+  return <Table.Header {...props}>{children}</Table.Header>
+}
+
+type TbodyProps = ComponentProps<'tbody'>
+
+export function MdxTbody({ children, ...props }: TbodyProps) {
+  return <Table.Body {...props}>{children}</Table.Body>
+}
+
+type TrProps = ComponentProps<'tr'>
+
+export function MdxTr({ children, ...props }: TrProps) {
+  return <Table.Row {...props}>{children}</Table.Row>
+}
+
+type ThProps = ComponentProps<'th'>
+
+export function MdxTh({ children, ...props }: ThProps) {
+  return <Table.Head {...props}>{children}</Table.Head>
+}
+
+type TdProps = ComponentProps<'td'>
+
+export function MdxTd({ children, ...props }: TdProps) {
+  return <Table.Cell {...props}>{children}</Table.Cell>
+}

package/src/components/ui/breadcrumbs.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { Breadcrumb } from '@raystack/apsara'
+import type { PageTree, PageTreeItem } from '@/types'
+
+interface BreadcrumbsProps {
+  slug: string[]
+  tree: PageTree
+}
+
+function findInTree(items: PageTreeItem[], targetPath: string): PageTreeItem | undefined {
+  for (const item of items) {
+    const itemUrl = item.url || `/${item.name.toLowerCase().replace(/\s+/g, '-')}`
+    if (itemUrl === targetPath || itemUrl === `/${targetPath}`) {
+      return item
+    }
+    if (item.children) {
+      const found = findInTree(item.children, targetPath)
+      if (found) return found
+    }
+  }
+  return undefined
+}
+
+function getFirstPageUrl(item: PageTreeItem): string | undefined {
+  if (item.type === 'page' && item.url) {
+    return item.url
+  }
+  if (item.children) {
+    for (const child of item.children) {
+      const url = getFirstPageUrl(child)
+      if (url) return url
+    }
+  }
+  return undefined
+}
+
+export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
+  const items: { label: string; href: string }[] = []
+
+  for (let i = 0; i < slug.length; i++) {
+    const currentPath = `/${slug.slice(0, i + 1).join('/')}`
+    const node = findInTree(tree.children, currentPath)
+    const href = node?.url || (node && getFirstPageUrl(node)) || currentPath
+    const label = node?.name ?? slug[i]
+    items.push({
+      label: label.charAt(0).toUpperCase() + label.slice(1),
+      href,
+    })
+  }
+
+  return (
+    <Breadcrumb size="small">
+      {items.flatMap((item, index) => {
+        const breadcrumbItem = (
+          <Breadcrumb.Item
+            key={`item-${index}`}
+            href={item.href}
+            current={index === items.length - 1}
+          >
+            {item.label}
+          </Breadcrumb.Item>
+        )
+        if (index === 0) return [breadcrumbItem]
+        return [
+          <Breadcrumb.Separator key={`sep-${index}`} style={{ display: 'flex' }} />,
+          breadcrumbItem,
+        ]
+      })}
+    </Breadcrumb>
+  )
+}

package/src/components/ui/client-theme-switcher.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { ThemeSwitcher } from '@raystack/apsara'
+import { useState, useEffect } from 'react'
+
+interface ClientThemeSwitcherProps {
+  size?: number
+}
+
+export function ClientThemeSwitcher({ size }: ClientThemeSwitcherProps) {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return isClient ? <ThemeSwitcher size={size} /> : null
+}

package/src/components/ui/footer.module.css

@@ -0,0 +1,27 @@
+.footer {
+  border-top: 1px solid var(--rs-color-border-base-primary);
+  padding: var(--rs-space-5) var(--rs-space-7);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.copyright {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.links {
+  flex-wrap: wrap;
+}
+
+.link {
+  color: var(--rs-color-foreground-base-secondary);
+  font-size: 14px;
+}
+
+.link:hover {
+  color: var(--rs-color-foreground-base-primary);
+}

package/src/components/ui/footer.tsx

@@ -0,0 +1,30 @@
+import { Flex, Link, Text } from "@raystack/apsara";
+import type { FooterConfig } from "@/types";
+import styles from "./footer.module.css";
+
+interface FooterProps {
+  config?: FooterConfig;
+}
+
+export function Footer({ config }: FooterProps) {
+  return (
+    <footer className={styles.footer}>
+      <Flex align="center" justify="between" className={styles.container}>
+        {config?.copyright && (
+          <Text size={2} className={styles.copyright}>
+            {config.copyright}
+          </Text>
+        )}
+        {config?.links && config.links.length > 0 && (
+          <Flex gap="medium" className={styles.links}>
+            {config.links.map((link) => (
+              <Link key={link.href} href={link.href} className={styles.link}>
+                {link.label}
+              </Link>
+            ))}
+          </Flex>
+        )}
+      </Flex>
+    </footer>
+  );
+}