refactor: React Migration + Accessibility improvements

Author: atomrc

.cspell.json

@@ -6,7 +6,6 @@
     "allowfullscreen",
     "animationend",
     "animationstart",
-    "antiscroll",
     "applock",
     "arraybuffer",
     "arrayify",

.eslintrc.json

@@ -3,7 +3,15 @@
     "jasmine": true,
     "jest/globals": true
   },
-  "extends": ["@wireapp/eslint-config", "plugin:jest/recommended", "plugin:jsx-a11y/recommended"],
+  "extends": [
+    "@wireapp/eslint-config",
+    "plugin:jest/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "prettier",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
   "globals": {
     "$": true,
     "amplify": true,
@@ -14,8 +22,21 @@
     "z": true,
     "RTCAudioSource": true
   },
-  "plugins": ["sort-keys-fix", "react-hooks"],
-  "ignorePatterns": [".git/", "docs/", "bin/", "node_modules/", "resource/", "server/bin/", "server/dist/", "server/node_modules/", "src/ext/", "src/script/localization/**/webapp*.js", "src/worker/"],
+  "plugins": ["sort-keys-fix", "import", "react-hooks", "eslint-plugin-testing-library", "@typescript-eslint"],
+  "ignorePatterns": [
+    ".git/",
+    "docs/",
+    "bin/",
+    "node_modules/",
+    "resource/",
+    "server/bin/",
+    "server/dist/",
+    "server/node_modules/",
+    "src/ext/",
+    "src/script/localization/**/webapp*.js",
+    "src/worker/",
+    "*.js"
+  ],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
@@ -37,22 +58,63 @@
   ],
   "rules": {
     "id-length": "off",
-    "no-magic-numbers": "off",
+    "no-magic-numbers": ["warn", {"ignoreArrayIndexes": true}],
     "jest/no-jasmine-globals": "off",
     "jest/no-identical-title": "warn",
     "jest/no-done-callback": "warn",
     "jest/no-disabled-tests": "warn",
     "jest/no-conditional-expect": "warn",
     "sort-keys-fix/sort-keys-fix": "warn",
     "jsx-a11y/media-has-caption": "warn",
+    "jsx-a11y/no-noninteractive-tabindex": "warn",
+    "react/no-unknown-property": ["error", {"ignore": ["css"]}],
     "react/react-in-jsx-scope": "off",
-    "react/no-unknown-property": ["error", {"ignore": ["css", "transform-origin"]}],
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "import/no-unresolved": "error",
+    "import/no-default-export": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-empty-interface": "warn",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-var-requires": "warn",
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "import/order": [
+      "error",
+      {
+        "groups": ["external", "builtin", "internal", "sibling", "parent", "index"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "warnOnUnassignedImports": false
+      }
+    ]
   },
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["Util", "./src/script/util/"],
+          ["Components", "./src/script/components/"],
+          ["I18n", "./src/i18n/"],
+          ["Resource", "./resource/"],
+          ["src", "./src/"],
+          ["test", "./test/"]
+        ],
+        "extensions": [".ts", ".js", ".jsx", ".tsx", ".json"]
+      }
     }
   }
 }

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install lint-staged && yarn check:circular-dependencies 

Gruntfile.js

@@ -17,8 +17,10 @@
  *
  */
 
-const path = require('path');
 const {format} = require('date-fns');
