fix: lint

.erb/configs/.eslintrc

@@ -2,6 +2,7 @@
   "rules": {
     "no-console": "off",
     "global-require": "off",
-    "import/no-dynamic-require": "off"
+    "import/no-dynamic-require": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

.erb/scripts/.eslintrc

@@ -3,6 +3,7 @@
     "no-console": "off",
     "global-require": "off",
     "import/no-dynamic-require": "off",
-    "import/no-extraneous-dependencies": "off"
+    "import/no-extraneous-dependencies": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'erb',
+  extends: ['erb', 'plugin:@typescript-eslint/recommended'],
   rules: {
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
@@ -13,17 +13,21 @@ module.exports = {
     'react/no-array-index-key': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/jsx-filename-extension': 'off',
-    'no-unused-vars': [
+    '@typescript-eslint/no-unused-vars': [
       'warn', // or error
       {
         argsIgnorePattern: '^_',
         varsIgnorePattern: '^_',
         caughtErrorsIgnorePattern: '^_',
       },
     ],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
     // Useless rules
     'import/prefer-default-export': 'off',
     'class-methods-use-this': 'off',
+    'promise/always-return': 'off',
+    'no-restricted-exports': 'off',
   },
   parserOptions: {
     ecmaVersion: 2020,

ThirdPartyLicenses.json

@@ -1232,9 +1232,9 @@
     "text": "MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
   },
   {
-    "id": "semver@7.3.7",
+    "id": "semver@7.5.4",
     "name": "semver",
-    "version": "7.3.7",
+    "version": "7.5.4",
     "url": null,
     "license": "ISC",
     "text": "The ISC License\n\nCopyright (c) Isaac Z. Schlueter and Contributors\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES\nWITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR\nANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN\nACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR\nIN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n"

src/main/api.ts

@@ -115,11 +115,14 @@ ipcMain.on('app:settings:getSettings', (event) => {
   event.reply('app:settings', settings);
 });
 
-ipcMain.handle('app:settings:updateSetting', (_event, key: any, value: any) => {
-  updateSetting(key, value);
-});
+ipcMain.handle(
+  'app:settings:updateSetting',
+  (_event, key: string, value: unknown) => {
+    updateSetting(key, value);
+  }
+);
 
-ipcMain.handle('app:settings:updateSettings', (_event, value: any) => {
+ipcMain.handle('app:settings:updateSettings', (_event, value: Settings) => {
   updateSettings(value);
 });
 

src/main/main.ts

@@ -1,4 +1,4 @@
-/* eslint global-require: off, no-console: off, promise/always-return: off */
+/* eslint global-require: off, no-console: off, promise/always-return: off, @typescript-eslint/no-var-requires: off */
 
 /**
  * This module executes inside of electron's main process. You can start

src/main/preload.ts

@@ -1,4 +1,3 @@
-import os from 'os';
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
 import { MidiMessage, ServerState, Settings } from './types';
@@ -33,8 +32,7 @@ export const AppApi = {
   setAlwaysOnTop: (flag: boolean) =>
     ipcRenderer.send('app:setAlwaysOnTop', flag),
   titleBarDoubleClick: () => ipcRenderer.send('app:titleBarDoubleClick'),
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  on: (appEvent: AppEvent, callback: (...args: any[]) => void) =>
+  on: (appEvent: AppEvent, callback: (...args: unknown[]) => void) =>
     registerListener(`app:${appEvent}`)(callback),
   settings: {
     clear: () => ipcRenderer.send('app:settings:clear'),
@@ -58,8 +56,9 @@ export const AppApi = {
 };
 
 export const OsApi = {
-  isMac: os.platform() === 'darwin',
-  isWindows: os.platform() === 'win32',
+  isMac: process.platform === 'darwin',
+  isWindows: process.platform === 'win32',
+  platform: process.platform,
 };
 
 export const MidiApi = {

src/main/server.ts

@@ -1,3 +1,4 @@
+import { Server } from 'http';
 import express, { Request, Response, NextFunction } from 'express';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import path from 'path';
@@ -12,7 +13,7 @@ type ServerState = {
   port: number | null;
   addresses: string[];
   error: string | null;
-  httpServer?: ReturnType<typeof app.listen>;
+  httpServer?: Server;
   wsServer?: Awaited<ReturnType<typeof initWSServer>>;
 };
 
@@ -58,9 +59,8 @@ app.use(
     err: ServerError | Error,
     _req: Request,
     res: Response,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _next: NextFunction
-  ) => {
+  ): void => {
     res.status(err instanceof ServerError ? err.status : 500);
     res.send(`${__dirname}: ${err.message}`);
   }

src/main/settings/index.ts

@@ -13,6 +13,7 @@ const store = new Store<StoreType>({
   schema,
   defaults,
   migrations,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore: Electron Store supports projectVersion but it's not typed
   projectVersion: version,
 });

src/main/types/MidiInputDevice.ts

@@ -19,7 +19,7 @@ export class MidiInputDevice extends EventEmitter {
 
   port: number | null;
 
-  i: number = 0;
+  i = 0;
 
   constructor(name: string, connected: boolean) {
     super();

src/main/types/MidiWire.ts

@@ -11,7 +11,7 @@ const debug = makeDebug('app:midi:MidiWire');
 export class MidiWire {
   route: MidiRoute;
 
-  connected: boolean = false;
+  connected = false;
 
   input: MidiInput | null = null;
 

src/overlay/App.tsx

@@ -1,13 +1,14 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Button from 'renderer/components/Button';
-import ButtonGroup from 'renderer/components/ButtonGroup';
-import Icon from 'renderer/components/Icon';
+
 import MidiMessageManagerProvider from 'renderer/contexts/MidiMessageManager';
 import SettingsProvider from 'renderer/contexts/Settings';
 import SettingsManagerProvider from 'renderer/contexts/SettingsManager';
+import { Button, ButtonGroup, Icon } from 'renderer/components';
 import ChordDisplay from 'renderer/views/ChordDisplay';
 import CircleOfFifths from 'renderer/views/CircleOfFifths';
+
 import icon from '../../assets/icon.svg';
+
 import './App.scss';
 
 const Home = () => {

src/renderer/components/Button/Button.tsx

@@ -6,108 +6,26 @@ import React, {
   useMemo,
 } from 'react';
 import classnames from 'classnames/bind';
-import type { To } from 'react-router';
 
-import CustomLink from '../CustomLink';
-import Icon from '../Icon';
+import { CustomLink } from '../CustomLink';
+import { Icon } from '../Icon';
+
+import { ButtonIntents, ButtonProps, ButtonStatus, ButtonTypes } from './types';
 
 import styles from './Button.module.scss';
 
 const cx = classnames.bind(styles);
 
 const FEEDBACK_DURATION = 1500;
 
-export type ButtonIntents =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'submit'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'transparent';
-
-export type ButtonTypes = 'link' | 'button' | 'submit';
-
-export type ButtonStatus = null | 'success' | 'pending' | 'error';
-
-export type Props = {
-  /**
-   * Triggered when button is clicked - should return a Promise
-   */
-  onClick?: (
-    event:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.MouseEvent<HTMLAnchorElement>
-  ) => unknown;
-  to?: To;
-  title?: string;
-  className?: string;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  /**
-   * A message to display when Button is disabled.
-   *
-   * @since 1.2.0
-   */
-  disabledMessage?: string;
-
-  block?: boolean;
-  intent?: ButtonIntents;
-  icon?: boolean | string;
-  successIcon?: string;
-  errorIcon?: string;
-  pendingIcon?: string;
-  hoverVariant?: boolean;
-  /**
-   * A message to display when Button is disabled.
-   *
-   * @since 1.2.0
-   */
-  type?: ButtonTypes;
-  /**
-   * An external promise given for feedback.
-   *
-   * @since 1.3.0
-   */
-  promise?: Promise<unknown> | null;
-
-  /**
-   * An external promise given for feedback.
-   *
-   * @since 1.4.0
-   */
-  active?: boolean;
-};
-
-const defaultProps = {
-  className: undefined,
-  children: undefined,
-  disabled: false,
-  disabledMessage: '',
-  block: false,
-  intent: 'default' as ButtonIntents,
-  icon: false,
-  successIcon: 'check',
-  errorIcon: 'exclamation',
-  pendingIcon: 'loading',
-  hoverVariant: false,
-  type: 'button' as ButtonTypes,
-  active: undefined,
-  promise: null,
-  to: undefined,
-  title: undefined,
-  onClick: undefined,
-};
-
 /**
  * A button which can handle progess (with native Promise), and shows a visual feedback
  * to user if it is pending / success / error.
  *
  * @version 1.3.0
  * @author Rémi Jarasson
  */
-const Button: React.FC<Props> = ({
+export const Button: React.FC<ButtonProps> = ({
   type,
   intent,
   className,
@@ -168,8 +86,7 @@ const Button: React.FC<Props> = ({
         | React.MouseEvent<HTMLButtonElement>
     ) => {
       if (onClick) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const result = onClick(event as React.MouseEvent<any>);
+        const result = onClick(event);
         if (result instanceof Promise) {
           currentPromise.current = result;
           setStatus('pending');
@@ -273,6 +190,24 @@ const Button: React.FC<Props> = ({
   );
 };
 
-Button.defaultProps = defaultProps;
+Button.defaultProps = {
+  className: undefined,
+  children: undefined,
+  disabled: false,
+  disabledMessage: '',
+  block: false,
+  intent: 'default' as ButtonIntents,
+  icon: false,
+  successIcon: 'check',
+  errorIcon: 'exclamation',
+  pendingIcon: 'loading',
+  hoverVariant: false,
+  type: 'button' as ButtonTypes,
+  active: undefined,
+  promise: null,
+  to: undefined,
+  title: undefined,
+  onClick: undefined,
+};
 
 export default Button;

src/renderer/components/Button/index.tsx

@@ -1,7 +1,3 @@
-export {
-  default,
-  ButtonIntents,
-  ButtonTypes,
-  ButtonStatus,
-  Props,
-} from './Button';
+export { default, Button } from './Button';
+
+export * from './types';