feat(common-translations): init common trans module (#14752)

ref: MANAGER-14580

Signed-off-by: Anoop N <[email protected]>

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"
   }

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;
+}

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: {

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.<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.
+
+
+
+

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"
+  }
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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`,
+};

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"]
+}

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`,
+    }
+  },
+});