[FE][CPF-46] Add typescript-eslint plugin and fix breadcrumb font

frontend/.eslintrc.json

@@ -1,5 +1,13 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:sonarjs/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:sonarjs/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "settings": {
     "next": {
       "rootDir": "/frontend"

frontend/package.json

@@ -29,6 +29,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",

frontend/src/app/(app)/documentation/page.tsx

@@ -1,7 +1,7 @@
 export default function Documentation() {
   return (
     <div>
-      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">Documentation</h1>
+      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">Documentation</h1>
     </div>
   );
 }

frontend/src/app/(app)/library/[ladder]/[bucket]/page.tsx

@@ -2,6 +2,7 @@ import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { mapKeysToCamelCase } from '@app/utils';
 import { BucketDetails } from '@app/components/modules/BucketDetails';
 import { API_URLS } from '@app/api';
+import { Bucket, LadderBand } from '@app/types/common';
 import { routes } from '@app/constants';
 
 async function getBucketDetails(slug: string) {
@@ -12,7 +13,7 @@ async function getBucketDetails(slug: string) {
   }
   const data = await response.json();
 
-  return mapKeysToCamelCase(data);
+  return mapKeysToCamelCase<Bucket>(data);
 }
 
 async function getLadderName(slug: string) {
@@ -23,7 +24,10 @@ async function getLadderName(slug: string) {
   }
   const data = await response.json();
 
-  return mapKeysToCamelCase(data).ladderName;
+  return mapKeysToCamelCase<{
+    ladderName: string;
+    bands: Record<string, LadderBand>;
+  }>(data).ladderName;
 }
 
 export default async function BucketDetailed({ params }: { params: { bucket: string; ladder: string } }) {

frontend/src/app/(app)/library/[ladder]/page.tsx

@@ -2,6 +2,7 @@ import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { LibraryDetailed } from '@app/components/modules/LibraryDetailed';
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '@app/api';
+import { LadderBand } from '@app/types/common';
 import { routes } from '@app/constants';
 
 async function getLadderDetails(slug: string) {
@@ -12,7 +13,10 @@ async function getLadderDetails(slug: string) {
   }
   const data = await response.json();
 
-  return mapKeysToCamelCase(data);
+  return mapKeysToCamelCase<{
+    ladderName: string;
+    bands: Record<string, LadderBand>;
+  }>(data);
 }
 
 export default async function LadderDetailed({ params }: { params: { ladder: string } }) {

frontend/src/app/(app)/library/page.tsx

@@ -10,15 +10,15 @@ async function getLadders() {
   }
   const data = await response.json();
 
-  return mapKeysToCamelCase(data);
+  return mapKeysToCamelCase<LadderCardInterface[]>(data);
 }
 
 export default async function LibraryPage() {
   const data = await getLadders();
 
   return (
     <div>
-      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">CPF Library</h1>
+      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">CPF Library</h1>
       <p className="mb-6 tracking-wide text-navy-600">Select a career path to view the details.</p>
       <div className="grid grid-cols-3 gap-6">
         {data.map((ladder: LadderCardInterface) => (

frontend/src/app/(app)/my-space/page.tsx

@@ -1,7 +1,7 @@
 export default function MySpace() {
   return (
     <div>
-      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">My Space</h1>
+      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">My Space</h1>
     </div>
   );
 }

frontend/src/app/(app)/people/page.tsx

@@ -1,7 +1,7 @@
 export default function People() {
   return (
     <div>
-      <h1 className="text-lg mb-10 font-semibold leading-6 text-navy-900">People</h1>
+      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">People</h1>
     </div>
   );
 }

frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
-import { generateClassNames } from '@app/utils';
 import { BreadcrumbsProps } from './Breadcrumbs.interface';
+import { generateClassNames } from '@app/utils';
 
 export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
   return (

frontend/src/components/modules/LadderDetails/LadderDetails.tsx

@@ -14,7 +14,7 @@ export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDe
           <h2 className="text-2xl font-semibold text-navy-900">
             Band {band}: {ladderName}
           </h2>
-          <p className="text-l font-medium text-navy-600">Salary range: {ladder.salaryRange}</p>
+          <p className="text-lg font-medium text-navy-600">Salary range: {ladder.salaryRange}</p>
         </div>
         <div className="flex flex-col items-center rounded-xl border border-navy-200 p-4">
           <div className="flex justify-between gap-2 text-navy-600">

frontend/src/utils/mapKeysToCamelCase.ts

@@ -1,32 +1,29 @@
-// @ts-nocheck
-const toCamel = (s) => {
+const toCamel = (s: string) => {
   return s.replace(/([-_][a-z])/gi, ($1) => {
     return $1.toUpperCase().replace('-', '').replace('_', '');
   });
 };
 
-const isArray = function (a) {
+const isArray = function (a: unknown) {
   return Array.isArray(a);
 };
 
-const isObject = function (o) {
+const isObject = function (o: unknown) {
   return o === Object(o) && !isArray(o) && typeof o !== 'function';
 };
 
-export const mapKeysToCamelCase = function (o) {
+export const mapKeysToCamelCase = <T>(o: T): T => {
   if (isObject(o)) {
-    const n = {};
+    const n: { [key: string]: keyof T } = {};
 
-    Object.keys(o).forEach((k) => {
-      n[toCamel(k)] = mapKeysToCamelCase(o[k]);
+    Object.keys(o as { [key: string]: keyof T }).forEach((k) => {
+      n[toCamel(k)] = mapKeysToCamelCase((o as { [key: string]: keyof T })[k]);
     });
 
-    return n;
+    return n as T;
   } else if (isArray(o)) {
-    return o.map((i) => {
-      return mapKeysToCamelCase(i);
-    });
+    return (o as unknown as Array<unknown>).map((i) => mapKeysToCamelCase(i)) as T;
   }
 
-  return o;
+  return o as T;
 };

frontend/tailwind.config.ts

@@ -55,6 +55,7 @@ const config: Config = {
       xs: ['0.75rem', '1rem'], // Body XS
       sm: ['0.875rem', '1.225rem'], // Body S
       base: ['1rem', '1.5rem'], // Body M
+      lg: ['1.125rem', '1.625rem'], // Body L
       xl: ['1.25rem', '1.75rem'], // Headline S
       '2xl': ['1.5rem', '1.875rem'], // Headline M
       '3xl': ['2rem', '2.5rem'], // Headline L
@@ -66,9 +67,6 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
-      fontSize: {
-        l: ['1.125rem', '1.625rem'], // Body L
-      },
     },
   },
   plugins: [require('@tailwindcss/typography')],

frontend/yarn.lock

@@ -26,13 +26,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@eslint-community/eslint-utils@^4.2.0":
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
   integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@eslint-community/regexpp@^4.10.0":
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.1.tgz#361461e5cb3845d874e61731c11cfedd664d83a0"
+  integrity sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==
+
 "@eslint-community/regexpp@^4.6.1":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
@@ -441,6 +446,21 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.10.tgz#04ffa7f406ab628f7f7e97ca23e290cd8ab15efc"
   integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
 
+"@typescript-eslint/eslint-plugin@^7.14.1":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.14.1.tgz#90e2f76a5930d553ede124e1f541a39b4417465e"
+  integrity sha512-aAJd6bIf2vvQRjUG3ZkNXkmBpN+J7Wd0mfQiiVCJMu9Z5GcZZdcc0j8XwN/BM97Fl7e3SkTXODSk4VehUv7CGw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "7.14.1"
+    "@typescript-eslint/type-utils" "7.14.1"
+    "@typescript-eslint/utils" "7.14.1"
+    "@typescript-eslint/visitor-keys" "7.14.1"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.2.0.tgz#44356312aea8852a3a82deebdacd52ba614ec07a"
@@ -452,6 +472,14 @@
     "@typescript-eslint/visitor-keys" "7.2.0"
     debug "^4.3.4"
 
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.14.1.tgz#63de7a577bc6fe8ee6e412a5b85499f654b93ee5"
+  integrity sha512-gPrFSsoYcsffYXTOZ+hT7fyJr95rdVe4kGVX1ps/dJ+DfmlnjFN/GcMxXcVkeHDKqsq6uAcVaQaIi3cFffmAbA==
+  dependencies:
+    "@typescript-eslint/types" "7.14.1"
+    "@typescript-eslint/visitor-keys" "7.14.1"
+
 "@typescript-eslint/[email protected]":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz#cfb437b09a84f95a0930a76b066e89e35d94e3da"
@@ -460,11 +488,40 @@
     "@typescript-eslint/types" "7.2.0"
     "@typescript-eslint/visitor-keys" "7.2.0"
 
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.14.1.tgz#c183f2f28c4c8578eb80aebc4ac9ace400160af6"
+  integrity sha512-/MzmgNd3nnbDbOi3LfasXWWe292+iuo+umJ0bCCMCPc1jLO/z2BQmWUUUXvXLbrQey/JgzdF/OV+I5bzEGwJkQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.14.1"
+    "@typescript-eslint/utils" "7.14.1"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.14.1.tgz#a43a540dbe5df7f2a11269683d777fc50b4350aa"
+  integrity sha512-mL7zNEOQybo5R3AavY+Am7KLv8BorIv7HCYS5rKoNZKQD9tsfGUpO4KdAn3sSUvTiS4PQkr2+K0KJbxj8H9NDg==
+
 "@typescript-eslint/[email protected]":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.2.0.tgz#0feb685f16de320e8520f13cca30779c8b7c403f"
   integrity sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==
 
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.14.1.tgz#ba7c9bac8744487749d19569e254d057754a1575"
+  integrity sha512-k5d0VuxViE2ulIO6FbxxSZaxqDVUyMbXcidC8rHvii0I56XZPv8cq+EhMns+d/EVIL41sMXqRbK3D10Oza1bbA==
+  dependencies:
+    "@typescript-eslint/types" "7.14.1"
+    "@typescript-eslint/visitor-keys" "7.14.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/[email protected]":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz#5beda2876c4137f8440c5a84b4f0370828682556"
@@ -479,6 +536,24 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.14.1.tgz#3307b8226f99103dca2133d0ebcae38419d82c9d"
+  integrity sha512-CMmVVELns3nak3cpJhZosDkm63n+DwBlDX8g0k4QUa9BMnF+lH2lr3d130M1Zt1xxmB3LLk3NV7KQCq86ZBBhQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "7.14.1"
+    "@typescript-eslint/types" "7.14.1"
+    "@typescript-eslint/typescript-estree" "7.14.1"
+
+"@typescript-eslint/[email protected]":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.14.1.tgz#cc79b5ea154aea734b2a13b983670749f5742274"
+  integrity sha512-Crb+F75U1JAEtBeQGxSKwI60hZmmzaqA3z9sYsVm8X7W5cwLEm5bRe0/uXS6+MR/y8CVpKSR/ontIAIEPFcEkA==
+  dependencies:
+    "@typescript-eslint/types" "7.14.1"
+    eslint-visitor-keys "^3.4.3"
+
 "@typescript-eslint/[email protected]":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz#5035f177752538a5750cca1af6044b633610bf9e"
@@ -1773,7 +1848,7 @@ husky@^9.0.11:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
   integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
 
-ignore@^5.2.0:
+ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
@@ -2680,6 +2755,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -3273,6 +3355,11 @@ semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.0:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
@@ -3564,7 +3651,7 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
   integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
 
-ts-api-utils@^1.0.1:
+ts-api-utils@^1.0.1, ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==