Saltar al contenido principal

Internacionalización

Descripción general​

Todas las aplicaciones deben internacionalizarse, mientras que muchas también se localizarán (lo que, para nuestros propósitos, es esencialmente traducción). Si no las internacionaliza correctamente, la localización completa se vuelve difícil y hasta imposible.

Jutro le ofrece asistencia en cuanto a la internacionalización y localización, pero usted gestiona la implementación.

Tratamos el idioma, la configuración regional, el país y la divisa como variables completamente independientes:

  • Idioma: Esto abarca strings de interfaz de usuario regulares.
    • Las aplicaciones pueden configurar una matriz de availableLanguages y un preferredLanguage (predeterminado).
  • Configuración regional: también conocido como formato regional, rige cómo se formatean las fechas, las horas, los números y los calendarios. Tenga en cuenta que, en cualquier string de interfaz de usuario normal (regida por el idioma) que incluya una variable de fecha, hora o número, esa variable debe tener un formato acorde a la configuración regional.
    • Las aplicaciones pueden configurar una matriz de availableLocales y un preferredLocale (predeterminado).
  • País: Determina cómo se comportan los componentes de número de teléfono o dirección
    • Las aplicaciones pueden establecer un defaultCountryCode, que, a menos que se sobrescriba en el nivel de componente, será utilizado por componentes como IntlPhoneNumberField y Address para establecer el país predeterminado.
  • Divisa: No debe inferirse a partir del idioma, el país o la configuración regional de un usuario.
    • La divisa es simplemente una propiedad de una transacción.
    • Las aplicaciones pueden configurar una defaultCurrency, que, a menos que se sobrescriba en el nivel de componente, se utilizará para configurar componentes como CurrencyInput.

Antes de empezar​

La aplicación de ejemplo de Jutro le ofrece lo siguiente:

  • Todos los strings de la interfaz de usuario están marcadas de modo que se puedan extraer al archivo lang.json y, por esto, se pueden traducir.
  • El proceso de compilación crea automáticamente nuestro pseudolenguaje, conocido como Sherlock.
  • Todos los componentes sensibles a la configuración regional, como selectores de fecha, entrada de divisa, se comportan de manera adecuada automáticamente.

Compatibilidad para internacionalización (i18n) en Jutro​

  • react-intl: Biblioteca que proporciona componentes de React como FormattedDate y FormattedNumber, así como API para dar formato a fechas, números y strings, y también manejar traducciones. Algunos de nuestros componentes como CurrencyInput, encapsulan componentes suministrados por react-intl.
  • jutro: Esta utilidad de línea de comandos proporciona un subcomando que simplifica el manejo del texto traducible. Para obtener más información, consulte las secciones relevantes sobre los comandos de la CLI de la plataforma de Jutro.
  • jutro-locale: Paquete Jutro que contiene, entre otras cosas:
    • GlobalizationProvider: Configura el contexto de internacionalización de una aplicación a través del componente IntlProvider de react-intl.
    • La globalización almacena en función de zustand, que puede utilizar para interactuar con las preferencias de configuración regional del usuario y los cambios en el idioma, la configuración regional, la divisa y el país.
  • jutro-components: Contiene una variedad de componentes que reconocen la configuración regional, como la siguiente combinación de campos de visualización de entrada y valor:
    • CurrencyInput, CurrencyValue
    • SimpleDate, DateRange, DateTime, DateTimeZone
    • InputNumber, NumberValue
    • IntlPhoneNumberField, PhoneNumberValue
    • GlobalizationChooser: Widget que permite seleccionar locale y language independientemente unos de otros.
    • LanguageSelector: Similar a GlobalizationChooser, pero solo presenta un selector de idioma.

