feat: add eslint-plugin-tsdoc (#430)

* feat: add eslint-plugin-tsdoc

* feat(doc): update current jsdoc to tsdoc specification

* chore: update deps

* feat: update warn to error for jsdoc and tsdoc

* chore(doc): lint

src/views/components/calendar/CalendarBottomBar.tsx

@@ -20,8 +20,8 @@ type CalendarBottomBarProps = {
 /**
  * Renders the bottom bar of the calendar component.
  *
- * @param {Object[]} courses - The list of courses to display in the calendar.
- * @returns {JSX.Element} The rendered bottom bar component.
+ * @param courses - The list of courses to display in the calendar.
+ * @returns The rendered bottom bar component.
  */
 export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBottomBarProps): JSX.Element {
     const asyncCourseCells = courseCells?.filter(block => block.async);

src/views/components/calendar/CalendarCourseCell.tsx

@@ -26,14 +26,12 @@ export interface CalendarCourseCellProps {
 /**
  * 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 {StatusType} 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.
+ * @param courseDeptAndInstr - The course department and instructor.
+ * @param timeAndLocation - The time and location of the course.
+ * @param status - The status of the course.
+ * @param colors - The colors for styling the cell.
+ * @param className - Additional CSS class name for the cell.
+ * @returns The rendered component.
  */
 export default function CalendarCourseCell({
     courseDeptAndInstr,

src/views/components/calendar/CalendarCourseCellColorPicker/ColorPatch.tsx

@@ -15,12 +15,10 @@ interface ColorPatchProps {
 /**
  * Renders a color patch square used in the CalendarCourseCellColorPicker component.
  *
- * @param {Object} props - The component props.
- * @param {string} props.color - The color value (as a hex string with a hash prefix) to display in the patch.
- * @param {boolean} props.isSelected - Indicates whether the patch is selected.
- * @param {Function} props.handleSetSelectedColor - Function from parent component to control selection state of a patch.
- *                                                  color is a hex string with a hash prefix.
- * @returns {JSX.Element} The rendered color patch button.
+ * @param color - The color value (as a hex string with a hash prefix) to display in the patch.
+ * @param isSelected - Indicates whether the patch is selected.
+ * @param handleSetSelectedColor - Function from parent component to control selection state of a patch.
+ * @returns The rendered color patch button.
  */
 export default function ColorPatch({ color, isSelected, handleSetSelectedColor }: ColorPatchProps): JSX.Element {
     const handleClick = () => {

src/views/components/calendar/CalendarCourseCellColorPicker/CourseCellColorPicker.tsx

@@ -61,10 +61,14 @@ export interface CourseCellColorPickerProps {
 }
 
 /**
- * @param {CourseCellColorPickerProps} props - the props for the component
- * @param {React.Dispatch<React.SetStateAction<string | null>>} props.setSelectedColor - set state function passed down from the parent component
- * @param {boolean} props.isInvertColorsToggled - boolean state passed down from the parent component that indicates whether the color picker is in invert colors mode
- * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setIsInvertColorsToggled - set state function passed down from the parent component to set invert colors mode
+ * The CourseCellColorPicker component that displays a color palette with a list of color patches.
+ *
+ * @remarks This component is available when a user hovers over a course cell in their calendar to
+ * color for the course cell. The user can set any valid hex color they want.
+ *
+ * @param setSelectedColor - Set state function passed down from the parent component
+ * @param isInvertColorsToggled - Boolean state passed down from the parent component that indicates whether the color picker is in invert colors mode
+ * @param setIsInvertColorsToggled - Set state function passed down from the parent component to set invert colors mode
  * that will be called when a color is selected. The user can set any valid hex color they want.
  *
  * @example
@@ -80,9 +84,7 @@ export interface CourseCellColorPickerProps {
  *   );
  * ```
  *
- * @returns {JSX.Element} - the color picker component that displays a color palette with a list of color patches.
- * This component is available when a user hovers over a course cell in their calendar to
- * color for the course cell. The user can set any valid hex color they want.
+ * @returns The color picker component that displays a color palette with a list of color patches.
  */
 export default function CourseCellColorPicker({
     setSelectedColor: setFinalColor,

src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx

@@ -14,11 +14,10 @@ export interface HexColorEditorProps {
 /**
  * Utility component to allow the user to enter a valid hex color code
  *
- * @param {HexColorEditorProps} props - the props for the component
- * @param {string} props.hexCode - the current hex color code displayed in this component. Note that this code does not
+ * @param hexCode - The current hex color code displayed in this component. Note that this code does not
  * include the leading '#' character since it is already included in the component. Passed down from the parent component.
- * @param {React.Dispatch<React.SetStateAction<string>>} props.setHexCode - set state fn to control the hex color code from parent
- * @returns {JSX.Element} - the hex color editor component
+ * @param setHexCode - Set state fn to control the hex color code from parent
+ * @returns The HexColorEditor component
  */
 export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorProps): JSX.Element {
     const baseColor = React.useMemo(() => getThemeColorHexByName('ut-gray'), []);

src/views/components/calendar/CalendarGrid.tsx

@@ -43,7 +43,11 @@ function makeGridRow(row: number, cols: number): JSX.Element {
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
- * @param props
+ *
+ * @param courseCells - The courses to display on the calendar
+ * @param saturdayClass - Whether the user has a Saturday class
+ * @param setCourse - Function to set the course to display in the course details panel
+ * @returns The CalendarGrid component
  */
 export default function CalendarGrid({
     courseCells,

src/views/components/calendar/CalendarGridCell.tsx

@@ -7,15 +7,18 @@ interface Props {
 
 /**
  * Component representing each 1 hour time block of a calendar
- * @param props
+ *
+ * @param row - The row of the cell
+ * @param col - The column of the cell
+ * @returns The CalendarCell component
  */
-function CalendarCell(props: Props): JSX.Element {
+function CalendarCell({ row, col }: Props): JSX.Element {
     return (
         <div
             className='h-full w-full flex items-center border-b border-r border-gray-300'
             style={{
-                gridColumn: props.col + 3,
-                gridRow: `${2 * props.row + 2} / ${2 * props.row + 4}`,
+                gridColumn: col + 3,
+                gridRow: `${2 * row + 2} / ${2 * row + 4}`,
             }}
         >
             <div className='h-0 w-full border-t border-gray-300/25' />