@lexibase/rdx-ui 2.0.0 → 3.0.0

package/src/components/dialog.tsx

@@ -1,79 +1,166 @@
 'use client'
 
-import { useMessages } from '../providers/locale-provider'
-
-// 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 { cn, mergeStateClassName } from '../lib/utils'
+
 import { Button } from './button'
+import { XIcon } from 'lucide-react'
+import { useMessages } from '../providers/locale-provider'
 
-function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root {...props} />
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
-function DialogTrigger(
-  props: React.ComponentProps<typeof DialogPrimitive.Trigger>
-) {
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={mergeStateClassName(
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs 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',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 function DialogContent({
   className,
   children,
+  showCloseButton = true,
+  closeLabel,
+  overlayClassName,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Popup>) {
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+  closeLabel?: string
+  overlayClassName?: DialogPrimitive.Backdrop.Props['className']
+}) {
   const messages = useMessages()
   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"
-      />
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} />
       <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',
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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={messages.closeSearch}
-        >
-          <X className="size-3.5" />
-        </DialogPrimitive.Close>
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">{closeLabel ?? messages.close}</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Popup>
-    </DialogPrimitive.Portal>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
   )
 }
-function DialogTitle({
+
+function DialogFooter({
   className,
+  showCloseButton = false,
+  children,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
+  const messages = useMessages()
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          {messages.close}
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
-      className={mergeStateClassName('font-medium', className)}
+      data-slot="dialog-title"
+      className={mergeStateClassName(
+        'cn-font-heading text-base leading-none font-medium',
+        className
+      )}
       {...props}
     />
   )
 }
+
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
-      className={mergeStateClassName('text-muted-foreground', className)}
+      data-slot="dialog-description"
+      className={mergeStateClassName(
+        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className
+      )}
       {...props}
     />
   )
 }
-export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription }
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

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

