feat(storybook): use contexts for choosing locale (#841)

* feat(storybook): use contexts for locale switcher

Author: montezume

.storybook/addons.js

@@ -6,3 +6,4 @@ import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-contexts/register';

.storybook/config.js

@@ -1,6 +1,7 @@
 import { addParameters, configure, addDecorator } from '@storybook/react';
+import { withContexts } from '@storybook/addon-contexts/react';
 import { create } from '@storybook/theming';
-import IntlDecorator from './decorators/intl';
+import { contexts } from './configs/contexts';
 
 addParameters({
   options: {
@@ -45,6 +46,6 @@ function loadStories() {
   srcExampleStories.keys().forEach(filename => srcExampleStories(filename));
 }
 
-addDecorator(IntlDecorator);
+addDecorator(withContexts(contexts));
 
 configure(loadStories, module);

.storybook/configs/contexts.js

@@ -0,0 +1,6 @@
+import intlContext from './intl-context';
+
+export const contexts = [
+  intlContext,
+  /* ... */ // multiple contexts setups are supported
+];

.storybook/configs/intl-context.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IntlProvider, addLocaleData } from 'react-intl';
+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);
+
+const slugifyLocale = locale => {
+  switch (locale) {
+    case 'frFR':
+      return 'fr-FR';
+    case 'zhCN':
+      return 'zh-CN';
+    default:
+      return locale;
+  }
+};
+
+const namifyLocale = locale => {
+  switch (locale) {
+    case 'en':
+      return 'English';
+    case 'es':
+      return 'Español';
+    case 'de':
+      return 'Deutsch';
+    case 'frFR':
+      return 'Français';
+    case 'zhCN':
+      return '简化字';
+    default:
+      return locale;
+  }
+};
+
+const IntlWrapper = props => {
+  const locale = props.locale;
+  return (
+    <IntlProvider locale={slugifyLocale(locale)} messages={messages[locale]}>
+      {props.children}
+    </IntlProvider>
+  );
+};
+
+IntlWrapper.propTypes = {
+  locale: PropTypes.string.isRequired,
+};
+
+const intlParams = locales.map(locale => ({
+  name: namifyLocale(locale),
+  props: { locale },
+}));
+
+const intlContext = {
+  icon: 'globe', // a icon displayed in the Storybook toolbar to control contextual props
+  title: 'locales', // an unique name of a contextual environment
+  components: [IntlWrapper],
+  params: intlParams,
+  options: {
+    deep: true, // pass the `props` deeply into all wrapping components
+    disable: false, // disable this contextual environment completely
+    cancelable: false, // allow this contextual environment to be opt-out optionally in toolbar
+  },
+};
+
+export default intlContext;

.storybook/decorators/index.js

@@ -1,3 +1,2 @@
 export { default as FormikBox } from './formik-box';
-export { default as Intl } from './section';
 export { default as Section } from './section';

.storybook/decorators/intl/index.js

@@ -100,6 +100,7 @@
     "@emotion/babel-preset-css-prop": "10.0.9",
     "@percy/puppeteer": "1.0.8",
     "@storybook/addon-actions": "5.1.1",
+    "@storybook/addon-contexts": "5.1.1",
     "@storybook/addon-info": "5.1.1",
     "@storybook/addon-knobs": "5.1.1",
     "@storybook/addon-links": "5.1.1",
@@ -110,8 +111,6 @@
     "@svgr/rollup": "4.3.0",
     "@svgr/webpack": "4.3.0",
     "@testing-library/react": "8.0.1",
-    "@svgr/rollup": "4.3.0",
-    "@svgr/webpack": "4.3.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "24.8.0",
     "babel-loader": "8.0.6",