Yerelleştirme

Kitteki her yerleşik metin (77 etiket setinde 468 etiket: aria-label'lar, ekran okuyucu duyuruları, senin yazmadığın butonların metinleri, placeholder'lar) tek bir provider ile çevrilir. Bir dil paketiyle bir kez bağla, her goodui bileşeni o dili konuşsun; sayı, tarih ve para birimi biçimleri Intl üzerinden takip eder, Arapça ve İbranice kendi yönünü alır. Hiç ayarlamayan uygulamalar İngilizce ve en-US biçimlerinde kalır, fazladan hiçbir şey yüklenmez.

Kurulum

npx shadcn@latest add https://goodui.dev/r/locale.json https://goodui.dev/r/locale-tr.json

locale, lib/goodui-locale.ts içine iner (etiketi olan her bileşen zaten ona bağımlı, yani büyük ihtimalle sende var). Bir paket lib/goodui-locales/<lang>.ts içine iner ve başka hiçbir şeye bağımlı değildir; yalnızca yayınladığın dilleri kur.

Dili ayarla

app/layout.tsx

import { GooduiLocaleProvider } from "@/lib/goodui-locale"
import tr from "@/lib/goodui-locales/tr"

export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>
        <GooduiLocaleProvider lang="tr" labels={tr}>{children}</GooduiLocaleProvider>
      </body>
    </html>
  )
}

lang bir BCP 47 etiketidir ve kitteki her Intl biçimini yönetir ("de-AT", "pt-BR", "en-GB" olur). labels ise pakettir. Dil değiştirici için etiketi state'te tut ve paketi lazy import'lardan oluşan bir map'ten seç; iç içe provider'lar çalışır, yani bir ekran başka bir dilde çalışabilir.

Paketler

18 dil, her biri tek dosya, her bileşenin her etiketi. Bir dil değiştiricinin göstereceği haliyle yerel adlar:

locale-tr: Türkçe
locale-de: Deutsch
locale-fr: Français
locale-es: Español
locale-it: Italiano
locale-pt-BR: Português (Brasil)
locale-nl: Nederlands
locale-pl: Polski
locale-ru: Русский
locale-hi: हिन्दी
locale-id: Bahasa Indonesia
locale-vi: Tiếng Việt
locale-th: ไทย
locale-ja: 日本語
locale-ko: 한국어
locale-zh-CN: 中文（简体）
locale-ar: العربية (RTL)
locale-he: עברית (RTL)

locale-en de var: bileşenlerden üretilir ve diğer her paket ona karşı denetlenir. İngilizce etiketleri uygulama genelinde değiştirmek istediğinde onu içe aktar.

RTL

Bileşenler yazı yönünü DOM'dan okur (mantıksal özellikler, :dir(rtl), çevrilen simgeler), bu yüzden belgede kendin ayarla: <html lang="ar" dir="rtl">. Provider <html> öğesine hiç dokunmaz; yalnızca soran bileşenler için lang değerinden dir türetir (ar, he, fa, ur RTL'dir) ve dir geçerek geçersiz kılabilirsin. dirOf("ar") kendi düzen kodun için dışa aktarılmıştır.

Intl biçimleri

Değer biçimlendiren bileşenler (number-flow, counter-up, stat-card, meter, sparkline-draw, data-grid, date-picker, number-input) bir locale prop'u alır. Verilmezse artık "en-US" yerine provider dili geçerlidir; açıkça verilen prop yine kazanır. Aynı biçimlendiriciler hook üzerinden senindir:

import { useGooduiLocale } from "@/lib/goodui-locale"

const { lang, dir, formatNumber, formatDate, formatRelative, formatCurrency } = useGooduiLocale()

formatNumber(12345.6)                       // "12.345,6" in de
formatDate(booking.start)                   // "3 Kas 2026" in tr; pass Intl.DateTimeFormat options for other styles
formatRelative(-2, "hour")                  // "vor 2 Stunden"
formatCurrency(49, "EUR")                   // "49,00 €"

Örnekler dil ve seçenek başına önbelleğe alınır, yani render içinde çağırmak sorun değil. React dışında createFormatters(lang) aynı dört fonksiyonu döndürür.

Tek bir etiketi değiştir

Herhangi bir bileşendeki labels prop'u paketin önüne geçer, yani tek bir örnek başka bir şey söyleyebilir. Uygulama genelinde bir değişiklik için paketi spread et:

<Dialog labels={{ confirm: "Rezervasyonu iptal et" }} … />        {/* this dialog only */}

const labels = { ...tr, alert: { ...tr.alert, dismiss: "Kapat" } }   // every alert
<GooduiLocaleProvider lang="tr" labels={labels}>

Değer alan etiketler fonksiyondur, yani çoğullar gerçektir: results: (n) => plural("pl", n, { one: "1 wynik", few: `${n} wyniki`, many: `${n} wyników`, other: `${n} wyniku` }). plural(), lib/goodui-locale içinde gelir ve Intl.PluralRules üzerine sarılır.

Dil ekle

lib/goodui-locales/en.ts dosyasını yeni bir dosyaya kopyala ve değerleri çevir; anahtarları ve fonksiyon imzalarını koru. Depodaki lib/locales/labels-manifest.json manifestosu her anahtarı türü, parametreleri ve kullanıldığı yerle (aria-label, ekran okuyucu, görünen metin) listeler. Kendi build'imiz node scripts/extract-labels.ts çalıştırır; bu, lib/goodui-locales/en.ts dosyasını bileşenlerden yeniden üretir ve bir pakette bir bileşen, anahtar ya da parametre eksikse hata verir, yani 18 paket bileşenlerin gerisinde kalamaz. Yeni dil içeren pull request'ler memnuniyetle karşılanır.

Dene

Her Core bileşeninin Playground'unda bir dil seçimi var: önizleme o dilde yeniden çizilir (Arapça ve İbranice için RTL) ve yazdırılan snippet provider'ı da içerir. Her önizleme sayfası ?lang=tr (ve yönü zorlamak için &dir=rtl) alır, örneğin /preview/c/pagination?lang=ar.

goodui Native

Aynı paketler ve manifesto React Native kiti için de planlanıyor (foundation içinde bir LocaleProvider, aynı bileşen kimlikleri); o zamana kadar Native bileşenler metinlerini prop'lar ve ekran başına labels nesneleriyle alır.

Sesler ve haptik Yapay zeka editörleri ve MCP