Internationalisation

Nous utilisons i18next  et react-i18next  pour gérer l’i18n dans O3. Chaque module frontend a son propre répertoire translations au niveau du package, par exemple translations/en.json. Les chaînes dans la base de code sont traduites en utilisant la fonction t exportée par react-i18next. La fonction t prend une clé et une valeur par défaut optionnelle. Exécutez le script extract-translations après avoir ajouté, supprimé ou modifié des chaînes traduisibles. Ceci utilise la bibliothèque i18next-parser  sous le capot. Par défaut, le fichier en.json est utilisé comme source de vérité pour les clés de traduction dans la base de code. Nous nous appuyons ensuite sur l’intégration avec Transifex  pour gérer les fichiers de traduction pour chaque locale. Vous pouvez lire plus sur la façon dont l’i18n est implémenté dans OpenMRS ici .

Voici quelques lignes directrices à suivre lors de la gestion de l’i18n dans O3 :

• Ne modifiez pas manuellement les fichiers de traduction spécifiques à la locale générés dans le répertoire translations. Exécutez le script extract-translations pour garder translations/en.json synchronisé avec les clés de traduction dans la base de code. L’intégration Transifex mettra automatiquement à jour les fichiers de traduction pour chaque locale via des pull requests automatisées.

• Utilisez le hook useTranslation  pour traduire les chaînes dans vos composants.

  import { useTranslation } from "react-i18next";
   
  const AddVitalsButton = () => {
    const { t } = useTranslation();
    const addVitalsLabel = t("addVitals", "Add vitals");
   
    return (
      <Button
        kind="ghost"
        renderIcon={Add}
        iconDescription={addVitalsLabel}
        onClick={launchVitalsBiometricsForm}
      >
        {t("add", "Add")}
      </Button>
    );
  };

  Les clés et chaînes correspondantes pour le code ci-dessus devraient ressembler à ceci :

  en.json

  "add": "Add",
  "addVitals": "Add vitals"

• Utilisez le composant Trans  pour traduire les chaînes qui contiennent des balises HTML.

  import { Trans } from "react-i18next";
   
  const VitalsHeader = () => {
    const { t } = useTranslation();
    return (
      // autre code omis pour la brièveté
      <Trans i18nKey="overOneWeekOldVitals">
        <span>
          These vitals are <strong>over one week old</strong>
        </span>
      </Trans>
    );
  };

  Les clés et chaînes correspondantes pour le code ci-dessus devraient ressembler à ceci :

  en.json

  "overOneWeekOldVitals": "<0>These vitals are <1>over one week old</1></0>",

• Pour gérer la pluralisation, utilisez le modèle suivant :

  // S'il n'y a qu'un seul drapeau de risque, la chaîne "1 risk flag" est affichée.
  // S'il y a plusieurs drapeaux de risque, la chaîne "{{count}} risk flags" est affichée
  // par exemple "3 risk flags".
  <span className={styles.flagText}>
    {t("flagCount", "{{count}} risk flag", {
      count: riskFlags.length,
    })}
  </span>

  Les clés et chaînes correspondantes pour le code ci-dessus devraient ressembler à ceci :

  "flagCount_one": "{{count}} risk flag",
  "flagCount_other": "{{count}} risk flags"

• Pour interpoler des variables dans une chaîne, utilisez le modèle suivant :

  // Utilisation de variables dans les traductions
  const WelcomeMessage = ({ patientName }) => {
    const { t } = useTranslation();
    return (
      <p>{t("welcome", "Welcome, {{name}}!", { name: patientName })}</p>
    );
  };

  La clé de traduction correspondante devrait ressembler à :

  en.json

  "welcome": "Welcome, {{name}}!"