@lexibase/rdx-ui 2.0.0 → 3.1.0

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

@@ -0,0 +1,203 @@
+'use client'
+
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react'
+import { CodeXml, FolderTree, GitCompareArrows, WrapText } from 'lucide-react'
+import { motion } from 'motion/react'
+
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+  CodeBlockFooter,
+} from './code-block'
+
+// Keep native pre events separate from Motion's gesture event props.
+const AnimatedCodeBlockContent = motion.create(function PreviewContent({
+  preProps,
+  ...props
+}: ComponentProps<typeof CodeBlockContent> & {
+  preProps: ComponentProps<'pre'>
+}) {
+  return <CodeBlockContent {...preProps} {...props} />
+})
+
+/** The wrap action follows shadcn's stateful Code Block composition. */
+export function MdxCodeBlockView({
+  label,
+  mode,
+  value,
+  lineNumbers,
+  startLine,
+  preProps,
+  children,
+}: {
+  label: string
+  mode?: 'folder' | 'diff'
+  value: string
+  lineNumbers?: boolean
+  startLine?: number
+  preProps: ComponentProps<'pre'>
+  children: ReactNode
+}) {
+  const [wrap, setWrap] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const [previewHeight, setPreviewHeight] = useState<number | null>(null)
+  const [fullHeight, setFullHeight] = useState(0)
+  const [animateSize, setAnimateSize] = useState(false)
+  const blockRef = useRef<HTMLDivElement>(null)
+  const generatedId = useId()
+  const contentId = preProps.id ?? generatedId
+  const collapsed = previewHeight !== null && !expanded
+  const contentStyle: CSSProperties = {
+    ...preProps.style,
+    ...(previewHeight !== null && {
+      height: 'var(--rdx-code-preview-height)',
+    }),
+  }
+  const messages = useMessages()
+
+  useEffect(() => {
+    const pre = blockRef.current?.querySelector<HTMLElement>(
+      '[data-slot="code-block-content"]'
+    )
+    const code = pre?.querySelector('code')
+    if (!pre || !code) return
+    const desktop = window.matchMedia('(min-width: 768px)')
+    let frame = 0
+    let observer: ResizeObserver | undefined
+    const measure = () => {
+      if (desktop.matches) return
+      const style = getComputedStyle(pre)
+      const lineHeight = parseFloat(style.lineHeight)
+      const padding =
+        parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+      if (!Number.isFinite(lineHeight)) return
+      const limit = lineHeight * 12 + padding
+      const height = code.getBoundingClientRect().height + padding
+      setFullHeight(height)
+      setPreviewHeight(height > limit + 1 ? limit : null)
+    }
+    const schedule = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(measure)
+    }
+    const updateViewport = () => {
+      setAnimateSize(false)
+      observer?.disconnect()
+      cancelAnimationFrame(frame)
+      if (desktop.matches) {
+        setPreviewHeight(null)
+        return
+      }
+      observer = new ResizeObserver(schedule)
+      observer.observe(code)
+      observer.observe(pre)
+      schedule()
+    }
+    updateViewport()
+    desktop.addEventListener('change', updateViewport)
+    return () => {
+      observer?.disconnect()
+      cancelAnimationFrame(frame)
+      desktop.removeEventListener('change', updateViewport)
+    }
+  }, [value])
+  const Icon =
+    mode === 'folder'
+      ? FolderTree
+      : mode === 'diff'
+        ? GitCompareArrows
+        : CodeXml
+  return (
+    <CodeBlock
+      size="sm"
+      ref={blockRef}
+      data-rdx-code-block
+      data-rdx-code-mode={mode}
+      data-rdx-code-value={value}
+      data-rdx-code-collapsed={collapsed || undefined}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle title={label}>
+          <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={() => {
+              setAnimateSize(false)
+              setWrap(!wrap)
+            }}
+          >
+            <WrapText aria-hidden="true" />
+          </Button>
+          <CodeBlockCopyButton value={value} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+      <AnimatedCodeBlockContent
+        preProps={preProps}
+        initial={false}
+        animate={{
+          '--rdx-code-preview-height': `${previewHeight === null ? 0 : expanded ? fullHeight : previewHeight}px`,
+        }}
+        transition={{
+          duration: animateSize ? 0.28 : 0,
+          ease: [0.22, 1, 0.36, 1],
+        }}
+        id={contentId}
+        style={contentStyle}
+        wrap={wrap}
+        lineNumbers={lineNumbers}
+        startLine={startLine}
+        className={[
+          preProps.className,
+          'data-wrap:wrap-anywhere',
+          previewHeight !== null && 'overflow-y-hidden',
+          collapsed && 'scroll-fade-y',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {children}
+      </AnimatedCodeBlockContent>
+      {previewHeight !== null && (
+        <CodeBlockFooter className="justify-center md:hidden">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-xs"
+            aria-expanded={expanded}
+            aria-controls={contentId}
+            onClick={() => {
+              setAnimateSize(
+                !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+              )
+              setExpanded(!expanded)
+            }}
+          >
+            {expanded ? messages.showLess : messages.showMore}
+          </Button>
+        </CodeBlockFooter>
+      )}
+    </CodeBlock>
+  )
+}

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

@@ -0,0 +1,161 @@
+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'
+import { MdxFolderTree } from './mdx-folder-tree'
+import { MdxMermaid } from './mdx-mermaid'
+
+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,
+  'data-rdx-code-title': title,
+  'data-rdx-code-line-numbers': numbered,
+  'data-rdx-code-start-line': firstLine,
+  ...props
+}: ComponentProps<'pre'> & {
+  'data-rdx-code-mode'?: 'folder' | 'diff' | 'mermaid'
+  'data-rdx-code-title'?: string
+  'data-rdx-code-line-numbers'?: string
+  'data-rdx-code-start-line'?: string
+}) {
+  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)
+  if (mode === 'mermaid' || language?.toLowerCase() === 'mermaid') {
+    return (
+      <MdxMermaid
+        value={value}
+        title={title}
+        lineNumbers={numbered === 'true'}
+        startLine={firstLine === undefined ? undefined : Number(firstLine)}
+        preProps={props}
+      />
+    )
+  }
+  const label =
+    title ||
+    (mode === 'folder' ? messages.folderTree : (language ?? messages.code))
+  const lineNumbers = numbered === 'true'
+  const raw = codeProps?.children ?? children
+  const nodes = Children.toArray(raw)
+  type LineProps = {
+    children?: ReactNode
+    className?: string
+    'data-rdx-line-variant'?: string
+  }
+  const lines = nodes.filter(
+    (node) =>
+      isValidElement<LineProps>(node) &&
+      (node.props['data-rdx-line-variant'] ||
+        node.props.className?.split(/\s+/).includes('line'))
+  )
+  const lastLine = lines.at(-1)
+  const content =
+    mode === 'folder' ? (
+      <MdxFolderTree value={value} />
+    ) : (mode === 'diff' || lineNumbers) && typeof raw !== 'string' ? (
+      nodes.map((node) => {
+        if (lineNumbers && node === '\n') return null
+        if (!isValidElement<LineProps>(node)) return node
+        const variant = node.props['data-rdx-line-variant']
+        if (
+          !variant &&
+          !(lineNumbers && node.props.className?.split(/\s+/).includes('line'))
+        )
+          return node
+        // A final newline terminates the last source line; intentional blank
+        // lines before it still receive the official component's own number.
+        if (
+          lineNumbers &&
+          lines.length > 1 &&
+          node === lastLine &&
+          value.endsWith('\n') &&
+          textOf(node.props.children) === ''
+        )
+          return null
+        return (
+          <CodeBlockLine
+            key={node.key}
+            variant={
+              variant === 'added' || variant === 'removed'
+                ? variant
+                : variant === 'hunk'
+                  ? 'highlighted'
+                  : 'default'
+            }
+          >
+            {variant === 'added' || variant === 'removed'
+              ? withoutMarker(node.props.children)
+              : node.props.children}
+          </CodeBlockLine>
+        )
+      })
+    ) : (
+      raw
+    )
+  return (
+    <MdxCodeBlockView
+      label={label}
+      mode={mode}
+      value={value}
+      lineNumbers={lineNumbers}
+      startLine={firstLine === undefined ? undefined : Number(firstLine)}
+      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,13 @@ export const mdxComponents = {
       {...props}
     />
   ),
-  a: ({ className, ...props }: ComponentProps<'a'>) => (
-    <a
-      className={cn('underline text-chart-1 text-blue-500', className)}
-      {...props}
-    />
+  a: ({ className, children, ...props }: ComponentProps<'a'>) => (
+    <a className={cn('underline text-rdx-highlighting', className)} {...props}>
+      {linkedImages(children)}
+    </a>
   ),
   blockquote: Blockquote,
-  pre: CodeBlock,
+  pre: MdxCodeBlock,
   code: ({ className, ...props }: ComponentProps<'code'>) => (
     <code
       className={cn(
@@ -106,13 +133,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 +144,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 +187,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-folder-tree.tsx

@@ -0,0 +1,58 @@
+import {
+  File,
+  FileCode2,
+  FileImage,
+  FileJson,
+  FileText,
+  Folder,
+} from 'lucide-react'
+
+import { CodeBlockLine } from './code-block'
+
+function entryIcon(name: string) {
+  if (name.endsWith('/')) return { Icon: Folder, kind: 'folder' }
+  const extension = name.includes('.')
+    ? name.split('.').at(-1)?.toLowerCase()
+    : undefined
+  if (extension === 'json' || extension === 'jsonc')
+    return { Icon: FileJson, kind: 'json' }
+  if (extension && /^(?:png|jpe?g|gif|webp|svg|avif|ico|bmp)$/.test(extension))
+    return { Icon: FileImage, kind: 'image' }
+  if (extension && /^(?:mdx?|txt|log|rst)$/.test(extension))
+    return { Icon: FileText, kind: 'text' }
+  if (
+    extension &&
+    /^(?:[cm]?[jt]sx?|html|css|scss|vue|svelte|py|rb|go|rs|java|c|cpp|h|cs|php|sql|sh|bash|ya?ml|toml)$/.test(
+      extension
+    )
+  )
+    return { Icon: FileCode2, kind: 'code' }
+  return { Icon: File, kind: 'file' }
+}
+
+/** Decorate generated text with icons inside the official shadcn line component. */
+export function MdxFolderTree({ value }: { value: string }) {
+  const trailingNewline = value.endsWith('\n')
+  const lines = value.replace(/\n$/, '').split('\n')
+  return lines.map((line, index) => {
+    const match = line.match(/^([ │\t]*(?:├──|└──)\s*)(.*)$/)
+    const prefix = match?.[1] ?? line.match(/^[ │\t]*/)?.[0] ?? ''
+    const name = match?.[2] ?? line.slice(prefix.length)
+    const { Icon, kind } = entryIcon(name)
+    return (
+      <CodeBlockLine key={index} data-rdx-folder-kind={name ? kind : undefined}>
+        {prefix && <span aria-hidden="true">{prefix}</span>}
+        {name && (
+          <>
+            <Icon
+              aria-hidden="true"
+              className="mr-1.5 inline-block size-3.5 align-[-2px] text-muted-foreground"
+            />
+            {name}
+          </>
+        )}
+        {index < lines.length - 1 || trailingNewline ? '\n' : null}
+      </CodeBlockLine>
+    )
+  })
+}

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