Internacionalização

Internacionalização, ou i18n (abreviação baseada no número de letras entre o "i" inicial e o "n" final), é o processo de projetar e desenvolver um software, site ou sistema de forma que ele possa ser facilmente adaptado para diferentes idiomas, culturas e regiões sem precisar ser re-desenvolvido.

O Eitri possui um facilitador pra utilizar internacionalização nos seus Eitri-Apps em poucos passos.

Como utilizar

O Primeiro passo é adicionar no eitri-app.conf.js a seguinte propriedade(caso não tenha) eitri-app-dependencies e como propriedade interna o 18n no seguinte formato, onde o options é opcional mas é possível declarar um idioma de fallback como default.

  "eitri-app-dependencies": {
    "i18n": {
      "options": {
        "fallbackLng": "pt"
      },
      "version": "14.1.2"
    }
  }

Em /src você precisa ter uma pasta locales, com o seguinte formato de estrutura:

src
└──  locales
    ├── en
    |   └── translation.json
    ├── pt
    |   └── translation.json
    ├── en_CA
    |    └── translation.json
    └── fr
        └── translation.json

Cada arquivo translation.json deverá conter as chaves e valores a respeito do conteúdo a ser traduzido, exemplo:

{
    "home": {
        "title": "Unlock Your Business Potential",
        "button": "Get Started Now ->"
    }
}

Com isso já é possível pegar um conteúdo com idioma dinamicamente. Basta seguir o exemplo abaixo:

import { useTranslation } from 'eitri-i18n' // Necessário importar
import {Window, Text} from 'eitri-luminus'

export default function Home() {
    const { t } = useTranslation() // Hook que retorna um método t que pega o conteúdo do translation.json dinamicamente conforme a estrutura em locales.

    return <Window>
        <Text>
            {t("home.title")}
        </Text>
    </Window>
}

Caso você queira alterar o idioma a nível do Eitri-App basta seguir o exemplo abaixo:

import { useTranslation } from 'eitri-i18n' // Necessário importar
import {Window, Text, Button} from 'eitri-luminus'
import {useState} from 'react'

export default function Home() {
    const [currentLanguage, setCurrentLanguage] = useState();
    const { t, i18n } = useTranslation() // O item i18n possui um método changeLanguage que permite alterar o idioma

  const changeLanguage = () => {
    if (currentLanguage === "en-US") {
      i18n.changeLanguage("pt-BR");
      setCurrentLanguage("pt-BR");
    } else {
      i18n.changeLanguage("en-US");
      setCurrentLanguage("en-US");
    }
  };

    return <Window>
        <Text>
            {t("home.title")}
        </Text>
        <Button
          marginTop="large"
          label="Trocar de Idioma"
          onPress={changeLanguage}
        />
    </Window>
}