Merge pull request #967 from aaronreed708/add-eslint-changes

Add eslint changes

code/.eslintrc.json

@@ -15,14 +15,14 @@
     "rules": {
       "header/header": [2, "block", [
         "*",
-        " * Copyright (c) 2023 Discover Financial Services",
-        " * Licensed under Apache-2.0 License. See License.txt in the project root for license information",
+        {"pattern": " * Copyright \\(c\\) \\d{4} Discover Financial Services| * SPDX-License-Identifier: Apache-2.0"},
+        {"pattern": " * Licensed under Apache-2.0 License. See License.txt in the project root for license information| * Copyright \\d{4} FINOS A11y Theme Builder contributors - see NOTICE file"},
         " "
       ]],
       "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars-experimental": "error"
+      "@typescript-eslint/no-explicit-any": "off",
+      "no-unused-vars": "off"
     },
     "ignorePatterns": ["dist/", "node_modules/", "build/"]
   }
-
+

code/src/app.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/auth.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/config.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/data/themes

@@ -7,3 +7,6 @@
 {"k":"0000000080","o":"0000003306","v":"001"}
 {"_id":31,"_uid":31,"_dt":1698766850655,"_s":"ca2caa00f7eff588585535fe73256327"}
 {"atoms":{"colorPalette":{"colors":[{"name":"Blue","hex":"#2d8eac"},{"name":"Purple","hex":"#862fa2"},{"name":"PInk","hex":"#ed5998"}],"defaultColorName":"Blue"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/PInk/lm[5]"},"secondary":{"key":"atoms/ColorPalette/Purple/lm[5]"},"tertiary":{"key":"atoms/ColorPalette/Blue/lm[6]"},"lightModeBackground":{"title":"White/Off White","primary":{"hex":"#FFFFFF","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#FAF9F6","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/PInk/lm[1]"},"to":{"key":"atoms/ColorPalette/PInk/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Purple/lm[1]"},"to":{"key":"atoms/ColorPalette/Purple/lm[3]"}},"button":{"key":"atoms/ColorPalette/Purple/lm[5]"},"icon":{"key":"atoms/ColorPalette/Blue/lm[6]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/PInk/lm[5]"},"to":{"key":"atoms/ColorPalette/Purple/lm[5]"}},"accent":{"key":"atoms/ColorPalette/PInk/lm[0]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"baseFontSize":16,"fontWeights":[300,400,600,700,800]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{"fontWeight":400},"body1Bold":{"fontWeight":700},"body2":{"fontWeight":400},"body2Bold":{"fontWeight":700},"body3":{"fontWeight":400},"body3Bold":{"fontWeight":700}},"smallTextStyles":{"subtitle1":{"fontWeight":600},"subtitle2":{"fontWeight":600},"caption":{"fontWeight":300},"captionBold":{"fontWeight":600},"overline":{"fontWeight":600},"overlineLarge":{"fontWeight":600},"overlineExtraLarge":{"fontWeight":600},"label1":{"fontWeight":600},"label1AllCaps":{"fontWeight":600},"label2":{"fontWeight":600},"label2AllCaps":{"fontWeight":600},"labelSmall":{"fontWeight":600},"callToAction":{"fontWeight":300},"callToActionSmall":{"fontWeight":300},"small":{"fontWeight":300},"smallSemibold":{"fontWeight":600}},"statStyles":{"stat":{"fontWeight":800}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1690823904515,"lastUpdateInMs":1698766850647},"colors":{"primary":"#C8457B","secondary":"#9950B1","tertiary":"#216D89","background":"#FAF9F6"}},"id":"Testing","_id":{"$wrap":"$oid","v":31}}
+{"k":"0000000080","o":"0000001607","v":"001"}
+{"_id":32,"_uid":32,"_dt":1721104931853,"_s":"59d55d83a70f3e7a03579508a447161b"}
+{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1721104931817,"lastUpdateInMs":1721104931817},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"newtest","_id":{"$wrap":"$oid","v":32}}

code/src/test.ts

@@ -1,8 +1,8 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-var axios = require('axios');
+const axios = require('axios');
 import { Config } from './config';
 const cfg = new Config();
 let errors = false;

code/src/themesEndpoint.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
@@ -14,9 +14,9 @@ export class DocError extends Error {
 }
 
 const DB_NAME = 'themes';
-var Engine = require('tingodb')();
-var db = new Engine.Db(__dirname + '/../src/data', {});
-var collection = db.collection(DB_NAME);
+const Engine = require('tingodb')();
+const db = new Engine.Db(__dirname + '/../src/data', {});
+let collection = db.collection(DB_NAME);
 collection.compactCollection(function (a: any, b: any) {
     console.log(`compactCollection a=${a} b=${b}`);
 });
@@ -41,7 +41,7 @@ async function getDocs(match?: any): Promise<any[]> {
             if (items) {
                 //console.log("  items=",items);
                 const rtn: any = [];
-                for (let doc of items) {
+                for (const doc of items) {
                     delete doc['_id'];
                     rtn.push(doc);
                 }
@@ -63,7 +63,7 @@ async function getMetadata(match?: any): Promise<any[]> {
         collection.find(match, fields).toArray(function (err: any, items: any) {
             if (items) {
                 const rtn: any = [];
-                for (let doc of items) {
+                for (const doc of items) {
                     delete doc['_id'];
                     rtn.push(doc);
                 }
@@ -88,7 +88,7 @@ async function getDocNames(match?: any): Promise<any[]> {
             if (items) {
                 console.log('  items=', items);
                 const rtn: any = [];
-                for (let doc of items) {
+                for (const doc of items) {
                     rtn.push(doc.id);
                 }
                 return success(rtn);
@@ -108,7 +108,7 @@ async function getDoc(id: string, fields?: string[]): Promise<any> {
     let _fields: any = null;
     if (fields) {
         _fields = {};
-        for (var _field of fields) {
+        for (const _field of fields) {
             _fields[_field] = true;
         }
     }
@@ -145,7 +145,7 @@ async function updateDoc(
             }
         } else {
             let found = false;
-            for (var key of Object.keys(doc)) {
+            for (const key of Object.keys(doc)) {
                 if (key.startsWith('$')) {
                     found = true;
                     break;
@@ -355,7 +355,7 @@ export function registerThemesEndpoint(app: express.Application) {
                     'utf8'
                 );
                 const json = JSON.parse(r);
-                for (var key in data) {
+                for (const key in data) {
                     json[key] = data[key];
                 }
                 //console.log("json=",JSON.stringify(json,null,4));

code/src/ui/package.json

@@ -58,6 +58,15 @@
             "react-app",
             "react-app/jest"
         ],
+        "plugins": ["header"],
+        "rules": {
+            "header/header": [2, "block", [
+                "*",
+                {"pattern": " * Copyright \\(c\\) \\d{4} Discover Financial Services| * SPDX-License-Identifier: Apache-2.0"},
+                {"pattern": " * Licensed under Apache-2.0 License. See License.txt in the project root for license information| * Copyright \\d{4} FINOS A11y Theme Builder contributors - see NOTICE file"},
+                " "
+            ]]
+        },
         "overrides": [
             {
                 "files": [

code/src/ui/src/App.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
@@ -18,12 +18,11 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 // import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 
 import { Http } from './Http';
-import { ThemeProvider, Theme } from '@mui/material';
 import { LocalStorage } from './LocalStorage';
 import { ServerStorage } from './ServerStorage';
 import WebFont from 'webfontloader';
 
-if (window.location.hostname == 'localhost' && window.location.port == '3000') {
+if (window.location.hostname === 'localhost' && window.location.port === '3000') {
     Http.init(window.location.origin.replace('3000', '3001'));
 } else {
     Http.init(window.location.origin);
@@ -58,7 +57,7 @@ const App: React.FC<Props> = ({ user }) => {
 
     console.log('storage=', process.env['REACT_APP_STORAGE']);
     const storage =
-        process.env['REACT_APP_STORAGE'] == 'local'
+        process.env['REACT_APP_STORAGE'] === 'local'
             ? new LocalStorage()
             : new ServerStorage();
     // const storage = new ServerStorage();

code/src/ui/src/ErrorHandler.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/Http.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/LocalStorage.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/LocaleMgr.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/Preferences.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/ServerStorage.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
@@ -25,13 +25,13 @@ export class ServerStorage implements Storage {
             //console.log(`set(${key}) PATCH => ${JSON.stringify(response.data)}`);
         } else {
             data.id = key;
-            const response = await this.http.post(`/api/themes`, data);
+            await this.http.post(`/api/themes`, data);
             //console.log(`set(${key}) POST => ${JSON.stringify(response.data)}`);
         }
     }
 
     public async delete(key: string) {
-        const response = await this.http.delete(`/api/themes/${key}`);
+        await this.http.delete(`/api/themes/${key}`);
         //console.log(`delete(${key}) => ${JSON.stringify(response.data)}`);
     }
 

code/src/ui/src/components/AccessibilityLayersButton.tsx

@@ -1,12 +1,11 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
     Checkbox,
     FormControl,
-    InputLabel,
     ListItemText,
     MenuItem,
     Select,
@@ -56,7 +55,7 @@ export const AccessibilityLayersButton: React.FC<Props> = ({
             const p = layersProperty[i];
             const selectedValue = value.indexOf(p.name) > -1;
             const propValue = p.getValue();
-            if (propValue != selectedValue || propValue == undefined) {
+            if (propValue !== selectedValue || propValue === undefined) {
                 console.log(
                     `${name} - Setting value for ${p.name}: current=${propValue} new=${selectedValue}`
                 );

code/src/ui/src/components/ColorBand.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ColorGradient.tsx

@@ -1,12 +1,9 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
 import React, { useState, useEffect } from 'react';
 import {
-    Event,
-    EventListener,
-    EventType,
     EventValueChange,
     GradientColors,
     Shade,

code/src/ui/src/components/ColorGradientHeader.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ColorPairSelect.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
@@ -9,7 +9,6 @@ import {
     MenuItem,
     Select,
     SelectChangeEvent,
-    TextField,
 } from '@mui/material';
 import {
     ColorPair,

code/src/ui/src/components/ColorSelect.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ColorSelectTitled.tsx

@@ -1,8 +1,8 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import React, { MouseEvent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     Alert,
     Box,
@@ -14,9 +14,7 @@ import {
 import {
     Event,
     EventType,
-    PropertyColorShade,
     PropertyTitledShade,
-    Shade,
     TitledShade,
 } from '@finos/a11y-theme-builder-sdk';
 import { ColorShade } from './ColorShade';

code/src/ui/src/components/ColorShade.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ColorShadeCss.tsx

@@ -1,9 +1,9 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
 import React, { useState, useEffect } from 'react';
-import { Shade, Util } from '@finos/a11y-theme-builder-sdk';
+import { Util } from '@finos/a11y-theme-builder-sdk';
 import './ColorShade.css';
 import { getCssValue } from '../mui-a11y-tb/themes/Theme';
 
@@ -69,7 +69,6 @@ export const ColorShadeCss: React.FC<Props> = ({
     showDetails,
     isBaseColor,
 }) => {
-    const [_shade, _setShade] = useState<Shade>();
     let base = name + '-' + id;
     const background = lm ? `--${base}` : `--dm-${base}`;
     const color = lm ? `--on-${base}` : `--dm-on-${base}`;

code/src/ui/src/components/ColorSwatch.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ComputedColorSwatch.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ComputedHotlinkColorSwatch.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/ComputedTextColorSwatch.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */

code/src/ui/src/components/CreateColorTheme.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
@@ -88,7 +88,7 @@ export const CreateColorTheme: React.FC<Props> = ({
             colorTheme.icon.setListener(
                 'ColorThemeAtom-iconColor',
                 function (event: Event) {
-                    if (event.type == EventType.ValueChanged) {
+                    if (event.type === EventType.ValueChanged) {
                         console.log(
                             `Notified of default color theme icon color value changing, event: ${event}`
                         );
@@ -132,6 +132,7 @@ export const CreateColorTheme: React.FC<Props> = ({
             if (hexValue) {
                 baseColorsHex.add(hexValue);
             }
+            return color; // returning a value just to get rid of warning
         });
         _setBaseColorsHex(baseColorsHex);
     }, [colorPalette]);