Ngôn ngữ giao diện

import { Toaster, YugenProvider, messagesVi } from "yugen-ui";

export function App({ children }: { children: React.ReactNode }) {
  return (
    <YugenProvider applyToDocument messages={messagesVi} locale="vi-VN">
      <Toaster />
      {children}
    </YugenProvider>
  );
}

Chuỗi có sẵn là chữ component tự hiển thị hoặc đọc cho trình đọc màn hình mà bạn không truyền vào: nhãn nút X, “Đang tải…”, “Không tìm thấy kết quả”, mô tả biểu đồ, thông báo aria-live. Nội dung bạn truyền vào (tiêu đề, children, label của Field) không bị đổi.

messagesVi là một object thường; bundler chỉ đưa nó vào bản build khi bạn import, ứng dụng chỉ dùng tiếng Anh không tốn thêm byte nào. messagesEn (bản tiếng Anh, giống mặc định) vẫn có, dùng làm gốc cho ngôn ngữ khác.

// Chỉ đổi chuỗi cần đổi, phần còn lại giữ mặc định
<YugenProvider messages={{ dialog: { close: "Close dialog" } }}>…</YugenProvider>

// Provider lồng kế thừa messages và locale của provider ngoài, rồi ghi đè tiếp
<YugenProvider messages={messagesVi} locale="vi-VN">
  <YugenProvider messages={{ toast: { dismiss: "Ẩn" } }}>…</YugenProvider>
</YugenProvider>

// Prop nhãn riêng của component vẫn thắng messages
<SearchBox dismissLabel="Xoá từ khoá" />

Thứ tự ưu tiên: prop nhãn của chính component (vd. dismissLabel của SearchBox), rồi messages của provider gần nhất, rồi provider ngoài, cuối cùng là mặc định tiếng Anh. Tên namespace và từng khoá có gợi ý kiểu trong editor; mục Messages ở cuối mỗi trang component liệt kê đủ khoá, mặc định tiếng Anh và bản tiếng Việt.

Biểu đồ, DatePicker, TimePicker, NotificationCenter và Rating định dạng số và ngày giờ theo locale của provider (mặc định "en-US"). Prop locale của từng component vẫn ưu tiên hơn. Calendar dùng locale của react-day-picker, nằm trong messages.calendar.locale; messagesVi đã đặt sẵn tiếng Việt.

Hướng chữ là việc riêng của prop dir, xem Hướng chữ RTL.

import { messagesEn, type YugenMessages } from "yugen-ui";

// Kiểu YugenMessages đầy đủ: thiếu namespace nào là typecheck báo lỗi
export const messagesJa: YugenMessages = {
  ...messagesEn,
  dialog: { close: "閉じる" },
  toast: { region: "通知", regionHotkey: "通知 ({hotkey})", dismiss: "通知を閉じる" },
  // …
};

<YugenProvider messages={messagesJa} locale="ja-JP">…</YugenProvider>

Chuỗi có giá trị thay đổi (số bước, số thông báo, tên tệp) là hàm, nên tự xử lý được số nhiều và thứ tự từ của từng ngôn ngữ. Khi nâng cấp mà component có chuỗi mới, typecheck chỉ ra chỗ còn thiếu.

// Source copy bằng CLI / shadcn: mỗi component có messages.ts riêng, mặc định tiếng Anh
import { dialogMessagesVi } from "@/components/ui/Dialog/Dialog";
import { toastMessagesVi } from "@/components/ui/Toast/Toast";

const messages = { dialog: dialogMessagesVi, toast: toastMessagesVi };

<YugenProvider messages={messages} locale="vi-VN">…</YugenProvider>

messagesVi chỉ có trong gói npm. Với source copy bằng @yugen-ui/cli hoặc shadcn, ghép các …MessagesVi của những component bạn có; kiểu YugenMessages cũng chỉ gồm các component đó. Muốn đổi hẳn mặc định thì sửa trực tiếp messages.ts.