@@ -99,7 +99,12 @@ export function DocsSearchDialog({
   }
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent finalFocus={triggerRef}>
+      <DialogContent
+        finalFocus={triggerRef}
+        closeLabel={messages.closeSearch}
+        overlayClassName="bg-black/30"
+        className="top-[20%] w-[calc(100%-2rem)] max-w-lg translate-y-0 p-1 shadow-lg sm:max-w-lg"
+      >
         <DialogTitle className="sr-only">
           {messages.searchDocumentation}
         </DialogTitle>

package/src/components/mdx-code-block-view.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import { CodeXml, FolderTree, GitCompareArrows, WrapText } from 'lucide-react'
+
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from './code-block'
+
+/** The wrap action follows shadcn's stateful Code Block composition. */
+export function MdxCodeBlockView({
+  label,
+  mode,
+  value,
+  preProps,
+  children,
+}: {
+  label: string
+  mode?: 'folder' | 'diff'
+  value: string
+  preProps: ComponentProps<'pre'>
+  children: ReactNode
+}) {
+  const [wrap, setWrap] = useState(false)
+  const messages = useMessages()
+  const Icon =
+    mode === 'folder'
+      ? FolderTree
+      : mode === 'diff'
+        ? GitCompareArrows
+        : CodeXml
+  return (
+    <CodeBlock
+      size="sm"
+      data-rdx-code-block
+      data-rdx-code-mode={mode}
+      data-rdx-code-value={value}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle>
+          <Icon aria-hidden="true" /> {label}
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          <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>
+      <CodeBlockContent
+        {...preProps}
+        wrap={wrap}
+        className={[preProps.className, 'data-wrap:wrap-anywhere']
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {children}
+      </CodeBlockContent>
+    </CodeBlock>
+  )
+}

package/src/components/mdx-code-block.tsx

@@ -0,0 +1,108 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactNode,
+} from 'react'
+
+import { getMessages } from '../lib/i18n'
+import { CodeBlockLine } from './code-block'
+import { MdxCodeBlockView } from './mdx-code-block-view'
+
+function textOf(children: ReactNode): string {
+  return Children.toArray(children)
+    .map((child) =>
+      typeof child === 'string' || typeof child === 'number'
+        ? String(child)
+        : isValidElement<{ children?: ReactNode }>(child)
+          ? textOf(child.props.children)
+          : ''
+    )
+    .join('')
+}
+
+// Shadcn draws diff markers itself. Strip the original marker from highlighted
+// tokens while keeping the original patch as the clipboard value.
+function withoutMarker(children: ReactNode): ReactNode {
+  let remaining = 1
+  function strip(nodes: ReactNode): ReactNode {
+    return Children.map(nodes, (node) => {
+      if (!remaining) return node
+      if (typeof node === 'string') {
+        const value = node.slice(remaining)
+        remaining = Math.max(0, remaining - node.length)
+        return value
+      }
+      return isValidElement<{ children?: ReactNode }>(node)
+        ? cloneElement(node, {}, strip(node.props.children))
+        : node
+    })
+  }
+  return strip(children)
+}
+
+/** Translate Markdown fences to the complete shadcn Code Block composition. */
+export function MdxCodeBlock({
+  lang,
+  children,
+  'data-rdx-code-mode': mode,
+  ...props
+}: ComponentProps<'pre'> & { 'data-rdx-code-mode'?: 'folder' | 'diff' }) {
+  const messages = getMessages(lang)
+  const code = Children.toArray(children).find((child) => isValidElement(child))
+  const codeProps = isValidElement<{
+    className?: string
+    children?: ReactNode
+  }>(code)
+    ? code.props
+    : undefined
+  const language = codeProps?.className?.match(/(?:^|\s)language-([^\s]+)/)?.[1]
+  const value = textOf(codeProps?.children ?? children)
+  const label =
+    mode === 'folder' ? messages.folderTree : (language ?? messages.code)
+  const content =
+    mode === 'diff'
+      ? Children.map(codeProps?.children, (node) => {
+          if (
+            !isValidElement<{
+              children?: ReactNode
+              'data-rdx-line-variant'?: string
+            }>(node)
+          )
+            return node
+          const variant = node.props['data-rdx-line-variant']
+          if (!variant) return node
+          return (
+            <CodeBlockLine
+              variant={
+                variant === 'added' || variant === 'removed'
+                  ? variant
+                  : variant === 'hunk'
+                    ? 'highlighted'
+                    : 'default'
+              }
+            >
+              {variant === 'added' || variant === 'removed'
+                ? withoutMarker(node.props.children)
+                : node.props.children}
+            </CodeBlockLine>
+          )
+        })
+      : (codeProps?.children ?? children)
+  return (
+    <MdxCodeBlockView
+      label={label}
+      mode={mode}
+      value={value}
+      preProps={{
+        ...props,
+        className: [props.className, language && `language-${language}`]
+          .filter(Boolean)
+          .join(' '),
+      }}
+    >
+      {content}
+    </MdxCodeBlockView>
+  )
+}

package/src/components/mdx-components.tsx

@@ -1,7 +1,14 @@
 import { getMessages } from '../lib/i18n'
-import type { ComponentProps } from 'react'
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactNode,
+} from 'react'
 
 import { cn } from '../lib/utils'
