Enable ESLint; add ESLint/Prettier to CI

.eslintrc.yml

@@ -0,0 +1,15 @@
+env:
+  browser: true
+  commonjs: true
+  es2021: true
+extends: [eslint:recommended, prettier]
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+rules: {
+  eqeqeq: [error, always],
+  no-else-return: [error],
+  no-implicit-coercion: [warn],
+  prefer-const: [error],
+  no-console: [error]
+}

.github/workflows/code-format-lint.yml

@@ -0,0 +1,19 @@
+name: "Prettier Format & ESLint"
+
+on:
+  push:
+    branches: [ dev ]
+  pull_request:
+    branches: [ dev ]
+
+jobs:
+  format_and_lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+      - run: yarn check-lint-config
+      - run: yarn lint

package.json

@@ -18,6 +18,8 @@
   },
   "homepage": "https://jedgar1mx.github.io/COD-Design-System",
   "scripts": {
+    "check-lint-config": "npx eslint-config-prettier src/index.js",
+    "lint": "eslint src && prettier --check src/*",
     "build": "webpack --mode production",
     "build-package": "cross-env BABEL_ENV=production babel src -d dist",
     "start": "webpack-dev-server --mode development",
@@ -60,6 +62,7 @@
     "@storybook/web-components": "^7.3.2",
     "@storybook/web-components-webpack5": "^7.3.2",
     "@svgr/webpack": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
     "auto": "^10.43.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -68,6 +71,12 @@
     "css-loader": "^6.5.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "cypress": "^9.5.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "latest",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "27",
@@ -87,6 +96,7 @@
     "storybook": "^7.3.2",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.2.4",
+    "typescript": "*",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",

src/components/atoms/AccordionBody/AccordionBody.js

@@ -16,7 +16,11 @@ export default class AccordionBody extends HTMLElement {
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
     this.accordionBody = document.createElement('div');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
         this.accordionBody.append(node);
@@ -37,8 +41,14 @@ export default class AccordionBody extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionBodyClasses = ['accordion-body'];
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     extraClasses != undefined && extraClasses != null
       ? accordionBodyClasses.push(extraClasses)
       : 0;

src/components/atoms/AccordionHeader/AccordionHeader.js

@@ -22,7 +22,11 @@ export default class AccordionHeader extends HTMLElement {
     this.accordionHeader = document.createElement('div');
     this.accordionBtn = document.createElement('button');
     this.accordionHeader.appendChild(this.accordionBtn);
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
         this.accordionBtn.append(node);
@@ -43,9 +47,17 @@ export default class AccordionHeader extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     this.accordionBtn.setAttribute('aria-expanded', newValue);
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tempClasses = this.accordionBtn.className.split(' ');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let popValue = tempClasses.pop();
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     popValue != 'collapsed' ? tempClasses.push(popValue) : 0;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (newValue == 'false') {
       tempClasses.push('collapsed');
     }
@@ -54,20 +66,32 @@ export default class AccordionHeader extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let parentID = this.getAttribute('data-parent-id');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let expanded = this.getAttribute('data-expanded');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionBtnClasses = ['accordion-button'];
     this.accordionBtn.setAttribute('type', 'button');
     this.accordionBtn.setAttribute('data-bs-toggle', 'collapse');
     this.accordionBtn.setAttribute('aria-controls', parentID);
     this.accordionBtn.setAttribute('data-bs-target', `#${parentID}`);
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (expanded == 'true') {
       this.accordionBtn.setAttribute('aria-expanded', 'true');
     } else {
       accordionBtnClasses.push('collapsed');
       this.accordionBtn.setAttribute('aria-expanded', 'false');
     }
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     extraClasses != undefined && extraClasses != null
       ? accordionBtnClasses.push(extraClasses)
       : 0;

src/components/atoms/AccordionItem/AccordionItem.js

@@ -21,7 +21,11 @@ export default class AccordionItem extends HTMLElement {
     shadow.appendChild(template.content.cloneNode(true));
     this.accordionHeader = document.createElement('div');
     this.accordionBody = document.createElement('div');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
         node.setAttribute(
@@ -30,9 +34,13 @@ export default class AccordionItem extends HTMLElement {
             'data-index',
           )}`,
         );
+        // See CityOfDetroit/detroitmi#1099
+        // eslint-disable-next-line eqeqeq
         this.getAttribute('data-expanded') == 'true'
           ? node.setAttribute('data-expanded', true)
           : 0;
+        // See CityOfDetroit/detroitmi#1099
+        // eslint-disable-next-line eqeqeq
         if (node.tagName == 'COD-ACCORDION-HEADER') {
           this.accordionHeader.append(node);
         } else {
@@ -60,9 +68,17 @@ export default class AccordionItem extends HTMLElement {
     this.accordionBody
       .querySelector('cod-accordion-body')
       .setAttribute('data-expanded', newValue);
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tempClasses = this.accordionBody.className.split(' ');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let popValue = tempClasses.pop();
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     popValue != 'show' ? tempClasses.push(popValue) : 0;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (newValue == 'true') {
       tempClasses.push('show');
     }
@@ -71,18 +87,40 @@ export default class AccordionItem extends HTMLElement {
 
   connectedCallback() {
     // Nav attributes
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let parentID = this.getAttribute('data-parent-id');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let index = this.getAttribute('data-index');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let expanded = this.getAttribute('data-expanded');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars, prefer-const
     let alwaysOpen = this.getAttribute('data-always-open');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let headerExtraClasses = this.getAttribute('data-header-extra-classes');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let bodyExtraClasses = this.getAttribute('data-body-extra-classes');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionHeaderClasses = ['accordion-header'];
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionBodyClasses = ['accordion-collapse collapse'];
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     expanded == 'true' ? accordionBodyClasses.push('show') : 0;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     headerExtraClasses != undefined && headerExtraClasses != null
       ? accordionHeaderClasses.push(headerExtraClasses)
       : 0;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     bodyExtraClasses != undefined && bodyExtraClasses != null
       ? accordionBodyClasses.push(bodyExtraClasses)
       : 0;
@@ -106,6 +144,8 @@ export default class AccordionItem extends HTMLElement {
   }
 
   _onClick(e) {
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (e.target.getAttribute('data-expanded') == 'true') {
       this.getRootNode().host.setAttribute('data-expanded', 'false');
     } else {

src/components/atoms/Alert/Alert.js

@@ -20,9 +20,15 @@ export default class Alert extends HTMLElement {
     const alertContent = document.createElement('div');
     alertContent.id = 'alert-content';
     this.alert.appendChild(alertContent);
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
+        // See CityOfDetroit/detroitmi#1099
+        // eslint-disable-next-line prefer-const
         let nodeClasses = node.className.split(' ');
         nodeClasses.includes('no-wc')
           ? node.remove()
@@ -45,18 +51,34 @@ export default class Alert extends HTMLElement {
     this.shadowRoot.appendChild(variableStyles);
     this.shadowRoot.appendChild(alertStyles);
     // alert attributes
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let icon = this.getAttribute('data-icon');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let iconOrder = this.getAttribute('data-icon-order');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let iconSize = this.getAttribute('data-icon-size');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let backgroundColor = this.getAttribute('data-background-color');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
     this.alert.role = 'alert';
     let iconClass = '';
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (icon != undefined && icon != null) {
       this.alert.querySelector('#alert-content').className = 'col';
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let activeIcon = document.createElement('cod-icon');
       activeIcon.setAttribute('data-icon', icon);
       activeIcon.setAttribute('data-size', iconSize);
+      // See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let iconContainer = document.createElement('div');
       iconContainer.appendChild(activeIcon);
       iconClass = 'd-flex';

src/components/atoms/Badge/Badge.js

@@ -6,6 +6,8 @@ export default class Badge extends HTMLElement {
     // Always call super first in constructor
     super();
     // Create a shadow root
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     const shadow = this.attachShadow({ mode: 'open' });
   }
 
@@ -20,22 +22,40 @@ export default class Badge extends HTMLElement {
     this.shadowRoot.appendChild(variableStyles);
     this.shadowRoot.appendChild(badgeStyles);
     // badge attributes
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tag = this.getAttribute('data-tag');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let backgroundColor = this.getAttribute('data-background-color');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let text = this.getAttribute('data-text');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let hiddenText = this.getAttribute('data-hidden-text');
     let pill = this.getAttribute('data-pill');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let url = this.getAttribute('data-url');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
     let badge = null;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     pill == 'true' ? (pill = 'rounded-pill') : (pill = '');
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (url != undefined || url != null) {
       badge = document.createElement('a');
       badge.href = url;
     } else {
       badge = document.createElement(tag);
     }
     badge.innerText = text;
+    // See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (hiddenText != undefined || hiddenText != null) {
       const hiddenBadge = document.createElement('span');
       hiddenBadge.className = 'visually-hidden';