chore: configure project wide linter (#577)

* chore(lint): configure project-wide linter

* chore(lint): improve linting in files

* chore(lint): hide warnings in CI

.eslintignore

@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"

.eslintrc

@@ -6,8 +6,16 @@
     "es6": true,
     "jest": true
   },
+  "parser": "@typescript-eslint/parser",
   "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint-config-prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
   ],
   "overrides": [
     {
@@ -21,6 +29,27 @@
     }
   ],
   "rules": {
-    "no-console": ["warn", { "allow": ["warn", "error"]}]
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "prettier/prettier": "warn"
   }
 }

.github/workflows/test_v2.yml

@@ -27,6 +27,23 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      # Run code quality per package
+      - name: React - Run linter
+        run: pnpm lint
+        working-directory: ./apps/client
+
+      - name: Server - Run linter
+        run: pnpm lint
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter
+        run: pnpm lint
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        run: pnpm lint
+        working-directory: ./packages/types
+
       # We choose to run tests separately
       - name: React - Run unit tests
         run: pnpm test:pipeline

apps/client/.eslintrc

@@ -8,34 +8,18 @@
     "browser": true,
     "node": true
   },
-  "parser": "@typescript-eslint/parser",
   "extends": [
-    "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
-    "eslint-config-prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "prettier"
   ],
   "plugins": [
     "react",
     "testing-library",
     "simple-import-sort",
-    "@tanstack/query",
+    "@tanstack/query"
-    "@typescript-eslint",
-    "prettier"
   ],
   "rules": {
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/package.json

@@ -39,7 +39,7 @@
     "build": "vite build",
     "build:local": "cross-env NODE_ENV=local vite build",
     "build:docker": "vite build",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
     "test": "vitest",
     "test:pipeline": "vitest run",
     "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -25,8 +25,14 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   return (
     <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
       <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
+      <div
-      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+        className='multiprogress-bar__bg-warning'
+        style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+      />
+      <div
+        className='multiprogress-bar__bg-danger'
+        style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+      />
       <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
     </div>
   );

apps/client/src/common/components/schedule/ScheduleItem.tsx

@@ -14,16 +14,7 @@ interface ScheduleItemProps {
 }
 
 export default function ScheduleItem(props: ScheduleItemProps) {
-  const {
+  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;
-    selected,
-    timeStart,
-    timeEnd,
-    title,
-    presenter,
-    backstageEvent,
-    colour,
-    skip,
-  } = props;
 
   const start = formatTime(timeStart, { format: 'hh:mm' });
   const end = formatTime(timeEnd, { format: 'hh:mm' });
@@ -37,9 +28,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
         {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
       </div>
       <div className='entry-title'>{title}</div>
-      {presenter && (
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
-        <div className='entry-presenter'>{presenter}</div>
-      )}
     </li>
   );
 }

apps/client/src/common/components/schedule/ScheduleNav.tsx

@@ -13,12 +13,11 @@ export default function ScheduleNav({ className }: ScheduleNavProps) {
     <div className={`schedule-nav ${className}`}>
       {numPages > 1 &&
         [...Array(numPages).keys()].map((i) => (
-            <div
+          <div
-              key={i}
+            key={i}
-              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-            />
+          />
-          ),
+        ))}
-        )}
     </div>
   );
 }

apps/client/src/common/hooks/useClickOutside.ts

