Overhaul linting setup (#535)

* Overhaul linting setup

* Apply new linting rules to codebase

* Add lint job to CI

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: cimg/node:18.15
+      - image: cimg/node:20.11.1
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -54,6 +54,38 @@ jobs:
             API_CLIENT_HAWK_SECRET_ACCESS_KEY: secret-access-key
           when: always
 
+  lint:
+    docker:
+      - image: cimg/node:20.11.1
+
+    working_directory: ~/omis-frontend
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package-lock.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: npm install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package-lock.json" }}
+
+      # run tests!
+      - run:
+          name: Run linter
+          command: npm run lint
+          environment:
+            API_CLIENT_HAWK_ACCESS_KEY_ID: access-key-id
+            API_CLIENT_HAWK_SECRET_ACCESS_KEY: secret-access-key
+          when: always
+
 commands:
   run_make:
     description: Run makefile target with some setup
@@ -91,3 +123,4 @@ workflows:
     jobs:
       - e2e_tests
       - build
+      - lint

.eslintignore

@@ -0,0 +1,2 @@
+public/
+node_modules/

.eslintrc.json

@@ -1,18 +1,69 @@
 {
-  "extends": "standard",
-  "parser": "babel-eslint",
-  "plugins": [],
+  "parser": "@babel/eslint-parser",
+  "extends": ["plugin:prettier/recommended", "prettier"],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "plugins": ["import"],
   "rules": {
-    "comma-dangle": [
+    "no-async-promise-executor": "off",
+    "no-case-declarations": "off",
+    "no-prototype-builtins": "off",
+    "no-unused-vars": [
       "error",
       {
-        "arrays": "always-multiline",
-        "objects": "always-multiline",
-        "imports": "never",
-        "exports": "never",
-        "functions": "ignore"
+        "ignoreRestSiblings": true
       }
     ],
-    "object-curly-spacing": ["error", "always"]
-  }
+    "node/no-deprecated-api": "off",
+    "object-curly-newline": "off",
+    "no-else-return": "off",
+    "arrow-body-style": "off",
+    "dot-notation": "error",
+    "import/newline-after-import": [
+      "error",
+      {
+        "count": 1
+      }
+    ],
+    "eol-last": "error",
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 1
+      }
+    ],
+    "no-undef": "error",
+    "no-console": ["error", { "allow": ["assert"] }],
+    "import/order": [
+      "error",
+      {
+        "groups": [["builtin", "external"]],
+        "newlines-between": "always-and-inside-groups"
+      }
+    ],
+    "no-duplicate-imports": "error"
+  },
+  "overrides": [
+    {
+      "globals": {
+        "expect": true,
+        "proxyquire": true,
+        "sinon": true,
+        "nock": true,
+        "rootPath": true,
+        "globalReq": true,
+        "globalRes": true
+      },
+      "rules": {
+        "no-unused-expressions": 0
+      },
+      "files": ["**.test.{js}"],
+      "env": {
+        "mocha": true,
+        "browser": true
+      }
+    }
+  ]
 }

.github/dependabot.yml

@@ -5,12 +5,12 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
     open-pull-requests-limit: 10
     ignore:
-    - dependency-name: date-fns 
-      versions:
-        - "> 2.3.0"
+      - dependency-name: date-fns
+        versions:
+          - '> 2.3.0'

.github/workflows/update-migration-branch.yml

@@ -5,7 +5,7 @@ on:
     types:
       - closed
 
-permissions: 
+permissions:
   contents: write
 
 jobs:
@@ -17,12 +17,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-        
+
       - name: Setup Git User
         run: |
           git config user.name "GitHub Action"
           git config user.email "<EMAIL>"
-      
 
       - name: Update Migration Branch
         run: |
@@ -31,4 +30,4 @@ jobs:
           git checkout migration-deploy
           git pull
           git merge origin/master
-          git push origin migration-deploy
+          git push origin migration-deploy

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  printWidth: 80,
+  arrowParens: 'always',
+}

assets/javascripts/modules/cookie-message.js

@@ -1,9 +1,9 @@
-function setCookie (name, value, options = {}) {
+function setCookie(name, value, options = {}) {
   let cookieString = `${name}=${value}; path=/`
 
   if (options.days) {
     const date = new Date()
-    date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000))
+    date.setTime(date.getTime() + options.days * 24 * 60 * 60 * 1000)
     cookieString = `${cookieString}; expires=${date.toGMTString()}`
   }
 
@@ -14,7 +14,7 @@ function setCookie (name, value, options = {}) {
   document.cookie = cookieString
 }
 
