chore: update typescript-related packages for compatibility (#201) (#206

)

* chore: update typescript-related packages for compatibility (#201)

* chore: fix errors from updated eslint rules (#201)

package.json

@@ -42,9 +42,9 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint-config-next": "^14.2.13",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^48.1.0",
@@ -53,14 +53,14 @@
     "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-sort-destructure-keys": "^1.4.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-typescript-sort-keys": "^2.3.0",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
     "husky": "^8.0.3",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "storybook": "^7.6.17",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {

src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -46,7 +46,7 @@ export const NavigationMenu = ({
   const MenuItem = isSubMenu ? StyledMenuItem : Fragment;
 
   useEffect(() => {
-    return () => {
+    return (): void => {
       if (isSubMenu || !open) return;
       onDisableScrollLock();
     };

src/components/common/Code/code.tsx

@@ -22,7 +22,7 @@ export const Code = ({ className, code }: CodeProps): JSX.Element => {
       const copiedTimeout = setTimeout(() => {
         setCopied(false);
       }, 2000);
-      return () => clearTimeout(copiedTimeout);
+      return (): void => clearTimeout(copiedTimeout);
     }
   }, [copied]);
 

src/components/common/CopyToClipboard/copyToClipboard.tsx

@@ -27,7 +27,7 @@ export const CopyToClipboard = ({
       const tooltipTimeout = setTimeout(() => {
         setShowTooltip(false);
       }, 2000);
-      return () => clearTimeout(tooltipTimeout);
+      return (): void => clearTimeout(tooltipTimeout);
     }
   }, [showTooltip]);
 

src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -54,7 +54,7 @@ export const CollapsableSection = ({
       const duration = setTimeout(() => {
         setTransitionDuration("auto");
       }, 100);
-      return () => {
+      return (): void => {
         clearTimeout(duration);
       };
     } else {

src/hooks/useFileManifest/useRequestFileManifest.ts

@@ -31,7 +31,7 @@ export const useRequestFileManifest = (
       },
       type: FileManifestActionKind.FetchFileManifest,
     });
-    return () => {
+    return (): void => {
       fileManifestDispatch({
         payload: undefined,
         type: FileManifestActionKind.ClearFileManifest,

src/hooks/useRequestFileLocation.ts

@@ -140,7 +140,7 @@ export const useRequestFileLocation = (
 
   useEffect(() => {
     active.current = true;
-    return () => {
+    return (): void => {
       active.current = false;
     };
   }, []);

src/hooks/useResizeObserver.ts

@@ -42,7 +42,7 @@ export function useResizeObserver(
     const observer = observerRef.current;
     const observedEl = ref.current;
     observer.observe(observedEl);
-    return () => {
+    return (): void => {
       observer.unobserve(observedEl);
     };
   }, [onResize, ref]);

src/hooks/useWindowResize.ts

@@ -26,7 +26,7 @@ export const useWindowResize = (timeout = 200): WindowSize => {
     };
     // Add resize event listener.
     window.addEventListener("resize", onResize);
-    return () => {
+    return (): void => {
       // Remove resize event listener.
       window.removeEventListener("resize", onResize);
       // Clear timeout.

src/theme/common/palette.ts

@@ -4,107 +4,107 @@ import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 /**
  * Palette "Alert"
  */
-enum ALERT {
-  LIGHT = "#FED3D1",
-  LIGHTEST = "#FFF4F4",
-  MAIN = "#B42318",
-}
+const ALERT = {
+  LIGHT: "#FED3D1",
+  LIGHTEST: "#FFF4F4",
+  MAIN: "#B42318",
+};
 
 /**
  * Palette "Background"
  */
-enum BACKGROUND {
-  DEFAULT = "#F6F6F7",
-}
+const BACKGROUND = {
+  DEFAULT: "#F6F6F7",
+};
 
 /**
  * Palette "Info"
  */
-enum INFO {
-  CONTRAST_TEXT = "#00729C",
-  LIGHT = "#97D6EA",
-  LIGHTEST = "#F2FAFC",
-  MAIN = "#00729C",
-}
+const INFO = {
+  CONTRAST_TEXT: "#00729C",
+  LIGHT: "#97D6EA",
+  LIGHTEST: "#F2FAFC",
+  MAIN: "#00729C",
+};
 
 /**
  * Palette "Ink"
  */
-enum INK {
-  LIGHT = "#637381",
-  MAIN = "#212B36",
-}
+const INK = {
+  LIGHT: "#637381",
+  MAIN: "#212B36",
+};
 
 /**
  * Palette "Primary"
  */
-enum PRIMARY {
-  DARK = "#005EA9",
-  LIGHTEST = "#E6EFF6",
-  MAIN = "#1C7CC7",
-}
+const PRIMARY = {
+  DARK: "#005EA9",
+  LIGHTEST: "#E6EFF6",
+  MAIN: "#1C7CC7",
+};
 
 /**
  * Palette "Smoke"
  */
-enum SMOKE {
-  DARK = "#C4CDD5",
-  LIGHT = "#F6F6F7",
-  LIGHTEST = "#FAFBFB",
-  MAIN = "#E1E3E5",
-}
+const SMOKE = {
+  DARK: "#C4CDD5",
+  LIGHT: "#F6F6F7",
+  LIGHTEST: "#FAFBFB",
+  MAIN: "#E1E3E5",
+};
 
 /**
  * Palette "Success"
  */
-enum SUCCESS {
-  LIGHT = "#AEE9D1",
-  LIGHTEST = "#F1F8F5",
-  MAIN = "#287555",
-}
+const SUCCESS = {
+  LIGHT: "#AEE9D1",
+  LIGHTEST: "#F1F8F5",
+  MAIN: "#287555",
+};
 
 /**
  * Palette "Text"
  */
-enum TEXT {
-  PRIMARY = "#212B36",
-}
+const TEXT = {
+  PRIMARY: "#212B36",
+};
 
 /**
  * Palette "Warning"
  */
-enum WARNING {
-  CONTRAST_TEXT = "#B54708",
-  LIGHT = "#FFD79D",
-  LIGHTEST = "#FFFAEB",
-  MAIN = "#B54708",
-}
+const WARNING = {
+  CONTRAST_TEXT: "#B54708",
+  LIGHT: "#FFD79D",
+  LIGHTEST: "#FFFAEB",
+  MAIN: "#B54708",
+};
 
 /**
  * Default "Black"
  */
-enum BLACK {
-  DEFAULT = "#000000",
-}
+const BLACK = {
+  DEFAULT: "#000000",
+};
 
 /**
  * Default "White"
  */
-enum WHITE {
-  DEFAULT = "#ffffff",
-}
+const WHITE = {
+  DEFAULT: "#ffffff",
+};
 
 /**
  * Color alpha
  */
-enum ALPHA {
-  A04 = "0a",
-  A08 = "14",
-  A32 = "52",
-  A60 = "99",
-  A64 = "a3",
-  A80 = "cc",
-}
+const ALPHA = {
+  A04: "0a",
+  A08: "14",
+  A32: "52",
+  A60: "99",
+  A64: "a3",
+  A80: "cc",
+};
 
 /**
  * Color constants