🚧 🧱 Transition front-end to use TypeScript and Sass (#100)

* working poc using typescript

* clean up tsconfig

* rm extra

* switch some componetents to `.tsx`

* upgrade to sass

* rename files

* rework webpack config files

* fix mocking fetch

* more linting

* fix prop-types

without import typescript complains

* moving base import to setup

* remove jsx attribution from core functions

* add a core model + props interface for select message

* enable compile type checking

* fixing some errors

* zap since it's completely changed

* playing with prop-types and typescript

* comment out proptypes

TBA on what the answer will be here

* move layout to containers

* 🐛 found by typescript

* yarn upgrade --latest

* Update node.js.yml

codecov/codecov-action#190

* fix coverage files includes

* Delete .eslintignore

* Update layout.scss.d.ts

* Update tsconfig.json

.github/workflows/node.js.yml

@@ -69,28 +69,30 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-
-    - name: Use Node.js 14.x
-      uses: actions/[email protected]
-      with:
-        node-version: 14.x
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
 
-    - name: Cache Node Modules
-      uses: actions/[email protected]
-      with:
-        path: '**/node_modules'
-        key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
 
-    - name: Coverage
-      run: |
-        cd web-app/
-        yarn install
-        yarn coverage
+      - name: Cache Node Modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
 
-    - name: CodeCov GitHub Action
-      uses: codecov/codecov-action@v1
-      with:
-        file: web-app/coverage/lcov.info
-        name: react-frontend-unit-test-${{ matrix.node-version }}
-        fail_ci_if_error: true
+      - name: Coverage
+        run: |
+          cd web-app/
+          yarn install
+          yarn coverage
+
+      - name: CodeCov GitHub Action
+        uses: codecov/codecov-action@v1
+        with:
+          file: web-app/coverage/lcov.info
+          name: react-frontend-unit-test-${{ matrix.node-version }}
+          fail_ci_if_error: true

web-app/.eslintrc.json

@@ -11,21 +11,42 @@
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
         "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
         "plugin:jest/recommended",
-        "plugin:jest/style"
+        "plugin:jest/style",
+        "plugin:@typescript-eslint/recommended"
     ],
     "parserOptions": {
+        "project": [
+            "tsconfig.json"
+        ],
+        "ecmaVersion": 2020,
+        "sourceType": "module",
         "ecmaFeatures": {
             "jsx": true
-        },
-        "ecmaVersion": 11,
-        "sourceType": "module"
+        }
     },
     "plugins": [
+        "@typescript-eslint",
         "react",
+        "react-hooks",
+        "eslint-plugin-import",
         "jest"
     ],
     "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "react/jsx-filename-extension": [
+            "warn",
+            {
+                "extensions": [
+                    ".jsx",
+                    ".tsx"
+                ]
+            }
+        ],
         "react/prefer-es6-class": "error",
         "react/react-in-jsx-scope": "off",
         "react/default-props-match-prop-types": "error",

web-app/babel.config.js

@@ -1,4 +1,4 @@
-const presets = ["@babel/preset-react"];
+const presets = ["@babel/preset-react", "@babel/preset-typescript"];
 const plugins = [
   "react-hot-loader/babel",
   "@babel/plugin-syntax-dynamic-import",

web-app/jest.setup.js

@@ -1,5 +1,6 @@
 window.React = require('react')
 window.PropTypes = require('prop-types')
+import '@testing-library/jest-dom/extend-expect'
 
 /**
  * This is just a little hack to silence a warning that we'll get until react fixes this