chore: migrate to new localization process

.circleci/config.yml

@@ -95,9 +95,6 @@ jobs:
       - run:
           name: Babel build
           command: yarn --cwd /buie build:ci:es
-      - run:
-          name: Checking locales and styles
-          command: /buie/scripts/check_generated_files.sh
       - run:
           name: Webpack build
           command: yarn --cwd /buie build:ci:dist

.gitignore

@@ -7,7 +7,6 @@ dist/
 es/
 i18n/*.js
 i18n/bundles/
-i18n/json/
 node_modules/
 reports/
 storybook/

.npmignore

@@ -38,7 +38,6 @@ desktop.ini
 examples
 flow/
 flow-typed/npm/
-i18n/json
 jest.config.js
 jsconfig.json
 npm-debug.log

.storybook/main.ts

@@ -4,12 +4,9 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 import type { Configuration } from 'webpack';
 
 import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
-import TranslationsPlugin from '@box/frontend/webpack/TranslationsPlugin';
 import _webpack from 'webpack';
-import _i18n from '../scripts/i18n.config.js';
 
 const { DefinePlugin } = _webpack;
-const { translationDependencies } = _i18n;
 
 const language = process.env.LANGUAGE;
 const version = process.env.NODE_ENV === 'production' ? 'demo' : 'dev';
@@ -70,10 +67,6 @@ const config: StorybookConfig = {
             new DefinePlugin({
                 __VERSION__: JSON.stringify(version),
             }),
-            new TranslationsPlugin({
-                generateBundles: true,
-                additionalMessageData: translationDependencies.map(pkg => `${pkg}/i18n/[language]`),
-            }),
             new NodePolyfillPlugin({
                 additionalAliases: ['process'],
             }),

.storybook/preview.tsx

@@ -78,7 +78,9 @@ const preview: Preview = {
     initialGlobals: {
         locale: reactIntl.defaultLocale,
         locales: Object.keys(boxLanguages).reduce((locales, language) => {
-            locales[language] = boxLanguages[language].name;
+            if (reactIntl.messages[language]) {
+                locales[language] = boxLanguages[language].name;
+            }
             return locales;
         }, {}),
     },

.storybook/reactIntl.ts

@@ -1,13 +1,21 @@
 import boxLanguages from '@box/languages';
 
-const messages = boxLanguages.reduce(
-    (bundles, language) => ({
+// Webpack's require.context includes only bundle files present at compile time.
+// Locales without i18n/<locale>.js are skipped by buildLanguageBundles, so Storybook
+// can boot from the empty en-US catalog before Moji commits translated files.
+const bundleContext = require.context('../i18n/bundles', false, /^\.\/[^/]+\.js$/);
+const bundleKeys = new Set(bundleContext.keys());
+
+const messages = boxLanguages.reduce((bundles, language) => {
+    const key = `./${language}.js`;
+    if (!bundleKeys.has(key)) {
+        return bundles;
+    }
+    return {
         ...bundles,
-        // eslint-disable-next-line global-require, import/no-dynamic-require, @typescript-eslint/no-var-requires
-        [language]: require(`../i18n/bundles/${language}`).messages,
-    }),
-    {},
-);
+        [language]: bundleContext(key).messages,
+    };
+}, {});
 
 export const reactIntl = {
     defaultLocale: 'en-US',

babel.config.js

@@ -37,12 +37,6 @@ module.exports = {
         '@babel/plugin-transform-object-assign',
         '@babel/plugin-transform-object-rest-spread',
         'babel-plugin-styled-components',
-        [
-            'react-intl',
-            {
-                messagesDir: './i18n/json',
-            },
-        ],
     ],
     env: {
         development: {

i18n/en-CA.js

@@ -0,0 +1,2 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT MANUALLY OR YOUR CHANGES WILL BE OVERWRITTEN
+export default {};

i18n/en-US.js

@@ -0,0 +1,4 @@
+// THIS FILE IS INTENTIONALLY LEFT BLANK.
+// Messages for the source locale are loaded from message definitions via react-intl fallback.
+// DO NOT ADD ANY MESSAGES HERE!
+export default {};

i18n/en-x-pseudo.js

@@ -0,0 +1,2 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT MANUALLY OR YOUR CHANGES WILL BE OVERWRITTEN
+export default {};

package.json

@@ -61,9 +61,9 @@
         "build:prod:dist": "NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "build:prod:es": "NODE_ENV=production BABEL_ENV=npm yarn build:es --source-maps --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
         "build:prod:npm": "BABEL_ENV=production OUTPUT=dist LANGUAGE=en-US REACT=true yarn build:prod:dist",
-        "build:prod:storybook": "NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=production LANGUAGE=en-US REACT=true storybook build -o storybook",
+        "build:prod:storybook": "yarn build:i18n && NODE_ENV=production BABEL_ENV=production BROWSERSLIST_ENV=production LANGUAGE=en-US REACT=true storybook build -o storybook",
         "chromatic": "chromatic",
-        "clean": "rm -rf dist es i18n/bundles i18n/json i18n/*.js reports storybook",
+        "clean": "rm -rf dist es i18n/bundles reports storybook",
         "copy:flow": "flow-copy-source --ignore \"**/__tests__/**\" --ignore \"**/__mocks__/**\" --ignore \"**/*.ts\" ./src ./es && copyfiles './src/**/*.js.flow' es --up 1",
         "copy:styles": "copyfiles './src/**/*.scss' es --up 1",
         "cy:open": "yarn cy:wait; yarn cypress open",