Su estructura de carpetas​

  • i18n/src/*: Archivos temporales generados automáticamente que simplemente contienen los strings de interfaz de usuario que se han extraído de src/**. No los edite manualmente ni los revise en el control de código fuente. .gitignore ya está configurado para ignorar estos archivos.
  • src/i18n/lang.json - El archivo de traducción generado (se puede cambiar en package.json modificando las opciones del comando jutro). Del mismo modo, no edite manualmente este archivo, ya que se agrega a .gitignore. Los traductores utilizarán este archivo como base para futuras traducciones. Agregarán otros archivos de idioma en la misma carpeta, por ejemplo, ru.json o fr.json.

Forma del string​

Jutro proporciona un tipo intlMessageShape, que tiene las siguientes propiedades:

  • id: Debe ser único en la aplicación.
  • defaultMessage: El texto real de la interfaz de usuario. También es el string de respaldo si no hay traducciones presentes.
  • description (opcional): Ayuda al traductor a entender el contexto donde aparece el string.
  • args (opcional): Permite el paso de valores de argumento. Consulte Interpolación de variables

Los strings deben tener esta forma; de lo contrario, no es posible extraerlos para traducirlos.

Consulte también intlMessageShape.

Internacionalización de la aplicación​

react-intl proporciona la mayor parte de la compatibilidad para internacionalización para las aplicaciones de Jutro.

Nota: Si utiliza la aplicación de muestra que se envía con Jutro, obtendrá la mayoría o todo lo que aparecen a continuación de forma gratuita.

Cómo agregar el componente de proveedor de internacionalización​

Si no usa la función start de Jutro, puede agregar características de globalización de Jutro a su aplicación mediante GlobalizationProvider.

En la raíz de la aplicación, debe agregar el componente GlobalizationProvider de Jutro desde jutro-locale. Esto proporciona un contexto de internacionalización para todo lo que incluya. Utiliza el componente IntlProvider de la biblioteca react-intl.

IntlProvider establece dos propiedades clave:

  • locale: Lo que afecta al comportamiento de todos los componentes sensibles a la configuración regional, como los utilizados para la entrada de fecha, calendario, visualización y hora y número.
  • messages: La matriz de traducciones que utilizarán los componentes adjuntos.

Tenga en cuenta que locale y messages son independientes entre sí. Esto significa que podría establecer locale para que diga fr-FR, pero la matriz messagespodría contener, por ejemplo, traducciones al alemán.

Cómo ajustar la configuración regional​

Puede configurar localeSettings en src/config/config.json. Por ejemplo:

src/config/config.json
{
  "localeSettings": {
    "availableLocales": ["en-US", "es-ES", "es-MX", "de-DE", "pl"],
    "availableLanguages": ["en", "es", "de", "pl", "yy"],
    "preferredLocale": "en-US",
    "preferredLanguage": "en",
    "defaultCountryCode": "US",
    "defaultCurrency": "USD"
  }
}

Si localeSettings, o cualquier parte de él, se omite de su configuración, la aplicación volverá a estos valores predeterminados:

src/config/config.json
{
  "localeSettings": {
    "availableLocales": ["en-US"],
    "availableLanguages": ["en"],
    "preferredLocale": "en-US",
    "preferredLanguage": "en",
    "defaultCountryCode": "US",
    "defaultCurrency": "USD"
  }
}

Los usuarios deben tener una forma de seleccionar el idioma y la configuración regional​

Tiene algunas opciones para permitir que los usuarios seleccionen el idioma y la configuración regional, así como para almacenar esas selecciones.

Componente selector de globalización​

GlobalizationChooser permite al usuario seleccionar el idioma y la configuración regional por separado. Este componente acepta las siguientes propiedades:

  • className: Nombres de clase adicionales para el componente (PropTypes.string).
  • containerStyle: Nombres de clase adicionales para el contenedor del componente (PropTypes.string).
  • localeId: ID del elemento de selección de la configuración regional (PropTypes.string).
  • languageId: ID del elemento de selección del idioma (PropTypes.string).
  • localeValue: Configuración regional seleccionada (PropTypes.string).
  • languageValue: Idioma seleccionado (PropTypes.string).
  • languageLabelText: Clave de mensaje para el rótulo del idioma (intlMessageShape).
  • localeLabelText: Clave de mensaje para el rótulo de la configuración regional (intlMessageShape).
  • availableLanguageValues: Idiomas disponibles para la selección (PropTypes.arrayOf(PropTypes.string)).
  • availableLocaleValues: Configuraciones regionales disponibles para la selección (PropTypes.arrayOf(PropTypes.string)).
  • onLocaleValueChange: Devolución de llamada invocada en el cambio de la configuración regional (PropTypes.func).
  • onLanguageValueChange: Devolución de llamada invocada en el cambio del idioma (PropTypes.func).
  • renderLocaleLabel: Renderizar la propiedad para mostrar la configuración regional en las opciones (PropTypes.func).
  • renderLanguageLabel: Renderizar la propiedad para mostrar el idioma en las opciones (PropTypes.func).
  • showLocaleLabel: Indicador para mostrar u ocultar el rótulo de la configuración regional (PropTypes.bool).
  • showLanguageLabel: Indicador para mostrar u ocultar el rótulo del idioma (PropTypes.bool).
  • showLocaleSelect: Indicador para mostrar u ocultar la selección de la configuración regional (PropTypes.bool).
  • showLanguageSelect: Indicador para mostrar u ocultar la selección del idioma (PropTypes.bool).
  • readOnly: Si se establece en true, las listas desplegables son de solo lectura, ignoradas en el modo Storybook (PropTypes.bool).
  • skipPropagation: Si se establece en true, la configuración no se actualiza al cambiar de valor y GlobalizationChooser se convierte en un componente controlado (PropTypes.bool).

Componente selector de idioma​

Este componente solo presenta un menú de selección de idioma. El valor del idioma seleccionado también se utilizará para establecer el valor de la configuración regional. La selección no persiste en localStorage.

Note:

La dependencia @jutro/router y sus dependencias de pares como history y react-router-dom ahora son opcionales para los paquetes de componentes. Sin embargo, el componente LanguageSelector requiere que la dependencia se agregue a las dependencias de su aplicación para poder ser utilizado.

Cómo determina Jutro qué idioma y configuración regional utilizar​

Cuando un usuario carga una aplicación de Jutro, sucederá lo siguiente:

  • La aplicación lee la preferencia de idioma del navegador del usuario (navigator.language).
  • El idioma de la aplicación se vuelve por defecto el de preferencia del navegador del usuario, si esa preferencia también se encuentra en availableLanguages; de lo contrario, la aplicación adopta el valor predeterminado preferredLanguage.
  • La configuración regional de la aplicación también se volverá por defecto la preferencia de idioma del navegador del usuario si esa preferencia también se encuentra en availableLocales; de lo contrario, adopta el valor predeterminado preferredLocale.

Si se utiliza la función createG11nLocalStorageStore, las preferencias del usuario también se guardan en localStorage y se recuerdan en todas las sesiones.

Important: Jutro no lee realmente el encabezado HTTP accept-language. En lugar de eso, el JS del lado del cliente lee la propiedad navigator.language.

Si bien accept-language puede contener una lista ordenada de preferencias, navigator.language solo tiene un solo valor. El primer valor en accept-language será el mismo que el valor único en navigator.language.

Interacción con el almacén de g11n​

El almacén de globalización (g11n) está habilitado en el archivo src/startApp.js. De forma predeterminada, se inicializa utilizando la configuración regional de src/config/config.json. Consulte la sección sobre configuración para obtener más detalles.

Puede utilizar una de las siguientes funciones para inicializar el almacén:

  • createG11nMemoryStore: Gestiona la configuración de la configuración regional en la memoria. Este almacén es la configuración predeterminada. Significa que los cambios realizados en el almacén se restablecen al actualizar la página y vuelven a la configuración.
  • createG11nLocalStorageStore: Administra la configuración regional en el almacenamiento local, de modo que las preferencias del usuario se recuerden en todas las sesiones. Consulte la sección sobre la persistencia de la elección del usuario para obtener más detalles.

Cuando se utiliza una de estas funciones, puede invalidar la configuración predeterminada pasando un objeto con las siguientes propiedades:

src/startApp.js
const g11nStore = createG11nMemoryStore({
  country: 'PL',
  currency: 'PLN',
  language: 'pl',
  locale: 'pl-PL',
  locales: ['en-GB', 'pl-PL'],
  timeZone: 'Europe/Warsaw',
  languages: ['en', 'pl'],
});

A continuación, debe pasar el almacén a la función startApp:

src/startApp.js
startApp({
  g11nStore,
  // ... other settings
});

Reacción a los cambios de configuración regional​

Si desea reaccionar a los cambios de configuración regional e idioma, en cualquier lugar de la aplicación React, puede usar los ganchos useLanguage y useLocale. Ejemplo:

import { useLanguage, useLocale } from '@jutro/locale';

const MyPanel = () => {
  const {
    availableLocales,
    dateLocale,
    locale,
    defaultTimeZone,
    localeOnChangeCallback,
  } = useLocale();
  const { availableLanguages, language, languageOnChangeCallback } =
    useLanguage();

  return <div>Functionality coming soon, I promise!</div>;
};

Puede utilizar localeOnChangeCallback y languageOnChangeCallback para forzar un cambio en la configuración regional o en el idioma. Por ejemplo, puede usarlos en controladores de clics de botones:

return (
  <>
    <button onClick={() => languageOnChangeCallback('lang')}>
      Change language to "lang"
    </button>
    <button onClick={() => localeOnChangeCallback('loc')}>
      Change locale to "loc"
    </button>
  </>
);

Interacción con el almacén fuera del árbol de React​

Si desea acceder al almacén fuera del árbol de React, puede usar una de las funciones createG11n*Store del archivo src/startApp.js.

Cada vez que el usuario cambie cualquiera de los ajustes de la configuración regional, el almacén se actualizará. Para suscribirse a estos cambios, llame a subscribe y pase una función de devolución de llamada. Esta devolución de llamada se llamará cada vez que cambien los ajustes de la configuración regional.

src/startApp.js
import { createG11nMemoryStore } from '@jutro/locale';
import { loadConfiguration } from '@jutro/config';
import appConfig from './config/config.json';

// load the configuration from the config.json file
// because globalization store gets defaults from this config
loadConfiguration(appConfig);

// create a store that will save changes in memory
const g11nStore = createG11nMemoryStore({});

// subscribe to all changes
g11nStore.subscribe((state) => {
  console.log('G11n store changed', state);
});

// subscribe to language changes specifically
g11nStore.subscribe(
  (state) => state.language,
  (language) => {
    console.log('Language changed to: ', language);

    window.location.reload();
  }
);

export const startApp = () => {
  start(Jutro, {
    // pass your new local store here
    g11nStore,
    // ... other options
  });
};

Persistencia de la elección del usuario​

Para conservar la elección del usuario, puede utilizar la función createG11nLocalStorageStore desde jutro-locale. Actualiza automáticamente la configuración regional en localStorage.

  1. Cree un almacén con createG11nLocalStorageStore. Este almacén guarda los cambios en el almacén local del navegador. En el siguiente ejemplo, llamamos a este almacén g11nStore.
  2. Pase g11nStore a la función de inicio de la aplicación.
src/startApp.js
import { createG11nLocalStorageStore } from '@jutro/locale';
import { loadConfiguration } from '@jutro/config';
import appConfig from './config/config.json';

// load the configuration from the config.json file
// because globalization store gets defaults from this config
loadConfiguration(appConfig);

// create a store that will save changes in the browser's local store
const g11nStore = createG11nLocalStorageStore({
  name: 'unique-store-name',
});

export const startApp = () => {
  start(Jutro, {
    // pass your new local store here
    g11nStore,
    // ... other options
  });
};

Mensajes de marcado que requieren traducción​

Esto es algo que los desarrolladores deberían estar haciendo todo el tiempo.

Consulte también:

Para componentes definidos en JSX​

Importe la función defineMessages de @jutro/locale para definir cadenas para traducción.

Colóquelas en un archivo que corresponda a su componente (por ejemplo, MyPage.messages.js) y expórtelas:

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  clickMe: {
    id: 'jutro-app.pages.myPage.clickMe',
    defaultMessage: 'Click me!',
    description: 'Action message',
  },
  thanks: {
    id: 'pages.myPage.thanks',
    defaultMessage: 'Thanks for clicking me!',
    description: 'Result message that appears when user clicks a button',
  },
});

Importe los mensajes a su archivo .js correspondiente, y haga referencia a ellos:

import { useTranslator } from '@jutro/locale';
import messages from './MyPage.messages';
...
const translator = useTranslator();
...
const handleClick = () => {
    // eslint-disable-next-line no-alert
    alert(translator(messages.thanks));
};
...
<Button onClick={handleClick}>
    {translator(messages.clickMe)}
</Button>
¿Por qué se debe usar un archivo separado para los mensajes JSX?​

No es obligatorio, pero es más limpio. (Lo ideal sería hacer algo similar con los strings basados en JSON5 también. En este momento, sin embargo, eso no es posible. En los archivos de metadatos o JSON5, los strings se deben declarar directamente allí).

Cuando los strings están más aislados del código, es más fácil modificarlos y reducir el riesgo de que se rompan.

Uso de la sintaxis de formato de mensaje para argumentos con formato​

Note: Para obtener más información sobre este tema, consulte Interpolación de variables.

react-intl (específicamente intl-messageformat) admite la sintaxis MessageFormat de ICU4J. En lugar de simplemente incrustar una variable o un argumento en un string, usando la sintaxis MessageFormat, también se puede declarar el tipo de un argumento, y el estilo de formato.

Ejemplos:

  • Your premium is due on {someDate, date}
    • Formateará someDate en un estilo corto (generalmente no es una buena idea; el formato es ambiguo).
  • Your premium is due on {someDate, date, long}
    • Formateará someDate en el estilo long, como para en-US: February 17, 2019.
  • You've had {numClaims, number} on this policy
    • Formateará numClaims como un número. Es decir, utilizará separadores decimales y de agrupación apropiados para la configuración regional.
  • Your premium will increase by {somePercent, number, percent}
    • Formateará somePercent como un string de porcentaje.

Consulte la página FormatJS sobre argumentos con formato para obtener más información.

Sintaxis de mensajes y argumentos de divisa​

Para dar formato a las divisas usando MessageFormat, utilice esta sintaxis:

Your next payment is for {someAmount, number, :: currency/EUR}.

El problema aquí es que su string declara la divisa, por eso, debe saberla de antemano. Esto solo funcionará realmente para aquellas aplicaciones que solo usan una sola divisa.

Manejo de texto de interfaz de usuario traducible​

Una vez que el texto de la interfaz de usuario se haya marcado correctamente en el código, se lo debe extraer y combinar en un solo archivo. Luego, este archivo se puede traducir.

Script de internacionalización​

En el archivo package.json de la aplicación, se encuentra el script i18n. Este script ejecuta jutro generate:i18n. De forma predeterminada, hace lo siguiente:

  • Extrae el texto correctamente marcado de los archivos que coinciden con estos patrones: src/**/*.metadata.json5, src/**/*.{ts,tsx,js,jsx}.
    • El texto se extrae al directorio temporal ./i18n/src/.
  • Combina todo el texto de la interfaz de usuario de los distintos archivos en ./i18n/src a ./src/i18n/lang.json.
  • El archivo src/i18n/lang.json está pseudotraducido a src/i18n/yy.json. Esto se analiza con mayor detalle a continuación.

