chore: lint-format-docs-tests-bugfixes (#105)

* docs: add jsdoc

* feat: change enums to as const objects

* chore(test): add themeColors.test.ts

* fix: fix tests and bugs with strings.ts util

* fix: path alias imports and tsconfig file bug

* fix: remove --max-warnings 0

src/views/components/injected/CoursePopupOld/CourseDescription/CourseDescription.tsx

@@ -1,29 +1,36 @@
-import { Course } from '@shared/types/Course';
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import type { Course } from '@shared/types/Course';
+import Card from '@views/components/common/Card/Card';
 import Spinner from '@views/components/common/Spinner/Spinner';
 import Text from '@views/components/common/Text/Text';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import { SiteSupport } from '@views/lib/getSiteSupport';
-import Card from '../../../common/Card/Card';
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+
 import styles from './CourseDescription.module.scss';
 
 type Props = {
     course: Course;
 };
 
-enum LoadStatus {
-    LOADING = 'LOADING',
-    DONE = 'DONE',
-    ERROR = 'ERROR',
-}
+const LoadStatus = {
+    LOADING: 'LOADING',
+    DONE: 'DONE',
+    ERROR: 'ERROR',
+} as const;
+
+type LoadStatusType = (typeof LoadStatus)[keyof typeof LoadStatus];
 
 /**
+ * Renders the course description component.
  *
+ * @param {Props} props - The component props.
+ * @param {Course} props.course - The course object.
+ * @returns {JSX.Element} The rendered course description component.
  */
 export default function CourseDescription({ course }: Props) {
     const [description, setDescription] = useState<string[]>([]);
-    const [status, setStatus] = useState<LoadStatus>(LoadStatus.LOADING);
+    const [status, setStatus] = useState<LoadStatusType>(LoadStatus.LOADING);
 
     useEffect(() => {
         fetchDescription(course)
@@ -71,11 +78,7 @@ function DescriptionLine({ line }: LineProps) {
         [styles.restriction]: lowerCaseLine.includes('restrict'),
     });
 
-    return (
-        <Text className={className} /*  size='medium'   */>
-            {line}
-        </Text>
-    );
+    return <Text className={className} /*  size='medium'   */>{line}</Text>;
 }
 
 async function fetchDescription(course: Course): Promise<string[]> {

src/views/components/injected/CoursePopupOld/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -1,11 +1,12 @@
 import { background } from '@shared/messages';
-import { Course } from '@shared/types/Course';
-import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Course } from '@shared/types/Course';
+import type { UserSchedule } from '@shared/types/UserSchedule';
 import { Button } from '@views/components/common/Button/Button';
 import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Text from '@views/components/common/Text/Text';
 import React from 'react';
+
 import styles from './CourseButtons.module.scss';
 
 type Props = {

src/views/components/injected/CoursePopupOld/CourseHeader/CourseHeader.tsx

@@ -1,15 +1,17 @@
-import { Course } from '@shared/types/Course';
-import { UserSchedule } from '@shared/types/UserSchedule';
-import React from 'react';
+import type { Course } from '@shared/types/Course';
+import type { UserSchedule } from '@shared/types/UserSchedule';
+import { Button } from '@views/components/common/Button/Button';
 import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Link from '@views/components/common/Link/Link';
 import Text from '@views/components/common/Text/Text';
-import { Button } from 'src/views/components/common/Button/Button';
+import React from 'react';
+
+import CloseIcon from '~icons/material-symbols/close';
+import CopyIcon from '~icons/material-symbols/content-copy';
+
 import CourseButtons from './CourseButtons/CourseButtons';
 import styles from './CourseHeader.module.scss';
-import CopyIcon from '~icons/material-symbols/content-copy';
-import CloseIcon from '~icons/material-symbols/close';
 
 type Props = {
     course: Course;
@@ -40,7 +42,7 @@ export default function CourseHeader({ course, activeSchedule, onClose }: Props)
                     <Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
                         {course.uniqueId}
                     </Button>
-                    <button className='btn bg-transparent p-0'>
+                    <button className='bg-transparent p-0 btn'>
                         <CloseIcon className='h-7 w-7' />
                     </button>
                 </div>

src/views/components/injected/CoursePopupOld/CoursePopup.tsx

@@ -1,6 +1,7 @@
-import { Course } from '@shared/types/Course';
-import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Course } from '@shared/types/Course';
+import type { UserSchedule } from '@shared/types/UserSchedule';
 import React from 'react';
+
 import Popup from '../../common/Popup/Popup';
 import CourseDescription from './CourseDescription/CourseDescription';
 import CourseHeader from './CourseHeader/CourseHeader';

src/views/components/injected/CoursePopupOld/GradeDistribution/GradeDistribution.tsx

@@ -1,9 +1,5 @@
-/* eslint-disable no-nested-ternary */
-import { Course, Semester } from '@shared/types/Course';
-import { Distribution, LetterGrade } from '@shared/types/Distribution';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-import React, { useEffect, useRef, useState } from 'react';
+import type { Course, Semester } from '@shared/types/Course';
+import type { Distribution, LetterGrade } from '@shared/types/Distribution';
 import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Spinner from '@views/components/common/Spinner/Spinner';
@@ -14,20 +10,26 @@ import {
     querySemesterDistribution,
 } from '@views/lib/database/queryDistribution';
 import colors from '@views/styles/colors.module.scss';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import React, { useEffect, useRef, useState } from 'react';
+
 import styles from './GradeDistribution.module.scss';
 
-enum DataStatus {
-    LOADING = 'LOADING',
-    FOUND = 'FOUND',
-    NOT_FOUND = 'NOT_FOUND',
-    ERROR = 'ERROR',
-}
+const DataStatus = {
+    LOADING: 'LOADING',
+    FOUND: 'FOUND',
+    NOT_FOUND: 'NOT_FOUND',
+    ERROR: 'ERROR',
+} as const;
+
+type DataStatusType = (typeof DataStatus)[keyof typeof DataStatus];
 
 interface Props {
     course: Course;
 }
 
-const GRADE_COLORS: Record<LetterGrade, string> = {
+const GRADE_COLORS = {
     A: colors.turtle_pond,
     'A-': colors.turtle_pond,
     'B+': colors.cactus,
@@ -40,7 +42,7 @@ const GRADE_COLORS: Record<LetterGrade, string> = {
     D: colors.tangerine,
     'D-': colors.tangerine,
     F: colors.speedway_brick,
-};
+} as const satisfies Record<LetterGrade, string>;
 
 /**
  * A chart to fetch and display the grade distribution for a course
@@ -51,7 +53,7 @@ export default function GradeDistribution({ course }: Props) {
     const [semesters, setSemesters] = useState<Semester[]>([]);
     const [selectedSemester, setSelectedSemester] = useState<Semester | null>(null);
     const [distribution, setDistribution] = useState<Distribution | null>(null);
-    const [status, setStatus] = useState<DataStatus>(DataStatus.LOADING);
+    const [status, setStatus] = useState<DataStatusType>(DataStatus.LOADING);
 
     const [chartOptions, setChartOptions] = useState<Highcharts.Options>({
         title: {
@@ -206,7 +208,7 @@ export default function GradeDistribution({ course }: Props) {
                     <Text color='speedway_brick' /* size='medium' weight='semi_bold'    */>
                         There was an error fetching the grade distribution data
                     </Text>
-                    <Icon color='speedway_brick' /* size='large'  */ name='sentiment_dissatisfied'    />
+                    <Icon color='speedway_brick' /* size='large'  */ name='sentiment_dissatisfied' />
                 </Card>
             )}
             {status === DataStatus.NOT_FOUND && (