@lexibase/rdx-ui 1.0.0-beta.1 → 1.0.0

package/src/components/copy-code-button.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+import { Button } from './button'
+
+export function CopyCodeButton() {
+  const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
+  const pending = useRef(false)
+  const mounted = useRef(false)
+  const reset = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  useEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+      clearTimeout(reset.current)
+    }
+  }, [])
+
+  async function copy(button: HTMLButtonElement) {
+    if (pending.current) return
+    pending.current = true
+    clearTimeout(reset.current)
+    try {
+      const code = button.closest('[data-rdx-code-block]')?.querySelector('pre')
+      if (!code || !navigator.clipboard?.writeText)
+        throw new Error('Clipboard unavailable')
+      await navigator.clipboard.writeText(code.textContent ?? '')
+      if (mounted.current) {
+        setStatus('copied')
+        reset.current = setTimeout(() => setStatus('idle'), 2000)
+      }
+    } catch {
+      if (mounted.current) setStatus('error')
+    } finally {
+      pending.current = false
+    }
+  }
+
+  const Icon = status === 'copied' ? Check : Copy
+  return (
+    <div className="flex min-w-0 items-center justify-end gap-2">
+      <span
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className={
+          status === 'error' ? 'text-xs text-muted-foreground' : 'sr-only'
+        }
+      >
+        {status === 'copied'
+          ? 'Code copied to clipboard.'
+          : status === 'error'
+            ? 'Could not copy. Select the code and copy it manually.'
+            : ''}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        data-status={status}
+        className="size-7 shrink-0 border-border/70 bg-background/60 p-0 text-muted-foreground shadow-none hover:text-foreground data-[status=copied]:border-emerald-500/30 data-[status=copied]:bg-emerald-500/10 data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:border-amber-500/30 [&>svg]:size-3.5"
+        aria-label="Copy code"
+        title={
+          status === 'copied'
+            ? 'Copied!'
+            : status === 'error'
+              ? 'Could not copy. Try again or copy manually.'
+              : 'Copy code'
+        }
+        onClick={(event) => copy(event.currentTarget)}
+      >
+        <Icon aria-hidden="true" className="size-4" />
+      </Button>
+    </div>
+  )
+}

