@raystack/chronicle 0.1.2

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

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

@@ -0,0 +1,104 @@
+.trigger {
+  gap: 8px;
+  color: var(--rs-color-foreground-base-secondary);
+  cursor: pointer;
+}
+
+.kbd {
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--rs-color-border-base-primary);
+  font-size: 12px;
+}
+
+.dialogContent {
+  max-width: 600px;
+  padding: 0;
+  min-height: 0;
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: var(--rs-radius-4);
+}
+
+.input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 16px;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.list {
+  max-height: 300px;
+  overflow: auto;
+  padding: 0;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.item {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.item[data-selected="true"] {
+  background: var(--rs-color-background-base-secondary);
+  color: var(--rs-color-foreground-accent-primary-hover);
+}
+
+.itemContent {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.resultText {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.headingText {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.item[data-selected="true"] .headingText {
+  color: var(--rs-color-foreground-accent-primary-hover);
+}
+
+.separator {
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.pageText {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.item[data-selected="true"] .pageText {
+  color: var(--rs-color-foreground-accent-primary-hover);
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  color: var(--rs-color-foreground-base-secondary);
+  flex-shrink: 0;
+}
+
+.item[data-selected="true"] .icon {
+  color: var(--rs-color-foreground-accent-primary-hover);
+}