@@ -6,7 +6,6 @@ export default function useClickOutside<T extends HTMLElement = HTMLElement>(
   ref: RefObject<T>,
   callback: ClickOutsideEventHandler,
 ) {
-
   useEffect(() => {
     function handleClick(event: MouseEvent) {
       const element = ref?.current;

apps/client/src/common/hooks/useFitText.ts

@@ -1,10 +1,4 @@
-import {
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
 
 export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
 
@@ -26,13 +20,13 @@ const LOG_LEVEL: Record<TLogLevel, number> = {
 };
 
 const useFitText = ({
-                      logLevel: logLevelOption = 'info',
+  logLevel: logLevelOption = 'info',
-                      maxFontSize = 100,
+  maxFontSize = 100,
-                      minFontSize = 20,
+  minFontSize = 20,
-                      onFinish,
+  onFinish,
-                      onStart,
+  onStart,
-                      resolution = 5,
+  resolution = 5,
-                    }: TOptions = {}) => {
+}: TOptions = {}) => {
   const logLevel = LOG_LEVEL[logLevelOption];
 
   const initState = useCallback(() => {
@@ -112,8 +106,7 @@ const useFitText = ({
     const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
     const isOverflow =
       !!ref.current &&
-      (ref.current.scrollHeight > ref.current.offsetHeight ||
+      (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
-        ref.current.scrollWidth > ref.current.offsetWidth);
     const isFailed = isOverflow && fontSize === fontSizePrev;
     const isAsc = fontSize > fontSizePrev;
 
@@ -123,9 +116,7 @@ const useFitText = ({
       if (isFailed) {
         isCalculatingRef.current = false;
         if (logLevel <= LOG_LEVEL.info) {
-          console.info(
+          console.info(`[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`);
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
-          );
         }
       } else if (isOverflow) {
         setState({
@@ -160,16 +151,7 @@ const useFitText = ({
       fontSizeMin: newMin,
       fontSizePrev: fontSize,
     });
-  }, [
+  }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);
-    calcKey,
-    fontSize,
-    fontSizeMax,
-    fontSizeMin,
-    fontSizePrev,
-    onFinish,
-    ref,
-    resolution,
-  ]);
 
   return { fontSize: `${fontSize}%`, ref };
 };

apps/client/src/common/hooks/useInterval.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * @description utility hook to around setInterval

apps/client/src/common/hooks/useLocalStorage.ts

@@ -46,7 +46,7 @@ export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T
       setStoredValue(valueToStore);
       window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   };
   return [storedValue, setValue];

apps/client/src/common/utils/__tests__/aliases.test.js

@@ -1,5 +1,6 @@
 import { resolvePath } from 'react-router-dom';
-import { validateAlias, generateURLFromAlias, getAliasRoute } from '../aliases';
+
+import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';
 
 describe('An alias fails if incorrect', () => {
   const testsToFail = [

apps/client/src/common/utils/__tests__/math.test.js

@@ -12,7 +12,7 @@ test('Clamps a set of numbers correctly', () => {
     { num: -50, min: 0, max: 0, result: 0 },
     { num: 50.5, min: 0, max: 100, result: 50.5 },
     { num: 50, min: 0, max: 20.32, result: 20.32 },
-    { num: 10, min: 20.32, max: 40, result: 20.32 }
+    { num: 10, min: 20.32, max: 40, result: 20.32 },
   ];
 
   testCases.forEach((t) => expect(clamp(t.num, t.min, t.max)).toBe(t.result));

apps/client/src/declarations/declaration.d.ts

@@ -13,9 +13,8 @@ declare global {
     };
     process: {
       type: string;
-    }
+    };
   }
 }
 
-// eslint-disable-next-line import/no-anonymous-default-export
+export default {};
-export default {}

apps/client/src/declarations/test.d.ts

@@ -6,6 +6,6 @@ import 'vitest';
 // https://github.com/testing-library/jest-dom/issues/123
 declare global {
   namespace Vi {
-    interface Assertion<T = any> extends TestingLibraryMatchers<T, void> {}
+    type Assertion<T = any> = TestingLibraryMatchers<T, void>;
   }
 }

apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetRow.tsx

@@ -1,6 +0,0 @@
-interface CuesheetRowProps {
-  row: OntimeRundownEntry;
-  isSelected: boolean;
-}
-
-function CuesheetRow() {}

apps/client/src/features/modals/settings-modal/AliasesForm.tsx

@@ -21,7 +21,9 @@ import style from './SettingsModal.module.scss';
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
 
 // we wrap the array in an object to be simplify react-hook-form
-type Aliases = { aliases: Alias[] };
+type Aliases = {
+  aliases: Alias[];
+};
 
 export default function AliasesForm() {
   const { data, status, isFetching, refetch } = useAliases();
@@ -93,8 +95,7 @@ export default function AliasesForm() {
           <AlertDescription>
             Custom aliases allow providing a short name for any ontime URL. <br />
             It serves two primary purposes: <br />
-            - Providing dynamic URLs for automation or unattended screens <br />
+            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
-            - Simplifying complex URLs
             <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
           </AlertDescription>
         </div>

apps/electron/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "postinstall": "",
+    "lint": "eslint . --quiet",
     "dev:electron": "cross-env NODE_ENV=development electron .",
     "dist-win": "electron-builder --publish=never  --x64 --win",
     "dist-mac": "electron-builder --publish=never  --mac",

apps/electron/src/menu/applicationMenu.js

@@ -8,23 +8,23 @@ function getApplicationMenu(isMac, askToQuit) {
   return [
     ...(isMac
       ? [
-        {
+          {
-          label: 'Ontime',
+            label: 'Ontime',
-          submenu: [
+            submenu: [
-            { role: 'about' },
+              { role: 'about' },
-            { type: 'separator' },
+              { type: 'separator' },
-            { role: 'hide' },
+              { role: 'hide' },
-            { role: 'hideOthers' },
+              { role: 'hideOthers' },
-            { role: 'unhide' },
+              { role: 'unhide' },
-            { type: 'separator' },
+              { type: 'separator' },
-            {
+              {
-              label: 'quit',
+                label: 'quit',
-              click: () => askToQuit(),
+                click: () => askToQuit(),
-              accelerator: 'Cmd+Q',
+                accelerator: 'Cmd+Q',
-            },
+              },
-          ],
+            ],
-        },
+          },
-      ]
+        ]
       : []),
     {
       label: 'File',
@@ -41,15 +41,15 @@ function getApplicationMenu(isMac, askToQuit) {
         { role: 'paste' },
         ...(isMac
           ? [
-            { role: 'pasteAndMatchStyle' },
+              { role: 'pasteAndMatchStyle' },
-            { role: 'delete' },
+              { role: 'delete' },
-            { role: 'selectAll' },
+              { role: 'selectAll' },
-            { type: 'separator' },
+              { type: 'separator' },
-            {
+              {
-              label: 'Speech',
+                label: 'Speech',
-              submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
+                submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
-            },
+              },
-          ]
+            ]
           : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
       ],
     },
@@ -161,4 +161,4 @@ function getApplicationMenu(isMac, askToQuit) {
   ];
 }
 
-module.exports = { getApplicationMenu }
+module.exports = { getApplicationMenu };

apps/electron/src/menu/trayMenu.js

@@ -13,7 +13,7 @@ function getTrayMenu(showApp, askToQuit) {
       label: 'Shutdown',
       click: () => askToQuit(),
     },
-  ]
+  ];
 }
 
-module.exports = { getTrayMenu }
+module.exports = { getTrayMenu };

apps/server/.eslintrc

@@ -2,23 +2,8 @@
   "env": {
     "node": true
   },
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "plugins": ["@typescript-eslint", "prettier"],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module"
-  },
-  "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ]
   }
 }

apps/server/package.json

@@ -52,7 +52,7 @@
     "build:local": "pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --bundle --minify --outfile=dist/index.cjs",
     "build:docker": "pnpm prebuild && esbuild src/index.ts --log-level=error --platform=node --format=cjs --minify --bundle --outfile=dist/docker.cjs",
     "build:debug": "pnpm prebuild && esbuild src/app.ts --platform=node --format=cjs --bundle --outfile=dist/index.cjs",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
     "test": "cross-env IS_TEST=true vitest",
     "test:pipeline": "cross-env IS_TEST=true vitest run",
     "typecheck": "tsc --noEmit",

apps/server/src/controllers/integrationController.config.ts

@@ -30,7 +30,7 @@ const whitelistedPayload = {
 };
 
 export function parse(field: string, value: unknown) {
-  if (!whitelistedPayload.hasOwnProperty(field)) {
+  if (!Object.hasOwn(whitelistedPayload, field)) {
     throw new Error(`Field ${field} not permitted`);
   }
   const parserFn = whitelistedPayload[field];
@@ -51,7 +51,7 @@ export function updateEvent(
   const event = EventLoader.getEventWithId(eventId);
 
   if (event) {
-    let propertiesToUpdate = { [propertyName]: newValue };
+    const propertiesToUpdate = { [propertyName]: newValue };
 
     // Handles the special case for duration
     // needs to be converted to milliseconds

apps/server/src/controllers/integrationController.ts

@@ -14,7 +14,7 @@ export function dispatchFromAdapter(
     payload: unknown;
     params?: Array<string>;
   },
-  source?: 'osc' | 'ws',
+  _source?: 'osc' | 'ws',
 ) {
   const payload = args.payload;
   const typeComponents = type.toLowerCase().split('/');

apps/server/src/utils/__tests__/parser.test.ts

@@ -1,6 +1,7 @@
+/* eslint-disable no-console -- we are mocking the console */
 import { vi } from 'vitest';
 
-import { EndAction, TimerType } from 'ontime-types';
+import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
 
 import { dbModel } from '../../models/dataModel.js';
 import { parseExcel, parseJson, validateEvent } from '../parser.js';

e2e/.eslintrc

@@ -4,10 +4,5 @@
   },
   "env": {
     "node": true
-  },
+  }
-  "extends": [
-    "eslint:recommended"
-  ],
-  "plugins": [],
-  "rules": {}
 }

package.json

@@ -25,6 +25,7 @@
     "dev": "turbo run dev",
     "dev:electron": "turbo run dev --filter=ontime",
     "dev:server": "turbo run dev --filter=ontime-server",
+    "lint": "turbo run lint",
     "build": "turbo run build",
     "build:local": "turbo run build:local",
     "dist-win": "turbo run dist-win",

packages/types/.eslintrc

@@ -3,11 +3,6 @@
     "browser": true,
     "node": true
   },
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module"

packages/types/package.json

@@ -6,7 +6,8 @@
   "private": true,
   "description": "shared typings for ontime",
   "scripts": {
-    "cleanup": "rm -rf .turbo && rm -rf node_modules"
+    "cleanup": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "eslint ."
   },
   "keywords": [],
   "author": "",

packages/types/src/definitions/core/Alias.type.ts

@@ -2,4 +2,4 @@ export type Alias = {
   enabled: boolean;
   alias: string;
   pathAndParams: string;
-}
+};

packages/types/src/definitions/core/UserFields.type.ts

@@ -9,5 +9,4 @@ export type UserFields = {
   user7: string;
   user8: string;
   user9: string;
-}
+};
-

packages/types/src/definitions/core/Views.type.ts

@@ -6,4 +6,4 @@ export type ViewSettings = {
   warningThreshold: number;
   dangerColor: string;
   dangerThreshold: number;
-}
+};

packages/types/src/definitions/runtime/Logger.type.ts

@@ -23,5 +23,5 @@ export enum LogOrigin {
   Rx = 'RX',
   Server = 'SERVER',
   Tx = 'TX',
-  User = 'USER'
+  User = 'USER',
 }

packages/types/src/definitions/runtime/MessageControl.type.ts

@@ -6,4 +6,4 @@ export type Message = {
 export type TimerMessage = Message & {
   timerBlink: boolean;
   timerBlackout: boolean;
-}
+};

packages/utils/.eslintrc

@@ -3,27 +3,14 @@
     "browser": true,
     "node": true
   },
-  "parser": "@typescript-eslint/parser",
   "plugins": [
-    "simple-import-sort",
+    "simple-import-sort"
-    "prettier"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
   ],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module"
   },
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
     "simple-import-sort/exports": "error",
     "simple-import-sort/imports": "error"
   }

packages/utils/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "description": "shared logic for ontime",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
     "test": "vitest",
     "test:pipeline": "vitest run",
     "cleanup": "rm -rf .turbo && rm -rf node_modules"

packages/utils/src/cue-utils/cueUtils.ts

@@ -17,6 +17,7 @@ export function getIncrement(input: string): string {
   const match = regex.exec(input);
   if (match) {
     // If a number is found, extract the non-numeric prefix, integer part, and decimal part
+    // eslint-disable-next-line prefer-const -- some items in the destructuring are modified
     let [, prefix, integerPart, decimalPart] = match;
 
     if (decimalPart) {