Textos e idioma
El kit no depende de ninguna librería de i18n. Sus textos de chrome —«Cerrar», «Sin datos», «Página siguiente»— salen en español por defecto y se cambian una sola vez al arrancar, desde donde tu producto ya sabe traducir.
setLabels y setLocale
Dos funciones del paquete, sin provider: setLabels recibe los textos que quieras cambiar y setLocale, el idioma BCP 47 con el que Calendar, DatePicker, DateSeparator y las cifras formatean (por defecto "es"). Lo que no pases se queda en español, así que un producto nuevo arranca sin configurar nada, y los componentes ya montados se repintan solos. Las propiedades de texto de cada componente siguen ganando: el global es el defecto, la propiedad es la excepción.
import { setLabels, setLocale } from "@unozero-ai/ui/react";
setLabels({ close: "Close", cancel: "Cancel", noData: "No data" });
setLocale("en");// El global dice «No data»; esta tabla dice lo suyo
<DataTable columns={columns} data={[]} emptyMessage="No bookings for this date" />En vivo, en inglés
Pagination y DatePicker con setLabels y setLocale("en"). Las etiquetas de las flechas salen de los textos; el mes, los días de la semana y la fecha del campo, del idioma. Son globales: el interruptor cambia también el resto de la página, y al salir de ella los textos vuelven al español con defaultLabels. El calendario empieza la semana en lunes en cualquier idioma.
Textos con un valor dentro
«Dígito 3» o «La imagen supera 5 MB» no son cadenas sino funciones que reciben el valor, para que cada idioma lo coloque donde le corresponde en la frase.
setLabels({
otpDigit: (index) => `Digit ${index}`,
imageTooLarge: (mb) => `The image is larger than ${mb} MB.`,
rating: (n, count) => `${n} out of ${count}`,
});Con next-intl
Un componente cliente traduce con tu librería y se lo pasa al kit. Llama a las funciones en el render y no en un efecto: así los componentes de debajo ya pintan en el idioma bueno, sin un parpadeo en español. Ponlo una vez en el layout, antes que el contenido.
"use client";
import { useLocale, useTranslations } from "next-intl";
import { setLabels, setLocale } from "@unozero-ai/ui/react";
export function KitLabels() {
const t = useTranslations("kit");
setLocale(useLocale());
setLabels({
close: t("close"),
cancel: t("cancel"),
noData: t("noData"),
otpDigit: (index) => t("otpDigit", { index }),
imageTooLarge: (mb) => t("imageTooLarge", { mb }),
syncedMinutesAgo: (count) => t("syncedMinutesAgo", { count }),
});
return null;
}{
"kit": {
"close": "Close",
"cancel": "Cancel",
"noData": "No data",
"otpDigit": "Digit {index}",
"imageTooLarge": "The image is larger than {mb} MB.",
"syncedMinutesAgo": "Synced {count} min ago"
}
}Todas las etiquetas
Las 89 claves de UILabels con su valor en español, leídas de defaultLabels en el paquete instalado. Las que son funciones muestran su frase.
close- Cerrar
cancel- Cancelar
confirm- Confirmar
dismiss- Descartar
loading- Cargando
noData- Sin datos
decrease- Disminuir
increase- Aumentar
search- Buscar…
clearSearch- Limpiar búsqueda
copy- Copiar
copied- Copiado
notifications- Notificaciones
closeNotification- Cerrar notificación
paginationNav- Paginación
firstPage- Primera página
previousPage- Página anterior
nextPage- Página siguiente
lastPage- Última página
select- Selecciona…
noResults- Sin resultados
previousYear- Año anterior
previousMonth- Mes anterior
nextMonth- Mes siguiente
nextYear- Año siguiente
datePlaceholder- Selecciona una fecha
clearDate- Limpiar fecha
today- Hoy
yesterday- Ayer
invalidDate- Fecha inválida
betaTitle- Función en BETA
betaDescription- Estamos mejorándola activamente: puede tener fallos o cambiar. Gracias por tu paciencia.
betaDismiss- Entendido
timeRemaining- Tiempo restante
expired- El código expiró
rating(n, count) => `${n.toLocaleString(locale)} de ${count}`selectColor(label) => `Seleccionar ${label}`otpDigit(index) => `Dígito ${index}`continueWithGoogle- Continuar con Google
continueWithFacebook- Continuar con Facebook
connectWhatsapp- Conectar WhatsApp
syncDisconnected- Desconectado
syncError- Error
syncFailedCount(count) => `${count} fallidos`syncNever- Nunca sincronizado
syncedJustNow- Recién sincronizado
syncedMinutesAgo(count) => `Sincronizado hace ${count} min`syncedHoursAgo(count) => `Sincronizado hace ${count} h`syncedDaysAgo(count) => `Sincronizado hace ${count} d`theme- Apariencia
themeLight- Claro
themeDark- Oscuro
themeSystem- Automático
themeSystemHint- Sigue la configuración del dispositivo
imageInvalidType- El archivo debe ser una imagen.
imageTooLarge(mb) => `La imagen supera ${mb} MB.`imagePreview- Vista previa
imageRemove- Quitar imagen
imageDropHint- Arrastra o haz clic
imageMaxSize(mb) => `máx. ${mb} MB`messagePlaceholder- Escribe un mensaje…
messageHint- Enter para enviar · Shift+Enter salto de línea
send- Enviar
showPassword- Mostrar contraseña
hidePassword- Ocultar contraseña
passwordWeak- Débil
passwordFair- Regular
passwordGood- Buena
passwordStrong- Fuerte
location- Ubicación
viewOnGoogleMaps- Ver en Google Maps
fileDropHint- Arrastra archivos o haz clic
fileInvalidType- Este tipo de archivo no se admite.
fileTooLarge(mb) => `El archivo supera ${mb} MB.`fileRemove(name) => `Quitar ${name}`optional- opcional
selectAll- Seleccionar todas las filas
selectRow- Seleccionar
typing- Escribiendo
errorTitle- Algo salió mal
retry- Reintentar
errorDetail- Ver detalle
messageSending- Enviando
messageSent- Enviado
messageDelivered- Entregado
messageRead- Leído
messageFailed- No se envió
opensInNewTab- (se abre en una pestaña nueva)
stepDone- completado