-function getCookie (name) {
+function getCookie(name) {
   const nameEQ = `${name}=`
   const cookies = document.cookie.split(';')
 

assets/javascripts/vendor/details.polyfill.js

@@ -9,15 +9,20 @@
 ;(function () {
   'use strict'
 
-  var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean'
+  var NATIVE_DETAILS =
+    typeof document.createElement('details').open === 'boolean'
 
   // Add event construct for modern browsers or IE
   // which fires the callback with a pre-converted target reference
-  function addEvent (node, type, callback) {
+  function addEvent(node, type, callback) {
     if (node.addEventListener) {
-      node.addEventListener(type, function (e) {
-        callback(e, e.target)
-      }, false)
+      node.addEventListener(
+        type,
+        function (e) {
+          callback(e, e.target)
+        },
+        false
+      )
     } else if (node.attachEvent) {
       node.attachEvent('on' + type, function (e) {
         callback(e, e.srcElement)
@@ -26,7 +31,7 @@
   }
 
   // Handle cross-modal click events
-  function addClickEvent (node, callback) {
+  function addClickEvent(node, callback) {
     // Prevent space(32) from scrolling the page
     addEvent(node, 'keypress', function (e, target) {
       if (target.nodeName === 'SUMMARY') {
@@ -41,15 +46,17 @@
     })
     // When the key comes up - check if it is enter(13) or space(32)
     addEvent(node, 'keyup', function (e, target) {
-      if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target) }
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        callback(e, target)
+      }
     })
     addEvent(node, 'mouseup', function (e, target) {
       callback(e, target)
     })
   }
 
   // Get the nearest ancestor element of a node that matches a given tag name
-  function getAncestor (node, match) {
+  function getAncestor(node, match) {
     do {
       if (!node || node.nodeName.toLowerCase() === match) {
         break
@@ -65,7 +72,7 @@
   var started = false
 
   // Initialisation function
-  function addDetailsPolyfill (list) {
+  function addDetailsPolyfill(list) {
     // If this has already happened, just return
     // else set the flag so it doesn't happen again
     if (started) {
@@ -140,22 +147,33 @@
           twisty.appendChild(document.createTextNode('\u25ba'))
         }
 
-        details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild)
+        details.__summary.__twisty = details.__summary.insertBefore(
+          twisty,
+          details.__summary.firstChild
+        )
         details.__summary.__twisty.setAttribute('aria-hidden', 'true')
       }
     }
 
     // Define a statechange function that updates aria-expanded and style.display
     // Also update the arrow position
-    function statechange (summary) {
-      var expanded = summary.__details.__summary.getAttribute('aria-expanded') === 'true'
-      var hidden = summary.__details.__content.getAttribute('aria-hidden') === 'true'
-
-      summary.__details.__summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'))
-      summary.__details.__content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'))
+    function statechange(summary) {
+      var expanded =
+        summary.__details.__summary.getAttribute('aria-expanded') === 'true'
+      var hidden =
+        summary.__details.__content.getAttribute('aria-hidden') === 'true'
+
+      summary.__details.__summary.setAttribute(
+        'aria-expanded',
+        expanded ? 'false' : 'true'
+      )
+      summary.__details.__content.setAttribute(
+        'aria-hidden',
+        hidden ? 'false' : 'true'
+      )
 
       if (!NATIVE_DETAILS) {
-        summary.__details.__content.style.display = (expanded ? 'none' : '')
+        summary.__details.__content.style.display = expanded ? 'none' : ''
 
         var hasOpenAttr = summary.__details.getAttribute('open') !== null
         if (!hasOpenAttr) {
@@ -166,8 +184,11 @@
       }
 
       if (summary.__twisty) {
-        summary.__twisty.firstChild.nodeValue = (expanded ? '\u25ba' : '\u25bc')
-        summary.__twisty.setAttribute('class', (expanded ? 'details__arrow is-closed' : 'details__arrow is-open'))
+        summary.__twisty.firstChild.nodeValue = expanded ? '\u25ba' : '\u25bc'
+        summary.__twisty.setAttribute(
+          'class',
+          expanded ? 'details__arrow is-closed' : 'details__arrow is-open'
+        )
       }
 
       return true

assets/stylesheets/_components.scss

@@ -1,10 +1,10 @@
-@import "components/.example";
-@import "components/button";
-@import "components/confirmation-banner";
-@import "components/local-header";
-@import "components/messages";
-@import "components/meta-list";
+@import 'components/.example';
+@import 'components/button';
+@import 'components/confirmation-banner';
+@import 'components/local-header';
+@import 'components/messages';
+@import 'components/meta-list';
 
-@import "components/form/error-summary";
-@import "components/form/form-group";
-@import "components/form/multiple-choice";
+@import 'components/form/error-summary';
+@import 'components/form/form-group';
+@import 'components/form/multiple-choice';

assets/stylesheets/_elements.scss

@@ -1,5 +1,5 @@
-@import "elements/base";
-@import "elements/details";
-@import "elements/heading";
-@import "elements/list";
-@import "elements/table";
+@import 'elements/base';
+@import 'elements/details';
+@import 'elements/heading';
+@import 'elements/list';
+@import 'elements/table';

assets/stylesheets/_generic.scss

@@ -1,2 +1,2 @@
-@import "generic/box-sizing";
-@import "generic/reset";
+@import 'generic/box-sizing';
+@import 'generic/reset';

assets/stylesheets/_layout.scss

@@ -1 +1 @@
-@import "layout/assemblies";
+@import 'layout/assemblies';

assets/stylesheets/_objects.scss

@@ -1,10 +1,10 @@
-@import "objects/list";
-@import "objects/conditional-subfields";
+@import 'objects/list';
+@import 'objects/conditional-subfields';
 
-@import "objects/base/global-header";
-@import "objects/base/global-footer";
-@import "objects/base/global-nav";
-@import "objects/base/main-content";
-@import "objects/base/notification-banner";
-@import "objects/base/phase-banner";
-@import "objects/base/skip-links";
+@import 'objects/base/global-header';
+@import 'objects/base/global-footer';
+@import 'objects/base/global-nav';
+@import 'objects/base/main-content';
+@import 'objects/base/notification-banner';
+@import 'objects/base/phase-banner';
+@import 'objects/base/skip-links';