Integrate storybook-addon-intl

.storybook/addons.ts

@@ -1,3 +1,4 @@
+import 'storybook-addon-intl/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-viewport/register';

.storybook/decorators/IntlDecorator.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Channel } from '@storybook/channels';
+import { setIntlConfig } from 'storybook-addon-intl';
+import {
+  EVENT_SET_LOCALE_ID,
+  EVENT_GET_LOCALE_ID,
+} from 'storybook-addon-intl/dist/shared';
+import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from 'app/services/i18n';
+import { setLocale } from 'app/components/i18n/actions';
+
+setIntlConfig({
+  locales: SUPPORTED_LANGUAGES,
+  defaultLocale: DEFAULT_LANGUAGE,
+});
+
+const IntlDecorator: React.ComponentType<{
+  channel: Channel;
+}> = ({ channel, children }) => {
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    const onLocaleChange = (locale: string) => {
+      dispatch(setLocale(locale));
+    };
+
+    // Listen for change of locale
+    channel.on(EVENT_SET_LOCALE_ID, onLocaleChange);
+
+    // Request the current locale
+    channel.emit(EVENT_GET_LOCALE_ID);
+
+    return () => {
+      channel.removeListener(EVENT_SET_LOCALE_ID, onLocaleChange);
+    };
+  }, [channel]);
+
+  return children as React.ReactElement;
+};
+
+export default IntlDecorator;

.storybook/decorators/index.tsx

@@ -0,0 +1 @@
+export { default as IntlDecorator } from './IntlDecorator';

.storybook/storyDecorator.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
+import addons, { DecoratorFunction } from '@storybook/addons';
 import { ContextProvider } from 'app/shell';
 import { browserHistory } from 'app/services/history';
 import storeFactory from 'app/storeFactory';
+import 'app/index.scss';
+
+import { IntlDecorator } from './decorators';
 
 const store = storeFactory();
 
-import 'app/index.scss';
+export default (story => {
+  const channel = addons.getChannel();
 
-export default story => (
+  return (
-  <ContextProvider store={store} history={browserHistory}>
+    <ContextProvider store={store} history={browserHistory}>
-    {story()}
+      <IntlDecorator channel={channel}>{story()}</IntlDecorator>
-  </ContextProvider>
+    </ContextProvider>
-);
+  );
+}) as DecoratorFunction<React.ReactElement>;

package.json

@@ -92,6 +92,7 @@
   "dependencies": {
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-intl": "^3.11.0",
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
@@ -162,6 +163,7 @@
     "sinon": "^8.0.4",
     "sitemap-webpack-plugin": "^0.6.0",
     "speed-measure-webpack-plugin": "^1.3.1",
+    "storybook-addon-intl": "^2.4.1",
     "style-loader": "~1.1.2",
     "typescript": "^3.7.4",
     "unexpected": "^11.12.1",

packages/app/services/i18n/i18n.ts

@@ -4,8 +4,8 @@ import locales from 'app/i18n';
 
 import intlPolyfill from './intlPolyfill';
 
-const SUPPORTED_LANGUAGES = Object.keys(locales);
+export const SUPPORTED_LANGUAGES = Object.keys(locales);
-const DEFAULT_LANGUAGE = 'en';
+export const DEFAULT_LANGUAGE = 'en';
 
 function getBrowserPreferredLanguages(): string[] {
   return []

packages/app/services/i18n/index.ts

@@ -1 +1,2 @@
+export * from './i18n';
 export { default } from './i18n';

yarn.lock

@@ -11805,7 +11805,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -13619,6 +13619,13 @@ store2@^2.7.1:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
   integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==
 
+storybook-addon-intl@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-intl/-/storybook-addon-intl-2.4.1.tgz#870d990defde87615e490aa4ca18abec3ac19f2c"
+  integrity sha512-07CofbUQcx8axTWd2/x0CNyaNJzRFW+/idHg2W3fnimy9w56A088kJwQzefjVFVSJELFDL2kjG19pP3MJ2A0ng==
+  dependencies:
+    prop-types "^15.5.0"
+
 storybook-chromatic@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0"