Add react-i18next for multi-language support (#917)

This is a rough start on adding react-i18next. I'll be working on adding
more translatable strings and translations in the coming days. I'm going
to need to wrap class components in HOCs, so let me know if there's
something I should be fixing before doing that. I'm thinking now to keep
the exported class names exactly the same, and rename the existing
classes by prefixing an `I` (for internal). For example:

```
export default class AppToolbar ...
```

becomes

```
class IAppToolbar ...
const AppToolbar = withTranslation()(IAppToolbar);
export default AppToolbar;
```

I'll be able to contribute Japanese strings (I've talked to a couple
people on my team and they'll be happy to help as well), so that's the
language I decided to go with in this PR.

Closes #746

---------

Co-authored-by: Ko Nagase <nagase@georepublic.co.jp>
Co-authored-by: Harel M <harel.mazor@gmail.com>

src/components/ModalShortcuts.tsx

@@ -1,48 +1,50 @@
 import React from 'react'
+import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import Modal from './Modal'
 
 
-type ModalShortcutsProps = {
+type ModalShortcutsInternalProps = {
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
-};
+} & WithTranslation;
 
 
-export default class ModalShortcuts extends React.Component<ModalShortcutsProps> {
+class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps> {
   render() {
+    const t = this.props.t;
     const help = [
       {
         key: <kbd>?</kbd>,
-        text: "Shortcuts menu"
+        text: t("Shortcuts menu")
       },
       {
         key: <kbd>o</kbd>,
-        text: "Open modal"
+        text: t("Open modal")
       },
       {
         key: <kbd>e</kbd>,
-        text: "Export modal"
+        text: t("Export modal")
       },
       {
         key: <kbd>d</kbd>,
-        text: "Data Sources modal"
+        text: t("Data Sources modal")
       },
       {
         key: <kbd>s</kbd>,
-        text: "Style Settings modal"
+        text: t("Style Settings modal")
       },
       {
         key: <kbd>i</kbd>,
-        text: "Toggle inspect"
+        text: t("Toggle inspect")
       },
       {
         key: <kbd>m</kbd>,
-        text: "Focus map"
+        text: t("Focus map")
       },
       {
         key: <kbd>!</kbd>,
-        text: "Debug modal"
+        text: t("Debug modal")
       },
     ]
 
@@ -50,51 +52,51 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
     const mapShortcuts = [
       {
         key: <kbd>+</kbd>,
-        text: "Increase the zoom level by 1.",
+        text: t("Increase the zoom level by 1.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>+</kbd></>,
-        text: "Increase the zoom level by 2.",
+        text: t("Increase the zoom level by 2.",)
       },
       {
         key: <kbd>-</kbd>,
-        text: "Decrease the zoom level by 1.",
+        text: t("Decrease the zoom level by 1.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>-</kbd></>,
-        text: "Decrease the zoom level by 2.",
+        text: t("Decrease the zoom level by 2.",)
       },
       {
         key: <kbd>Up</kbd>,
-        text: "Pan up by 100 pixels.",
+        text: t("Pan up by 100 pixels.",)
       },
       {
         key: <kbd>Down</kbd>,
-        text: "Pan down by 100 pixels.",
+        text: t("Pan down by 100 pixels.",)
       },
       {
         key: <kbd>Left</kbd>,
-        text: "Pan left by 100 pixels.",
+        text: t("Pan left by 100 pixels.",)
       },
       {
         key: <kbd>Right</kbd>,
-        text: "Pan right by 100 pixels.",
+        text: t("Pan right by 100 pixels.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Right</kbd></>,
-        text: "Increase the rotation by 15 degrees.",
+        text: t("Increase the rotation by 15 degrees.",)
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Left</kbd></>,
-        text: "Decrease the rotation by 15 degrees."
+        text: t("Decrease the rotation by 15 degrees.")
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Up</kbd></>,
-        text: "Increase the pitch by 10 degrees."
+        text: t("Increase the pitch by 10 degrees.")
       },
       {
         key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
-        text: "Decrease the pitch by 10 degrees."
+        text: t("Decrease the pitch by 10 degrees.")
       },
     ]
 
@@ -103,11 +105,13 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
       data-wd-key="modal:shortcuts"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
-      title={'Shortcuts'}
+      title={t('Shortcuts')}
     >
       <section className="maputnik-modal-section maputnik-modal-shortcuts">
         <p>
-          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+          <Trans t={t}>
+            Press <code>ESC</code> to lose focus of any active elements, then press one of:
+          </Trans>
         </p>
         <dl>
           {help.map((item, idx) => {
@@ -117,7 +121,7 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
             </div>
           })}
         </dl>
-        <p>If the Map is in focused you can use the following shortcuts</p>
+        <p>{t("If the Map is in focused you can use the following shortcuts")}</p>
         <ul>
           {mapShortcuts.map((item, idx) => {
             return <li key={idx}>
@@ -130,3 +134,5 @@ export default class ModalShortcuts extends React.Component<ModalShortcutsProps>
   }
 }
 
+const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
+export default ModalShortcuts;