@raystack/chronicle 0.5.3 → 0.6.0

package/src/components/mdx/mermaid.tsx

@@ -1,6 +1,5 @@
-'use client'
-
-import { useEffect, useId, useState } from 'react'
+import { renderMermaidSVG } from 'beautiful-mermaid'
+import { useMemo } from 'react'
 import styles from './mermaid.module.css'
 
 interface MermaidProps {
@@ -8,30 +7,34 @@ interface MermaidProps {
 }
 
 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)
+  const { svg, error } = useMemo(() => {
+    try {
+      return {
+        svg: renderMermaidSVG(chart, {
+          bg: 'var(--rs-color-background-base-primary)',
+          fg: 'var(--rs-color-foreground-base-primary)',
+          line: 'var(--rs-color-border-base-focus)',
+          accent: 'var(--rs-color-foreground-accent-primary)',
+          muted: 'var(--rs-color-foreground-base-secondary)',
+          surface: 'var(--rs-color-background-neutral-secondary)',
+          border: 'var(--rs-color-border-base-tertiary)',
+          transparent: true,
+        }),
+        error: null,
+      }
+    } catch (err) {
+      return {
+        svg: null,
+        error: err instanceof Error ? err : new Error(String(err)),
+      }
     }
-
-    render()
-    return () => { cancelled = true }
   }, [chart])
 
+  if (error) return <pre className={styles.error}>{error.message}</pre>
   return (
     <div
       className={styles.mermaid}
-      dangerouslySetInnerHTML={{ __html: svg }}
+      dangerouslySetInnerHTML={{ __html: svg! }}
     />
   )
 }

package/src/components/ui/breadcrumbs.tsx

@@ -3,6 +3,7 @@
 import { Breadcrumb } from '@raystack/apsara'
 import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb'
 import type { Root } from 'fumadocs-core/page-tree'
