feat(i18n): support new locales fr-FR and zh-CN (#643)

Author: emmenko

.storybook/decorators/intl/intl.js

@@ -4,11 +4,15 @@ import { withKnobs, select } from '@storybook/addon-knobs/react';
 import en from 'react-intl/locale-data/en';
 import de from 'react-intl/locale-data/de';
 import es from 'react-intl/locale-data/es';
+import frFR from 'react-intl/locale-data/fr';
+import zhCN from 'react-intl/locale-data/zh';
 import * as messages from '../../../i18n';
 
 addLocaleData(en);
 addLocaleData(de);
 addLocaleData(es);
+addLocaleData(frFR);
+addLocaleData(zhCN);
 const locales = Object.keys(messages);
 
 export default storyFn => {

.storybook/webpack.config.js

@@ -10,7 +10,9 @@ const sourceFolders = [
 ];
 
 module.exports = ({ config }) => {
-  config.plugins.push(new MomentLocalesPlugin({ localesToKeep: ['de', 'es'] }));
+  config.plugins.push(
+    new MomentLocalesPlugin({ localesToKeep: ['de', 'es', 'fr', 'zh-cn'] })
+  );
   config.devtool = 'cheap-module-source-map'; // TODO: should we use something differen?
   config.module.rules = [
     // Disable require.ensure as it's not a standard language feature.

i18n/core.json i18n/data/core.json

@@ -0,0 +1 @@
+{}

i18n/de.json i18n/data/de.json

@@ -0,0 +1 @@
+{}

i18n/en.json i18n/data/en.json

@@ -1,5 +1,7 @@
-import en from './en.json';
-import de from './de.json';
-import es from './es.json';
+import en from './data/en.json';
+import de from './data/de.json';
+import es from './data/es.json';
+import frFR from './data/fr-FR.json';
+import zhCN from './data/zh-CN.json';
 
-export { en, de, es };
+export { en, de, es, frFR, zhCN };

i18n/es.json i18n/data/es.json

@@ -45,7 +45,7 @@
     "start": "yarn storybook:start",
     "storybook:start": "start-storybook -p 9002 -s docs/assets",
     "docs:publish": "node scripts/publish-docs.js",
-    "i18n:build": "node scripts/extract-intl.js --output-path=$(pwd)/i18n 'src/components/**/!(*.spec).js'",
+    "i18n:build": "node scripts/extract-intl.js --output-path=$(pwd)/i18n/data 'src/components/**/!(*.spec).js'",
     "lint": "jest --projects jest.eslint.config.js",
     "lint:js": "jest --config jest.eslint.config.js",
     "format:js": "prettier --write '**/*.js'",

i18n/data/fr-FR.json

@@ -2,7 +2,7 @@ import { i18n, customProperties } from 'ui-kit';
 
 describe('exports', () => {
   it('should export i18n for three languages', () => {
-    expect(Object.keys(i18n)).toEqual(['en', 'de', 'es']);
+    expect(Object.keys(i18n)).toEqual(['en', 'de', 'es', 'frFR', 'zhCN']);
   });
 
   it('should export custom-properties', () => {

i18n/data/zh-CN.json

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import React from 'react';
 import { render } from 'react-testing-library';
 import { IntlProvider, addLocaleData } from 'react-intl';
@@ -6,11 +7,29 @@ import { createMemoryHistory } from 'history';
 import en from 'react-intl/locale-data/en';
 import de from 'react-intl/locale-data/de';
 import es from 'react-intl/locale-data/es';
-import messages from '../i18n/core.json';
+import frFR from 'react-intl/locale-data/fr';
+import zhCN from 'react-intl/locale-data/zh';
 
 addLocaleData(en);
 addLocaleData(de);
 addLocaleData(es);
+addLocaleData(frFR);
+addLocaleData(zhCN);
+
+const getMessagesForLocale = locale => {
+  switch (locale) {
+    case 'de':
+      return require('../i18n/data/de.json');
+    case 'es':
+      return require('../i18n/data/es.json');
+    case 'fr-FR':
+      return require('../i18n/data/fr-FR.json');
+    case 'zh-CN':
+      return require('../i18n/data/zh-CN.json');
+    default:
+      return require('../i18n/data/en.json');
+  }
+};
 
 const customRender = (
   node,
@@ -22,7 +41,7 @@ const customRender = (
   } = {}
 ) => ({
   ...render(
-    <IntlProvider locale={locale} messages={messages}>
+    <IntlProvider locale={locale} messages={getMessagesForLocale(locale)}>
       <Router history={history}>{node}</Router>
     </IntlProvider>,
     rtlOptions

i18n/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
-import { i18n as messages } from '../../dist/ui-kit.esm';
+import messages from '../../i18n/data/en.json';
 
 addLocaleData(en);
 
 const Suite = props => (
-  <IntlProvider locale="en" messages={messages.en}>
+  <IntlProvider locale="en" messages={messages}>
     <div>{props.children}</div>
   </IntlProvider>
 );