+
+const path = require('path');
+
 const {SRC_PATH, DIST_PATH} = require('./locations');
 
 module.exports = grunt => {

jest.config.ts

@@ -42,4 +42,5 @@ const config: Config = {
   testRunner: 'jest-jasmine2',
 };
 
+// eslint-disable-next-line import/no-default-export
 export default config;

package.json

@@ -103,8 +103,10 @@
     "cssnano": "4.1.11",
     "dexie": "^3.2.2",
     "dotenv": "16.0.3",
+    "dpdm": "3.10.0",
     "eslint": "8.26.0",
     "eslint-config-prettier": "8.5.0",
+    "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jest": "27.1.3",
@@ -115,6 +117,7 @@
     "eslint-plugin-react": "7.31.10",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-testing-library": "5.7.2",
     "eslint-plugin-typescript-sort-keys": "2.1.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "fake-indexeddb": "4.0.0",
@@ -176,15 +179,12 @@
   },
   "license": "GPL-3.0",
   "lint-staged": {
+    "*": "prettier --ignore-unknown --write",
     "*.less": [
-      "prettier --write",
       "stylelint --fix"
     ],
-    "*.{js,ts,tsx}": [
+    "*.{js,jsx,ts,tsx}": [
       "eslint --fix"
-    ],
-    "*.{json,md,yml}": [
-      "prettier --write"
     ]
   },
   "name": "wire-webapp",
@@ -218,7 +218,10 @@
     "lint:other": "yarn prettier --list-different && yarn stylelint",
     "lint:code": "eslint -c .eslintrc.json --ext .js,.ts,.tsx .",
     "lint:spelling": "cspell -c .cspell.json 'src/script/**/*.{js,ts,tsx,md}' src/i18n/en-US.json",
-    "postinstall": "yarn configure && cd server && yarn  && cd .. && husky install",
+    "check:circular-dependencies": "yarn check:circular-dependencies:app && yarn check:circular-dependencies:auth",
+    "check:circular-dependencies:app": "dpdm -T ./src/script/main/app.ts",
+    "check:circular-dependencies:auth": "dpdm -T ./src/script/auth/main.tsx",
+    "postinstall": "yarn configure && cd server && yarn && cd .. && husky install",
     "prettier": "prettier --ignore-path .prettierignore \"**/*.{json,md,yml}\"",
     "release:staging": "git checkout dev && git pull && ts-node ./bin/release_tag.ts staging",
     "release:production": "git checkout master && git pull && ts-node ./bin/release_tag.ts production",

server/Server.ts

@@ -19,14 +19,15 @@
 
 import express from 'express';
 import expressSitemapXml from 'express-sitemap-xml';
-import fs from 'fs';
 import hbs from 'hbs';
 import helmet from 'helmet';
+import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
+import nocache from 'nocache';
+
+import fs from 'fs';
 import http from 'http';
 import https from 'https';
-import nocache from 'nocache';
 import path from 'path';
-import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
 
 import {HealthCheckRoute} from './routes/_health/HealthRoute';
 import {AppleAssociationRoute} from './routes/appleassociation/AppleAssociationRoute';

server/config.ts

@@ -20,6 +20,7 @@
 import dotenv from 'dotenv-extended';
 import fs from 'fs-extra';
 import logdown from 'logdown';
+
 import path from 'path';
 
 import type {ServerConfig} from './ServerConfig';

server/routes/error/ErrorRoutes.ts

@@ -18,8 +18,8 @@
  */
 
 import express from 'express';
-import logdown from 'logdown';
 import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
+import logdown from 'logdown';
 
 import {formatDate} from '../../util/TimeUtil';
 

setupTests.js

@@ -17,6 +17,8 @@
  *
  */
 
+/* eslint-disable import/order */
+
 // Polyfill for "tsyringe" dependency injection
 require('core-js/full/reflect');
 require('intersection-observer');
@@ -31,6 +33,7 @@ require('src/script/util/test/mock/navigatorPermissionsMock');
 require('src/script/util/test/mock/ResponseMock');
 require('src/script/util/test/mock/SVGProviderMock');
 require('src/script/util/test/mock/WebRTCMock');
+require('src/script/util/test/mock/resizeObserver.mock');
 
 jest.mock('axios', () => {
   return {
@@ -73,5 +76,7 @@ window.wire = {
 
 window.z = {userPermission: {}};
 
+window.URL.createObjectURL = jest.fn();
+
 const testLib = require('@testing-library/react');
 testLib.configure({testIdAttribute: 'data-uie-name'});

src/i18n/ar-SA.json

@@ -89,7 +89,7 @@
   "accessibility.conversationStatusUnreadPing": "Missed ping",
   "accessibility.conversationStatusUnreadReply": "Unread reply",
   "accessibility.giphyModal.close": "Close 'GIF' window",
-  "accessibility.giphyModal.loading": "Loading gif",
+  "accessibility.giphyModal.loading": "Loading giphy",
   "accessibility.giphyModal.selectGif": "Select gif",
   "accessibility.giphyModal.sendGif": "Send gif",
   "accessibility.giphyModal.showGifs": "Open all gifs",
@@ -840,9 +840,8 @@
   "modalCreateFolderPlaceholder": "Folder name",
   "modalCreateGroupProtocolHeading": "Protocol",
   "modalCreateGroupProtocolInfo": "Select MLS to create a group conversation using the Messaging Layer Security protocol. Please be aware that this is a beta version.",
-  "modalCreateGroupProtocolSelect.default": " (default)",
   "modalCreateGroupProtocolSelect.mls": "MLS",
-  "modalCreateGroupProtocolSelect.proteus": "Proteus",
+  "modalCreateGroupProtocolSelect.proteus": "Proteus (default)",
   "modalGifTooLargeHeadline": "الصورة المتحركة المختارة كبيرة جدا",
   "modalGifTooLargeMessage": "الحجم الأقصى هو {{number}} ميغابايت.",
   "modalImproveWireAction": "قبول",

src/i18n/en-US.json

@@ -89,7 +89,7 @@
   "accessibility.conversationStatusUnreadPing": "Missed ping",
   "accessibility.conversationStatusUnreadReply": "Unread reply",
   "accessibility.giphyModal.close": "Close 'GIF' window",
-  "accessibility.giphyModal.loading": "Loading gif",
+  "accessibility.giphyModal.loading": "Loading giphy",
   "accessibility.giphyModal.selectGif": "Select gif",
   "accessibility.giphyModal.sendGif": "Send gif",
   "accessibility.giphyModal.showGifs": "Open all gifs",
@@ -542,6 +542,7 @@
   "groupCreationPreferencesErrorNameShort": "At least 1 character",
   "groupCreationPreferencesHeader": "Create group",
   "groupCreationPreferencesPlaceholder": "Group name",
+  "groupCreationDeleteEntry": "Delete entry",
   "groupParticipantActionBlock": "Block…",
   "groupParticipantActionCancelRequest": "Cancel request…",
   "groupParticipantActionDevices": "Devices",
@@ -1007,9 +1008,7 @@
   "preferencesAccountUsernameErrorTaken": "Already taken",
   "preferencesAccountUsernameHint": "At least 2 characters. a—z, 0—9 and _ only.",
   "preferencesAccountUsernamePlaceholder": "Your full name",
-  "preferencesDevice": "Device",
   "preferencesDeviceDetails": "Device Details",
-  "preferencesDeviceNotVerified": "not verified",
   "preferencesDevices": "Devices",
   "preferencesDevicesActivatedOn": "Activated [bold]{{date}}[/bold]",
   "preferencesDevicesActive": "Active",
@@ -1026,6 +1025,8 @@
   "preferencesDevicesSessionOngoing": "Resetting session…",
   "preferencesDevicesSessionReset": "Reset Session",
   "preferencesDevicesVerification": "Verified",
+  "preferencesDeviceNotVerified": "not verified",
+  "preferencesDevice": "Device",
   "preferencesHeadline": "Preferences",
   "preferencesOptions": "Options",
   "preferencesOptionsAudio": "Sound alerts",

src/page/index.html

@@ -3,16 +3,23 @@
 <!-- {{@config.VERSION}} -->
 <html id="wire-main-app">
   <head>
-#include('meta.htm')
-#include('graph.htm')
+    #include('meta.htm') #include('graph.htm')
     <title>{{@config.BRAND_NAME}}</title>
     <style type="text/css">
       #include('../../../server/dist/static/style/default.css');
     </style>
   </head>
 
   <body>
-    #include('wire-main.htm')
+    <app-container
+      id="wire-main"
+      class="off"
+      data-bind="css: mainClasses()"
+      params="root: $root"
+      data-uie-name="status-webapp"
+      data-uie-value="is-loading"
+    ></app-container>
+
     #include('loading.htm')
 
     <script src="./config.js?{{@config.VERSION}}"></script>