Internationalisation (i18n)

RIVORA utilise i18next avec react-i18next pour l'internationalisation. Deux langues sont supportees : francais (defaut) et anglais.

Configuration

Fichier : frontend/src/i18n/index.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import fr from './fr.json';
import en from './en.json';

i18n.use(initReactI18next).init({
  resources: { fr: { translation: fr }, en: { translation: en } },
  lng: localStorage.getItem('rvr_lang') || 'fr',
  fallbackLng: 'fr',
  interpolation: { escapeValue: false },
});

export default i18n;

Points cles

• Langue par defaut : fr (francais)
• Persistance : la langue choisie est sauvegardee dans rvr_lang (localStorage)
• Fallback : si une cle manque en anglais, le francais est utilise
• Interpolation : escapeValue: false car React gere deja l'echappement

Fichiers de traduction

Fichier	Langue
frontend/src/i18n/fr.json	Francais
frontend/src/i18n/en.json	Anglais

Les traductions sont organisees par namespace (ex: dashboard.title, kanban.backlog).

Utilisation dans un composant

Hook useTranslation

import { useTranslation } from 'react-i18next';

export default function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('dashboard.title')}</h1>
      <p>{t('dashboard.users')}</p>
    </div>
  );
}

Avec des variables

t('messages.count', { count: 5 })
// fr.json: "messages.count": "{{count}} messages"

LanguageSwitcher

Fichier : frontend/src/components/LanguageSwitcher.tsx

Composant de bascule entre FR et EN, affiche dans le sidebar.

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const switchLang = (lng: string) => {
    i18n.changeLanguage(lng);
    localStorage.setItem('rvr_lang', lng);
  };

  return (
    <div className="flex items-center gap-1 text-xs">
      <button onClick={() => switchLang('fr')}
        className={i18n.language === 'fr' ? 'bg-blue-600 text-white' : 'text-slate-400'}>
        FR
      </button>
      <span>|</span>
      <button onClick={() => switchLang('en')}
        className={i18n.language === 'en' ? 'bg-blue-600 text-white' : 'text-slate-400'}>
        EN
      </button>
    </div>
  );
}

Ajouter une traduction

1. Ajouter la cle dans fr.json et en.json :

// fr.json
{
  "myFeature": {
    "title": "Ma fonctionnalite",
    "description": "Description en francais"
  }
}

// en.json
{
  "myFeature": {
    "title": "My Feature",
    "description": "Description in English"
  }
}

2. Utiliser dans le composant : t('myFeature.title')

Ajouter une nouvelle langue

1. Creer src/i18n/de.json (exemple : allemand)
2. Importer dans src/i18n/index.ts et ajouter a resources
3. Ajouter un bouton dans LanguageSwitcher.tsx