+import { MdxImage } from './mdx-image'
 import {
   Accordion,
   AccordionContent,
@@ -10,7 +17,17 @@ import {
 } from './accordion'
 import { Blockquote } from './blockquote'
 import { Callout } from './callout'
-import { CodeBlock } from './code-block'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockLine,
+  CodeBlockTitle,
+} from './code-block'
+import { MdxCodeBlock } from './mdx-code-block'
 import { Kbd, KbdGroup } from './kbd'
 import {
   Table,
@@ -25,6 +42,17 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import { Separator } from '@lexibase/rdx-ui/components/separator'
 
+function linkedImages(children: ReactNode): ReactNode {
+  return Children.map(children, (child) => {
+    if (!isValidElement<{ children?: ReactNode; zoom?: boolean }>(child))
+      return child
+    if (child.type === MdxImage) return cloneElement(child, { zoom: false })
+    return child.props.children
+      ? cloneElement(child, {}, linkedImages(child.props.children))
+      : child
+  })
+}
+
 function MdxTable({ lang, className, ...props }: ComponentProps<'table'>) {
   return (
     <Table
@@ -76,14 +104,16 @@ export const mdxComponents = {
       {...props}
     />
   ),
-  a: ({ className, ...props }: ComponentProps<'a'>) => (
+  a: ({ className, children, ...props }: ComponentProps<'a'>) => (
     <a
       className={cn('underline text-chart-1 text-blue-500', className)}
       {...props}
-    />
+    >
+      {linkedImages(children)}
+    </a>
   ),
   blockquote: Blockquote,
-  pre: CodeBlock,
+  pre: MdxCodeBlock,
   code: ({ className, ...props }: ComponentProps<'code'>) => (
     <code
       className={cn(
@@ -106,13 +136,7 @@ export const mdxComponents = {
   hr: ({ className, ...props }: ComponentProps<'hr'>) => (
     <hr className={cn('my-8 border-border', className)} {...props} />
   ),
-  img: ({ className, alt = '', ...props }: ComponentProps<'img'>) => (
-    <img
-      alt={alt}
-      className={cn('max-w-full h-auto rounded-md my-4', className)}
-      {...props}
-    />
-  ),
+  img: MdxImage,
   table: MdxTable,
   thead: TableHeader,
   tbody: TableBody,
@@ -123,6 +147,14 @@ export const mdxComponents = {
     <TableHead scope={scope} className={className} {...props} />
   ),
   td: TableCell,
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockLine,
+  CodeBlockTitle,
   Kbd,
   KbdGroup,
   Table,
@@ -158,7 +190,9 @@ export const mdxComponents = {
 export function getMdxComponents(lang?: string) {
   return {
     ...mdxComponents,
-    pre: (props: ComponentProps<'pre'>) => <CodeBlock {...props} lang={lang} />,
+    pre: (props: ComponentProps<'pre'>) => (
+      <MdxCodeBlock {...props} lang={lang} />
+    ),
     table: (props: ComponentProps<'table'>) => (
       <MdxTable {...props} lang={lang} />
     ),

package/src/components/mdx-image.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+
+import { formatMessage } from '../lib/i18n'
+import { cn } from '../lib/utils'
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+/** Markdown images keep their normal appearance and use shadcn Dialog to expand. */
+export function MdxImage({
+  className,
+  alt = '',
+  zoom = true,
+  ...props
+}: ComponentProps<'img'> & { zoom?: boolean }) {
+  const messages = useMessages()
+  const image = (
+    <img
+      {...props}
+      alt={alt}
+      className={cn('max-w-full h-auto rounded-md my-4', className)}
+    />
+  )
+  // Decorative images and images inside links retain their original semantics.
+  if (!zoom || !alt.trim() || !props.src) return image
+  return (
+    <Dialog>
+      <DialogTrigger
+        data-rdx-image-trigger
+        aria-label={formatMessage(messages.enlargeImage, { alt })}
+        title={formatMessage(messages.enlargeImage, { alt })}
+        render={
+          <Button
+            variant="ghost"
+            className="h-auto max-w-full cursor-zoom-in p-0 align-middle hover:bg-transparent dark:hover:bg-transparent"
+          />
+        }
+      >
+        {image}
+      </DialogTrigger>
+      <DialogContent
+        data-rdx-image-dialog
+        closeLabel={messages.closeImage}
+        overlayClassName="bg-black/70"
+        className="flex max-h-[calc(100dvh-2rem)] w-max max-w-[calc(100vw-2rem)] flex-col gap-0 p-2 sm:max-w-[calc(100vw-4rem)] [&>[data-slot=dialog-close]]:bg-popover/90"
+      >
+        <DialogTitle className="sr-only">{alt}</DialogTitle>
+        <DialogDescription className="sr-only">
+          {messages.imagePreviewDescription}
+        </DialogDescription>
+        <img
+          src={props.src}
+          srcSet={props.srcSet}
+          sizes={props.srcSet ? 'calc(100vw - 4rem)' : undefined}
+          crossOrigin={props.crossOrigin}
+          referrerPolicy={props.referrerPolicy}
+          alt={alt}
+          loading="eager"
+          decoding="async"
+          className="h-auto max-h-[calc(100dvh-4rem)] w-auto max-w-full self-center rounded-md object-contain"
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

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'

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