Para obtener más información sobre el comando jutro generate:i18n, consulte la sección “Generar traducciones de internacionalización” de la documentación de la CLI.

Extraiga todos los strings​

A menudo, los desarrolladores dejan strings codificados o incrustados en las aplicaciones, lo que imposibilita la traducción. Con eso en mente, tenemos el lenguaje Sherlock.

“Sherlock”: el / pseudolenguaje / simulado / falso​

¿Qué es?​

Es un lenguaje generado automáticamente que convierte strings de, por ejemplo, Codeless Form a [2zqq25_Codeless Form]. Esto se incluye con la configuración predeterminada de la aplicación de ejemplo.

Nuestra configuración predeterminada tiene yy en availableLanguages. Esto hace que “Sherlock” aparezca en el menú de idioma del componente GlobalizationChooser. Estrictamente hablando, en el mundo real, yy no es un código de idioma válido. Sin embargo, nuestro software asigna este código de idioma a nuestro propio lenguaje simulado “Sherlock”. Debe eliminarse de las configuraciones de producción.

¿Qué valor aporta?​
  • Cualquier string que aparezca sin los corchetes envolventes y la función hash antepuesta, entonces esto no se ha extraído correctamente. Significa que hay un error en el código. Obviamente, los strings de datos del cliente aparecerán de manera normal.
  • El hash en sí: aunque pueda parecer aleatorio, es único para cada par de clave-valor.

