Fix #634: Translate Gladys 4 in French 🇫🇷🎉(#771)

* i18n checker

* i18n: replace hard coded by keys

* i18n: add FR translations

* i18n: integration comparator

* i18n: update fr translation

* i18n: localize dates

* i18n: localize scenes

* i18n: clean not used messages

* i18n: dashboard select room

* i18n: fix merge conflicts

* i18n: remove backend files

* i18n: fix merge misses

* i18n: merge CalDAV integration

* i18n: merge new gateway page

* i18n: merge G.P backup

* Make app work in french too

* Fix some translations in FR

* Add default language from browser at signup

* Multiple translation fixes

* Add calendar translations

* Add messages in FR for the brain

* Improve translations

* Fix gateway translations

* Make integration page work in FR

* Fix french translations

* Fix translations

* Fix session translation

* Load language from local storage, then navigator if not in localstorage

Co-authored-by: atrovato <1839717+atrovato@users.noreply.github.com>

.circleci/config.yml

@@ -94,6 +94,9 @@ jobs:
       - run:
           name: Run eslint
           command: npm run eslint
+      - run:
+          name: Run integration comparison
+          command: npm run compare-translations
   build-front:
     working_directory: ~/gladys-build
     docker:

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,6 +6,7 @@ To ensure your Pull Request can be accepted as fast as possible, make sure to re
 - [ ] Are tests passing? (`npm test` on both front/server)
 - [ ] Is the linter passing? (`npm run eslint` on both front/server)
 - [ ] Did you run prettier? (`npm run prettier` on both front/server)
+- [ ] If you are adding a new features/services, did you run integration comparator? (`npm run compare-translations` on front)
 - [ ] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)
 - [ ] If you are adding a new features/services which needs explanation, did you modify the user documentation? See [the GitHub repo](https://github.com/GladysAssistant/gladys-4-docs) and the [website](https://documentation.gladysassistant.com).
 - [ ] Did you add fake requests data for the demo mode (`front/src/config/demo.json`) so that the demo website is working without a backend? (if needed) See [https://demo.gladysassistant.com](https://demo.gladysassistant.com).

front/.eslintrc.json

@@ -2,7 +2,39 @@
   "extends": ["eslint-config-synacor", "prettier"],
   "rules": {
     "react/jsx-indent-props": ["enabled", 2],
-    "brace-style": ["error", "1tbs"]
+    "brace-style": ["error", "1tbs"],
+    "preact-i18n/no-missing-template-field": "error",
+    "preact-i18n/no-text-as-attribute": "error",
+    "preact-i18n/no-text-as-children": "error",
+    "preact-i18n/no-unknown-key": "error"
   },
-  "plugins": ["json"]
+  "plugins": ["json", "preact-i18n"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "preact-i18n": {
+      "languageFiles": [
+        {
+          "name": "en",
+          "path": "src/config/i18n/en.json"
+        },
+        {
+          "name": "fr",
+          "path": "src/config/i18n/fr.json"
+        }
+      ],
+      "textComponents": [
+        { "nameRegex": "^(?:Alt)?Text$" },
+        { "nameRegex": "^Dialog$", "id": "title", "plural": "count", "fields": "data" }
+      ],
+      "markupTextComponents": [
+        { "nameRegex": "^MarkupText$" },
+        { "nameRegex": "^DialogMarkup$", "id": "title", "plural": "count", "fields": "data" }
+      ],
+      "withTextRegex": "^withText(?:Alias)?$"
+    }
+  }
 }

front/package.json

@@ -8,16 +8,24 @@
     "serve": "npm run build && preact serve",
     "dev": "preact watch -p 1444 --template src/template.html",
     "eslint": "eslint src --ext .json --ext .js --ext .jsx",
+    "compare-translations": "npm run compare-i18n && npm run compare-device-integrations && npm run compare-communication-integrations && npm run compare-weather-integrations && npm run compare-calendar-integrations",
+    "compare-i18n": "comparejson -e ./src/config/i18n/*.json",
+    "compare-device-integrations": "comparejson -e ./src/config/integrations/device.*.json",
+    "compare-communication-integrations": "comparejson -e ./src/config/integrations/communication.*.json",
+    "compare-weather-integrations": "comparejson -e ./src/config/integrations/weather.*.json",
+    "compare-calendar-integrations": "comparejson -e ./src/config/integrations/calendar.*.json",
     "prettier-check": "prettier --check '**/*.js' '**/*.jsx' '**/*.json'",
     "prettier": "prettier --write '**/*.js' '**/*.jsx' '**/*.json'",
     "test": "jest --coverage"
   },
   "devDependencies": {
+    "compare-json": "^0.4.0",
     "cross-env": "^5.2.0",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^4.0.0",
     "eslint-config-synacor": "^2.0.2",
     "eslint-plugin-json": "^1.4.0",
+    "eslint-plugin-preact-i18n": "^1.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^21.2.1",
     "per-env": "^1.0.2",

front/src/actions/signup/signupCreateLocalAccount.js

@@ -22,7 +22,7 @@ function createActions(store) {
           lastname: '',
           email: '',
           role: 'admin',
-          language: 'en',
+          language: navigator.language === 'fr' ? 'fr' : 'en',
           password: '',
           passwordRepeat: ''
         },