fix: cleanup imports (#112)

* fix: use path alias

* fix: more path alias

* fix: even more path aliasing

* fix: even moreeeee path aliasing

* fix: sort imports

* fix: sort imports (again)

src/pages/background/events/onServiceWorkerAlive.ts

@@ -1,4 +1,4 @@
-import { openDebugTab } from '../util/openDebugTab';
+import { openDebugTab } from '@pages/background/util/openDebugTab';
 
 /**
  * Called whenever the background service worker comes alive

src/pages/background/handler/tabManagementHandler.ts

@@ -1,8 +1,7 @@
+import openNewTab from '@pages/background/util/openNewTab';
 import type TabManagementMessages from '@shared/messages/TabManagementMessages';
 import type { MessageHandler } from 'chrome-extension-toolkit';
 
-import openNewTab from '../util/openNewTab';
-
 const tabManagementHandler: MessageHandler<TabManagementMessages> = {
     getTabId({ sendResponse, sender }) {
         sendResponse(sender.tab?.id ?? -1);

src/pages/background/handler/userScheduleHandler.ts

@@ -1,15 +1,14 @@
+import addCourse from '@pages/background/lib/addCourse';
+import clearCourses from '@pages/background/lib/clearCourses';
+import createSchedule from '@pages/background/lib/createSchedule';
+import deleteSchedule from '@pages/background/lib/deleteSchedule';
+import removeCourse from '@pages/background/lib/removeCourse';
+import renameSchedule from '@pages/background/lib/renameSchedule';
+import switchSchedule from '@pages/background/lib/switchSchedule';
 import type { UserScheduleMessages } from '@shared/messages/UserScheduleMessages';
 import { Course } from '@shared/types/Course';
 import type { MessageHandler } from 'chrome-extension-toolkit';
 
-import addCourse from '../lib/addCourse';
-import clearCourses from '../lib/clearCourses';
-import createSchedule from '../lib/createSchedule';
-import deleteSchedule from '../lib/deleteSchedule';
-import removeCourse from '../lib/removeCourse';
-import renameSchedule from '../lib/renameSchedule';
-import switchSchedule from '../lib/switchSchedule';
-
 const userScheduleHandler: MessageHandler<UserScheduleMessages> = {
     addCourse({ data, sendResponse }) {
         addCourse(data.scheduleName, new Course(data.course)).then(sendResponse);

src/pages/popup/index.tsx

@@ -1,6 +1,5 @@
+import PopupMain from '@views/components/PopupMain';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import PopupMain from '../../views/components/PopupMain';
-
 createRoot(document.getElementById('root')).render(<PopupMain />);

src/shared/types/Instructor.ts

@@ -1,7 +1,6 @@
+import { capitalize } from '@shared/util/string';
 import type { Serialized } from 'chrome-extension-toolkit';
 
-import { capitalize } from '../util/string';
-
 /**
  * A type representing an instructor for a course (who teaches it)
  */

src/shared/util/storybook.ts

@@ -1,7 +1,6 @@
+import { getCourseColors } from '@shared/util/colors';
 import { theme } from 'unocss/preset-mini';
 
-import { getCourseColors } from './colors';
-
 export const tailwindColorways = Object.keys(theme.colors)
     // check that the color is a colorway (is an object)
     .filter(color => typeof theme.colors[color] === 'object')

src/shared/util/tests/colors.test.ts

@@ -1,7 +1,6 @@
+import { getLuminance } from '@shared/util/colors';
 import { describe, expect, it } from 'vitest';
 
-import { getLuminance } from '../colors';
-
 describe('getLuminance', () => {
     it('should return the correct luminance value for a given hex color', () => {
         // Test case 1: Hex color #FFFFFF (white)

src/shared/util/tests/random.test.ts

@@ -1,7 +1,6 @@
+import { generateRandomId } from '@shared/util/random';
 import { describe, expect, it } from 'vitest';
 
-import { generateRandomId } from '../random';
-
 describe('generateRandomId', () => {
     it('should generate a random ID with the specified length', () => {
         // Test case 1: Length 5

src/shared/util/tests/string.test.ts

@@ -1,7 +1,6 @@
+import { capitalize, capitalizeFirstLetter, ellipsify } from '@shared/util/string';
 import { describe, expect, it } from 'vitest';
 
-import { capitalize, capitalizeFirstLetter, ellipsify } from '../string';
-
 // TODO: Fix `string.ts` and `string.test.ts` to make the tests pass
 // `capitalize` is adding an extra space at the end of the word.
 describe('capitalize', () => {

src/shared/util/tests/themeColors.test.ts

@@ -1,7 +1,6 @@
+import { getThemeColorHexByName, getThemeColorRgbByName, hexToRgb } from '@shared/util/themeColors';
 import { describe, expect, it } from 'vitest';
 
-import { getThemeColorHexByName, getThemeColorRgbByName, hexToRgb } from '../themeColors';
-
 describe('hexToRgb', () => {
     it('should convert hex color to RGB', () => {
         expect(hexToRgb('#BF5700')).toEqual([191, 87, 0]);

src/shared/util/tests/time.test.ts

@@ -1,7 +1,6 @@
+import { sleep } from '@shared/util/time';
 import { describe, expect, it } from 'vitest';
 
-import { sleep } from '../time';
-
 describe('sleep', () => {
     it('should resolve after the specified number of milliseconds', async () => {
         const start = Date.now();

src/views/components/calendar/Calendar/Calendar.tsx

@@ -1,10 +1,9 @@
+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 ImportantLinks from '@views/components/calendar/ImportantLinks';
 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';
 
 export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
 

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

@@ -1,14 +1,13 @@
+import type { CalendarCourseCellProps } from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
+import CalendarCourseBlock from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
+import { Button } from '@views/components/common/Button/Button';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 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/CalendarGrid/CalendarGrid.tsx

@@ -1,13 +1,13 @@
+import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
+/*  import calIcon from 'src/assets/icons/cal.svg';
+import pngIcon from 'src/assets/icons/png.svg';
+*/
+import CalendarCell from '@views/components/calendar/CalendarGridCell/CalendarGridCell';
 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 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 styles from './CalendarGrid.module.scss';
 
 /*  const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));

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

@@ -6,6 +6,7 @@ import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotal
 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';
@@ -32,12 +33,12 @@ const CalendarHeader = () => (
                 <Divider className='self-center' size='2.5rem' orientation='vertical' />
                 <div className='flex flex-col self-center'>
                     <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
-                    <Text variant='h4' className='text-gray text-xs font-medium leading-normal'>
+                    <Text variant='h4' className='text-xs text-gray font-medium leading-normal'>
                         DATA UPDATED ON: 12:00 AM 02/01/2024
                     </Text>
                 </div>
             </div>
-            <div className='flex flex-row justify-end items-center space-x-8'>
+            <div className='flex flex-row items-center justify-end space-x-8'>
                 <div className='flex flex-row space-x-4'>
                     <CourseStatus size='small' status={Status.WAITLISTED} />
                     <CourseStatus size='small' status={Status.CLOSED} />

src/views/components/calendar/ImportantLinks.tsx

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

src/views/components/common/Button/Button.tsx

@@ -1,12 +1,11 @@
+import type { ThemeColor } from '@shared/util/themeColors';
+import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
 
 import type IconComponent from '~icons/material-symbols';
 
-import type { ThemeColor } from '../../../../shared/util/themeColors';
-import { getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
-import Text from '../Text/Text';
-
 interface Props {
     className?: string;
     style?: React.CSSProperties;

src/views/components/common/Chip/Chip.tsx

@@ -1,7 +1,6 @@
+import Text from '@views/components/common/Text/Text';
 import React from 'react';
 
-import Text from '../Text/Text';
-
 /**
  * A type that represents the flags that a course can have.
  */

src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx

@@ -1,9 +1,8 @@
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
 import type { Course } from 'src/shared/types/Course';
 
-import Text from '../Text/Text';
-
 /**
  * Props for ConflictWithWarningProps
  */

src/views/components/common/CourseStatus/CourseStatus.tsx

@@ -1,10 +1,9 @@
 import type { StatusType } from '@shared/types/Course';
 import { StatusIcon } from '@shared/util/icons';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
 
-import Text from '../Text/Text';
-
 type SizeType = 'small' | 'mini';
 
 /**

src/views/components/common/InfoCard/InfoCard.tsx

@@ -1,7 +1,6 @@
+import Text from '@views/components/common/Text/Text';
 import React from 'react';
 
-import Text from '../Text/Text';
-
 interface Props {
     titleText: string;
     bodyText: string;

src/views/components/common/Link/Link.tsx

@@ -1,10 +1,10 @@
 import { background } from '@shared/messages';
+import type { TextProps } from '@views/components/common/Text/Text';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
-import type { TextProps } from '../Text/Text';
-import Text from '../Text/Text';
 import styles from './Link.module.scss';
 
 type Props = Omit<TextProps, 'span'> & {

src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

@@ -3,13 +3,12 @@ import { Status } from '@shared/types/Course';
 import type { CourseColors } from '@shared/util/colors';
 import { pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
+import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
 
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 
-import Text from '../Text/Text';
-
 /**
  * Props for PopupCourseBlock
  */

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -1,7 +1,6 @@
+import Text from '@views/components/common/Text/Text';
 import React from 'react';
 
-import Text from '../Text/Text';
-
 /**
  * Props for ScheduleTotalHoursAndCourses
  */

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

@@ -1,8 +1,8 @@
 import type { Course } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
+import Popup from '@views/components/common/Popup/Popup';
 import React from 'react';
 
-import Popup from '../../common/Popup/Popup';
 import CourseDescription from './CourseDescription/CourseDescription';
 import CourseHeader from './CourseHeader/CourseHeader';
 import styles from './CoursePopup.module.scss';

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

@@ -1,8 +1,8 @@
+import Link from '@views/components/common/Link/Link';
+import Text from '@views/components/common/Text/Text';
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import Link from '../../common/Link/Link';
-import Text from '../../common/Text/Text';
 import styles from './RecruitmentBanner.module.scss';
 
 const DISCORD_URL = 'https://discord.gg/qjcvgyVJbT';

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

@@ -1,12 +1,12 @@
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
+import { Button } from '@views/components/common/Button/Button';
+import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import AddIcon from '~icons/material-symbols/add-circle';
 
-import { Button } from '../../common/Button/Button';
-import ConflictsWithWarning from '../../common/ConflictsWithWarning/ConflictsWithWarning';
 import styles from './TableRow.module.scss';
 
 interface Props {