@lexibase/rdx-ui 2.0.0 → 3.1.0

package/src/components/mdx-mermaid.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from 'react'
+import { useTheme } from 'next-themes'
+import {
+  CodeXml,
+  Eye,
+  Maximize2,
+  RotateCw,
+  Workflow,
+  WrapText,
+} from 'lucide-react'
+
+import { renderMermaid } from '../lib/mermaid'
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from './code-block'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+/** A Mermaid fence adapts the existing shadcn Code Block and Dialog. */
+export function MdxMermaid({
+  value,
+  title,
+  lineNumbers,
+  startLine,
+  preProps,
+}: {
+  value: string
+  title?: string
+  lineNumbers?: boolean
+  startLine?: number
+  preProps: ComponentProps<'pre'>
+}) {
+  const messages = useMessages()
+  const { resolvedTheme } = useTheme()
+  const block = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(false)
+  const [sourceView, setSourceView] = useState(false)
+  const [wrap, setWrap] = useState(false)
+  const [attempt, setAttempt] = useState(0)
+  const [result, setResult] = useState<{
+    source: string
+    theme: string
+    svg?: string
+    error?: boolean
+  }>()
+  const current =
+    result?.source === value && result.theme === resolvedTheme
+      ? result
+      : undefined
+  const svg = current?.svg
+  const error = current?.error
+  const image = svg
+    ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+    : undefined
+  const description = useMemo(() => {
+    if (!svg) return title || messages.diagram
+    const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    return [
+      title || document.querySelector('title')?.textContent || messages.diagram,
+      document.querySelector('desc')?.textContent,
+    ]
+      .filter(Boolean)
+      .join('. ')
+  }, [svg, title, messages.diagram])
+  const label = title || 'Mermaid'
+  const showSource = sourceView || !svg
+
+  useEffect(() => {
+    const element = block.current
+    if (!element) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: '200px' }
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!visible || !resolvedTheme) return
+    let active = true
+    const theme = resolvedTheme
+    void renderMermaid(value, theme === 'dark', () => active).then(
+      (svg) => {
+        if (active && svg) setResult({ source: value, theme, svg })
+      },
+      () => {
+        if (active) setResult({ source: value, theme, error: true })
+      }
+    )
+    return () => {
+      active = false
+    }
+  }, [value, resolvedTheme, visible, attempt])
+
+  return (
+    <CodeBlock
+      ref={block}
+      size="sm"
+      data-rdx-code-block
+      data-rdx-code-mode="mermaid"
+      data-rdx-code-value={value}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle title={label}>
+          <Workflow aria-hidden="true" /> {label}
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          {svg && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              title={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              aria-pressed={sourceView}
+              onClick={() => setSourceView(!sourceView)}
+            >
+              {sourceView ? (
+                <Eye aria-hidden="true" />
+              ) : (
+                <CodeXml aria-hidden="true" />
+              )}
+            </Button>
+          )}
+          {image && (
+            <Dialog>
+              <DialogTrigger
+                render={<Button variant="ghost" size="icon-xs" />}
+                aria-label={messages.enlargeDiagram}
+                title={messages.enlargeDiagram}
+              >
+                <Maximize2 aria-hidden="true" />
+              </DialogTrigger>
+              <DialogContent
+                data-rdx-mermaid-dialog
+                className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-6xl flex-col gap-2 sm:max-w-6xl"
+              >
+                <DialogTitle className="pr-8">
+                  {title || messages.diagram}
+                </DialogTitle>
+                <DialogDescription className="sr-only">
+                  {messages.imagePreviewDescription}
+                </DialogDescription>
+                <div
+                  role="region"
+                  aria-label={messages.diagram}
+                  tabIndex={0}
+                  className="min-h-0 overflow-auto rounded-md p-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <img
+                    src={image}
+                    alt={description}
+                    className="mx-auto h-auto max-w-none"
+                  />
+                </div>
+              </DialogContent>
+            </Dialog>
+          )}
+          {error && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={messages.tryAgain}
+              title={messages.tryAgain}
+              onClick={() => setAttempt(attempt + 1)}
+            >
+              <RotateCw aria-hidden="true" />
+            </Button>
+          )}
+          {showSource && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="md:hidden"
+              aria-label={messages.wrapCode}
+              title={messages.wrapCode}
+              aria-pressed={wrap}
+              onClick={() => setWrap(!wrap)}
+            >
+              <WrapText aria-hidden="true" />
+            </Button>
+          )}
+          <CodeBlockCopyButton value={value} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+      {error && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramError}
+        </p>
+      )}
+      {!current && visible && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramLoading}
+        </p>
+      )}
+      {showSource ? (
+        <CodeBlockContent
+          {...preProps}
+          wrap={wrap}
+          lineNumbers={lineNumbers}
+          startLine={startLine}
+        >
+          {value}
+        </CodeBlockContent>
+      ) : (
+        <div
+          role="region"
+          aria-label={title || messages.diagram}
+          tabIndex={0}
+          data-rdx-mermaid-preview
+          className="min-w-0 overflow-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          <img
+            src={image}
+            alt={description}
+            className="mx-auto h-auto max-w-full"
+          />
+        </div>
+      )}
+    </CodeBlock>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
+import { cn, mergeStateClassName } from '../lib/utils'
+import { useMessages } from '../providers/locale-provider'
+
+import { Button } from './button'
+import { XIcon } from 'lucide-react'
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={mergeStateClassName(
+        'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  closeLabel,
+  portalProps,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+  closeLabel?: string
+  portalProps?: SheetPrimitive.Portal.Props
+}) {
+  const messages = useMessages()
+  return (
+    <SheetPortal {...portalProps}>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={mergeStateClassName(
+          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon aria-hidden="true" />
+            <span className="sr-only">{closeLabel ?? messages.close}</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={mergeStateClassName(
+        'cn-font-heading text-base font-medium text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={mergeStateClassName(
+        'text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/tabs.tsx

@@ -25,8 +25,13 @@ function panelText(node: Node): string {
     )
   )
     return ''
-  if (node.matches('[data-rdx-code-block]')) {
-    return `${node.querySelector('pre')?.textContent ?? ''}\n`
+  if (node.matches('[data-rdx-code-block], [data-slot="code-block"]')) {
+    const pre = node.querySelector('pre')
+    const lines = pre?.querySelectorAll('[data-slot="code-block-line-content"]')
+    const text = lines?.length
+      ? Array.from(lines, (line) => line.textContent ?? '').join('\n')
+      : pre?.textContent
+    return `${node.dataset.rdxCodeValue ?? text ?? ''}\n`
   }
   if (node.tagName === 'PRE') return `${node.textContent ?? ''}\n`
   if (node.tagName === 'BR') return '\n'
@@ -139,6 +144,7 @@ function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
 }
 
 function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  const messages = useMessages()
   return (
     <div
       data-slot="tabs-header"
@@ -146,6 +152,9 @@ function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
     >
       <TabsPrimitive.List
         data-slot="tabs-list"
+        aria-label={
+          props['aria-labelledby'] ? undefined : messages.documentationTabs
+        }
         className={mergeStateClassName(
           'flex min-w-0 flex-1 gap-0.5 overflow-x-auto p-1.5 data-[orientation=vertical]:flex-col',
           className
@@ -162,7 +171,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={mergeStateClassName(
-        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-foreground data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
+        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-rdx-selected data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
         className
       )}
       {...props}

package/src/hooks/use-highlighted-code.ts

@@ -0,0 +1,75 @@
+import * as React from 'react'
+
+import { loadHighlighter } from '../lib/highlighter'
+
+export function useHighlightedCode(value: string, language: string) {
+  // A trailing newline would render as an extra empty line.
+  const code = value.endsWith('\n') ? value.slice(0, -1) : value
+  const [loaded, setLoaded] = React.useState<{
+    language: string
+    highlighter: Awaited<ReturnType<typeof loadHighlighter>>
+  } | null>(null)
+  const highlighter = loaded?.language === language ? loaded.highlighter : null
+
+  React.useEffect(() => {
+    let cancelled = false
+
+    loadHighlighter(language)
+      .then((next) => {
+        if (!cancelled) {
+          setLoaded({ language, highlighter: next })
+        }
+      })
+      .catch(() => {})
+
+    return () => {
+      cancelled = true
+    }
+  }, [language])
+
+  // The complete lines, highlighted. While the code streams, only the new
+  // lines are tokenized, starting from the grammar state of the last one.
+  const [done, setDone] = React.useState<{
+    highlighter: typeof highlighter
+    text: string
+    lines: React.ReactNode[]
+    state?: Parameters<NonNullable<typeof highlighter>['highlight']>[1]
+  }>({ highlighter: null, text: '', lines: [] })
+
+  let next = done
+
+  if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+    next = { highlighter, text: '', lines: [] }
+  }
+
+  const end = code.lastIndexOf('\n') + 1
+
+  if (highlighter && end > next.text.length) {
+    const result = highlighter.highlight(
+      code.slice(next.text.length, end - 1),
+      next.state
+    )
+
+    next = {
+      highlighter,
+      text: code.slice(0, end),
+      lines: [...next.lines, ...result.lines],
+      state: result.state,
+    }
+  }
+
+  if (next !== done) {
+    setDone(next)
+  }
+
+  // The last line is still being written, so it is tokenized on every render.
+  const tail = code.slice(end)
+
+  return React.useMemo(() => {
+    if (!highlighter) {
+      return code.split('\n')
+    }
+
+    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]]
+  }, [code, highlighter, next, tail])
+}

package/src/lib/highlighter.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import {
+  createHighlighterCore,
+  type GrammarState,
+  type HighlighterCore,
+} from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+  bash: () => import('shiki/langs/shellscript.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  diff: () => import('shiki/langs/diff.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+  python: () => import('shiki/langs/python.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+}
+
+const aliases: Record<string, keyof typeof languages> = {
+  js: 'javascript',
+  md: 'markdown',
+  py: 'python',
+  sh: 'bash',
+  shell: 'bash',
+  shellscript: 'bash',
+  ts: 'typescript',
+  yml: 'yaml',
+  zsh: 'bash',
+}
+
+let highlighter: Promise<HighlighterCore> | undefined
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [
+      import('shiki/themes/github-light.mjs'),
+      import('shiki/themes/github-dark.mjs'),
+    ],
+    langs: [],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  })
+
+  return highlighter
+}
+
+function getLanguage(language: string) {
+  const name = language.toLowerCase()
+
+  if (name === 'ansi') {
+    return name
+  }
+
+  if (name in languages) {
+    return name as keyof typeof languages
+  }
+
+  return aliases[name] ?? null
+}
+
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language: string) {
+  const lang = getLanguage(language)
+
+  if (!lang) {
+    return null
+  }
+
+  const shiki = await getHighlighter()
+
+  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languages[lang])
+  }
+
+  return {
+    // Returns one React node per line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code: string, state?: GrammarState) {
+      const tokenize = (text: string) =>
+        shiki.codeToTokens(text, {
+          lang,
+          themes: { light: 'github-light', dark: 'github-dark' },
+          defaultColor: false,
+          grammarState: state,
+        }).tokens
+
+      // ANSI has no grammar state, so each line is tokenized on its own and
+      // gets the same colors whether it arrives in one piece or streams.
+      const tokens =
+        lang === 'ansi'
+          ? code.split('\n').flatMap((line) => tokenize(line))
+          : tokenize(code)
+
+      return {
+        lines: tokens.map((line) =>
+          line.map((token, index) => (
+            <span
+              key={index}
+              style={token.htmlStyle as React.CSSProperties}
+              className="text-(--shiki-light) dark:text-(--shiki-dark)"
+            >
+              {token.content}
+            </span>
+          ))
+        ),
+        state: shiki.getLastGrammarState(tokens),
+      }
+    },
+  }
+}
+
+// Returns one React node per line, or null for a language that is not listed.
+export async function highlightCode(code: string, language: string) {
+  const highlighter = await loadHighlighter(language)
+
+  return highlighter ? highlighter.highlight(code).lines : null
+}