chore: configure project wide linter (cpvalente#577)

* chore(lint): configure project-wide linter * chore(lint): improve linting in files * chore(lint): hide warnings in CI
ekordas · Nov 7, 2023 · 2c47d90 · 2c47d90
1 parent 943dd19
commit 2c47d90
Show file tree

Hide file tree

Showing 38 changed files with 138 additions and 171 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"
diff --git a/.eslintrc b/.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"
   }
 }
diff --git a/.github/workflows/test_v2.yml b/.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

diff --git a/apps/client/.eslintrc b/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",
-    "eslint-config-prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "prettier"
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "plugins": [
     "react",
     "testing-library",
     "simple-import-sort",
-    "@tanstack/query",
-    "@typescript-eslint",
-    "prettier"
+    "@tanstack/query"
   ],
   "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",
       {

diff --git a/apps/client/package.json b/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"

diff --git a/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx b/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 className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div
+        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>
   );

diff --git a/apps/client/src/common/components/schedule/ScheduleItem.tsx b/apps/client/src/common/components/schedule/ScheduleItem.tsx
@@ -14,16 +14,7 @@ interface ScheduleItemProps {
 }
 
 export default function ScheduleItem(props: ScheduleItemProps) {
-  const {
-    selected,
-    timeStart,
-    timeEnd,
-    title,
-    presenter,
-    backstageEvent,
-    colour,
-    skip,
-  } = props;
+  const { 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 && (
-        <div className='entry-presenter'>{presenter}</div>
-      )}
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
     </li>
   );
 }
diff --git a/apps/client/src/common/components/schedule/ScheduleNav.tsx b/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
-              key={i}
-              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-            />
-          ),
-        )}
+          <div
+            key={i}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+          />
+        ))}
     </div>
   );
 }
diff --git a/apps/client/src/common/hooks/useClickOutside.ts b/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;

diff --git a/apps/client/src/common/hooks/useFitText.ts b/apps/client/src/common/hooks/useFitText.ts
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { 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',
-                      maxFontSize = 100,
-                      minFontSize = 20,
-                      onFinish,
-                      onStart,
-                      resolution = 5,
-                    }: TOptions = {}) => {
+  logLevel: logLevelOption = 'info',
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5,
+}: 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.scrollWidth > ref.current.offsetWidth);
+      (ref.current.scrollHeight > ref.current.offsetHeight || 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(
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
-          );
+          console.info(`[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 };
 };

diff --git a/apps/client/src/common/hooks/useInterval.js b/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

diff --git a/apps/client/src/common/hooks/useLocalStorage.ts b/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];

diff --git a/apps/client/src/common/utils/__tests__/aliases.test.js b/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 = [

diff --git a/apps/client/src/common/utils/__tests__/math.test.js b/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));

diff --git a/apps/client/src/declarations/declaration.d.ts b/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 {};
diff --git a/apps/client/src/declarations/test.d.ts b/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>;
   }
 }
diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetRow.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetRow.tsx
diff --git a/apps/client/src/features/modals/settings-modal/AliasesForm.tsx b/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 />
-            - Simplifying complex URLs
+            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
             <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
           </AlertDescription>
         </div>

diff --git a/apps/electron/package.json b/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",