Strings de interfaz de usuario y vista previa en directo​

Cuando inicia su aplicación con npm start, entra en modo “vista previa en directo”. Esto significa que los cambios que realice en su código se reflejarán de inmediato en su navegador.

Lamentablemente, los cambios en los strings de origen existentes no se actualizan en la vista previa en directo. Se debe volver a ejecutar el ciclo extraer-combinar-pseudo con npm run i18n. Recompilar la aplicación también llamará a este script.

Traducción de su aplicación​

El idioma de origen predeterminado es el inglés, con el código de idioma en.

De forma predeterminada, según la aplicación de ejemplo, estos strings estarán en el archivo ./src/i18n/lang.json. Este archivo se agrega a .gitignore. Los traductores deben copiar el archivo y traducirlo a otros idiomas, por ejemplo en.json, de.json...

Recuerde también que solo npm run i18n (o build) puede garantizar que todos los strings se extraigan del código y se combinen en este archivo.

Los archivos de traducción deben agregarse al mismo directorio que el archivo lang.json.

Texto de interfaz de usuario del marco de Jutro​

Al igual que cualquier marco de interfaz de usuario, Jutro tiene un texto de interfaz de usuario que es independiente de su aplicación. Es probable que la aplicación exponga al menos parte de este texto. Este texto abarca strings como “Aceptar”, “Siguiente”, “Cancelar” y “Enviar”. Los componentes que exponen este texto a menudo le permiten sobrescribir el texto predeterminado. Sin embargo, algunos no lo hacen, como la lista de países de entre la que se puede elegir en el componente IntlPhoneNumberField.

