@lexibase/rdx-ui 3.2.1 → 3.4.0

package/src/components/language-dropdown.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { ExternalLink, Languages } from 'lucide-react'
+import Link from 'next/link'
+import { Button } from './button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLinkItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+import { getMessages } from '../lib/i18n'
+
+/** Locale navigation composes the shared shadcn/ui Base UI menu. */
+export function LanguageDropdown({
+  options,
+  current,
+  lang,
+  contributionUrl,
+}: {
+  options: { code: string; label: string; href: string }[]
+  current: string
+  lang?: string
+  contributionUrl?: string
+}) {
+  const selected = options.find((option) => option.code === current)
+  if (!selected) return null
+  const messages = getMessages(lang)
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`${getMessages(lang).documentationLanguage}: ${selected.label}`}
+            data-rdx-language-trigger
+          />
+        }
+      >
+        <Languages className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">{selected.label}</span>
+        <span className="sm:hidden">{selected.code}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" collisionPadding={8}>
+        <DropdownMenuGroup>
+          {options.map((option) => (
+            <DropdownMenuLinkItem
+              key={option.code}
+              className={option.code === current ? 'bg-accent/30' : undefined}
+              closeOnClick
+              render={<Link href={option.href} hrefLang={option.code} />}
+              aria-current={option.code === current ? 'true' : undefined}
+            >
+              {option.label}
+            </DropdownMenuLinkItem>
+          ))}
+        </DropdownMenuGroup>
+        {contributionUrl && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLinkItem
+              closeOnClick
+              render={
+                <a
+                  href={contributionUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                />
+              }
+              data-rdx-help-translate
+            >
+              {messages.helpTranslate}
+              <ExternalLink className="ml-auto size-3.5" aria-hidden="true" />
+              <span className="sr-only"> ({messages.opensInNewTab})</span>
+            </DropdownMenuLinkItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/localized-not-found.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { ComponentProps, ReactNode } from 'react'
+import { useParams } from 'next/navigation'
+import { Navbar } from './navbar'
+import { NotFound } from './not-found'
+import { LanguageDropdown } from './language-dropdown'
+
+/** Error boundaries do not receive server route params; use Next's route context. */
+export function LocalizedNotFound({
+  locales,
+  defaultLocale,
+  brand,
+  homepage,
+}: {
+  locales: { code: string; path: string; label: string }[]
+  defaultLocale: string
+  brand: Pick<
+    ComponentProps<typeof Navbar>,
+    'title' | 'siteTitle' | 'github' | 'showToggleMode'
+  > & { logo: ReactNode }
+  homepage: boolean
+}) {
+  const params = useParams<{ locale?: string }>()
+  const selected =
+    locales.find((locale) => locale.path === params.locale) ??
+    locales.find((locale) => locale.code === defaultLocale)!
+  const docsHref = `/${selected.path}/docs`
+  return (
+    <>
+      <Navbar
+        {...brand}
+        lang={selected.code}
+        homeHref={homepage ? '/' : docsHref}
+        docsHref={docsHref}
+        languageMenu={
+          <LanguageDropdown
+            lang={selected.code}
+            current={selected.code}
+            options={locales.map((locale) => ({
+              ...locale,
+              href: `/${locale.path}/docs`,
+            }))}
+          />
+        }
+      />
+      <NotFound lang={selected.code} href={docsHref} />
+    </>
+  )
+}

package/src/components/navbar.tsx

@@ -17,6 +17,7 @@ export function Navbar({
   docsHref = '/docs',
   docsLink,
   versionMenu,
+  languageMenu,
   search,
   github,
   showToggleMode = false,
@@ -29,6 +30,7 @@ export function Navbar({
   docsHref?: string
   docsLink?: ReactNode
   versionMenu?: ReactNode
+  languageMenu?: ReactNode
   search?: ReactNode
   github?: { visible: boolean; url: string }
   showToggleMode?: boolean
@@ -55,6 +57,7 @@ export function Navbar({
       <div className="flex items-center gap-x-1 md:gap-x-2 h-4">
         {search}
         {versionMenu}
+        {languageMenu}
         {docsLink ?? (
           <Button variant="link" size="sm" href={docsHref}>
             {messages.docs}

package/src/lib/i18n.ts

@@ -1,5 +1,13 @@
 /** Shared labels only: document content and author-provided names stay untouched. */
 const en = {
+  documentationLanguage: 'Documentation language',
+  translationUnavailable: 'Translation unavailable',
+  translationFallback:
+    'This page is not available in {requested}. You are reading the {original} version.',
+  viewOriginal: 'View the original page',
+  helpTranslate: 'Help translate',
+  translateThisPage: 'Translate this page',
+  opensInNewTab: 'opens in a new tab',
   keyboardJoiner: ' plus ',
   keyboardControl: 'Control',
   keyboardShift: 'Shift',
@@ -93,6 +101,14 @@ export type InterfaceMessages = { [Key in keyof typeof en]: string }
 export type InterfaceLocale = 'en' | 'pt-BR'
 
 const ptBR = {
+  documentationLanguage: 'Idioma da documentação',
+  translationUnavailable: 'Tradução indisponível',
+  translationFallback:
+    'Esta página não está disponível em {requested}. Você está lendo a versão em {original}.',
+  viewOriginal: 'Ver a página original',
+  helpTranslate: 'Ajude a traduzir',
+  translateThisPage: 'Traduza esta página',
+  opensInNewTab: 'abre em uma nova aba',
   keyboardJoiner: ' mais ',
   keyboardControl: 'Control',
   keyboardShift: 'Shift',

package/src/lib/mermaid.ts

@@ -1,11 +1,12 @@
-type Mermaid = (typeof import('mermaid'))['default']
+type Mermaid =
+  (typeof import('../../dist/mermaid/mermaid.esm.min.mjs'))['default']
 
 let engine: Promise<Mermaid> | undefined
 let queue: Promise<unknown> = Promise.resolve()
 let serial = 0
 
 function loadMermaid() {
-  engine ??= import('mermaid')
+  engine ??= import('../../dist/mermaid/mermaid.esm.min.mjs')
     .then((module) => module.default)
     .catch((error: unknown) => {
       engine = undefined