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

README.md

@@ -56,3 +56,19 @@ Use Storybooks [built-in test-runner](https://storybook.js.org/docs/react/writin
    ```
    $ yarn test-storybook
    ```
+
+### Formatting and Linting
+
+The remote repository will enforce ESLint rules and Prettier formatting.
+
+To check ESLint and Prettier formatting locally:
+
+```
+$ yarn lint
+```
+
+To format the code in `./src/`:
+
+```
+$ yarn prettier -w ./src
+```

package.json

@@ -19,6 +19,8 @@
   "readmeFilename": "README.md",
   "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",
@@ -69,6 +71,11 @@
     "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-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",

src/components/atoms/AccordionBody/AccordionBody.css

@@ -1,4 +1,4 @@
 .accordion-body.data-li {
   border-left: 3px solid;
   border-color: var(--color-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');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // TODO: See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
         this.accordionBody.append(node);
@@ -38,11 +42,17 @@ export default class AccordionBody extends HTMLElement {
   connectedCallback() {
     // Nav attributes
     // TODO: Refactor attribute and class handling.
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionBodyClasses = ['accordion-body'];
     if (this.getAttribute('data-li') !== null) {
       accordionBodyClasses.push('data-li');
     }
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     extraClasses != undefined && extraClasses != null
       ? accordionBodyClasses.push(extraClasses)
       : 0;

src/components/atoms/AccordionHeader/AccordionHeader.css

@@ -11,4 +11,4 @@
 
 .accordion-button.data-li {
   padding-right: 1rem;
-}
+}

src/components/atoms/AccordionHeader/AccordionHeader.js

@@ -23,6 +23,8 @@ export default class AccordionHeader extends HTMLElement {
     this.accordionBtn = document.createElement('button');
     this.accordionHeader.appendChild(this.accordionBtn);
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // TODO: See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = ev.target.assignedElements();
       tempElements.forEach((node) => {
         this.accordionBtn.append(node);
@@ -43,9 +45,17 @@ export default class AccordionHeader extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     this.accordionBtn.setAttribute('aria-expanded', newValue);
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tempClasses = this.accordionBtn.className.split(' ');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let popValue = tempClasses.pop();
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     popValue != 'collapsed' ? tempClasses.push(popValue) : 0;
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (newValue == 'false') {
       tempClasses.push('collapsed');
     }
@@ -55,10 +65,18 @@ export default class AccordionHeader extends HTMLElement {
   connectedCallback() {
     // Nav attributes
     // TODO: Refactor attribute and class handling.
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let parentID = this.getAttribute('data-parent-id');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let expanded = this.getAttribute('data-expanded');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
     const isListItem = this.getAttribute('data-li');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionBtnClasses = ['accordion-button'];
     if (isListItem !== null) {
       accordionBtnClasses.push('data-li');
@@ -67,12 +85,16 @@ export default class AccordionHeader extends HTMLElement {
     this.accordionBtn.setAttribute('data-bs-toggle', 'collapse');
     this.accordionBtn.setAttribute('aria-controls', parentID);
     this.accordionBtn.setAttribute('data-bs-target', `#${parentID}`);
+    // TODO: 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');
     }
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     extraClasses != undefined && extraClasses != null
       ? accordionBtnClasses.push(extraClasses)
       : 0;

src/components/atoms/AccordionItem/AccordionItem.js

@@ -22,6 +22,8 @@ export default class AccordionItem extends HTMLElement {
     this.accordionHeader = document.createElement('div');
     this.accordionBody = document.createElement('div');
     this.shadowRoot.addEventListener('slotchange', (ev) => {
+      // TODO: See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = ev.target.assignedElements();
       tempElements.forEach((node) => {
         // TODO: Refactor attribute and class handling.
@@ -31,9 +33,13 @@ export default class AccordionItem extends HTMLElement {
             'data-index',
           )}`,
         );
+        // TODO: See CityOfDetroit/detroitmi#1099
+        // eslint-disable-next-line eqeqeq
         this.getAttribute('data-expanded') == 'true'
           ? node.setAttribute('data-expanded', true)
           : 0;
+        // TODO: See CityOfDetroit/detroitmi#1099
+        // eslint-disable-next-line eqeqeq
         if (node.tagName == 'COD-ACCORDION-HEADER') {
           if (this.getAttribute('data-li') !== null) {
             node.setAttribute('data-li', '');
@@ -69,9 +75,17 @@ export default class AccordionItem extends HTMLElement {
     this.accordionBody
       .querySelector('cod-accordion-body')
       .setAttribute('data-expanded', newValue);
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tempClasses = this.accordionBody.className.split(' ');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let popValue = tempClasses.pop();
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     popValue != 'show' ? tempClasses.push(popValue) : 0;
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (newValue == 'true') {
       tempClasses.push('show');
     }
@@ -81,11 +95,21 @@ export default class AccordionItem extends HTMLElement {
   connectedCallback() {
     // Nav attributes
     // TODO: Refactor attribute and class handling.
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let parentID = this.getAttribute('data-parent-id');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let index = this.getAttribute('data-index');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let expanded = this.getAttribute('data-expanded');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let accordionHeaderClasses = ['accordion-header'];
     let accordionBodyClasses = ['accordion-collapse collapse'];
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     expanded == 'true' ? accordionBodyClasses.push('show') : 0;
     if (this.getAttribute('data-li') !== null) {
       accordionBodyClasses = accordionBodyClasses.concat(
@@ -133,6 +157,8 @@ export default class AccordionItem extends HTMLElement {
   }
 
   _onClick(e) {
+    // TODO: 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);
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line no-unused-vars
     shadow.addEventListener('slotchange', (ev) => {
+      // TODO: See CityOfDetroit/detroitmi#1099
+      // eslint-disable-next-line prefer-const
       let tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
+        // TODO: 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
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let icon = this.getAttribute('data-icon');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let iconOrder = this.getAttribute('data-icon-order');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let iconSize = this.getAttribute('data-icon-size');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let backgroundColor = this.getAttribute('data-background-color');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
     this.alert.role = 'alert';
     let iconClass = '';
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (icon != undefined && icon != null) {
       this.alert.querySelector('#alert-content').className = 'col';
+      // TODO: 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);
+      // TODO: 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
+    // TODO: 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
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let tag = this.getAttribute('data-tag');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let backgroundColor = this.getAttribute('data-background-color');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let text = this.getAttribute('data-text');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let hiddenText = this.getAttribute('data-hidden-text');
     let pill = this.getAttribute('data-pill');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let url = this.getAttribute('data-url');
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line prefer-const
     let extraClasses = this.getAttribute('data-extra-classes');
     let badge = null;
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     pill == 'true' ? (pill = 'rounded-pill') : (pill = '');
+    // TODO: 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;
+    // TODO: See CityOfDetroit/detroitmi#1099
+    // eslint-disable-next-line eqeqeq
     if (hiddenText != undefined || hiddenText != null) {
       const hiddenBadge = document.createElement('span');
       hiddenBadge.className = 'visually-hidden';