Chore: Switch from Eslint to Standard

Because:
- We only need a light touch with linting in our Stimulus Controllers.
- We never make use of how configurable eslint is.

This commit
- Removes Eslint and its config file
- Removes Babel and its config file
- Adds Standard and fixes all the failing lint issues

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
         run: |
           bin/rubocop --parallel
           bin/erblint --lint-all
-          yarn run eslint
+          yarn run lint
 
   tests:
     name: Tests

CONTRIBUTING.md

@@ -33,7 +33,7 @@ Before submitting a pull request (PR) to our web app repo, you should run the fo
 
 ```bash
 rubocop
-yarn eslint
+yarn lint
 rspec
 yarn test
 ```

app/javascript/controllers/announcement_controller.js

@@ -1,14 +1,14 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 
 export default class AnnouncementController extends Controller {
   static values = {
     expiresAt: String,
-    id: Number,
-  };
+    id: Number
+  }
 
-  dismiss() {
-    const expiresAt = new Date(this.expiresAtValue).toUTCString();
-    document.cookie = `announcement_${this.idValue}=disabled; expires=${expiresAt}; path=/`;
-    this.element.remove();
+  dismiss () {
+    const expiresAt = new Date(this.expiresAtValue).toUTCString()
+    document.cookie = `announcement_${this.idValue}=disabled; expires=${expiresAt}; path=/`
+    this.element.remove()
   }
 }

app/javascript/controllers/autosort_controller.js

@@ -1,62 +1,61 @@
-import { Controller } from '@hotwired/stimulus';
-import Sortable from 'sortablejs';
-import { useMutation } from 'stimulus-use';
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+import { useMutation } from 'stimulus-use'
 
 export default class extends Controller {
-  static targets = ['item'];
+  static targets = ['item']
 
   static values = {
-    canSort: { type: Boolean, default: false },
-  };
+    canSort: { type: Boolean, default: false }
+  }
 
-  connect() {
+  connect () {
     if (this.canSortValue) {
       this.sortable = Sortable.create(this.element, {
         animation: 300,
         easing: 'cubic-bezier(0.61, 1, 0.88, 1)',
-        disabled: true,
-      });
+        disabled: true
+      })
 
       useMutation(this, {
-        attributes: true, childList: true, subtree: true, attributeFilter: ['data-sort-code'],
-      });
+        attributes: true, childList: true, subtree: true, attributeFilter: ['data-sort-code']
+      })
     }
   }
 
-  mutate(entries) {
+  mutate (entries) {
     entries.forEach((mutation) => {
       if (mutation.type === 'attributes' && mutation.attributeName === 'data-sort-code') {
-        this.sortItems();
+        this.sortItems()
       }
-    });
+    })
   }
 
-  sortItems() {
-    const items = Array.from(this.itemTargets);
+  sortItems () {
+    const items = Array.from(this.itemTargets)
 
-    if (this.itemsAreSorted(items)) return;
+    if (this.itemsAreSorted(items)) return
 
-    const sortedItems = items.sort((a, b) => this.compareItems(a, b)).map((item) => item.dataset.id);
-    this.sortable.sort(sortedItems, true);
+    const sortedItems = items.sort((a, b) => this.compareItems(a, b)).map((item) => item.dataset.id)
+    this.sortable.sort(sortedItems, true)
   }
 
-  itemsAreSorted() {
+  itemsAreSorted () {
     return this.itemSortCodes().every((sortCode, index, items) => {
-      if (index === 0) return true;
-      return sortCode <= items[index - 1];
-    });
+      if (index === 0) return true
+      return sortCode <= items[index - 1]
+    })
   }
 
-  itemSortCodes() {
-    return this.itemTargets.map((item) => this.getSortCode(item));
+  itemSortCodes () {
+    return this.itemTargets.map((item) => this.getSortCode(item))
   }
 
-  /* eslint-disable class-methods-use-this */
-  getSortCode(item) {
-    return parseFloat(item.getAttribute('data-sort-code')) || 0;
+  getSortCode (item) {
+    return parseFloat(item.getAttribute('data-sort-code')) || 0
   }
 
-  compareItems(left, right) {
-    return this.getSortCode(right) - this.getSortCode(left);
+  compareItems (left, right) {
+    return this.getSortCode(right) - this.getSortCode(left)
   }
 }

app/javascript/controllers/autosubmit_controller.js

@@ -1,16 +1,16 @@
-import { Controller } from '@hotwired/stimulus';
-import debounce from 'debounce';
+import { Controller } from '@hotwired/stimulus'
+import debounce from 'debounce'
 
 export default class Autosubmit extends Controller {
-  initialize() {
-    this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), 300);
+  initialize () {
+    this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), 300)
   }
 
