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/libs/field-spec-additional.ts

@@ -1,18 +1,20 @@
-const spec = {
+import { TFunction } from "i18next";
+
+const spec = (t: TFunction) => ({
   maputnik: {
     maptiler_access_token: {
-      label: "MapTiler Access Token",
-      doc: "Public access token for MapTiler Cloud."
+      label: t("MapTiler Access Token"),
+      doc: t("Public access token for MapTiler Cloud.")
     },
     thunderforest_access_token: {
-      label: "Thunderforest Access Token",
-      doc: "Public access token for Thunderforest services."
+      label: t("Thunderforest Access Token"),
+      doc: t("Public access token for Thunderforest services.")
     },
     style_renderer: {
-      label: "Style Renderer",
-      doc: "Choose the default Maputnik renderer for this style.",
+      label: t("Style Renderer"),
+      doc: t("Choose the default Maputnik renderer for this style."),
     },
   }
-}
+})
 
 export default spec;

src/libs/zoomcontrol.ts

@@ -5,13 +5,15 @@ export default class ZoomControl {
   _container: HTMLDivElement | undefined = undefined;
   _textEl: HTMLSpanElement | null = null;
 
+  constructor(public label: string) {}
+
   onAdd(map: Map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
     this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
     this._container.innerHTML = `
-      Zoom: <span></span>
+      ${this.label} <span></span>
     `;
     this._textEl = this._container.querySelector("span");