Merge pull request #1385 from Hylozoic/evo-972/translations

[EVO-972] Add Translations

.vscode/settings.json

@@ -12,5 +12,23 @@
   "eslint.format.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.lintTask.enable": true,
-  "eslint.codeActionsOnSave.mode": "problems"
+  "eslint.codeActionsOnSave.mode": "problems",
+  "i18n-ally.localesPaths": [
+    "public/locales"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "react",
+    "i18next",
+    "general"
+  ],
+  "i18n-ally.namespace": true,
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.displayLanguage": "en",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.disablePathParsing": true,
+  "i18n-ally.pathMatcher": "{locale}.json",
+  "i18n-ally.extract.ignored": [
+    "A role must have a valid emoji and name to be updated"
+  ],
+  "i18n-ally.keystyle": "flat"
 }

README.md

@@ -64,6 +64,15 @@ For users that are not logged in can see public posts and groups via routes like
 `/groups/:groupSlug/:view/post/:postId` => `/post/:postId`
 `/public/post/:postId` => `/post/:postId`
 
+### Translations
+We use i18next to handle translations of platform strings (no translations of user content at this time). 
+
+The `i18next-extract` config details in the `babel.config.js` file determines how all language keys are extracted and what languages are supported. Whenever babel runs, it will comb the entire repo for js/jsx files, and anytime it finds a t('example-key') function, it will pull every key into each of the translation files. It is disabled in the babel.config by default: when it runs, it generates keys for missing translations. It also sometimes overwrites newly added translations, causing a lot of finicky editing if its on by default. When you add a new translation, uncomment the config, restart webpack (yarn start)  and it should pick up the key for every locale file.
+
+If using vscode, there is a really fantastic extension for working with i18n; [i18n-ally](https://github.com/lokalise/i18n-ally)
+They have a 8 minute setup and feature [demo video](https://www.youtube.com/watch?v=kowM-MoGVns). 
+
+
 ### Sockets
 
 Chat, in-app notifications and comments use sockets to update users in real-time. In the future, new posts will also use sockets to show up in real-time.

babel.config.js

@@ -39,6 +39,20 @@ module.exports = function (api) {
           extensions: ['.graphql']
         }
       ],
+      /*
+        Disabling this by default: when it runs, it generates keys for missing translations
+        It also sometimes overwrites newly added translations, causing a lot of finicky editing.
+        When you add a new translation, uncomment the below config, restart webpack (yarn start) and it should pick up the key for every locale file
+      */
+      // [
+      //   'i18next-extract',
+      //   {
+      //     keySeparator: null,
+      //     locales: ['es', 'en'],
+      //     nsSeparator: null,
+      //     outputPath: 'public/locales/{{locale}}.json'
+      //   }
+      // ],
       'import-graphql',
       'inline-import',
       'lodash'

package.json

@@ -9,7 +9,7 @@
   },
   "browserslist": [
     "defaults"
-  ],
+    ],
   "proxy": "localhost:3001",
   "scripts": {
     "dev": "yarn start",
@@ -49,11 +49,11 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@deck.gl/core": "^8.7",
-    "@deck.gl/geo-layers": "^8.7",
-    "@deck.gl/layers": "^8.7",
-    "@deck.gl/mesh-layers": "^8.7",
-    "@deck.gl/react": "^8.7",
+    "@deck.gl/core": "8.8.27",
+    "@deck.gl/geo-layers": "8.8.27",
+    "@deck.gl/layers": "8.8.27",
+    "@deck.gl/mesh-layers": "8.8.27",
+    "@deck.gl/react": "8.8.27",
     "@emoji-mart/react": "^1.0.1",
     "@faker-js/faker": "^6.0.0-alpha.5",
     "@loaders.gl/core": "^3.2.0",
@@ -64,13 +64,14 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0-beta.14",
-    "@tiptap/extension-highlight": "^2.0.0-beta.199",
-    "@tiptap/extension-link": "^2.0.0-beta.199",
-    "@tiptap/extension-mention": "^2.0.0-beta.199",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.199",
-    "@tiptap/react": "^2.0.0-beta.199",
-    "@tiptap/starter-kit": "^2.0.0-beta.199",
-    "@tiptap/suggestion": "^2.0.0-beta.199",
+    "@tiptap/extension-highlight": "2.0.1",
+    "@tiptap/extension-link": "2.0.1",
+    "@tiptap/extension-mention": "2.0.1",
+    "@tiptap/extension-placeholder": "2.0.1",
+    "@tiptap/pm": "2.0.1",
+    "@tiptap/react": "2.0.1",
+    "@tiptap/starter-kit": "2.0.1",
+    "@tiptap/suggestion": "2.0.1",
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",
@@ -89,6 +90,7 @@
     "babel-jest": "^27.5.1",
     "babel-loader": "8.2.3",
     "babel-plugin-data-stylename": "0.1.1",
+    "babel-plugin-i18next-extract": "^0.9.0",
     "babel-plugin-import-graphql": "^2.8.1",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-lodash": "^3.3.4",
@@ -98,7 +100,7 @@
     "babel-preset-react-app": "^10.0.1",
     "bfj": "6.1.1",
     "bootstrap": "4.0.0-alpha.6",
-    "browserslist": "^4.21.2",
+    "browserslist": "^4.21.5",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "chalk": "2.3.0",
     "cheerio": "^1.0.0-rc.10",
@@ -151,6 +153,9 @@
     "http-proxy-middleware": "0.17.4",
     "husky": "^7.0.4",
     "hylo-shared": "5.2.2",
+    "i18next": "^22.0.5",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.0.1",
     "identity-obj-proxy": "3.0.0",
     "immutability-helper": "^3.1.1",
     "immutable": "~3.7.4",
@@ -167,7 +172,7 @@
     "json-loader": "0.5.7",
     "lodash": "~4.17.21",
     "lru-cache": "^4.1.1",
-    "mapbox-gl": "^2.7.1",
+    "mapbox-gl": "2.10.0",
     "mime": "^2.0.3",
     "mini-css-extract-plugin": "0.5.0",
     "mixpanel-browser": "^2.45.0",
@@ -210,6 +215,7 @@
     "react-dom": "^16.8.6",
     "react-flip-move": "^3.0.4",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^12.0.0",
     "react-icons": "^4.4.0",
     "react-joyride": "^2.3.2",
     "react-map-gl": "^6",