Además del inglés de la configuración base (de EE. UU.), el texto marco está traducido a los siguientes idiomas: alemán, danés, español (peninsular), español (estadounidense), francés, italiano, japonés, neerlandés, noruego, portugués, ruso y chino simplificado.

Es posible que estos no sean el que usted necesite.

Invalidación de strings del marco o traducciones propias​

Supongamos que se encuentra con una de las siguientes situaciones:

  • Desea cambiar el texto predeterminado que utilizan nuestros componentes.
  • Desea cambiar algunas de las traducciones que ofrecemos.
  • Desea traducir el marco a otro idioma diferente de los que ofrecemos.

Esto es lo que debe hacer:

  1. En algún lugar debajo de ./src, cree un archivo framework.messages.js, similar a lo que se describe aquí.
  2. Copie la lista de strings del marco de origen desde node_modules/@jutro/translations/lang-data/en.json.
  3. En framework.messages.js creado arriba, agregue todos esos strings de marco (o solo algunos), usando el id y la forma de par defaultMessage. Si desea cambiar el defaultMessage por un string en particular, hágalo aquí.
  4. Al volver a compilar, verá que esos strings ahora se han agregado al archivo ./src/i18n/lang.json.
  5. Ahora puede traducir los strings del marco como lo haría con los de la aplicación.

