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/calendar/Calendar/Calendar.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
+
 import { CalendarBottomBar } from '../CalendarBottomBar/CalendarBottomBar';
+import CalendarGrid from '../CalendarGrid/CalendarGrid';
 import { CalendarSchedules } from '../CalendarSchedules/CalendarSchedules';
 import ImportantLinks from '../ImportantLinks';
-import CalendarGrid from '../CalendarGrid/CalendarGrid';
 
 export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
 

src/views/components/calendar/CalendarBottomBar/CalendarBottomBar.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
 import clsx from 'clsx';
-import Text from '../../common/Text/Text';
-import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
-import { Button } from '../../common/Button/Button';
-import ImageIcon from '~icons/material-symbols/image';
+import React from 'react';
+
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import ImageIcon from '~icons/material-symbols/image';
+
+import { Button } from '../../common/Button/Button';
+import Text from '../../common/Text/Text';
+import type { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
+import CalendarCourseBlock from '../CalendarCourseCell/CalendarCourseCell';
 
 type CalendarBottomBarProps = {
     courses?: CalendarCourseCellProps[];

src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Course } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import type { Course } from 'src/shared/types/Course';
+import type { CourseMeeting } from 'src/shared/types/CourseMeeting';
+
 import styles from './CalendarCourseMeeting.module.scss';
 
 /**
@@ -26,6 +27,8 @@ export interface CalendarCourseMeetingProps {
 const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
     course,
     meetingIdx,
+    color,
+    rightIcon,
 }: CalendarCourseMeetingProps) => {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
     return (

src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,12 +1,17 @@
 import { Status } from '@shared/types/Course';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
-import { CourseColors, pickFontColor } from 'src/shared/util/colors';
+import type { CourseColors } from 'src/shared/util/colors';
+import { pickFontColor } from 'src/shared/util/colors';
+
 import ClosedIcon from '~icons/material-symbols/lock';
 import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
-import Text from '../../common/Text/Text';
 
+/**
+ * Props for the CalendarCourseCell component.
+ */
 export interface CalendarCourseCellProps {
     courseDeptAndInstr: string;
     timeAndLocation?: string;
@@ -15,6 +20,18 @@ export interface CalendarCourseCellProps {
     className?: string;
 }
 
+/**
+ * Renders a cell for a calendar course.
+ *
+ * @component
+ * @param {CalendarCourseCellProps} props - The component props.
+ * @param {string} props.courseDeptAndInstr - The course department and instructor.
+ * @param {string} props.timeAndLocation - The time and location of the course.
+ * @param {Status} props.status - The status of the course.
+ * @param {Colors} props.colors - The colors for styling the cell.
+ * @param {string} props.className - Additional CSS class name for the cell.
+ * @returns {JSX.Element} The rendered component.
+ */
 const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
     courseDeptAndInstr,
     timeAndLocation,

src/views/components/calendar/CalendarGrid/CalendarGrid.tsx

@@ -1,12 +1,13 @@
-import React, { useState, useRef, useEffect } from 'react';
+import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
+import React, { useEffect, useRef, useState } from 'react';
 //  import html2canvas from 'html2canvas';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 /*  import calIcon from 'src/assets/icons/cal.svg';
 import pngIcon from 'src/assets/icons/png.svg';
 */
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 import styles from './CalendarGrid.module.scss';
 
 /*  const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
@@ -107,7 +108,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
             newGrid.push(row);
         }
         setGrid(newGrid);
-    }, []);
+    }, [hoursOfDay]);
 
     return (
         <div className={styles.calendarGrid}>
@@ -119,7 +120,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                 </div>
             ))}
             {grid.map((row, rowIndex) => row)}
-            {courseCells ? <AccountForCourseConflicts courseCells={courseCells}/> : null}
+            {courseCells ? <AccountForCourseConflicts courseCells={courseCells} /> : null}
             {/*     courseCells.map((block: CalendarGridCourse) => (
                         <div
                             key={`${block}`}

src/views/components/calendar/CalendarGridCell/CalendarGridCell.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import styles from './CalendarGridCell.module.scss';
 
 interface Props {

src/views/components/calendar/CalendarHeader/CalenderHeader.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
 import { Status } from '@shared/types/Course';
-import Divider from '../../common/Divider/Divider';
-import { Button } from '../../common/Button/Button';
-import Text from '../../common/Text/Text';
-import MenuIcon from '~icons/material-symbols/menu';
-import UndoIcon from '~icons/material-symbols/undo';
-import RedoIcon from '~icons/material-symbols/redo';
-import SettingsIcon from '~icons/material-symbols/settings';
-import ScheduleTotalHoursAndCourses from '../../common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
-import CourseStatus from '../../common/CourseStatus/CourseStatus';
+import { Button } from '@views/components/common/Button/Button';
+import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
+import Divider from '@views/components/common/Divider/Divider';
+import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import Text from '@views/components/common/Text/Text';
+import React from 'react';
 import calIcon from 'src/assets/logo.png';
 
+import MenuIcon from '~icons/material-symbols/menu';
+import RedoIcon from '~icons/material-symbols/redo';
+import SettingsIcon from '~icons/material-symbols/settings';
+import UndoIcon from '~icons/material-symbols/undo';
+
+/**
+ * Renders the header component for the calendar.
+ * @returns The CalendarHeader component.
+ */
 const CalendarHeader = () => (
     <div className='min-h-79px min-w-672px flex px-0 py-15'>
         <div className='flex flex-row gap-20'>
@@ -18,9 +23,9 @@ const CalendarHeader = () => (
                 <div className='flex gap-1'>
                     <Button variant='single' icon={MenuIcon} color='ut-gray' />
                     <div className='flex items-center'>
-                        <img src={calIcon} className='min-w-[48px] max-w-[48px]' alt='UT Registration Plus Logo' />
+                        <img src={calIcon} className='max-w-[48px] min-w-[48px]' alt='UT Registration Plus Logo' />
                         <div className='flex flex-col whitespace-nowrap'>
-                            <Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
+                            <Text className='leading-trim font-roboto text-cap text-base text-ut-burntorange font-medium'>
                                 UT Registration
                             </Text>
                             <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>

src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx

@@ -1,16 +1,26 @@
-import { UserSchedule } from '@shared/types/UserSchedule';
+import type { UserSchedule } from '@shared/types/UserSchedule';
+import List from '@views/components/common/List/List';
+import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
+import Text from '@views/components/common/Text/Text';
 import React, { useState } from 'react';
-import AddSchedule from '~icons/material-symbols/add';
-import List from '../../common/List/List';
-import ScheduleListItem from '../../common/ScheduleListItem/ScheduleListItem';
-import Text from '../../common/Text/Text';
 
+import AddSchedule from '~icons/material-symbols/add';
+
+/**
+ * Props for the CalendarSchedules component.
+ */
 export type Props = {
     style?: React.CSSProperties;
     dummySchedules?: UserSchedule[];
     dummyActiveIndex?: number;
 };
 
+/**
+ * Renders a component that displays a list of schedules.
+ *
+ * @param props - The component props.
+ * @returns The rendered component.
+ */
 export function CalendarSchedules(props: Props) {
     const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
     const [schedules, setSchedules] = useState(props.dummySchedules || []);

src/views/components/calendar/ImportantLinks.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
 import clsx from 'clsx';
-import Text from '../common/Text/Text';
+import React from 'react';
+
 import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
 
+import Text from '../common/Text/Text';
+
 type Props = {
     className?: string;
 };