@lexibase/rdx-ui 1.1.0 → 3.0.0

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,6 +1,14 @@
-import type { ComponentProps } from 'react'
+import { getMessages } from '../lib/i18n'
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactNode,
+} from 'react'
 
 import { cn } from '../lib/utils'
+import { MdxImage } from './mdx-image'
 import {
   Accordion,
   AccordionContent,
@@ -9,10 +17,59 @@ 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,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table'
 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
+      containerProps={{
+        'data-slot': 'mdx-table-scroll',
+        role: 'region',
+        'aria-label': getMessages(lang).table,
+        tabIndex: 0,
+        className:
+          'my-6 min-w-0 max-w-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+      }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
 export const mdxComponents = {
   h1: ({ className, ...props }: ComponentProps<'h1'>) => (
     <h1 className={cn('text-4xl font-bold my-6', className)} {...props} />
@@ -47,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(
@@ -77,49 +136,35 @@ 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}
-    />
-  ),
-  table: ({ className, ...props }: ComponentProps<'table'>) => (
-    <div
-      data-slot="mdx-table-scroll"
-      role="region"
-      aria-label="Table"
-      tabIndex={0}
-      className="my-6 min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-    >
-      <table
-        className={cn(
-          'w-full border-separate border-spacing-0 text-sm [&_tbody>tr]:transition-colors motion-reduce:[&_tbody>tr]:transition-none [&_tbody>tr:nth-child(even)]:bg-muted/20 [&_tbody>tr:hover]:bg-muted/40 [&_tbody>tr:last-child>td]:border-b-0',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  ),
+  img: MdxImage,
+  table: MdxTable,
+  thead: TableHeader,
+  tbody: TableBody,
+  tfoot: TableFooter,
+  tr: TableRow,
+  caption: TableCaption,
   th: ({ className, scope = 'col', ...props }: ComponentProps<'th'>) => (
-    <th
-      scope={scope}
-      className={cn(
-        'border-b border-r border-border bg-muted/40 px-4 py-3 text-left text-xs font-semibold tracking-wide text-foreground/90 last:border-r-0',
-        className
-      )}
-      {...props}
-    />
-  ),
-  td: ({ className, ...props }: ComponentProps<'td'>) => (
-    <td
-      className={cn(
-        'min-w-40 border-b border-r border-border/70 px-4 py-3 align-top leading-6 last:border-r-0',
-        className
-      )}
-      {...props}
-    />
-  ),
+    <TableHead scope={scope} className={className} {...props} />
+  ),
+  td: TableCell,
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockLine,
+  CodeBlockTitle,
+  Kbd,
+  KbdGroup,
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
   Callout,
   Accordion,
   AccordionItem,
@@ -140,3 +185,16 @@ export const mdxComponents = {
     />
   ),
 }
+
+/** Bind server-rendered MDX labels to the same locale as interactive components. */
+export function getMdxComponents(lang?: string) {
+  return {
+    ...mdxComponents,
+    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/mode-toggle.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { SunMoon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Button } from '@lexibase/rdx-ui/components/button'
 
 export function ModeToggle() {
+  const messages = useMessages()
   const { theme, setTheme } = useTheme()
 
   const toggleTheme = () => {
@@ -17,10 +20,10 @@ export function ModeToggle() {
       size="icon"
       variant="ghost"
       onClick={toggleTheme}
-      aria-label="Mode Toggle"
+      aria-label={messages.modeToggle}
     >
       <SunMoon className="h-[1.2rem] w-[1.2rem]" />
-      <span className="sr-only">colorTheme</span>
+      <span className="sr-only">{messages.modeToggle}</span>
     </Button>
   )
 }

package/src/components/navbar.tsx

@@ -1,13 +1,15 @@
+import { getMessages } from '../lib/i18n'
 import type { ReactNode } from 'react'
 import { Github } from 'lucide-react'
 
-import { ButtonLink } from './button-link'
+import { Button } from './button'
 import { Logo } from './logo'
 import { Separator } from './separator'
 import { ModeToggle } from './mode-toggle'
 
 /** Shared composition extracted from apps/web/components/layout/Navbar. */
 export function Navbar({
+  lang,
   title = '',
   siteTitle = 'RDX',
   logo = <Logo className="size-5" />,
@@ -19,6 +21,7 @@ export function Navbar({
   github,
   showToggleMode = false,
 }: {
+  lang?: string
   title?: string
   siteTitle?: string
   logo?: ReactNode
@@ -30,14 +33,15 @@ export function Navbar({
   github?: { visible: boolean; url: string }
   showToggleMode?: boolean
 }) {
+  const messages = getMessages(lang)
   return (
     <nav
       data-rdx-navbar
-      aria-label="Main navigation"
+      aria-label={messages.mainNavigation}
       className="w-full flex flex-wrap shrink-0 items-center justify-between px-6 py-2 border-b border-border gap-y-2"
     >
       <div className="flex items-center gap-1">
-        <ButtonLink
+        <Button
           variant="ghost"
           size={title === '' ? 'icon' : 'default'}
           aria-label={siteTitle}
@@ -46,20 +50,20 @@ export function Navbar({
         >
           {logo}
           {title !== '' && <span>{title}</span>}
-        </ButtonLink>
+        </Button>
       </div>
       <div className="flex items-center gap-x-1 md:gap-x-2 h-4">
         {search}
         {versionMenu}
         {docsLink ?? (
-          <ButtonLink variant="link" size="sm" href={docsHref}>
-            Docs
-          </ButtonLink>
+          <Button variant="link" size="sm" href={docsHref}>
+            {messages.docs}
+          </Button>
         )}
         {github?.visible && github.url && (
           <>
             <Separator orientation="vertical" />
-            <ButtonLink
+            <Button
               variant="ghost"
               size="icon"
               title="GitHub"
@@ -71,7 +75,7 @@ export function Navbar({
             >
               <Github className="h-[1.2rem] w-[1.2rem]" />
               <span className="sr-only">GitHub</span>
-            </ButtonLink>
+            </Button>
           </>
         )}
         {showToggleMode && (

package/src/components/not-found.tsx

@@ -0,0 +1,36 @@
+import { getMessages } from '../lib/i18n'
+import { Button } from './button'
+
+/** The development website's 404 layout, shared with generated projects. */
+export function NotFound({
+  href = '/docs',
+  lang,
+}: {
+  href?: string
+  lang?: string
+}) {
+  const messages = getMessages(lang)
+
+  return (
+    <main
+      id="rdx-main"
+      data-rdx-not-found
+      tabIndex={-1}
+      className="bg-transparent text-primary h-full min-h-0 w-full flex flex-1 items-center justify-center cursor-default p-7 outline-none"
+    >
+      <div className="w-full md:w-1/2">
+        <h1 className="text-9xl font-bold font-mono text-center">404</h1>
+        <article className="flex flex-col gap-y-5">
+          <p className="text-3xl font-bold font-mono text-center">
+            {messages.notFound}
+          </p>
+          <p className="text-sm">{messages.notFoundDescription}</p>
+          <p className="text-sm">{messages.brokenLink}</p>
+          <Button variant="primary" href={href}>
+            {messages.backToDocs}
+          </Button>
+        </article>
+      </div>
+    </main>
+  )
+}

package/src/components/table.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+
+import { cn } from '../lib/utils'
+
+// shadcn/ui base-nova Table; see THIRD_PARTY_NOTICES.md for the upstream MIT license.
+type TableProps = ComponentProps<'table'> & {
+  /** Configure the scroll container for documentation layout and keyboard access. */
+  containerProps?: ComponentProps<'div'> & { 'data-slot'?: string }
+}
+
+function Table({ className, containerProps, ...props }: TableProps) {
+  const { className: containerClassName, ...containerAttributes } =
+    containerProps ?? {}
+  return (
+    <div
+      data-slot="table-container"
+      {...containerAttributes}
+      className={cn('relative w-full overflow-x-auto', containerClassName)}
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}