Adding i18next integration

gatsby-browser.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import * as Sentry from '@sentry/browser';
+import { I18nextProvider } from 'react-i18next';
 
+import i18n from 'i18n';
 import Layout from 'components/Layout';
 
 import 'site.css';
@@ -14,3 +16,8 @@ export const onClientEntry = () => {
 export const wrapPageElement = ({ element }) => {
   return <Layout>{ element }</Layout>;
 };
+
+// eslint-disable-next-line react/prop-types
+export const wrapRootElement = ({ element }) => {
+  return <I18nextProvider i18n={ i18n }>{ element }</I18nextProvider>;
+};

gatsby-ssr.js

@@ -1,8 +1,15 @@
 import React from 'react';
+import { I18nextProvider } from 'react-i18next';
 
+import i18n from 'i18n';
 import Layout from 'components/Layout';
 
 // eslint-disable-next-line react/prop-types
 export const wrapPageElement = ({ element }) => {
   return <Layout>{ element }</Layout>;
 };
+
+// eslint-disable-next-line react/prop-types
+export const wrapRootElement = ({ element }) => {
+  return <I18nextProvider i18n={ i18n }>{ element }</I18nextProvider>;
+};

package.json

@@ -33,7 +33,8 @@
   "jest": {
     "clearMocks": true,
     "collectCoverageFrom": [
-      "src/**/*.js"
+      "src/**/*.js",
+      "!src/i18n.js"
     ],
     "coverageReporters": [
       "text-summary",
@@ -77,6 +78,9 @@
     "gatsby-plugin-postcss": "^2.0.2",
     "gatsby-plugin-react-helmet": "^3.0.5",
     "gatsby-plugin-sentry": "^1.0.0",
+    "i18next": "^13.1.0",
+    "i18next-browser-languagedetector": "^2.2.4",
+    "i18next-xhr-backend": "^1.5.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
     "postcss-cssnext": "^3.1.0",
@@ -85,6 +89,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-feather": "^1.1.5",
-    "react-helmet": "^5.2.0"
+    "react-helmet": "^5.2.0",
+    "react-i18next": "^9.0.2"
   }
 }

src/__mocks__/i18n.js

@@ -0,0 +1,15 @@
+const i18n = jest.requireActual('i18n');
+
+// Load empty resource bundle to reduce logging output
+i18n.default.addResourceBundle('dev', 'translation', {});
+i18n.default.addResourceBundle('en', 'translation', {});
+i18n.default.addResourceBundle('other', 'translation', {});
+
+module.exports = {
+  ...i18n,
+  locales: [
+    { code: 'en', name: 'English' },
+    { code: 'other', name: 'Other' }
+  ],
+  mockT: str => `TRANSLATE(${ str })`
+};

src/components/Header/__snapshots__/test.js.snap

@@ -56,6 +56,9 @@ ShallowWrapper {
               Privacy Policy
             </mockConstructor>
           </li>
+          <li>
+            <LoadNamespace(LocaleSwitcherImpl) />
+          </li>
         </ul>,
       ],
       "className": "header",
@@ -115,6 +118,9 @@ ShallowWrapper {
                 Privacy Policy
               </mockConstructor>
             </li>,
+            <li>
+              <LoadNamespace(LocaleSwitcherImpl) />
+            </li>,
           ],
           "className": "list",
         },
@@ -200,6 +206,25 @@ ShallowWrapper {
             },
             "type": "li",
           },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": <LoadNamespace(LocaleSwitcherImpl) />,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {},
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+            "type": "li",
+          },
         ],
         "type": "ul",
       },
@@ -243,6 +268,9 @@ ShallowWrapper {
                 Privacy Policy
               </mockConstructor>
             </li>
+            <li>
+              <LoadNamespace(LocaleSwitcherImpl) />
+            </li>
           </ul>,
         ],
         "className": "header",
@@ -302,6 +330,9 @@ ShallowWrapper {
                   Privacy Policy
                 </mockConstructor>
               </li>,
+              <li>
+                <LoadNamespace(LocaleSwitcherImpl) />
+              </li>,
             ],
             "className": "list",
           },
@@ -387,6 +418,25 @@ ShallowWrapper {
               },
               "type": "li",
             },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": <LoadNamespace(LocaleSwitcherImpl) />,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {},
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+              "type": "li",
+            },
           ],
           "type": "ul",
         },
@@ -470,6 +520,9 @@ ShallowWrapper {
               Privacy Policy
             </mockConstructor>
           </li>
+          <li>
+            <LoadNamespace(LocaleSwitcherImpl) />
+          </li>
         </ul>,
       ],
       "className": "header",
@@ -529,6 +582,9 @@ ShallowWrapper {
                 Privacy Policy
               </mockConstructor>
             </li>,
+            <li>
+              <LoadNamespace(LocaleSwitcherImpl) />
+            </li>,
           ],
           "className": "list",
         },