+import { Link as RouterLink } from 'react-router'
 
 interface BreadcrumbsProps {
   slug: string[]
@@ -18,11 +19,12 @@ export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) {
   return (
     <Breadcrumb size="small">
       {items.flatMap((item, index) => {
+        const isCurrent = index === items.length - 1
         const breadcrumbItem = (
           <Breadcrumb.Item
             key={`item-${index}`}
-            href={item.url}
-            current={index === items.length - 1}
+            current={isCurrent}
+            render={isCurrent ? undefined : <RouterLink to={item.url} />}
           >
             {item.name}
           </Breadcrumb.Item>

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

@@ -1,18 +1,35 @@
 'use client'
 
-import { ThemeSwitcher } from '@raystack/apsara'
-import { useState, useEffect } from 'react'
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { IconButton, useTheme } from '@raystack/apsara'
+import { useEffect, useState } from 'react'
 
 interface ClientThemeSwitcherProps {
   size?: number
 }
 
-export function ClientThemeSwitcher({ size }: ClientThemeSwitcherProps) {
+export function ClientThemeSwitcher({ size = 16 }: ClientThemeSwitcherProps) {
   const [isClient, setIsClient] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
 
   useEffect(() => {
     setIsClient(true)
   }, [])
 
-  return isClient ? <ThemeSwitcher size={size} /> : null
+  if (!isClient) return null
+
+  const isDark = resolvedTheme === 'dark'
+  return (
+    <IconButton
+      size={3}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {isDark ? (
+        <SunIcon width={size} height={size} />
+      ) : (
+        <MoonIcon width={size} height={size} />
+      )}
+    </IconButton>
+  )
 }

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

@@ -1,63 +1,38 @@
-.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 {
+  border-radius: var(--rs-radius-4);
+  padding: 0px;
+  width: 80%;
   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);
+  font-size: var(--rs-font-size-small);
 }
 
 .list {
-  max-height: 300px;
-  overflow: auto;
-  padding: 0;
+  max-height: 400px;
 }
 
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.list :global([cmdk-group-heading]) {
+  color: var(--rs-color-foreground-base-tertiary);
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  padding: var(--rs-space-6) var(--rs-space-5) var(--rs-space-3);
 }
 
 .item {
-  padding: 12px 16px;
+  height: 32px;
+  padding: var(--rs-space-3);
+  gap: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
   cursor: pointer;
-  border-radius: 6px;
 }
 
 .item[data-selected="true"] {
-  background: var(--rs-color-background-base-secondary);
-  color: var(--rs-color-foreground-accent-primary-hover);
+  background: var(--rs-color-background-base-primary-hover);
 }
 
 .itemContent {

package/src/components/ui/search.tsx

@@ -1,28 +1,17 @@
-import { DocumentIcon, HashtagIcon } from '@heroicons/react/24/outline';
-import { Button, Command, Dialog, Text } from '@raystack/apsara';
-import { cx } from 'class-variance-authority';
+import {
+  DocumentIcon,
+  HashtagIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline';
+import { Command, IconButton, Text } from '@raystack/apsara';
 import type { SortedResult } from 'fumadocs-core/search';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { MethodBadge } from '@/components/api/method-badge';
+import { usePageContext } from '@/lib/page-context';
 import styles from './search.module.css';
 
-function SearchShortcutKey({ className }: { className?: string }) {
-  const [key, setKey] = useState('⌘');
-
-  useEffect(() => {
-    const isMac = navigator.platform?.toUpperCase().includes('MAC');
-    setKey(isMac ? '⌘' : 'Ctrl');
-  }, []);
-
-  return (
-    <kbd className={className} suppressHydrationWarning>
-      {key} K
-    </kbd>
-  );
-}
-
 interface SearchProps {
   className?: string;
 }
@@ -30,10 +19,12 @@ interface SearchProps {
 export function Search({ className }: SearchProps) {
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
+  const { version } = usePageContext();
 
   const { search, setSearch, query } = useDocsSearch({
     type: 'fetch',
     api: '/api/search',
+    tag: version.dir ?? undefined,
     delayMs: 100,
     allowEmpty: true
   });
@@ -64,31 +55,28 @@ export function Search({ className }: SearchProps) {
 
   return (
     <>
-      <Button
-        variant='outline'
-        color='neutral'
-        size='small'
+      <IconButton
+        size={3}
+        aria-label='Search'
+        title='Search (Ctrl/⌘K)'
         onClick={() => setOpen(true)}
-        className={cx(styles.trigger, className)}
-        trailingIcon={<SearchShortcutKey className={styles.kbd} />}
+        className={className}
       >
-        Search...
-      </Button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <Dialog.Content className={styles.dialogContent}>
-          <Dialog.Title className={styles.visuallyHidden}>
-            Search documentation
-          </Dialog.Title>
-          <Command loop>
+        <MagnifyingGlassIcon width={16} height={16} />
+      </IconButton>
+
+      <Command.Dialog open={open} onOpenChange={setOpen}>
+        <Command.DialogContent className={styles.dialogContent}>
+          <Command>
             <Command.Input
               placeholder='Search'
+              leadingIcon={<MagnifyingGlassIcon width={16} height={16} />}
               value={search}
-              onValueChange={setSearch}
+              onChange={(e) => setSearch(e.target.value)}
               className={styles.input}
             />
 
-            <Command.List className={styles.list}>
+            <Command.Content className={styles.list}>
               {query.isLoading && <Command.Empty>Loading...</Command.Empty>}
               {!query.isLoading &&
                 search.length > 0 &&
@@ -98,12 +86,13 @@ export function Search({ className }: SearchProps) {
               {!query.isLoading &&
                 search.length === 0 &&
                 results.length > 0 && (
-                  <Command.Group heading='Suggestions'>
+                  <Command.Group>
+                    <Command.Label>Suggestions</Command.Label>
                     {results.slice(0, 8).map((result: SortedResult) => (
                       <Command.Item
                         key={result.id}
                         value={result.id}
-                        onSelect={() => onSelect(result.url)}
+                        onClick={() => onSelect(result.url)}
                         className={styles.item}
                       >
                         <div className={styles.itemContent}>
@@ -123,7 +112,7 @@ export function Search({ className }: SearchProps) {
                   <Command.Item
                     key={result.id}
                     value={result.id}
-                    onSelect={() => onSelect(result.url)}
+                    onClick={() => onSelect(result.url)}
                     className={styles.item}
                   >
                     <div className={styles.itemContent}>
@@ -152,10 +141,10 @@ export function Search({ className }: SearchProps) {
                     </div>
                   </Command.Item>
                 ))}
-            </Command.List>
+            </Command.Content>
           </Command>
-        </Dialog.Content>
-      </Dialog>
+        </Command.DialogContent>
+      </Command.Dialog>
     </>
   );
 }