From 8115270f1faee063ee2d8bec799b4afefcffcd4c Mon Sep 17 00:00:00 2001 From: Anoop N Date: Wed, 8 Jan 2025 13:36:42 +0530 Subject: [PATCH] feat(common-translations): init common trans module (#14752) ref: MANAGER-14580 Signed-off-by: Anoop N --- .../manager/core/vite-config/package.json | 1 + .../vite-config/src/commonTranslations.js | 26 +++++++ .../manager/core/vite-config/src/config.js | 6 +- .../modules/common-translations/README.md | 71 +++++++++++++++++++ .../modules/common-translations/package.json | 30 ++++++++ .../clipboard/Messages_de_DE.json | 5 ++ .../clipboard/Messages_en_GB.json | 5 ++ .../clipboard/Messages_es_ES.json | 5 ++ .../clipboard/Messages_fr_CA.json | 5 ++ .../clipboard/Messages_fr_FR.json | 5 ++ .../clipboard/Messages_it_IT.json | 5 ++ .../clipboard/Messages_pl_PL.json | 5 ++ .../clipboard/Messages_pt_PT.json | 5 ++ .../modules/common-translations/src/index.ts | 5 ++ .../modules/common-translations/tsconfig.json | 19 +++++ .../common-translations/vite.config.mjs | 41 +++++++++++ 16 files changed, 238 insertions(+), 1 deletion(-) create mode 100644 packages/manager/core/vite-config/src/commonTranslations.js create mode 100644 packages/manager/modules/common-translations/README.md create mode 100644 packages/manager/modules/common-translations/package.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_de_DE.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_en_GB.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_es_ES.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_CA.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_FR.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_it_IT.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_pl_PL.json create mode 100644 packages/manager/modules/common-translations/public/translations/clipboard/Messages_pt_PT.json create mode 100644 packages/manager/modules/common-translations/src/index.ts create mode 100644 packages/manager/modules/common-translations/tsconfig.json create mode 100644 packages/manager/modules/common-translations/vite.config.mjs diff --git a/packages/manager/core/vite-config/package.json b/packages/manager/core/vite-config/package.json index 760b0b3c92fb..3ecd200a3175 100644 --- a/packages/manager/core/vite-config/package.json +++ b/packages/manager/core/vite-config/package.json @@ -19,6 +19,7 @@ "@vitejs/plugin-react": "^2.2.0", "express": "^4.17.1", "http-proxy-middleware": "^2.0.7", + "vite-plugin-static-copy": "^2.0.0", "vite-plugin-svgr": "^3.2.0", "yn": "^5.0.0" } diff --git a/packages/manager/core/vite-config/src/commonTranslations.js b/packages/manager/core/vite-config/src/commonTranslations.js new file mode 100644 index 000000000000..9bec2050795d --- /dev/null +++ b/packages/manager/core/vite-config/src/commonTranslations.js @@ -0,0 +1,26 @@ +import path from 'path'; +import { createRequire } from 'node:module'; +import fs from 'node:fs'; + +export function getCommonTranslations() { + const require = createRequire(import.meta.url); + let packageJson; + try { + packageJson = JSON.parse( + fs.readFileSync(`${process.cwd()}/package.json`, 'utf8'), + ); + } catch (e) { + packageJson = {}; + } + const COMMON_TRANSLATIONS_PACKAGE = '@ovh-ux/manager-common-translations'; + const viteStaticPluginTargets = []; + if (packageJson?.dependencies[COMMON_TRANSLATIONS_PACKAGE]) { + viteStaticPluginTargets.push({ + src: `${path.dirname( + require.resolve(COMMON_TRANSLATIONS_PACKAGE), + )}/@ovh-ux`, + dest: `translations`, + }); + } + return viteStaticPluginTargets; +} diff --git a/packages/manager/core/vite-config/src/config.js b/packages/manager/core/vite-config/src/config.js index f06466c5ae15..393605a259a8 100644 --- a/packages/manager/core/vite-config/src/config.js +++ b/packages/manager/core/vite-config/src/config.js @@ -4,9 +4,10 @@ import react from '@vitejs/plugin-react'; import legacy from '@vitejs/plugin-legacy'; import svgr from 'vite-plugin-svgr'; import yn from 'yn'; - +import { viteStaticCopy } from 'vite-plugin-static-copy'; import IframeHmrPlugin from './plugin/iframe-hmr.js'; import viteOvhDevServerPlugin from './plugin/dev-server.js'; +import { getCommonTranslations } from './commonTranslations.js'; const isContainerApp = process.cwd().endsWith('container'); const runInContainer = process.env.CONTAINER; @@ -67,6 +68,9 @@ const getBaseConfig = (config) => { viteOvhDevServerPlugin({ isContainerApp, envConfig }), IframeHmrPlugin(), svgr(), + viteStaticCopy({ + targets: [...getCommonTranslations()], + }), ], css: { preprocessorOptions: { diff --git a/packages/manager/modules/common-translations/README.md b/packages/manager/modules/common-translations/README.md new file mode 100644 index 000000000000..3ecbd4306bb7 --- /dev/null +++ b/packages/manager/modules/common-translations/README.md @@ -0,0 +1,71 @@ +# @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](https://www.i18next.com/principles/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. + + ```json + { + ... + ... + "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.); + ... + + return ( + ... + <>{{t('')}} + ... + ); + } + ``` + +!!! 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. + + + + diff --git a/packages/manager/modules/common-translations/package.json b/packages/manager/modules/common-translations/package.json new file mode 100644 index 000000000000..f3bfdb9b1497 --- /dev/null +++ b/packages/manager/modules/common-translations/package.json @@ -0,0 +1,30 @@ +{ + "name": "@ovh-ux/manager-common-translations", + "version": "0.1.0", + "private": true, + "description": "Common translations for Manager µ-apps", + "repository": { + "type": "git", + "url": "git+https://github.com/ovh/manager.git", + "directory": "packages/manager/modules/common-translations" + }, + "license": "BSD-3-Clause", + "author": "OVH SAS", + "sideEffects": false, + "main": "./dist/index.cjs.js", + "module": "./dist/index.esm.js", + "types": "./dist/types/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsc && vite build", + "dev": "tsc && vite build", + "start:watch": "tsc -w" + }, + "devDependencies": { + "vite": "^5.2.13", + "vite-plugin-dts": "3.5.1", + "vite-plugin-static-copy": "^2.0.0" + } +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_de_DE.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_de_DE.json new file mode 100644 index 000000000000..a24908195282 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_de_DE.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Kopiert", + "clipboard_copy_error": "Fehler beim Kopieren", + "clipboard_copy": "In die Zwischenablage kopieren" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_en_GB.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_en_GB.json new file mode 100644 index 000000000000..ec0f0ed33df5 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_en_GB.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copied", + "clipboard_copy_error": "Copy error.", + "clipboard_copy": "Copy to clipboard" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_es_ES.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_es_ES.json new file mode 100644 index 000000000000..bc0e7f1a7352 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_es_ES.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copiado", + "clipboard_copy_error": "Se ha producido un error al copiar.", + "clipboard_copy": "Copiar al portapapeles" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_CA.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_CA.json new file mode 100644 index 000000000000..47264f8c0d04 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_CA.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copié", + "clipboard_copy_error": "Erreur de copie.", + "clipboard_copy": "Copier dans le presse-papier" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_FR.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_FR.json new file mode 100644 index 000000000000..47264f8c0d04 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_fr_FR.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copié", + "clipboard_copy_error": "Erreur de copie.", + "clipboard_copy": "Copier dans le presse-papier" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_it_IT.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_it_IT.json new file mode 100644 index 000000000000..f983fee51603 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_it_IT.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copiato", + "clipboard_copy_error": "Errore di copia", + "clipboard_copy": "Copiare negli appunti" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pl_PL.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pl_PL.json new file mode 100644 index 000000000000..7da91f2e59a9 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pl_PL.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Skopiowano", + "clipboard_copy_error": "Błąd kopiowania.", + "clipboard_copy": "Skopiuj do schowka" +} diff --git a/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pt_PT.json b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pt_PT.json new file mode 100644 index 000000000000..1028dac63d02 --- /dev/null +++ b/packages/manager/modules/common-translations/public/translations/clipboard/Messages_pt_PT.json @@ -0,0 +1,5 @@ +{ + "clipboard_copy_success": "Copiado", + "clipboard_copy_error": "Erro de cópia.", + "clipboard_copy": "Copiar para a área de transferência" +} diff --git a/packages/manager/modules/common-translations/src/index.ts b/packages/manager/modules/common-translations/src/index.ts new file mode 100644 index 000000000000..dbddb101c066 --- /dev/null +++ b/packages/manager/modules/common-translations/src/index.ts @@ -0,0 +1,5 @@ +export const NAMESPACE_PREFIX = '@ovh-ux/manager-common-translations'; + +export const NAMESPACES = { + CLIPBOARD: `${NAMESPACE_PREFIX}/clipboard`, +}; diff --git a/packages/manager/modules/common-translations/tsconfig.json b/packages/manager/modules/common-translations/tsconfig.json new file mode 100644 index 000000000000..354d195442eb --- /dev/null +++ b/packages/manager/modules/common-translations/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "lib": ["dom", "es2021"], + "target": "es2021", + "types": ["vite/client", "node"], + "module": "ES2020", + "outDir": "dist", + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "moduleResolution": "Node", + "isolatedModules": true, + "declaration": true, + "declarationDir": "./dist/types", + "jsx": "react-jsx" + }, + "exclude": ["node_modules", "dist", "types"] +} diff --git a/packages/manager/modules/common-translations/vite.config.mjs b/packages/manager/modules/common-translations/vite.config.mjs new file mode 100644 index 000000000000..43c76dc5a3c8 --- /dev/null +++ b/packages/manager/modules/common-translations/vite.config.mjs @@ -0,0 +1,41 @@ + +import { defineConfig } from 'vite'; +import path from 'path'; +import dts from 'vite-plugin-dts'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; + +const pathSrc = path.resolve(__dirname, 'src'); + +export default defineConfig({ + root: path.resolve(process.cwd(), 'src'), + resolve: { + alias: { + '@/': pathSrc, + }, + }, + plugins:[ + dts({ + root: __dirname, + outDir: 'dist/types', + insertTypesEntry: true, + }), + viteStaticCopy({ + targets: [ + { + src: `../public/translations/**/`, + dest: '@ovh-ux/manager-common-translations', + }, + ], + }), + ], + build: { + outDir: path.resolve(__dirname, 'dist'), + emptyOutDir: true, + lib: { + entry: path.resolve(pathSrc, 'index.ts'), + name: 'ManagerCommonTranslations', + formats: ['esm', 'cjs'], + fileName: (format) => `index.${format}.js`, + } + }, +});