@@ -614,6 +670,25 @@ ShallowWrapper {
             },
             "type": "li",
           },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": <LoadNamespace(LocaleSwitcherImpl) />,
+            },
+            "ref": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {},
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+            "type": "li",
+          },
         ],
         "type": "ul",
       },
@@ -657,6 +732,9 @@ ShallowWrapper {
                 Privacy Policy
               </mockConstructor>
             </li>
+            <li>
+              <LoadNamespace(LocaleSwitcherImpl) />
+            </li>
           </ul>,
         ],
         "className": "header",
@@ -716,6 +794,9 @@ ShallowWrapper {
                   Privacy Policy
                 </mockConstructor>
               </li>,
+              <li>
+                <LoadNamespace(LocaleSwitcherImpl) />
+              </li>,
             ],
             "className": "list",
           },
@@ -801,6 +882,25 @@ ShallowWrapper {
               },
               "type": "li",
             },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": <LoadNamespace(LocaleSwitcherImpl) />,
+              },
+              "ref": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {},
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+              "type": "li",
+            },
           ],
           "type": "ul",
         },

src/components/Header/index.js

@@ -4,6 +4,8 @@ import { Link, StaticQuery, graphql } from 'gatsby';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
 
+import LocaleSwitcher from 'components/LocaleSwitcher';
+
 import style from './style.module.css';
 
 const query = graphql`
@@ -36,6 +38,9 @@ export const HeaderImpl = ({ site: { siteMetadata } }) => (
       <li>
         <Link to="/privacy">Privacy Policy</Link>
       </li>
+      <li>
+        <LocaleSwitcher />
+      </li>
     </ul>
   </header>
 );

src/components/LocaleSwitcher/__snapshots__/test.js.snap

@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocaleSwitcher rendering 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <LocaleSwitcherImpl />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <WithMergedOptions(TransComponent)>
+          Language
+        </WithMergedOptions(TransComponent)>,
+        <div
+          className="switcher"
+        >
+          <select
+            onChange={[Function]}
+            value="en"
+          >
+            <option
+              value="en"
+            >
+              English
+            </option>
+            <option
+              value="other"
+            >
+              Other
+            </option>
+          </select>
+          <ChevronsDown
+            color="currentColor"
+            size="24"
+          />
+        </div>,
+      ],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "children": "Language",
+        },
+        "ref": null,
+        "rendered": "Language",
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <select
+              onChange={[Function]}
+              value="en"
+            >
+              <option
+                value="en"
+              >
+                English
+              </option>
+              <option
+                value="other"
+              >
+                Other
+              </option>
+            </select>,
+            <ChevronsDown
+              color="currentColor"
+              size="24"
+            />,
+          ],
+          "className": "switcher",
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": Array [
+                <option
+                  value="en"
+                >
+                  English
+                </option>,
+                <option
+                  value="other"
+                >
+                  Other
+                </option>,
+              ],
+              "onChange": [Function],
+              "value": "en",
+            },
+            "ref": null,
+            "rendered": Array [
+              Object {
+                "instance": null,
+                "key": "en",
+                "nodeType": "host",
+                "props": Object {
+                  "children": "English",
+                  "value": "en",
+                },
+                "ref": null,
+                "rendered": "English",
+                "type": "option",
+              },
+              Object {
+                "instance": null,
+                "key": "other",
+                "nodeType": "host",
+                "props": Object {
+                  "children": "Other",
+                  "value": "other",
+                },
+                "ref": null,
+                "rendered": "Other",
+                "type": "option",
+              },
+            ],
+            "type": "select",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "function",
+            "props": Object {
+              "color": "currentColor",
+              "size": "24",
+            },
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
+        ],
+        "type": "div",
+      },
+    ],
+    "type": "label",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <WithMergedOptions(TransComponent)>
+            Language
+          </WithMergedOptions(TransComponent)>,
+          <div
+            className="switcher"
+          >
+            <select
+              onChange={[Function]}
+              value="en"
+            >
+              <option
+                value="en"
+              >
+                English
+              </option>
+              <option
+                value="other"
+              >
+                Other
+              </option>
+            </select>
+            <ChevronsDown
+              color="currentColor"
+              size="24"
+            />
+          </div>,
+        ],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": "Language",
+          },
+          "ref": null,
+          "rendered": "Language",
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": Array [
+              <select
+                onChange={[Function]}
+                value="en"
+              >
+                <option
+                  value="en"
+                >
+                  English
+                </option>
+                <option
+                  value="other"
+                >
+                  Other
+                </option>
+              </select>,
+              <ChevronsDown
+                color="currentColor"
+                size="24"
+              />,
+            ],
+            "className": "switcher",
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "host",
+              "props": Object {
+                "children": Array [
+                  <option
+                    value="en"
+                  >
+                    English
+                  </option>,
+                  <option
+                    value="other"
+                  >
+                    Other
+                  </option>,
+                ],
+                "onChange": [Function],
+                "value": "en",
+              },
+              "ref": null,
+              "rendered": Array [
+                Object {
+                  "instance": null,
+                  "key": "en",
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": "English",
+                    "value": "en",
+                  },
+                  "ref": null,
+                  "rendered": "English",
+                  "type": "option",
+                },
+                Object {
+                  "instance": null,
+                  "key": "other",
+                  "nodeType": "host",
+                  "props": Object {
+                    "children": "Other",
+                    "value": "other",
+                  },
+                  "ref": null,
+                  "rendered": "Other",
+                  "type": "option",
+                },
+              ],
+              "type": "select",
+            },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "function",
+              "props": Object {
+                "color": "currentColor",
+                "size": "24",
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+          ],
+          "type": "div",
+        },
+      ],
+      "type": "label",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;

src/components/LocaleSwitcher/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { withNamespaces, Trans } from 'react-i18next';
+
+import ExpandIcon from 'react-feather/dist/icons/chevrons-down';
+
+import i18n, { locales } from 'i18n';
+
+import style from './style.module.css';
+
+const localeToAvailable = (locale, available, defaultLocale) => {
+  if (available.includes(locale)) {
+    return locale;
+  }
+
+  const parts = locale.split('-');
+
+  if (parts.length > 0 && available.includes(parts[0])) {
+    return parts[0];
+  }
+
+  return defaultLocale;
+};
+
+export class LocaleSwitcherImpl extends React.PureComponent {
+  state = {
+    current: localeToAvailable(
+      i18n.language || '',
+      locales.map(l => l.code),
+      'en')
+  }
+
+  componentDidMount() {
+    i18n.on('languageChanged', this.handleLanguageChange);
+  }
+
+  componentWillUnmount() {
+    i18n.off('languageChanged', this.handleLanguageChange);
+  }
+
+  handleSelectChange = ({ target }) => {
+    i18n.changeLanguage(target.value);
+  }
+
+  handleLanguageChange = lang => {
+    this.setState({ current: lang });
+  }
+
+  render() {
+    const { current } = this.state;
+
+    return <label>
+      <Trans>Language</Trans>
+      <div className={ style.switcher }>
+        <select value={ current } onChange={ this.handleSelectChange }>
+          { locales.map(locale => (
+            <option value={ locale.code } key={ locale.code }>
+              { locale.name }
+            </option>
+          )) }
+        </select>
+        <ExpandIcon />
+      </div>
+    </label>;
+  }
+}
+
+export default withNamespaces()(LocaleSwitcherImpl);

src/components/LocaleSwitcher/style.module.css

@@ -0,0 +1,11 @@
+@import url('../../globals.module.css');
+
+:root {
+  --control-gradient: var(--color-tan) var(--gradient-tan);
+  --select-height: 2.4rem;
+  --select-width: 10rem;
+}
+
+.switcher {
+  composes: fancy-select;
+}

src/components/LocaleSwitcher/test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import i18n from 'i18n';
+import { LocaleSwitcherImpl } from 'components/LocaleSwitcher';
+
+describe('LocaleSwitcher', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <LocaleSwitcherImpl />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('changing language', () => {
+    jest.spyOn(i18n, 'changeLanguage');
+
+    const component = shallow(
+      <LocaleSwitcherImpl />
+    );
+    const selectInput = component.find('select');
+    selectInput.value = 'other';
+    selectInput.simulate('change', { target: { value: 'other' } });
+
+    expect(i18n.changeLanguage).toHaveBeenCalledWith('other');
+  });
+});

src/globals.module.css

@@ -11,12 +11,20 @@
   --gradient-green: linear-gradient(to bottom,
     var(--color-green) 0%,
     color(var(--color-green) shade(40%)) 100%);
+  --gradient-tan: linear-gradient(to bottom,
+    var(--color-tan) 0%,
+    color(var(--color-tan) shade(40%)) 100%);
 
   --header-height: 6rem;
   --content-margin: 2rem;
   --spacing-margin: 1rem;
 
   --list-separator-width: 2ex;
+
+  --control-gradient: var(--color-green) var(--gradient-green);
+  --select-height: 2.8rem;
+  --select-width: 12rem;
+  --select-separator-inset: 0.2rem;
 }
 
 .inline-list {
@@ -80,3 +88,42 @@
     visibility: hidden;
   }
 }
+
+.fancy-select {
+  margin-left: 1ex;
+  position: relative;
+  vertical-align: bottom;
+  display: inline-block;
+  height: var(--select-height);
+  width: var(--select-width);
+  background: var(--control-gradient);
+  color: var(--color-black);
+  overflow: hidden;
+
+  & select {
+    background: transparent;
+    border: 0 none;
+    font-size: inherit;
+    height: var(--select-height);
+    width: calc(var(--select-width) + 2rem);
+  }
+
+  & svg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: var(--select-height);
+    width: var(--select-height);
+    pointer-events: none;
+    background: var(--control-gradient);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: var(--select-separator-inset);
+    right: var(--select-height);
+    height: calc(var(--select-height) - var(--select-separator-inset) * 2);
+    border-right: 0.1rem solid color(var(--color-black) alpha(0.2));
+  }
+}

src/i18n.js

@@ -0,0 +1,51 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-xhr-backend';
+
+export const locales = [
+  { code: 'en', name: 'English' },
+  { code: 'en-AC', name: 'English (ALL CAPS)' }
+];
+
+i18n
+  .use(LanguageDetector)
+  .use(Backend)
+  .init({
+    fallbackLng: 'en',
+    debug: false,
+    keySeparator: null,
+    nsSeparator: null,
+    saveMissing: true,
+    saveMissingTo: 'current',
+    missingKeyHandler: (lng, ns, key, fallback) => {
+      const escapedKey = key.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+      // eslint-disable-next-line no-console
+      if (console && console.group && console.log) {
+        // eslint-disable-next-line no-console
+        console.group(`Missing key in ${ lng }`);
+        // eslint-disable-next-line no-console
+        console.log(`"${ escapedKey }": |\n  ${ fallback }`);
+        // eslint-disable-next-line no-console
+        console.groupEnd();
+      }
+    },
+    interpolation: {
+      escapeValue: false
+    },
+    backend: {
+      loadPath: '{{lng}}',
+      parse: data => data,
+      ajax: (lng, options, callback) => {
+        try {
+          import(`locales/${ lng }.yaml`).then(
+            locale => callback(locale, { status: '200' }),
+            () => callback(null, { status: '404' }));
+        }
+        catch (e) {
+          callback(null, { status: '404' });
+        }
+      }
+    }
+  });
+
+export default i18n;

src/locales/en-AC.yaml

@@ -0,0 +1,2 @@
+"Language": |
+  LANGUAGE

src/locales/en.yaml

@@ -0,0 +1,2 @@
+"Language": |
+  Language

yarn.lock

@@ -5649,6 +5649,13 @@ hoek@4.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
   integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
 
+hoist-non-react-statics@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz#fba3e7df0210eb9447757ca1a7cb607162f0a364"
+  integrity sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==
+  dependencies:
+    react-is "^16.3.2"
+
 hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -5711,6 +5718,13 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 htmlparser2@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.0.tgz#5f5e422dcf6119c0d983ed36260ce9ded0bee464"
@@ -5797,6 +5811,21 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+i18next-browser-languagedetector@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-2.2.4.tgz#b02412d7ab15d7d74e1b1317d67d8a244b219ee3"
+  integrity sha512-wPbtH18FdOuB245I8Bhma5/XSDdN/HpYlX+wga1eMy+slhaFQSnrWX6fp+aYSL2eEuj0RlfHeEVz6Fo/lxAj6A==
+
+i18next-xhr-backend@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-1.5.1.tgz#50282610780c6a696d880dfa7f4ac1d01e8c3ad5"
+  integrity sha512-9OLdC/9YxDvTFcgsH5t2BHCODHEotHCa6h7Ly0EUlUC7Y2GS09UeoHOGj3gWKQ3HCqXz8NlH4gOrK3NNc9vPuw==
+
+i18next@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-13.1.0.tgz#d8656bbc53216ffcd428364fbfb75f75647846a5"
+  integrity sha512-BuDhYRFReCXJiUJ8GdC2m0wXw4vC/BS6e7UJO+wTrkE3K+92VmJn5p/wxqEE+pdffquh9GYYAMfK9rUlb48pcg==
+
 iconv-lite@0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -9542,7 +9571,16 @@ react-hot-loader@^4.6.2:
     shallowequal "^1.0.2"
     source-map "^0.7.3"
 
-react-is@^16.6.1, react-is@^16.7.0:
+react-i18next@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-9.0.2.tgz#6c524c01402549ca010e90539dbe40996e213702"
+  integrity sha512-gR+GelJzwDUWYyOEnIGnbBA96ZHqkWgHg9t0wVyBAiYVhTrMIyOWX6tBL7zpETwodAXcQKj/Gd4NlgRZqfQnzA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    hoist-non-react-statics "3.0.1"
+    html-parse-stringify2 "2.0.1"
+
+react-is@^16.3.2, react-is@^16.6.1, react-is@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
   integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
@@ -11419,6 +11457,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"