refactor: remove component subfolders (#184)

(and unused components)

src/views/components/PopupMain.tsx

@@ -1,8 +1,8 @@
 import { background } from '@shared/messages';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import Divider from '@views/components/common/Divider/Divider';
+import Divider from '@views/components/common/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
-import List from '@views/components/common/List/List';
+import List from '@views/components/common/List';
 import Text from '@views/components/common/Text/Text';
 import useSchedules, { getActiveSchedule, replaceSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
@@ -14,11 +14,11 @@ import CalendarIcon from '~icons/material-symbols/calendar-month';
 import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
-import CourseStatus from './common/CourseStatus/CourseStatus';
+import CourseStatus from './common/CourseStatus';
 import { SmallLogo } from './common/LogoIcon';
-import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
-import ScheduleDropdown from './common/ScheduleDropdown/ScheduleDropdown';
-import ScheduleListItem from './common/ScheduleListItem/ScheduleListItem';
+import PopupCourseBlock from './common/PopupCourseBlock';
+import ScheduleDropdown from './common/ScheduleDropdown';
+import ScheduleListItem from './common/ScheduleListItem';
 
 /**
  * Renders the main popup component.

src/views/components/calendar/Calendar.tsx

@@ -1,18 +1,18 @@
 import type { CalendarTabMessages } from '@shared/messages/CalendarMessages';
 import type { Course } from '@shared/types/Course';
-import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
-import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
-import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
-import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
+import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar';
+import CalendarGrid from '@views/components/calendar/CalendarGrid';
+import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules';
+import CalendarHeader from '@views/components/calendar/CalenderHeader';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
-import Divider from '@views/components/common/Divider/Divider';
+import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
 import React, { useEffect, useRef, useState } from 'react';
 
-import CalendarFooter from '../CalendarFooter';
-import TeamLinks from '../TeamLinks';
+import CalendarFooter from './CalendarFooter';
+import TeamLinks from './TeamLinks';
 
 /**
  * Calendar page component

src/views/components/calendar/CalendarBottomBar.tsx

@@ -1,6 +1,6 @@
 import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
-import { Button } from '@views/components/common/Button/Button';
-import Divider from '@views/components/common/Divider/Divider';
+import { Button } from '@views/components/common/Button';
+import Divider from '@views/components/common/Divider';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
@@ -8,8 +8,8 @@ import React from 'react';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 import ImageIcon from '~icons/material-symbols/image';
 
-import type { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
-import CalendarCourseBlock from '../CalendarCourseCell/CalendarCourseCell';
+import type { CalendarCourseCellProps } from './CalendarCourseCell';
+import CalendarCourseBlock from './CalendarCourseCell';
 
 type CalendarBottomBarProps = {
     courses?: CalendarCourseCellProps[];

src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting.module.scss

@@ -1,34 +0,0 @@
-.component {
-    display: flex;
-    padding: 7px 7px 9px 7px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 5px;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: 4px;
-    background: #cbd5e1;
-    .content {
-        display: flex;
-        gap: 7px;
-        .course-detail {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            width: 154px;
-            .course {
-                font-size: 16px;
-                line-height: 16px;
-                font-weight: 600;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .time-and-location {
-                font-size: 11px;
-                line-height: 11px;
-                font-weight: 400;
-            }
-        }
-    }
-}

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

@@ -1,45 +0,0 @@
-import type { Course } from '@shared/types/Course';
-import React from 'react';
-
-import styles from './CalendarCourseMeeting.module.scss';
-
-/**
- * Props for the CalendarCourseMeeting component.
- */
-export interface CalendarCourseMeetingProps {
-    /** The Course that the meeting is for. */
-    course: Course;
-    /* index into course meeting array to display */
-    meetingIdx?: number;
-}
-
-/**
- * `CalendarCourseMeeting` is a functional component that displays a course meeting.
- *
- * @example
- * <CalendarCourseMeeting course={course} meeting={meeting} />
- */
-export default function CalendarCourseMeeting({ course, meetingIdx }: CalendarCourseMeetingProps): JSX.Element | null {
-    let meeting = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : undefined;
-
-    if (!meeting) {
-        return null;
-    }
-
-    return (
-        <div className={styles.component}>
-            <div className={styles.content}>
-                <div className={styles['course-detail']}>
-                    <div className={styles.course}>
-                        {course.department} {course.number} - {course.instructors[0]?.lastName}
-                    </div>
-                    <div className={styles['time-and-location']}>
-                        {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
-                            meeting.location ? ` - ${meeting.location.building}` : ''
-                        }`}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

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

@@ -1,6 +1,6 @@
 import type { ThemeColor, TWIndex } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName } from '@shared/util/themeColors';
-import Divider from '@views/components/common/Divider/Divider';
+import Divider from '@views/components/common/Divider';
 import React from 'react';
 import { theme } from 'unocss/preset-mini';
 

src/views/components/calendar/CalendarFooter.tsx

@@ -4,7 +4,7 @@ import DiscordIcon from '~icons/ri/discord-line';
 import GithubIcon from '~icons/ri/github-fill';
 import InstagramIcon from '~icons/ri/instagram-line';
 
-import Link from '../common/Link/Link';
+import Link from '../common/Link';
 
 /**
  * The footer section of the calendar's sidebar

src/views/components/calendar/CalendarGrid.tsx

@@ -1,10 +1,10 @@
 import type { Course } from '@shared/types/Course';
-import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
+import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
 import Text from '@views/components/common/Text/Text';
 import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import React from 'react';
 
-import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import CalendarCell from './CalendarGridCell';
 
 const daysOfWeek = ['MON', 'TUE', 'WED', 'THU', 'FRI'];
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);

src/views/components/calendar/CalendarSchedules.tsx

@@ -1,8 +1,8 @@
 import createSchedule from '@pages/background/lib/createSchedule';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import { Button } from '@views/components/common/Button/Button';
-import List from '@views/components/common/List/List';
-import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
+import { Button } from '@views/components/common/Button';
+import List from '@views/components/common/List';
+import ScheduleListItem from '@views/components/common/ScheduleListItem';
 import Text from '@views/components/common/Text/Text';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import React from 'react';

src/views/components/calendar/CalenderHeader.tsx

@@ -1,9 +1,9 @@
 import { Status } from '@shared/types/Course';
-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 { Button } from '@views/components/common/Button';
+import CourseStatus from '@views/components/common/CourseStatus';
+import Divider from '@views/components/common/Divider';
 import { LargeLogo } from '@views/components/common/LogoIcon';
-import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses';
 import Text from '@views/components/common/Text/Text';
 import useSchedules from '@views/hooks/useSchedules';
 import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';

src/views/components/common/Card/Card.module.scss

@@ -1,10 +0,0 @@
-@use 'src/views/styles/colors.module.scss';
-
-.card {
-    background: colors.$white;
-    border: 0.5px dotted #c3cee0;
-    box-sizing: border-box;
-
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-}

src/views/components/common/Card/Card.tsx

@@ -1,31 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-import styles from './Card.module.scss';
-
-/**
- * Props for the Card component.
- */
-export type Props = {
-    style?: React.CSSProperties;
-    className?: string;
-    onClick?: (...args: unknown[]) => void;
-    children?: React.ReactNode;
-    testId?: string;
-};
-
-/**
- * A reusable Card component that can be used to wrap other components
- */
-export default function Card(props: Props) {
-    return (
-        <div
-            style={props.style}
-            className={clsx(styles.card, props.className)}
-            onClick={props.onClick}
-            data-testid={props.testId}
-        >
-            {props.children}
-        </div>
-    );
-}

src/views/components/common/Dialog.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
 
-import ExtensionRoot from '../ExtensionRoot/ExtensionRoot';
+import ExtensionRoot from './ExtensionRoot/ExtensionRoot';
 
 export interface _DialogProps {
     className?: string;

src/views/components/common/List.tsx

@@ -3,7 +3,7 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import ExtensionRoot from '../ExtensionRoot/ExtensionRoot';
+import ExtensionRoot from './ExtensionRoot/ExtensionRoot';
 
 /*
  * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)

src/views/components/common/Prompt.tsx

@@ -2,8 +2,8 @@ import { Dialog, Transition } from '@headlessui/react';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import type { Button } from '../Button/Button';
-import type Text from '../Text/Text';
+import type { Button } from './Button';
+import type Text from './Text/Text';
 
 /**
  * Props for the PromptDialog component.

src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx

@@ -1,6 +1,6 @@
 import type { Course } from '@shared/types/Course';
-import type { DialogProps } from '@views/components/common/Dialog/Dialog';
-import Dialog from '@views/components/common/Dialog/Dialog';
+import type { DialogProps } from '@views/components/common/Dialog';
+import Dialog from '@views/components/common/Dialog';
 import useSchedules from '@views/hooks/useSchedules';
 import React from 'react';
 

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -2,10 +2,10 @@ import { background } from '@shared/messages';
 import type { Course } from '@shared/types/Course';
 import type Instructor from '@shared/types/Instructor';
 import type { UserSchedule } from '@shared/types/UserSchedule';
-import { Button } from '@views/components/common/Button/Button';
-import { Chip, flagMap } from '@views/components/common/Chip/Chip';
-import Divider from '@views/components/common/Divider/Divider';
-import Link from '@views/components/common/Link/Link';
+import { Button } from '@views/components/common/Button';
+import { Chip, flagMap } from '@views/components/common/Chip';
+import Divider from '@views/components/common/Divider';
+import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
 import React from 'react';
 

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx

@@ -1,4 +1,4 @@
-import Link from '@views/components/common/Link/Link';
+import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';

src/views/components/injected/TableRow/TableRow.tsx

@@ -1,6 +1,6 @@
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
-import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';