🌐(i18n) create package i18n

We create a package i18n to manage the translations of the project.
It help us to extract the translations from the frontend to
be deployed to crowdin.
It also help us to format the translations from crowdin to
be used by the frontend apps.

src/frontend/package.json

@@ -11,13 +11,16 @@
   "scripts": {
     "APP_DESK": "yarn workspace app-desk",
     "APP_E2E": "yarn workspace app-e2e",
+    "I18N": "yarn workspace packages-i18n",
     "app:dev": "yarn APP_DESK run dev",
     "app:start": "yarn APP_DESK run start",
     "app:build": "yarn APP_DESK run build",
     "app:test": "yarn APP_DESK run test",
     "ci:build": "yarn APP_DESK run build:ci",
     "e2e:test": "yarn APP_E2E run test",
-    "lint": "yarn APP_DESK run lint && yarn APP_E2E run lint"
+    "lint": "yarn APP_DESK run lint && yarn APP_E2E run lint",
+    "i18n:extract": "yarn I18N run extract-translation",
+    "i18n:deploy": "yarn I18N run format-deploy"
   },
   "resolutions": {
     "@types/node": "20.11.16",

src/frontend/packages/i18n/.gitignore

@@ -0,0 +1 @@
+locales

src/frontend/packages/i18n/format-deploy.mjs

@@ -0,0 +1,49 @@
+import fs from "fs";
+import path from "path";
+
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs/yargs";
+
+// Get our args
+const argv = yargs(hideBin(process.argv)).argv;
+const { app, output } = argv;
+
+const folderPath = "./locales/" + app;
+const namefile = "translations.json";
+const jsonI18n = {};
+
+// Fetch the files in the locales folder
+fs.readdirSync(folderPath).map((language) => {
+  const languagePath = path.join(folderPath, path.sep, language);
+  // Crowdin output file in folder, we want to treat only these ones
+  if (!fs.lstatSync(languagePath).isDirectory()) {
+    return;
+  }
+
+  jsonI18n[language] = {
+    translation: {},
+  };
+
+  // Get the json file generated by crowdin
+  const pathTranslateFile = path.join(languagePath, path.sep, namefile);
+
+  if (!fs.existsSync(pathTranslateFile)) {
+    return;
+  }
+
+  const json = JSON.parse(fs.readFileSync(pathTranslateFile, "utf8"));
+
+  // Transform the json file to the format expected by i18next
+  const jsonKeyMessage = {};
+  Object.keys(json).forEach((key) => {
+    jsonKeyMessage[key] = json[key].message;
+  });
+  jsonI18n[language] = {
+    translation: jsonKeyMessage,
+  };
+});
+
+// Write the file to the output
+fs.writeFileSync(output, JSON.stringify(jsonI18n), "utf8");
+
+console.log(`${app} translations deployed!`);

src/frontend/packages/i18n/i18next-parser.config.jest.mjs

@@ -0,0 +1,9 @@
+const config = {
+  customValueTemplate: {
+    message: '${key}',
+    description: '${description}',
+  },
+  keepRemoved: false,
+};
+
+export default config;

src/frontend/packages/i18n/i18next-parser.config.mjs

@@ -0,0 +1,9 @@
+const config = {
+  customValueTemplate: {
+    message: "${key}",
+    description: "${description}",
+  },
+  keepRemoved: true,
+};
+
+export default config;

src/frontend/packages/i18n/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "packages-i18n",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "extract-translation": "yarn extract-translation:desk",
+    "extract-translation:desk": "yarn i18next ../../apps/desk/**/*.{ts,tsx} -c ./i18next-parser.config.mjs -o ./locales/desk/translations-crowdin.json",
+    "format-deploy": "yarn format-deploy:desk",
+    "format-deploy:desk": "node ./format-deploy.mjs --app=desk --output=../../apps/desk/src/i18n/translations.json"
+  },
+  "dependencies": {
+    "i18next-parser": "8.8.0",
+    "yargs": "17.7.2"
+  }
+}