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/AppToolbar.tsx

@@ -2,10 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import {detect} from 'detect-browser';
 
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage} from 'react-icons/md'
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdLanguage} from 'react-icons/md'
 import pkgJson from '../../package.json'
 //@ts-ignore
 import maputnikLogo from 'maputnik-design/logos/logo-color.svg?inline'
+import { withTranslation, WithTranslation } from 'react-i18next';
+import { supportedLanguages } from '../i18n';
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
@@ -80,7 +82,7 @@ class ToolbarAction extends React.Component<ToolbarActionProps> {
 
 export type MapState = "map" | "inspect" | "filter-achromatopsia" | "filter-deuteranopia" | "filter-protanopia" | "filter-tritanopia";
 
-type AppToolbarProps = {
+type AppToolbarInternalProps = {
   mapStyle: object
   inspectModeEnabled: boolean
   onStyleChanged(...args: unknown[]): unknown
@@ -93,9 +95,9 @@ type AppToolbarProps = {
   onSetMapState(mapState: MapState): unknown
   mapState?: MapState
   renderer?: string
-};
+} & WithTranslation;
 
-export default class AppToolbar extends React.Component<AppToolbarProps> {
+class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
   state = {
     isOpen: {
       settings: false,
@@ -110,6 +112,10 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
     this.props.onSetMapState(val);
   }
 
+  handleLanguageChange(val: string) {
+    this.props.i18n.changeLanguage(val);
+  }
+
   onSkip = (target: string) => {
     if (target === "map") {
       (document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
@@ -121,40 +127,41 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
   }
 
   render() {
+    const t = this.props.t;
     const views = [
       {
         id: "map",
         group: "general",
-        title: "Map",
+        title: t("Map"),
       },
       {
         id: "inspect",
         group: "general",
-        title: "Inspect",
+        title: t("Inspect"),
         disabled: this.props.renderer === 'ol',
       },
       {
         id: "filter-deuteranopia",
         group: "color-accessibility",
-        title: "Deuteranopia filter",
+        title: t("Deuteranopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-protanopia",
         group: "color-accessibility",
-        title: "Protanopia filter",
+        title: t("Protanopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-tritanopia",
         group: "color-accessibility",
-        title: "Tritanopia filter",
+        title: t("Tritanopia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
       {
         id: "filter-achromatopsia",
         group: "color-accessibility",
-        title: "Achromatopsia filter",
+        title: t("Achromatopsia filter"),
         disabled: !colorAccessibilityFiltersEnabled,
       },
     ];
@@ -174,21 +181,21 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("layer-list")}
           >
-            Layers list
+            {t("Layers list")}
           </button>
           <button
             data-wd-key="root:skip:layer-editor"
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("layer-editor")}
           >
-            Layer editor
+            {t("Layer editor")}
           </button>
           <button
             data-wd-key="root:skip:map-view"
             className="maputnik-toolbar-skip"
             onClick={_e => this.onSkip("map")}
           >
-            Map view
+            {t("Map view")}
           </button>
           <a
             className="maputnik-toolbar-logo"
@@ -196,7 +203,7 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
             rel="noreferrer noopener"
             href="https://github.com/maplibre/maputnik"
           >
-            <img src={maputnikLogo} alt="Maputnik on GitHub" />
+            <img src={maputnikLogo} alt={t("Maputnik on GitHub")} />
             <h1>
               <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
@@ -206,24 +213,24 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
         <div className="maputnik-toolbar__actions" role="navigation" aria-label="Toolbar">
           <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
             <MdOpenInBrowser />
-            <IconText>Open</IconText>
+            <IconText>{t("Open")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
             <MdFileDownload />
-            <IconText>Export</IconText>
+            <IconText>{t("Export")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
             <MdLayers />
-            <IconText>Data Sources</IconText>
+            <IconText>{t("Data Sources")}</IconText>
           </ToolbarAction>
           <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
             <MdSettings />
-            <IconText>Style Settings</IconText>
+            <IconText>{t("Style Settings")}</IconText>
           </ToolbarAction>
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <label>View
+            <label>{t("View")}
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
@@ -237,7 +244,7 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
                     </option>
                   );
                 })}
-                <optgroup label="Color accessibility">
+                <optgroup label={t("Color accessibility")}>
                   {views.filter(v => v.group === "color-accessibility").map((item) => {
                     return (
                       <option key={item.id} value={item.id} disabled={item.disabled}>
@@ -250,12 +257,35 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
             </label>
           </ToolbarSelect>
 
+          <ToolbarSelect wdKey="nav:language">
+            <MdLanguage />
+            <label>{t("Language")}
+              <select
+                className="maputnik-select"
+                data-wd-key="maputnik-lang-select"
+                onChange={(e) => this.handleLanguageChange(e.target.value)}
+                value={this.props.i18n.language}
+              >
+                {Object.entries(supportedLanguages).map(([code, name]) => {
+                  return (
+                    <option key={code} value={code}>
+                      {name}
+                    </option>
+                  );
+                })}
+              </select>
+            </label>
+          </ToolbarSelect>
+
           <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
             <MdHelpOutline />
-            <IconText>Help</IconText>
+            <IconText>{t("Help")}</IconText>
           </ToolbarLink>
         </div>
       </div>
     </nav>
   }
 }
+
+const AppToolbar = withTranslation()(AppToolbarInternal);
+export default AppToolbar;