refactor(i18n): migrate to structured json format (#2747)

docs/.storybook/configs/intl-context.js

@@ -47,9 +47,16 @@ const namifyLocale = (locale) => {
 
 const IntlWrapper = (props) => {
   const locale = props.locale;
-  const messages = getMessagesForLocale(locale);
+  const messagesForLocale = getMessagesForLocale(locale);
+  const normalizedMessages = Object.entries(messagesForLocale).reduce(
+    (messages, [messageKey, messageValue]) => ({
+      ...messages,
+      [messageKey]: messageValue.string ?? messageValue,
+    }),
+    {}
+  );
   return (
-    <IntlProvider locale={locale} messages={messages}>
+    <IntlProvider locale={locale} messages={normalizedMessages}>
       {props.children}
     </IntlProvider>
   );

package.json

@@ -17,7 +17,7 @@
     "build": "./scripts/build.sh",
     "build:watch": "./scripts/build_watch.sh",
     "start": "yarn --cwd docs start",
-    "extract-intl": "formatjs extract --format=./packages/i18n/transifex-transformer.js --out-file=./packages/i18n/data/core.json '{packages,src/components}/**/messages.ts'",
+    "extract-intl": "formatjs extract --format=transifex --out-file=./packages/i18n/data/core.json '{packages,src/components}/**/messages.ts'",
     "compile-intl": "yarn workspace @commercetools-uikit/i18n compile-data",
     "lint": "jest --projects jest.eslint.config.js",
     "lint:js": "jest --config jest.eslint.config.js",

packages/i18n/package.json

@@ -19,7 +19,7 @@
   "module": "dist/commercetools-uikit-i18n.esm.js",
   "files": ["dist", "data", "compiled-data"],
   "scripts": {
-    "compile-data": "formatjs compile-folder --format=./transifex-transformer.js --ast data compiled-data"
+    "compile-data": "formatjs compile-folder --format=./transifex-compiler.js --ast data compiled-data"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",

packages/i18n/transifex-compiler.js

@@ -0,0 +1,23 @@
+// NOTE: this should not be needed anymore once we fully migrated to STRUCTURED_JSON format.
+exports.compile = function compile(msgs) {
+  const normalizedMessages = Object.entries(msgs).reduce(
+    (messages, [id, msg]) => {
+      // Key/Value JSON format
+      if (typeof msg === 'string') {
+        return {
+          ...messages,
+          [id]: msg,
+        };
+      }
+
+      // Structured JSON format
+      return {
+        ...messages,
+        [id]: msg.string,
+      };
+    },
+    {}
+  );
+
+  return normalizedMessages;
+};

transifex.yml

@@ -1,7 +1,7 @@
 git:
   filters:
     - filter_type: file
-      file_format: KEYVALUEJSON
+      file_format: STRUCTURED_JSON
       source_language: en_US
       source_file: packages/i18n/data/core.json
       translation_files_expression: packages/i18n/data/<lang>.json