@ovh-ux/manager-common-translations

The purpose of this package is to maintain the common reusable translations which can be consumed across the µ-apps.

Contribute to common translations package

Translations are split into multiple folders to facilitate lazy loading with i18next's namespaces. Each folder must have it's own purpose in the context of it's usage.

!!! info Translation keys must be generic and not include any app/module name as prefix/suffix as the content from this package will be made available for all the µ-apps.

Adding a new Namespace

1. Create a new folder in packages/manager/modules/common-translations/public/translations
2. Add Messages_fr_FR.json file.
3. Add all the required translations with appropriate keys.
4. Follow the usual translation process of Submitting a request to CMT team and then Retrieving the translations to make the corresponding changes in other locale files.

Add/Update translations in existing Namespace

1. Add/Update the required content with appropriate keys in Messages_fr_FR.json file.
2. Follow the usual translation process of Submitting a request to CMT team and then Retrieving the translations to make the corresponding changes in other locale files.

Consuming translations from the package

The "@ovh-ux/manager-common-translations" package provides the following,

1. Content for all the supported locales.
2. A NAMESPACES constant to facilitate easy loading of i18next's namespace.

To consume the translations provided by the package,

1. You need to include the package as dependency in your µ-app or other package where you intend to consume it.

   {
     ...
     ...
     "dependencies": {
       "@ovh-ux/manager-common-translations": "x.x.x",
       ...
       ...
     }
   }

2. In your React component, you can consume the translations from the package as shown in the below code-snippet.

   import { useTranslation } from 'react-i18next';
   import { NAMESPACES } from '@ovh-ux/manager-common-translations';
   
   export const ReactComponent = () => {
     ...
     const { t } = useTranslation(NAMESPACES.<NAMESPACE_NAME>);
     ...
   
     return (
         ...
         <>{{t('<TRANSLATION_KEY>')}}</>
         ...
     );
   }

!!! warning @ovh-ux/manager-vite-config automatically includes the translation files in the final bundle of the µ-app. If the base config provided by this package is not consumed in your µ-app, it will be your responsibility to add these files in your bundle.