@@ -83,7 +83,7 @@
         "setup": "yarn install --frozen-lockfile; npm-run-all clean build:i18n",
         "start": "npm-run-all setup start:storybook",
         "start:npm": "yarn setup; yarn build:dev:es",
-        "start:storybook": "NODE_ENV=development BABEL_ENV=development LANGUAGE=en-US storybook dev -p 6060",
+        "start:storybook": "yarn build:i18n && NODE_ENV=development BABEL_ENV=development LANGUAGE=en-US storybook dev -p 6060",
         "start:storybook:ci": "yarn start:storybook --ci",
         "test": "NODE_ENV=test BABEL_ENV=test yarn jest -c scripts/jest/jest.config.js",
         "test:e2e": "BROWSERSLIST_ENV=test npm-run-all -p -r start cy:run",
@@ -198,7 +198,6 @@
         "babel-loader": "^9.1.3",
         "babel-plugin-dynamic-import-node": "^2.3.0",
         "babel-plugin-flow-react-proptypes": "^25.1.0",
-        "babel-plugin-react-intl": "^5.1.18",
         "babel-plugin-react-remove-properties": "^0.3.0",
         "babel-plugin-rewire": "^1.0.0",
         "babel-plugin-styled-components": "^1.10.7",
@@ -393,6 +392,8 @@
         "webpack-dev-middleware": "^7.4.6"
     },
     "msw": {
-        "workerDirectory": [".storybook/public"]
+        "workerDirectory": [
+            ".storybook/public"
+        ]
     }
 }

scripts/buildLanguages.js

@@ -1,8 +1,39 @@
 #!/usr/bin/env node
 
+// Remove this file and call buildBundles from @box/frontend directly when @box/frontend is upgraded to ^12.
+
+/**
+ * buildLanguages.js - Generate i18n bundle files
+ *
+ * This script replaces the bundle generation that was previously done
+ * by TranslationsPlugin during webpack builds.
+ *
+ * Usage: buildLanguages.js [i18nDir] [--typescript]
+ */
+
+const path = require('path');
 const buildLanguageBundles = require('@box/frontend/i18n/buildLanguageBundles');
-const buildTranslations = require('@box/frontend/i18n/buildTranslations');
-const { translationDependencies } = require('./i18n.config');
 
