@lexibase/rdx-ui 1.1.0 → 3.0.0

package/src/components/tabs.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
 import { Check, Copy } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
@@ -23,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'
@@ -43,6 +50,7 @@ function panelText(node: Node): string {
 }
 
 function CopyTabButton() {
+  const messages = useMessages()
   const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
   const pending = useRef(false)
   const mounted = useRef(false)
@@ -92,13 +100,13 @@ function CopyTabButton() {
         type="button"
         variant="ghost"
         size="icon"
-        aria-label="Copy active tab"
+        aria-label={messages.copyTab}
         title={
           status === 'error'
-            ? 'Could not copy. Select the tab content and copy it manually.'
+            ? messages.copyTabError
             : status === 'copied'
-              ? 'Copied!'
-              : 'Copy active tab'
+              ? messages.copied
+              : messages.copyTab
         }
         data-status={status}
         className="mr-1.5 size-7 shrink-0 text-muted-foreground hover:text-foreground data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:text-amber-600 [&>svg]:size-3.5"
@@ -113,9 +121,9 @@ function CopyTabButton() {
         className="sr-only"
       >
         {status === 'copied'
-          ? 'Tab content copied to clipboard.'
+          ? messages.tabCopied
           : status === 'error'
-            ? 'Could not copy. Select the tab content and copy it manually.'
+            ? messages.copyTabError
             : ''}
       </span>
     </>
@@ -172,7 +180,7 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
     <TabsPrimitive.Panel
       data-slot="tabs-content"
       className={mergeStateClassName(
-        'min-w-0 rounded-b-lg p-3 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&>[data-rdx-code-block]]:my-3 [&_[data-rdx-code-block]>pre]:p-3',
+        'min-w-0 rounded-b-lg p-3 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&>[data-rdx-code-block]]:my-3 [&_[data-rdx-code-block]>pre]:p-3 font-mono',
         className
       )}
       {...props}

package/src/components/version-dropdown.tsx

@@ -1,9 +1,13 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { Archive, Bird, PackageOpen } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
 
+import { formatMessage } from '../lib/i18n'
+
 import { Button } from './button'
 import {
   DropdownMenu,
@@ -42,6 +46,7 @@ export function VersionDropdown({
   onSelect?: (id: string) => void
   footer?: ReactNode
 }) {
+  const messages = useMessages()
   const current =
     options.find((option) => option.id === currentId) ?? options[0]
   if (!current) return null
@@ -87,7 +92,9 @@ export function VersionDropdown({
             variant="outline"
             size="sm"
             className="min-w-0 capitalize sm:min-w-[134px]"
-            aria-label={`Documentation version: ${current.label}`}
+            aria-label={formatMessage(messages.documentationVersion, {
+              version: current.label,
+            })}
           />
         }
       >
@@ -119,7 +126,7 @@ export function VersionDropdown({
             {active.length > 0 && <DropdownMenuSeparator />}
             <DropdownMenuGroup>
               <DropdownMenuLabel className="text-center py-px cursor-default">
-                Archived
+                {messages.archived}
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
               {archived.map(item)}

package/src/components/version-notice.tsx

@@ -1,3 +1,4 @@
+import { getMessages } from '../lib/i18n'
 import Link from 'next/link'
 import { ArrowRight } from 'lucide-react'
 
@@ -5,29 +6,30 @@ import { Callout } from './callout'
 
 /** Presentation only: version selection remains the responsibility of the caller. */
 export function VersionNotice({
+  lang,
   kind,
   currentHref,
 }: {
+  lang?: string
   kind: 'canary' | 'outdated'
   currentHref: string
 }) {
+  const messages = getMessages(lang)
   const isCanary = kind === 'canary'
   return (
     <Callout
       data-rdx-version-notice={kind}
       variant={isCanary ? 'tip' : 'warning'}
-      title={isCanary ? 'Pre-release documentation' : 'Outdated documentation'}
+      title={isCanary ? messages.preReleaseTitle : messages.outdatedTitle}
       className="mt-0 mb-5"
     >
       <p>
-        {isCanary
-          ? 'This is a pre-release version of the documentation.'
-          : 'This is an outdated version of the documentation.'}{' '}
+        {isCanary ? messages.preReleaseMessage : messages.outdatedMessage}{' '}
         <Link
           href={currentHref}
           className="font-medium text-foreground underline decoration-current/40 underline-offset-4 transition-colors hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
-          Go back to the current version
+          {messages.backToCurrent}
           <ArrowRight
             aria-hidden="true"
             className="ml-1 inline size-3.5 align-text-bottom"

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

package/src/lib/i18n.ts

@@ -0,0 +1,156 @@
+/** Shared labels only: document content and author-provided names stay untouched. */
+const en = {
+  skipContent: 'Skip to content',
+  mainNavigation: 'Main navigation',
+  docs: 'Docs',
+  documentationPages: 'Documentation pages',
+  documentationNavigation: 'Documentation navigation',
+  openSidebar: 'Open sidebar',
+  closeSidebar: 'Close sidebar',
+  previous: 'Previous',
+  next: 'Next',
+  previousPage: 'Previous page',
+  nextPage: 'Next page',
+  onThisPage: 'On this page',
+  search: 'Search…',
+  searchDocumentation: 'Search documentation',
+  searchPlaceholder: 'Search documentation…',
+  searchDescription:
+    'Search pages and sections in {version}. Use arrow keys to choose a result and Enter to open it.',
+  loadingSearch: 'Loading search…',
+  searchUnavailable: 'Search is unavailable.',
+  tryAgain: 'Try again',
+  typeToSearch: 'Type to search this documentation.',
+  noResults: 'No results found.',
+  navigate: 'Navigate',
+  open: 'Open',
+  close: 'Close',
+  closeSearch: 'Close search',
+  enlargeImage: 'Enlarge image: {alt}',
+  closeImage: 'Close image',
+  imagePreviewDescription:
+    'Press Escape or use the close button to return to the document.',
+  copyCode: 'Copy code',
+  wrapCode: 'Wrap lines',
+  codeCopied: 'Code copied to clipboard.',
+  copyCodeError: 'Could not copy. Select the code and copy it manually.',
+  copyRetry: 'Could not copy. Try again or copy manually.',
+  copied: 'Copied!',
+  copyTab: 'Copy active tab',
+  tabCopied: 'Tab content copied to clipboard.',
+  copyTabError: 'Could not copy. Select the tab content and copy it manually.',
+  code: 'Code',
+  folderTree: 'Folder',
+  table: 'Table',
+  current: 'Current',
+  version: 'Version {version}',
+  documentationVersion: 'Documentation version: {version}',
+  archived: 'Archived',
+  archivedVersion: 'Archived',
+  loadingVersions: 'Loading versions',
+  preReleaseTitle: 'Pre-release documentation',
+  outdatedTitle: 'Outdated documentation',
+  preReleaseMessage: 'This is a pre-release version of the documentation.',
+  outdatedMessage: 'This is an outdated version of the documentation.',
+  backToCurrent: 'Go back to the current version',
+  poweredBy: 'Powered by',
+  developedBy: 'Developed by',
+  modeToggle: 'Mode Toggle',
+  documentationReady: 'Your documentation is ready.',
+  addDocument: 'Add an .mdx file inside docs/.',
+  notFound: 'Page not found',
+  notFoundDescription: "We couldn't find what you were looking for.",
+  brokenLink:
+    'Please contact the owner of the site that led you to this link and let them know the link is broken.',
+  backToDocs: 'Go back to documentation',
+} satisfies Record<string, string>
+
+export type InterfaceMessages = { [Key in keyof typeof en]: string }
+export type InterfaceLocale = 'en' | 'pt-BR'
+
+const ptBR = {
+  skipContent: 'Ir para o conteúdo',
+  mainNavigation: 'Navegação principal',
+  docs: 'Docs',
+  documentationPages: 'Páginas da documentação',
+  documentationNavigation: 'Navegação da documentação',
+  openSidebar: 'Abrir menu lateral',
+  closeSidebar: 'Fechar menu lateral',
+  previous: 'Anterior',
+  next: 'Próxima',
+  previousPage: 'Página anterior',
+  nextPage: 'Próxima página',
+  onThisPage: 'Nesta página',
+  search: 'Buscar…',
+  searchDocumentation: 'Buscar na documentação',
+  searchPlaceholder: 'Buscar na documentação…',
+  searchDescription:
+    'Busque páginas e seções em {version}. Use as setas para escolher um resultado e Enter para abri-lo.',
+  loadingSearch: 'Carregando busca…',
+  searchUnavailable: 'A busca está indisponível.',
+  tryAgain: 'Tentar novamente',
+  typeToSearch: 'Digite para buscar nesta documentação.',
+  noResults: 'Nenhum resultado encontrado.',
+  navigate: 'Navegar',
+  open: 'Abrir',
+  close: 'Fechar',
+  closeSearch: 'Fechar busca',
+  enlargeImage: 'Ampliar imagem: {alt}',
+  closeImage: 'Fechar imagem',
+  imagePreviewDescription:
+    'Pressione Escape ou use o botão de fechar para voltar ao documento.',
+  copyCode: 'Copiar código',
+  wrapCode: 'Quebrar linhas',
+  codeCopied: 'Código copiado para a área de transferência.',
+  copyCodeError:
+    'Não foi possível copiar. Selecione o código e copie manualmente.',
+  copyRetry: 'Não foi possível copiar. Tente novamente ou copie manualmente.',
+  copied: 'Copiado!',
+  copyTab: 'Copiar aba ativa',
+  tabCopied: 'Conteúdo da aba copiado para a área de transferência.',
+  copyTabError:
+    'Não foi possível copiar. Selecione o conteúdo da aba e copie manualmente.',
+  code: 'Código',
+  folderTree: 'Pastas',
+  table: 'Tabela',
+  current: 'Atual',
+  version: 'Versão {version}',
+  documentationVersion: 'Versão da documentação: {version}',
+  archived: 'Arquivadas',
+  archivedVersion: 'Arquivada',
+  loadingVersions: 'Carregando versões',
+  preReleaseTitle: 'Documentação de pré-lançamento',
+  outdatedTitle: 'Documentação desatualizada',
+  preReleaseMessage: 'Esta é uma versão de pré-lançamento da documentação.',
+  outdatedMessage: 'Esta é uma versão desatualizada da documentação.',
+  backToCurrent: 'Voltar para a versão atual',
+  poweredBy: 'Feito com',
+  developedBy: 'Desenvolvido por',
+  modeToggle: 'Alternar tema',
+  documentationReady: 'Sua documentação está pronta.',
+  addDocument: 'Adicione um arquivo .mdx dentro de docs/.',
+  notFound: 'Página não encontrada',
+  notFoundDescription: 'Não encontramos o que você estava procurando.',
+  brokenLink:
+    'Entre em contato com o responsável pelo site que indicou este link e informe que ele não está funcionando.',
+  backToDocs: 'Voltar para a documentação',
+} satisfies InterfaceMessages
+
+/** Match the locale, then its base language; unsupported languages use English. */
+export function resolveInterfaceLocale(lang = 'en'): InterfaceLocale {
+  const normalized = lang.trim().replaceAll('_', '-').toLowerCase()
+  if (normalized === 'pt-br' || normalized.split('-')[0] === 'pt')
+    return 'pt-BR'
+  return 'en'
+}
+
+export function getMessages(lang?: string): InterfaceMessages {
+  return resolveInterfaceLocale(lang) === 'pt-BR' ? ptBR : en
+}
+
+export function formatMessage(message: string, values: Record<string, string>) {
+  return message.replace(
+    /\{(\w+)\}/g,
+    (placeholder, key: string) => values[key] ?? placeholder
+  )
+}

package/src/providers/locale-provider.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { createContext, useContext, type ReactNode } from 'react'
+import { getMessages, resolveInterfaceLocale } from '../lib/i18n'
+
+const LocaleContext = createContext('en')
+
+/** Use the configured locale on both server rendering and hydration. */
+export function LocaleProvider({
+  lang,
+  children,
+}: {
+  lang?: string
+  children: ReactNode
+}) {
+  return (
+    <LocaleContext.Provider value={resolveInterfaceLocale(lang)}>
+      {children}
+    </LocaleContext.Provider>
+  )
+}
+
+export function useInterfaceLocale() {
+  return useContext(LocaleContext)
+}
+
+export function useMessages() {
+  return getMessages(useInterfaceLocale())
+}

package/src/styles/globals.css

@@ -2,6 +2,7 @@
 @source "../**/*.{ts,tsx}";
 
 @import 'tw-animate-css';
+@import './shadcn.css';
 
 @custom-variant dark (&:is(.dark *));