Traducciones

Visión general

Cada cadena que renderiza el panel de administración proviene de una clave. Se incluye con siete configuraciones regionales (locales): inglés, español, alemán, francés, italiano, portugués e hindi; y un proyecto puede sobrescribir cualquier clave, añadir su propio idioma o traducir sus propios componentes usando la misma tabla.

Tres elementos hacen el trabajo:

<Rebase locale>	en qué idioma comenzar
<Rebase translations>	qué dice cada clave, por configuración regional
useTranslation()	leer una clave desde tu propio componente

Selección del idioma

<Rebase client={client} authController={authController} locale="es">
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

locale es el idioma inicial. La elección de un usuario que seleccione uno en el menú de idiomas se recordará en su navegador y prevalecerá sobre la prop en su próxima visita; cambiar locale en el código no anula la configuración del usuario. Cualquier elemento para el que Rebase no tenga una cadena recurrirá al inglés en lugar de renderizar una clave.

Cambiar lo que dice una cadena

translations se organiza por configuración regional y luego por clave. Es parcial: indica las pocas que deseas cambiar y todo lo demás se mantendrá como estaba.

<Rebase
    client={client}
    authController={authController}
    translations={{
        en: { save: "Publish", delete_confirmation_title: "Unpublish?" },
        es: { save: "Publicar", delete_confirmation_title: "¿Despublicar?" }
    }}
>
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

La misma estructura sirve para añadir un idioma que Rebase no incluye de serie. Proporciónale un conjunto completo de claves y define locale con él:

<Rebase
    client={client}
    authController={authController}
    locale="nl"
    translations={{ nl: { save: "Opslaan", cancel: "Annuleren" } }}
>
    <RebaseCMS collections={collections}/>
    <RebaseShell title="My App"/>
</Rebase>

Las claves que omitas recurrirán al inglés, por lo que un conjunto parcial es una traducción funcional, no una rota.

Dónde están las claves

Toda la tabla es RebaseTranslations: una interfaz con todas las claves, de modo que tu editor las autocompleta y un error tipográfico es un error de tipos. Sus valores en inglés se encuentran en packages/app/src/locales/en.ts, que es la referencia de lo que dice realmente cada clave.

Los nombres siguen el área a la que pertenecen: save, cancel, delete_confirmation_title para el panel, studio_* para las herramientas de desarrollo (studio_tool_sql, studio_group_database, studio_backups_denied_title).

Traducir tus propios componentes

useTranslation() te ofrece la misma tabla que pueden leer tus vistas, campos y acciones personalizados:

import { useTranslation } from "@rebasepro/app";

function PublishButton() {
    const { t } = useTranslation();
    return <Button>{t("save")}</Button>;
}

La interpolación utiliza la misma sintaxis {{name}} que las cadenas integradas:

t("add_to_field", { fieldName: "Tags" });

Tus propias claves pasan por translations como cualquier otra; una clave que Rebase no declare se sigue resolviendo, por lo que puedes colocar las cadenas de tus componentes en la misma tabla en lugar de ejecutar una segunda solución de i18n en paralelo.

t también devuelve la propia clave cuando nada coincide, lo cual es la respuesta honesta y hace visible una clave faltante en la interfaz de usuario en lugar de dejarla en blanco.

Los nombres de grupo no son etiquetas

El group de una AppView es un identificador: el panel lateral se colapsa según él, la página de inicio de Studio se ordena según él y navigationGroupMappings le asigna iconos. Traducirlo donde se declara rompe estas tres funcionalidades en todos los idiomas excepto en aquel al que lo tradujiste.

Declara el grupo en inglés y deja que el encabezado se traduzca solo: los grupos propios de Rebase tienen claves studio_group_* y se buscan por nombre; un grupo personalizado se renderiza tal como se escribe.

// Right: the name is stable, the heading is localized for the built-in groups.
{ slug: "queues", name: "Queues", group: "Compute", view: <QueuesView/> }

Siguientes pasos

• Visión general del frontend — todas las props de <Rebase> en detalle
• Campos personalizados — componentes que requerirán useTranslation