package/src/components/dialog.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+// shadcn/ui Base Nova Dialog, using the shared RDX theme and buttons.
+import * as React from 'react'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { X } from 'lucide-react'
+import { mergeStateClassName } from '../lib/utils'
+import { Button } from './button'
+
+function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root {...props} />
+}
+function DialogTrigger(
+  props: React.ComponentProps<typeof DialogPrimitive.Trigger>
+) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Popup>) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop
+        data-slot="dialog-overlay"
+        className="fixed inset-0 isolate z-50 bg-black/30 backdrop-blur-xs duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none"
+      />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={mergeStateClassName(
+          'fixed top-[20%] left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 gap-4 rounded-xl bg-popover p-1 text-sm text-popover-foreground ring-1 ring-foreground/10 shadow-lg outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute top-2 right-2 size-7"
+            />
+          }
+          aria-label="Close search"
+        >
+          <X className="size-3.5" />
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  )
+}
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={mergeStateClassName('font-medium', className)}
+      {...props}
+    />
+  )
+}
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={mergeStateClassName('text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription }

package/src/components/docs-search-dialog.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import {
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type RefObject,
+} from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { FileText, Hash, LoaderCircle } from 'lucide-react'
+import type { RdxSearchIndex } from '@lexibase/rdx-types'
+import {
+  prepareSearch,
+  searchDocumentation,
+  type PreparedSearch,
+} from '../lib/docs-search'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog'
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command'
+import { Button } from './button'
+
+const cache = new Map<string, PreparedSearch>()
+
+export function DocsSearchDialog({
+  indexUrl,
+  version,
+  open,
+  onOpenChange,
+  triggerRef,
+}: {
+  indexUrl: string
+  version: string
+  open: boolean
+  onOpenChange: (value: boolean) => void
+  triggerRef: RefObject<HTMLButtonElement | null>
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const [query, setQuery] = useState('')
+  const deferred = useDeferredValue(query)
+  const [state, setState] = useState<{
+    entries?: PreparedSearch
+    error?: boolean
+  }>({})
+  const [retry, setRetry] = useState(0)
+  useEffect(() => {
+    if (!open) return
+    const controller = new AbortController()
+    async function load() {
+      try {
+        const cached =
+          process.env.NODE_ENV === 'production'
+            ? cache.get(indexUrl)
+            : undefined
+        let entries = cached
+        if (!entries) {
+          const response = await fetch(indexUrl, {
+            signal: controller.signal,
+            cache: 'no-store',
+          })
+          if (!response.ok) throw new Error('Search unavailable')
+          entries = prepareSearch((await response.json()) as RdxSearchIndex)
+          if (process.env.NODE_ENV === 'production') {
+            if (cache.size >= 3) cache.delete(cache.keys().next().value!)
+            cache.set(indexUrl, entries)
+          }
+        }
+        if (!controller.signal.aborted) setState({ entries })
+      } catch {
+        if (!controller.signal.aborted) setState({ error: true })
+      }
+    }
+    void load()
+    return () => controller.abort()
+  }, [open, indexUrl, retry])
+  const results = useMemo(
+    () => searchDocumentation(state.entries ?? [], deferred),
+    [state.entries, deferred]
+  )
+  const loading = !state.entries && !state.error
+  function select(href: string) {
+    onOpenChange(false)
+    setQuery('')
+    // Native fragment navigation also scrolls when already on the target page.
+    const url = new URL(href, window.location.origin)
+    if (url.pathname === pathname && url.hash) window.location.assign(url.hash)
+    else router.push(href)
+  }
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent finalFocus={triggerRef}>
+        <DialogTitle className="sr-only">Search documentation</DialogTitle>
+        <DialogDescription className="sr-only">
+          Search pages and sections in {version}. Use arrow keys to choose a
+          result and Enter to open it.
+        </DialogDescription>
+        <Command shouldFilter={false} label="Search documentation">
+          <CommandInput
+            aria-label="Search documentation"
+            placeholder="Search documentation…"
+            value={query}
+            onValueChange={setQuery}
+            maxLength={120}
+          />
+          <div className="px-2 pt-2 pb-1 text-[11px] text-muted-foreground">
+            {version}
+          </div>
+          <CommandList aria-busy={loading}>
+            {loading ? (
+              <div
+                role="status"
+                className="flex justify-center gap-2 p-6 text-sm text-muted-foreground"
+              >
+                <LoaderCircle className="size-4 animate-spin motion-reduce:animate-none" />
+                Loading search…
+              </div>
+            ) : state.error ? (
+              <div
+                role="status"
+                className="p-4 text-center text-sm text-muted-foreground"
+              >
+                Search is unavailable.{' '}
+                <Button
+                  variant="link"
+                  size="sm"
+                  onClick={() => {
+                    setState({})
+                    setRetry((value) => value + 1)
+                  }}
+                >
+                  Try again
+                </Button>
+              </div>
+            ) : !query.trim() ? (
+              <div className="px-4 py-6 text-center text-sm text-muted-foreground">
+                Type to search this documentation.
+              </div>
+            ) : (
+              <>
+                <CommandEmpty>No results found.</CommandEmpty>
+                {results.map((entry) => (
+                  <CommandItem
+                    key={entry.href}
+                    value={entry.href}
+                    onSelect={() => select(entry.href)}
+                  >
+                    {entry.section ? (
+                      <Hash className="size-4 shrink-0 self-start mt-1 text-muted-foreground" />
+                    ) : (
+                      <FileText className="size-4 shrink-0 self-start mt-1 text-muted-foreground" />
+                    )}
+                    <div className="min-w-0">
+                      <div className="text-[11px] text-muted-foreground">
+                        {entry.category}
+                        {entry.section && ` · ${entry.title}`}
+                      </div>
+                      <div className="font-medium leading-5">
+                        {entry.section || entry.title}
+                      </div>
+                      {entry.excerpt && (
+                        <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                          {entry.excerpt}
+                        </p>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </>
+            )}
+          </CommandList>
+          <div className="border-t px-2 py-2 text-[10px] text-muted-foreground">
+            ↑ ↓ Navigate <span className="mx-2">↵ Open</span> Esc Close
+          </div>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/docs-search.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
+import { Search } from 'lucide-react'
+import { Button } from './button'
+
+const SearchDialog = dynamic(
+  () =>
+    import('./docs-search-dialog').then((module) => module.DocsSearchDialog),
+  { ssr: false }
+)
+
+/** Only the small trigger/shortcut is loaded until the first search opens. */
+export function DocsSearch({
+  indexUrl,
+  version,
+}: {
+  indexUrl: string
+  version: string
+}) {
+  const [open, setOpen] = useState(false)
+  const [activated, setActivated] = useState(false)
+  const trigger = useRef<HTMLButtonElement | null>(null)
+  function show() {
+    setActivated(true)
+    setOpen(true)
+  }
+  useEffect(() => {
+    function shortcut(event: KeyboardEvent) {
+      if (
+        event.key.toLowerCase() !== 'k' ||
+        (!event.ctrlKey && !event.metaKey) ||
+        event.altKey ||
+        event.isComposing ||
+        event.repeat
+      )
+        return
+      event.preventDefault()
+      setActivated(true)
+      setOpen((value) => !value)
+    }
+    document.addEventListener('keydown', shortcut)
+    return () => document.removeEventListener('keydown', shortcut)
+  }, [])
+  return (
+    <>
+      <Button
+        ref={trigger}
+        data-rdx-search-trigger
+        variant="outline"
+        size="sm"
+        aria-label="Search documentation"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={show}
+        className="h-8 gap-2 px-2 text-muted-foreground sm:min-w-40 sm:justify-start"
+      >
+        <Search className="size-3.5" />
+        <span className="hidden sm:inline">Search…</span>
+        <kbd
+          className="ml-auto hidden rounded border px-1 text-[10px] text-muted-foreground sm:inline"
+          aria-hidden="true"
+        >
+          ⌘ / Ctrl K
+        </kbd>
+      </Button>
+      {activated && (
+        <SearchDialog
+          key={indexUrl}
+          indexUrl={indexUrl}
+          version={version}
+          open={open}
+          onOpenChange={setOpen}
+          triggerRef={trigger}
+        />
+      )}
+    </>
+  )
+}

package/src/components/docs-sidebar.tsx

@@ -2,9 +2,9 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { SidebarClose, SidebarOpen } from 'lucide-react'
-import Link from 'next/link'
 
 import { Button } from './button'
+import { ButtonLink } from './button-link'
 import { Separator } from './separator'
 
 export type SidebarCategory = {
@@ -19,15 +19,13 @@ export function DocsSidebar({
   categories: SidebarCategory[]
   pathname: string
 }) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [openPath, setOpenPath] = useState<string | null>(null)
+  const isOpen = openPath === pathname
   const dialog = useRef<HTMLDialogElement>(null)
   useEffect(() => {
     if (isOpen && !dialog.current?.open) dialog.current?.showModal()
     if (!isOpen && dialog.current?.open) dialog.current?.close()
   }, [isOpen])
-  useEffect(() => {
-    setIsOpen(false)
-  }, [pathname])
   const content = (
     <nav aria-label="Documentation pages">
       {categories.map((category, index) => (
@@ -39,24 +37,19 @@ export function DocsSidebar({
             {category.title}
           </p>
           {category.links.map((link) => (
-            <Button
+            <ButtonLink
               key={link.href}
               variant="ghost"
               size="sm"
-              className="justify-start"
               active={pathname === link.href}
-              asChild
               aria-label={link.label}
+              href={link.href}
+              onClick={() => setOpenPath(null)}
+              aria-current={pathname === link.href ? 'page' : undefined}
+              className="justify-start text-sm text-primary"
             >
-              <Link
-                className="text-sm text-primary"
-                href={link.href}
-                onClick={() => setIsOpen(false)}
-                aria-current={pathname === link.href ? 'page' : undefined}
-              >
-                {link.label}
-              </Link>
-            </Button>
+              {link.label}
+            </ButtonLink>
           ))}
           {index < categories.length - 1 && <Separator className="my-4" />}
         </div>
@@ -68,7 +61,7 @@ export function DocsSidebar({
       <div className="md:hidden absolute top-2 left-4 z-30">
         <Button
           variant="ghost"
-          onClick={() => setIsOpen(true)}
+          onClick={() => setOpenPath(pathname)}
           aria-label="Open sidebar"
         >
           <SidebarOpen className="size-4" />
@@ -83,13 +76,13 @@ export function DocsSidebar({
       <dialog
         ref={dialog}
         aria-label="Documentation navigation"
-        onClose={() => setIsOpen(false)}
+        onClose={() => setOpenPath(null)}
         className="fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none bg-background text-foreground border-0 p-4 backdrop:bg-black/40"
       >
         <div className="flex justify-end mb-4">
           <Button
             variant="ghost"
-            onClick={() => setIsOpen(false)}
+            onClick={() => setOpenPath(null)}
             aria-label="Close sidebar"
           >
             <SidebarClose className="size-4" />