Componentes sensibles a la configuración regional​

Los elementos como la visualización, el formato de las fechas, las horas, los números, los calendarios, los montos monetarios y los porcentajes varían según la configuración regional. Jutro ofrece varios componentes que respetan la configuración regional del usuario.

Fechas, horas y calendarios​

Jutro ofrece una variedad de opciones de fecha, hora y calendario.

Componentes​

Todos están disponibles desde @jutro/components.

DateField: Renderiza un elemento de entrada de selector de fecha. Tiene una opción de solo lectura, también ofrece compatibilidad para selección/entrada de fecha completa y fecha/hora, así como un modo de solo lectura.

FormattedDate: Renderiza una fecha integrada con formato (no <div>). Admite varios formatos predefinidos:

Configuración regionalshortlongabbreviatedfull
en_USAug 30, 2018August 30, 2018Thu, Aug 30, 2018Thursday, August 30, 2018
fr-FR30 août 201830 août 2018jeu. 30 août 2018jeudi 30 août 2018
pl-PL30 sie 201830 sierpnia 2018czw., 30 sierpnia 2018czwartek, 30 sierpnia 2018

DateValue: Renderiza una fecha formateada usando la propiedad tag para ajustar el valor.

FormattedDateRange: Similar a FormattedDate, solo para un intervalo de fechas, en lugar de una sola fecha.

Todos se presentan en una forma sensible a la configuración regional.

API​

Disponibles en @jutro/components.

formatDate y formatDateRange: API imperativas para formatear fechas, además de fechas y horas, utilizando la configuración regional actual.

Números (que no sean montos monetarios)​

Componentes​

Disponibles en @jutro/components.

InputNumberField: Renderiza un elemento de entrada para campos numéricos. También tiene una opción de solo lectura.

FormattedNumber: Ofrece compatibilidad en línea de solo lectura.

NumberValue: Renderiza una divisa formateada usando la propiedad tag para ajustar el valor.

Configuración regionalSalida formateada
en_US23,234.34
fr-FR23 234,34
de-DE23.234,34

API​

Disponibles en @jutro/components.

