Add ESLint, fix the issues (#11)

Not too much going on. I like to use the triple-equals rule; it's not
always necessary to use triple-equals but I think it's better to be
consistent. The rest of the fixes are typing-related.

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  env: { node: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+  ignorePatterns: ['build'],
+  rules: {
+    eqeqeq: ['error', 'always'],
+  },
+};

cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   projectId: '4uypg2',
   e2e: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

package.json

@@ -14,7 +14,7 @@
     "serve:widget": "parcel serve ./src/*.html --dist-dir build",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "lint": "prettier --check ."
+    "lint": "prettier --check . && eslint ."
   },
   "browserslist": {
     "production": [
@@ -30,7 +30,10 @@
   },
   "devDependencies": {
     "@swc/helpers": "^0.4.14",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "cypress": "^12.6.0",
+    "eslint": "^8.45.0",
     "parcel": "v2.8.3",
     "postcss": "^8.4.21",
     "postcss-modules": "^6.0.0",

src/calculator-form.ts

@@ -66,15 +66,15 @@ const TAX_FILING_OPTIONS: OptionParam[] = [
 const HOUSEHOLD_SIZE_OPTIONS: OptionParam[] = [1, 2, 3, 4, 5, 6, 7, 8].map(
   count => {
     return {
-      label: `${count} ${count == 1 ? 'person' : 'people'}`,
+      label: `${count} ${count === 1 ? 'person' : 'people'}`,
       value: count.toString(),
     } as OptionParam;
   },
 );
 
 export const formTemplate = (
   [zip, ownerStatus, householdIncome, taxFiling, householdSize]: Array<string>,
-  onSubmit: Function,
+  onSubmit: (e: SubmitEvent) => void,
 ) => html`
   <div class="card card-content">
     <h1>How much money will you get with the Inflation Reduction Act?</h1>

src/calculator.ts

@@ -5,10 +5,14 @@ import { baseStyles, cardStyles, gridStyles } from './styles';
 import { formTemplate, formStyles } from './calculator-form';
 import { detailsStyles, detailsTemplate } from './incentive-details';
 import { summaryStyles, summaryTemplate } from './incentive-summary';
-import { FilingStatus, OwnerStatus } from './calculator-types';
+import {
+  FilingStatus,
+  ICalculatedIncentiveResults,
+  OwnerStatus,
+} from './calculator-types';
 
 const loadedTemplate = (
-  results: any,
+  results: ICalculatedIncentiveResults,
   hideDetails: boolean,
   hideSummary: boolean,
 ) => html`
@@ -20,9 +24,11 @@ const loadingTemplate = () => html`
   <div class="card card-content">Loading...</div>
 `;
 
-const errorTemplate = (error: any) => html`
+const errorTemplate = (error: unknown) => html`
   <div class="card card-content">
-    ${error.message || 'Error loading incentives.'}
+    ${typeof error === 'object' && error && 'message' in error && error.message
+      ? error.message
+      : 'Error loading incentives.'}
   </div>
 `;
 

src/currency-input.ts

@@ -1,4 +1,4 @@
-import { LitElement, css, html, PropertyValues } from 'lit';
+import { LitElement, html, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref';
 import AutoNumeric from 'autonumeric';
@@ -48,7 +48,7 @@ export class CurrencyInput extends LitElement {
 
   onKeydown(event: KeyboardEvent) {
     // this simulates submit on the host form, just like if you hit Enter in a regular <input>
-    if (event.key == 'Enter') {
+    if (event.key === 'Enter') {
       const element: CurrencyInput = event.target as CurrencyInput;
       element.internals?.form?.requestSubmit();
     }

src/incentive-details.ts

@@ -70,10 +70,10 @@ const linkButtonStyles = css`
 export const detailsStyles = [linkButtonStyles, tableStlyes];
 
 function formatAmount(amount: number, amount_type: AmountType) {
-  if (amount_type == 'percent') {
+  if (amount_type === 'percent') {
     return `${Math.round(amount * 100)}%`;
-  } else if (amount_type == 'dollar_amount') {
-    if (amount == 0) {
+  } else if (amount_type === 'dollar_amount') {
+    if (amount === 0) {
       return 'N/A';
     } else {
       return `$${amount.toLocaleString()}`;
@@ -84,10 +84,10 @@ function formatAmount(amount: number, amount_type: AmountType) {
 }
 
 function formatStartDate(start_date: number, type: IncentiveType) {
-  if (start_date == 2022) {
+  if (start_date === 2022) {
     return html`<em>Available Now!</em>`;
-  } else if (start_date == 2023) {
-    if (type == 'pos_rebate') {
+  } else if (start_date === 2023) {
+    if (type === 'pos_rebate') {
       return html`Late 2023`;
     } else {
       return html`<em>Available Now!</em>`;

src/incentive-summary.ts

@@ -1,8 +1,5 @@
-import { html, css, nothing } from 'lit';
-import {
-  ICalculatedIncentiveResults,
-  IIncentiveRecord,
-} from './calculator-types';
+import { html, css, nothing, TemplateResult } from 'lit';
+import { ICalculatedIncentiveResults } from './calculator-types';
 import { lightningBolt } from './icons';
 
 export const summaryStyles = css`
@@ -103,7 +100,7 @@ const numberTemplate = (
   label: string,
   value: number,
   fancy?: boolean,
-  extra?: TemplateResult,
+  extra?: TemplateResult | typeof nothing,
 ) => html`
   <div class="summary-number">
     <div

src/select.ts

@@ -32,7 +32,7 @@ export const select = ({
         ?required=${required}
         tabindex="${ifDefined(tabIndex)}"
       >
-        ${options.map(o => option(o, o.value == currentValue))}
+        ${options.map(o => option(o, o.value === currentValue))}
       </select>
       <span class="focus"></span>
     </div>