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/common/ConflictsWithWarning.tsx

@@ -15,7 +15,9 @@ export interface ConflictsWithWarningProps {
  * The ConflictsWithWarning component is used to display a warning message when a course conflicts
  * with another course as part of the labels and details section
  *
- * @param props ConflictsWithWarningProps
+ * @param className - The class name for the component
+ * @param conflicts - The courses that conflict with the current course
+ * @returns The ConflictsWithWarning component
  */
 export default function ConflictsWithWarning({ className, conflicts }: ConflictsWithWarningProps): JSX.Element {
     return (

src/views/components/common/CourseStatus.tsx

@@ -17,7 +17,9 @@ export interface CourseStatusProps {
 /**
  * The CourseStatus component as per the Labels and Details Figma section
  *
- * @param props CourseStatusProps
+ * @param status - The status of the course
+ * @param size - The size of the component
+ * @returns The CourseStatus component
  */
 export default function CourseStatus({ status, size }: CourseStatusProps): JSX.Element {
     const statusIconSizeClass = clsx({

src/views/components/common/List.tsx

@@ -70,7 +70,9 @@ function Item<T>(props: {
  * `List` is a functional component that displays a course meeting.
  *
  * @example
+ * ```
  * <List draggableElements={elements} />
+ * ```
  */
 function List<T>({ draggables, itemKey, children, onReordered, gap }: ListProps<T>): JSX.Element {
     const [items, setItems] = useState(wrap(draggables, itemKey));

src/views/components/common/LogoIcon.tsx

@@ -2,10 +2,15 @@ import clsx from 'clsx';
 import type { SVGProps } from 'react';
 import React from 'react';
 
+interface LogoIconProps {
+    className?: string;
+}
+
 /**
  * Renders the logo icon.
- * @param {SVGProps<SVGSVGElement>} props - The SVG props.
- * @returns {JSX.Element} The rendered logo icon.
+ *
+ * @param props - The SVG props.
+ * @returns The rendered logo icon.
  */
 export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
     return (
@@ -20,11 +25,11 @@ export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
 
 /**
  * Renders the small logo.
- * @param {Object} props - The component props.
- * @param {string} props.className - The class name for the logo container.
- * @returns {JSX.Element} The rendered small logo.
+ *
+ * @param className - The class name for the logo container.
+ * @returns The rendered small logo.
  */
-export function SmallLogo({ className }: { className?: string }): JSX.Element {
+export function SmallLogo({ className }: LogoIconProps): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon />
@@ -43,11 +48,11 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
 
 /**
  * Renders the large logo.
- * @param {Object} props - The component props.
- * @param {string} props.className - The class name for the logo container.
- * @returns {JSX.Element} The rendered large logo.
+ *
+ * @param className - The class name for the logo container.
+ * @returns The rendered large logo.
  */
-export function LargeLogo({ className }: { className?: string }): JSX.Element {
+export function LargeLogo({ className }: LogoIconProps): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon className='h-12 w-12' />

src/views/components/common/PopupCourseBlock.tsx

@@ -25,7 +25,11 @@ export interface PopupCourseBlockProps {
 /**
  * The "course block" to be used in the extension popup.
  *
- * @param props PopupCourseBlockProps
+ * @param className - The class name to apply to the component.
+ * @param course - The course object to display.
+ * @param colors - The colors to use for the course block.
+ * @param dragHandleProps - The drag handle props for the course block.
+ * @returns The rendered PopupCourseBlock component.
  */
 export default function PopupCourseBlock({
     className,

src/views/components/common/Prompt.tsx

@@ -18,13 +18,15 @@ export interface PromptDialogProps {
 
 /**
  * A reusable dialog component that can be used to display a prompt to the user.
- * @param {PromptDialogProps} props.isOpen - Whether the dialog is open or not.
- * @param {Function} props.onClose - A function to call when the user exits the dialog.
- * @param {React.ReactElement<typeof Text>} props.title - The title of the dialog.
- * @param {React.ReactElement<typeof Text>} props.content - The content of the dialog.
- * @param {React.ReactElement<typeof Button>[]} props.children - The buttons to display in the dialog.
+ *
+ * @param isOpen - Whether the dialog is open or not.
+ * @param onClose - A function to call when the user exits the dialog.
+ * @param title - The title of the dialog.
+ * @param content - The content of the dialog.
+ * @param children - The buttons to display in the dialog.
+ * @returns The rendered PromptDialog component.
  */
-function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialogProps) {
+function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialogProps): JSX.Element {
     return (
         <Transition appear show={isOpen} as={React.Fragment}>
             <Dialog as='div' onClose={onClose} className='relative z-50'>

src/views/components/common/ScheduleTotalHoursAndCourses.tsx

@@ -13,7 +13,10 @@ export interface ScheduleTotalHoursAndCoursesProps {
 /**
  * The ScheduleTotalHoursAndCourses as per the Labels and Details Figma section
  *
- * @param props ScheduleTotalHoursAndCoursesProps
+ * @param scheduleName - The name of the schedule.
+ * @param totalHours - The total number of hours.
+ * @param totalCourses - The total number of courses.
+ * @returns The rendered ScheduleTotalHoursAndCourses component.
  */
 export default function ScheduleTotalHoursAndCourses({
     scheduleName,

src/views/components/common/SwitchButton.tsx

@@ -9,11 +9,9 @@ type ToggleSwitchProps = {
 /**
  * A custom switch button component.
  *
- * @component
- * @param {Object} props - The component props.
- * @param {boolean} [props.isChecked=true] - The initial checked state of the switch button.
- * @param {Function} props.onChange - The callback function to be called when the switch button is toggled.
- * @returns {JSX.Element} The rendered SwitchButton component.
+ * @param isChecked - The initial checked state of the switch button.
+ * @param onChange - The callback function to be called when the switch button is toggled.
+ * @returns The rendered SwitchButton component.
  */
 const SwitchButton = ({ isChecked = true, onChange }: ToggleSwitchProps): JSX.Element => {
     const [enabled, setEnabled] = useState(isChecked);

src/views/components/common/UpdateText.tsx

@@ -12,8 +12,7 @@ export type UpdateTextProps = {
  * UpdateText component displays a message indicating that the extension has been updated
  * and lists the unique course numbers from the old version.
  *
- * @param props - The properties object.
- * @param props.courses - An array of course unique numbers to be displayed.
+ * @param courses - An array of course unique numbers to be displayed.
  * @returns The rendered UpdateText component.
  */
 export default function UpdateText({ courses }: UpdateTextProps): JSX.Element {