Add linting and formatting tools (#378)

* fix: outdated packages with vulnerabilities

* feat: install eslint and initiate config

* feat: install prettier and set prettier options

* feat: install eslint-config-prettier

* feat: install eslint-plugin-prettier

* chore: reformat eslint config

* feat: add @trivago/prettier-plugin-sort-imports, define preferred import order

* fix: css-loader file resolution bug introduced by CRA v4

In recent commits, we upgraded our react-scripts version from 3.4.4
to 4.0.3. This is because CRA (create-react-app) v3 uses an outdated
version of eslint (facebook/create-react-app#8849). This introduced
a bug related to the css-loader library, which can no longer resolve
assets in the public folder:
- facebook/create-react-app#9870 (comment)
- webpack-contrib/css-loader#1136 (comment)

This commit fixes this bug by moving the referenced image to the
relevant sub-directory in the src directory.

* chore: temporarily disable eslint

* chore: add more files and folders to .prettierignore

* chore: upgrade prettier-plugin-sort-imports to 2.0.2

fixes trivago/prettier-plugin-sort-imports#22

* chore: temporarily disable prettier

* chore: remove prettier config temporarily

* chore: remove jsx-a11y references temporarily

* temporarily remove import/prefer-default-export reference

Co-authored-by: jiehao <[email protected]>
Co-authored-by: Preston Lim <[email protected]>

.eslintIgnore

@@ -0,0 +1,4 @@
+.env
+node_modules/
+.vscode/
+*

.eslintrc.json

@@ -1,20 +1,24 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jest": true
-    },
-    "extends": [
-        "airbnb"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "babel-eslint",
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
-}
+  "env": {
+      "browser": true,
+      "es2021": true,
+      "jest": true
+  },
+  // "extends": [
+  //     "plugin:react/recommended",
+  //     "airbnb",
+  //     "plugin:prettier/recommended"
+  // ],
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react"
+  ],
+  "rules": {
+  }
+}

.prettierignore

@@ -0,0 +1,17 @@
+.env
+node_modules/
+.vscode/
+build/
+
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*

package.json

@@ -28,14 +28,15 @@
     "react-input-mask": "^2.0.4",
     "react-query": "^3.9.8",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.3",
     "react-select": "^3.1.0",
     "react-simplemde-editor": "^4.1.0",
     "react-toastify": "^6.1.0",
     "react-toggle-button": "^2.2.0",
     "sgds-govtech": "^1.3.16",
     "slugify": "^1.3.6",
     "toml": "^3.0.0",
+    "type-fest": "^0.13.1",
     "uuid": "^3.3.3",
     "yaml": "^1.10.2"
   },
@@ -62,13 +63,18 @@
     ]
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^2.0.2",
     "cz-conventional-changelog": "^3.0.2",
-    "eslint": "^6.5.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^1.7.0"
+    "eslint": "^7.21.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "prettier": "2.2.1"
   },
   "config": {
     "commitizen": {

src/styles/isomer-cms/pages/Media.module.scss

@@ -10,7 +10,7 @@
 }
 
 @mixin checkered-background-grid {
-  background-image: url('/img/transparent_bg.jpg');
+  background-image: url('../../img/transparent_bg.jpg');
   background-size: 20px 20px;
   background-repeat: repeat;
 }

src/templates/homepage/HeroSection.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 /* eslint
   react/no-array-index-key: 0
-  jsx-a11y/anchor-is-valid: 0
  */
 
 const HeroButton = ({ button }) => (

src/templates/homepage/InfobarSection.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 /* eslint
   react/no-array-index-key: 0
-  jsx-a11y/anchor-is-valid: 0
  */
 
 const TemplateInfobarSection = ({

src/templates/homepage/InfopicLeftSection.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 /* eslint
   react/no-array-index-key: 0
-  jsx-a11y/anchor-is-valid: 0
  */
 
 const TemplateInfopicLeftSection = ({

src/templates/homepage/InfopicRightSection.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 /* eslint
   react/no-array-index-key: 0
-  jsx-a11y/anchor-is-valid: 0
  */
 
 const TemplateInfopicRightSection = ({

src/templates/homepage/ResourcesSection.jsx

@@ -5,7 +5,6 @@ import contentStyles from '../../styles/isomer-cms/pages/Content.module.scss';
 
 /* eslint
   react/no-array-index-key: 0
-  jsx-a11y/anchor-is-valid: 0
  */
 
 const ResourcePost = () => (

src/utils/markdownToolbar.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 /** *
  * This file exposes and exports default actions from the EasyMDE library
  * and includes a new default image upload action