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 => (
-  <ContextProvider store={store} history={browserHistory}>
-    {story()}
-  </ContextProvider>
-);
+  return (
+    <ContextProvider store={store} history={browserHistory}>
+      <IntlDecorator channel={channel}>{story()}</IntlDecorator>
+    </ContextProvider>
+  );
+}) as DecoratorFunction<React.ReactElement>;