Design System i18n

How the MyUnisoft Design System loads and resolves UI strings, and how application code should integrate without touching the host’s default i18next singleton.

Runtime in React components

Use the useDSTranslation hook from @myunisoft/design-system (implemented as useTranslation with the DS i18n instance). It always reads the same isolated instance as the rest of the DS:

• Implementation: src/hooks/useDSTranslation.ts in the design-system package.
• That hook uses internalI18n from src/i18n/instance.ts (createInstance + designSystem namespace).

import { useDSTranslation } from '@myunisoft/design-system';

const MyPanel = () => {
  const { t, i18n } = useDSTranslation();
  return <span>{t('common.cancel')}</span>;
};

Outside React (helpers, factories, TipTap configure)

Use internalI18n.t(...) from src/i18n/instance when working inside the design-system package. Published consumers should prefer useDSTranslation in React; avoid the default i18next singleton for DS-owned strings.

Anti-patterns

• Default import i18n from 'i18next' for DS strings (pollutes / competes with the host default instance).
• Importing the removed legacy singleton that lived at src/assets/I18n/index.ts (default i18next + initReactI18next). Use internalI18n / useDSTranslation instead.
• Locale JSON under src/assets/I18n/locales/ remains the source of truth bundled into internalI18n — do not duplicate those keys in app resources for DS-owned strings.

Host applications: locale sync

Wrap your app (or the subtree that uses DS) with DSLocaleProvider and pass locale so DS strings follow the user language. See DSLocaleProvider.

Documentation site (Docusaurus)

This documentation theme wraps the playground in I18nextProvider with the same internalI18n instance as the library, and uses DSLocaleProvider with locale state from website/src/theme/Root.js. A fixed FR / EN toggle (bottom-right) switches that locale for demos; the choice is persisted under localStorage key user_lng (fr | en).

---

Namespace and behaviour

DS components use the dedicated namespace designSystem, separate from your app’s translations:

1. No namespace conflicts with app resources
2. Resources ship with the package; internalI18n is initialised in src/i18n/instance.ts

Translation keys (reference)

Common

Key	French	English
common.noResult	Aucun résultat	No result
common.loading	Chargement ...	Loading ...
common.cancel	Annuler	Cancel
common.save	Enregistrer	Save
common.submit	Valider	Submit
common.delete	Supprimer	Delete
common.edit	Modifier	Edit
common.search	Rechercher	Search
common.select	Sélectionner	Select
common.export	Exporter	Export
common.import	Importer	Import
common.all	Tous	All
common.addRow	+ Ajouter une ligne	+ Add a row

Validation

Interpolation placeholders are shown as literal text (MDX-safe):

Key	French	English
validation.errors.empty	Ce champ est obligatoire	This field is required
validation.errors.invalidDate	Date invalide (JJ/MM/AAAA)	Invalid date (DD/MM/YYYY)
validation.errors.moreThan	Doit être supérieur à {{minValue}}	Must be greater than {{minValue}}
validation.errors.lessOrEqualThan	Doit être inférieur ou égal à {{maxValue}}	Must be less than or equal to {{maxValue}}

Tooltips

Key	French	English
tooltips.cancel	Annuler	Cancel
tooltips.delete	Supprimer	Delete
tooltips.edit	Modifier	Edit
tooltips.save	Sauvegarder	Save

Adding new languages

The Design System officially supports French and English. For additional languages, open an issue or contribute in the repository.