-  submit() {
-    this.element.requestSubmit();
+  submit () {
+    this.element.requestSubmit()
   }
 
-  debouncedSubmit() {
-    this.submit();
+  debouncedSubmit () {
+    this.submit()
   }
 }

app/javascript/controllers/chart_controller.js

@@ -1,17 +1,17 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 
-import { Chart } from 'chart.js/auto';
-import twColorsPlugin from 'chartjs-plugin-tailwindcss-colors';
-import twConfig from '../../../tailwind.config';
+import { Chart } from 'chart.js/auto'
+import twColorsPlugin from 'chartjs-plugin-tailwindcss-colors'
+import twConfig from '../../../tailwind.config'
 
 export default class ChartController extends Controller {
   static values = {
     type: String,
     data: Object,
-    options: Object,
-  };
+    options: Object
+  }
 
-  connect() {
+  connect () {
     this.chart = new Chart(
       this.element,
       {
@@ -23,28 +23,27 @@ export default class ChartController extends Controller {
           responsive: true,
           plugins: {
             legend: {
-              display: false,
+              display: false
             },
-            ...this.chartTypePluginOptions(),
+            ...this.chartTypePluginOptions()
           },
-          ...this.optionsValue,
-        },
-      },
-    );
+          ...this.optionsValue
+        }
+      }
+    )
   }
 
-  disconnect() {
-    this.chart.destroy();
+  disconnect () {
+    this.chart.destroy()
   }
 
   // private
 
-  /* eslint-disable class-methods-use-this */
-  chartTypePlugins() {
-    return [];
+  chartTypePlugins () {
+    return []
   }
 
-  chartTypePluginOptions() {
-    return {};
+  chartTypePluginOptions () {
+    return {}
   }
 }

app/javascript/controllers/chart_with_crosshair_controller.js

@@ -1,41 +1,39 @@
-/* eslint-disable class-methods-use-this */
-
-import { Interaction } from 'chart.js/auto';
-import { CrosshairPlugin, Interpolate } from 'chartjs-plugin-crosshair';
-import ChartController from './chart_controller';
+import { Interaction } from 'chart.js/auto'
+import { CrosshairPlugin, Interpolate } from 'chartjs-plugin-crosshair'
+import ChartController from './chart_controller'
 
 export default class ChartWithCrosshairController extends ChartController {
-  connect() {
-    Interaction.modes.interpolate = Interpolate;
-    super.connect();
+  connect () {
+    Interaction.modes.interpolate = Interpolate
+    super.connect()
   }
 
-  chartTypePlugins() {
-    return [CrosshairPlugin, Interpolate];
+  chartTypePlugins () {
+    return [CrosshairPlugin, Interpolate]
   }
 
-  chartTypePluginOptions() {
+  chartTypePluginOptions () {
     return {
       tooltip: {
         mode: 'index',
-        intersect: false,
+        intersect: false
       },
       crosshair: {
         line: {
           dashPattern: [5, 5],
           color: '#9ca3af',
-          width: 1,
+          width: 1
         },
         snap: {
-          enabled: true,
+          enabled: true
         },
         zoom: {
           enabled: true,
           zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',
           zoomboxBorderColor: '#48F',
-          zoomButtonClass: 'hidden',
-        },
-      },
-    };
+          zoomButtonClass: 'hidden'
+        }
+      }
+    }
   }
 }

app/javascript/controllers/clipboard_controller.js

@@ -1,16 +1,16 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 
 export default class ClipboardController extends Controller {
-  static targets = ['source', 'message'];
+  static targets = ['source', 'message']
 
-  copy() {
-    navigator.clipboard.writeText(this.sourceTarget.value);
+  copy () {
+    navigator.clipboard.writeText(this.sourceTarget.value)
 
     if (this.hasMessageTarget) {
-      this.messageTarget.classList.remove('hidden');
+      this.messageTarget.classList.remove('hidden')
       setTimeout(() => {
-        this.messageTarget.classList.add('hidden');
-      }, 2000);
+        this.messageTarget.classList.add('hidden')
+      }, 2000)
     }
   }
 }

app/javascript/controllers/css_toggle_controller.js

@@ -1,14 +1,14 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus'
 
 export default class CssToggleController extends Controller {
-  static targets = ['element'];
+  static targets = ['element']
 
-  static classes = ['from', 'to'];
+  static classes = ['from', 'to']
 
-  toggle() {
+  toggle () {
     this.elementTargets.forEach((element) => {
-      element.classList.toggle(...this.toClasses);
-      element.classList.toggle(...this.fromClasses);
-    });
+      element.classList.toggle(...this.toClasses)
+      element.classList.toggle(...this.fromClasses)
+    })
   }
 }

app/javascript/controllers/date_picker_controller.js

@@ -1,14 +1,14 @@
-import { Controller } from '@hotwired/stimulus';
-import flatpickr from 'flatpickr';
-import 'flatpickr/dist/flatpickr.css';
+import { Controller } from '@hotwired/stimulus'
+import flatpickr from 'flatpickr'
+import 'flatpickr/dist/flatpickr.css'
 
 export default class DatePicker extends Controller {
   static values = {
     min: String,
-    max: String,
-  };
+    max: String
+  }
 
-  connect() {
+  connect () {
     this.picker = flatpickr(
       this.element,
       {
@@ -17,12 +17,12 @@ export default class DatePicker extends Controller {
         dateFormat: 'Y-m-d',
         defaultDate: this.element.value,
         minDate: this.minValue,
-        maxDate: this.maxValue,
-      },
-    );
+        maxDate: this.maxValue
+      }
+    )
   }
 
-  disconnect() {
-    this.picker.destroy();
+  disconnect () {
+    this.picker.destroy()
   }
 }