formatNumber: API imperativa para formatear números utilizando la configuración regional actual.

Montos monetarios​

Componentes​

Disponibles en @jutro/components.

CurrencyInput: Utilícelo para ingresar o mostrar un valor monetario. El formato se basa en la configuración regional. Admite modos de entrada y solo lectura.

FormattedCurrency: Muestra un valor de divisa con formato integrado. (Sin <div>).

CurrencyValue: Renderiza una divisa formateada usando la propiedad tag para ajustar el valor.

Los componentes anteriores le permiten establecer la propiedad currencyDisplay. Por un monto en dólares estadounidenses, en la configuración regional en-US, configurar currencyDisplay en code le dará USD; mientras que configurarlo en symbol le dará $.

La divisa en sí (por ejemplo, USD o EUR) se proporciona como una propiedad en el componente, y no tiene ninguna relación con la configuración regional y el país del usuario.

La configuración regional determina cómo se formatea el monto de la divisa, pero no determina la divisa en sí.

Configuración regionalSalida formateada (code)Salida formateada (symbol)
en_USUSD 23,234.34$23,234.34
fr-FR23 234,34 USD23 234,34 $US
de-DE23.234,34 USD23.234,34 $

API​

Disponibles en @jutro/components.

formatCurrency: API imperativa para formatear valores de divisa utilizando la configuración regional actual

No existe una configuración global defaultCurrency para los componentes relacionados con la divisa.

Esto significa que debe pasar la divisa o la divisa predeterminada que se utilizará a los componentes relacionados con la divisa CurrencyInput, FormattedCurrency y CurrencyValue:

<CurrencyInput
  availableCurrencies={['USD']}
  label="Currency input component"
/>

En el caso de CurrencyValue, si no se establece defaultCurrency, el componente adopta la forma predeterminada de dólares estadounidenses o USD. Este valor también se puede leer llamando a la función getDefaultCurrency desde el paquete local de Jutro con el fin de recuperarlo y luego pasarlo al componente correspondiente.

import { getDefaultCurrency } from '@jutro/locale';

Ordenamiento o intercalación​

La intercalación, también conocida como ordenamiento, de textos es específica del idioma. Cada idioma tiene sus propias reglas de intercalación.

Zona horaria​

De forma predeterminada, todas las fechas con hora se almacenan en UTC y se convierten a la zona horaria local del usuario cuando se muestran. Para invalidar esto, configure defaultTimeZone en localeSettings de src/config/config.json.

"localeSettings": {
    ...
    "defaultTimeZone": "Atlantic/Faroe"
}

Cuando se establece defaultTimeZone, todas las fechas con hora se convierten a la zona horaria defaultTimeZone cuando se muestran (pero aún se almacenan como fecha UTC). La única excepción es el componente DateTimeZoneField, en el que el usuario puede seleccionar una zona horaria de la lista. En este caso, defaultTimeZone se utiliza como zona horaria predeterminada.

El valor de defaultTimeZone debe ser una zona horaria de la IANA válida.

Sustantivos plurales en el texto de la interfaz de usuario​

Los sustantivos plurales son un problema lingüístico complicado que Jutro resuelve mediante el uso de la biblioteca react-intl.

Tomemos este pseudocódigo como ejemplo:

if (numPolicies === 1) print('You have 1 policy with us');
else print('You have {numPolicies} policies with us');

El código anterior funciona para el inglés, pero la lógica falla para muchos otros idiomas.

Muchos idiomas tienen reglas mucho más complejas en torno a los sustantivos plurales. Incluso el francés tiene reglas diferentes a las del inglés. (El francés usa la forma singular cuando la cantidad es 1 o 0).

Algunos idiomas tienen tres (polaco), cuatro (ruso) o incluso seis (árabe) formas plurales, todas dependiendo del valor del número entero, cuyo valor solo se puede conocer en tiempo de ejecución. Esta página de CLDR de Unicode explica la lógica matemática en torno a los plurales para muchos idiomas.

Compatibilidad para pluralización en Jutro​

Consulte la documentación de FormatJS y la guía de sintaxis ICU MessageFormat.

Note:
  • La sintaxis del plural no es del todo intuitiva, ni para desarrolladores ni para traductores.
  • Si está traduciendo, asegúrese de que sus herramientas de traducción y proveedores de traducción entiendan y admitan esta sintaxis.