-buildTranslations();
-buildLanguageBundles(translationDependencies.map(pkg => `${pkg}/i18n/[language]`));
+// Parse command-line arguments
+// Usage: buildLanguages.js [i18nDir] [--typescript]
+const args = process.argv.slice(2);
+const typescript = args.includes('--typescript');
+
+const i18nDir = args.find(arg => !arg.startsWith('--'));
+const options = {
+    i18nDir,
+    typescript,
+};
+
+// Load translation dependencies from i18n.config.js in the project root
+const projectRootDir = process.cwd();
+const configPath = path.join(projectRootDir, 'i18n.config.js');
+// eslint-disable-next-line import/no-dynamic-require
+const { translationDependencies } = require(configPath);
+
+// Transform package names to i18n paths with [language] placeholder
+// Use the folder name from i18nDir if provided, otherwise default to 'i18n'
+const i18nFolderName = i18nDir ? path.basename(i18nDir) : 'i18n';
+const additionalMessageData = translationDependencies.map(pkg => `${pkg}/${i18nFolderName}/[language]`);
+
+buildLanguageBundles(additionalMessageData, options);

scripts/prepush.sh

@@ -1,8 +1,5 @@
 #!/bin/bash
 
-# translation properties file
-PROPERTIES="i18n/en-US.properties"
-
 # Styling variables
 red=$"\e[1;31m"
 green=$"\e[1;32m"
@@ -16,37 +13,18 @@ check_uncommitted_files() {
     fi
 }
 
-# commit updated translations if any
-check_and_commit_updated_translations() {
-    if ! git diff --quiet HEAD $PROPERTIES; then
-        printf "${red}--------------------------------------------------------${end}"
-        printf "${red}Committing updated translations${end}"
-        printf "${red}--------------------------------------------------------${end}"
-        git add $PROPERTIES || exit 1
-        git commit --amend --no-edit --no-verify || exit 1
-        printf "${red}--------------------------------------------------------${end}"
-        printf "${red}Amended commit with translations, please push again with --no-verify${end}"
-        printf "${red}--------------------------------------------------------${end}"
-        exit 1
-    else
-        printf "${green}--------------------------------------------------------${end}"
-        printf "${green}en-US.properties is already up to date${end}"
-        printf "${green}--------------------------------------------------------${end}"
-    fi
-}
-
-# lint, test, and build assets to update translations
+# lint, test, and build assets
 prepush() {
 
     printf "${blue}-------------------------------------------------------------${end}"
-    printf "${blue}Building all sources, this will update i18n/json${end}"
+    printf "${blue}Building all sources${end}"
     printf "${blue}-------------------------------------------------------------${end}"
     yarn build:prod:es || exit 1
 
     check_uncommitted_files || exit 1
 
     printf "${blue}-------------------------------------------------------------${end}"
-    printf "${blue}Building localized bundles, this will update en-US.properties${end}"
+    printf "${blue}Building localized bundles${end}"
     printf "${blue}-------------------------------------------------------------${end}"
     yarn build:i18n || exit 1
 
@@ -55,8 +33,6 @@ prepush() {
     printf "${blue}-------------------------------------------------------------${end}"
     git fetch upstream
     yarn test --changedSince=upstream/master || exit 1
-
-    check_and_commit_updated_translations
 }
 
 # Execute this script

src/components/badge/__tests__/__snapshots__/BetaBadge.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`components/badge/BetaBadge should render a beta badge 1`] = `
 >
   <FormattedMessage
     defaultMessage="BETA"
+    description="Text for the beta badge"
     id="boxui.badges.beta"
   />
 </Badge>

src/components/badge/__tests__/__snapshots__/TrialBadge.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`components/badge/TrialBadge should render a trial badge 1`] = `
 >
   <FormattedMessage
     defaultMessage="TRIAL"
+    description="Text for the trial badge"
     id="boxui.badges.trial"
   />
 </Badge>

src/components/badge/__tests__/__snapshots__/UpgradeBadge.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`components/badge/UpgradeBadge should render a upgrade badge 1`] = `
 >
   <FormattedMessage
     defaultMessage="UPGRADE"
+    description="Text for the upgrade badge"
     id="boxui.badges.upgrade"
   />
 </Badge>

src/components/time/ReadableTime.ts

@@ -23,7 +23,8 @@ export interface ReadableTimeProps {
     uppercase?: boolean;
 }
 
-// exclude languages that do not have a grammar for uppercase (e.g. russian)
+// Uppercase is suppressed for these locales as a product/UX choice.
+// Cyrillic does have uppercase; `ru` is still excluded from ALL-CAPS.
 const nonUppercaseLocales = ['ru'];
 const ReadableTime = ({
     intl,