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/stories/components/Button.stories.tsx

@@ -1,7 +1,8 @@
+import { colorsFlattened } from '@shared/util/themeColors';
 import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@views/components/common/Button/Button';
 import React from 'react';
-import { colorsFlattened } from 'src/shared/util/themeColors';
-import { Button } from 'src/views/components/common/Button/Button';
+
 import AddIcon from '~icons/material-symbols/add';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 import DescriptionIcon from '~icons/material-symbols/description';

src/stories/components/Card.stories.tsx

@@ -1,20 +1,20 @@
-import Card from 'src/views/components/common/Card/Card';
 import type { Meta, StoryObj } from '@storybook/react';
+import Card from '@views/components/common/Card/Card';
 import React from 'react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/Common/Card',
-  component: Card,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  args: {
-    children: <div>Hello</div>,
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+    title: 'Components/Common/Card',
+    component: Card,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    args: {
+        children: <div>Hello</div>,
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
 } satisfies Meta<typeof Card>;
 
 export default meta;

src/stories/components/Chip.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Chip } from 'src/views/components/common/Chip/Chip';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from '@views/components/common/Chip/Chip';
 
 const meta = {
     title: 'Components/Common/Chip',
@@ -20,4 +20,4 @@ export const Default: Story = {
     args: {
         label: 'QR',
     },
-};
+};

src/stories/components/ConflictsWithWarning.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import Instructor from '@shared/types/Instructor';
+import type { Meta, StoryObj } from '@storybook/react';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
-import Instructor from 'src/shared/types/Instructor';
 
 export const ExampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',

src/stories/components/CourseStatus.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
 import { Status } from '@shared/types/Course';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
+import React from 'react';
 
 const meta = {
     title: 'Components/Common/CourseStatus',
@@ -40,7 +39,7 @@ export const Default: Story = {};
 
 export const Variants: Story = {
     render: args => (
-        <div className='flex flex-col gap-4 items-center'>
+        <div className='flex flex-col items-center gap-4'>
             <CourseStatus {...args} size='small' />
             <CourseStatus {...args} size='mini' />
         </div>

src/stories/components/Divider.stories.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import Divider from '@views/components/common/Divider/Divider';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@views/components/common/Button/Button';
+import Divider from '@views/components/common/Divider/Divider';
+import React from 'react';
+
 import AddIcon from '~icons/material-symbols/add';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
 import DescriptionIcon from '~icons/material-symbols/description';

src/stories/components/Dropdown.stories.tsx

@@ -1,13 +1,13 @@
 import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
+import { CourseSchedule } from '@shared/types/CourseSchedule';
+import Instructor from '@shared/types/Instructor';
 import { UserSchedule } from '@shared/types/UserSchedule';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Serialized } from 'chrome-extension-toolkit';
+import Dropdown from '@views/components/common/Dropdown/Dropdown';
+import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
+import type { Serialized } from 'chrome-extension-toolkit';
 import React from 'react';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import Dropdown from 'src/views/components/common/Dropdown/Dropdown';
-import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
 
 const meta: Meta<typeof Dropdown> = {
     title: 'Components/Common/Dropdown',

src/stories/components/ImportantLinks.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import ImportantLinks from 'src/views/components/calendar/ImportantLinks';
+import type { Meta, StoryObj } from '@storybook/react';
+import ImportantLinks from '@views/components/calendar/ImportantLinks';
 
 const meta = {
     title: 'Components/Common/ImportantLinks',

src/stories/components/InfoCard.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { InfoCard } from 'src/views/components/common/InfoCard/InfoCard';
+import type { Meta, StoryObj } from '@storybook/react';
+import { InfoCard } from '@views/components/common/InfoCard/InfoCard';
 
 const meta = {
     title: 'Components/Common/InfoCard',
@@ -22,4 +22,4 @@ export const Default: Story = {
         titleText: 'WAITLIST SIZE',
         bodyText: '14 Students',
     },
-};
+};

src/stories/components/Link.stories.ts

@@ -1,21 +1,21 @@
-import Link from 'src/views/components/common/Link/Link';
 import type { Meta, StoryObj } from '@storybook/react';
+import Link from '@views/components/common/Link/Link';
 
 const meta = {
-  title: 'Components/Common/Link',
-  component: Link,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'color',
+    title: 'Components/Common/Link',
+    component: Link,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'color',
+        },
+    },
+    args: {
+        children: 'Link',
     },
-  },
-  args: {
-    children: 'Link',
-  },
 } satisfies Meta<typeof Link>;
 
 export default meta;

src/stories/components/List.stories.tsx

@@ -1,15 +1,22 @@
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import List from '@views/components/common/List/List';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
-import { test_colors } from './PopupCourseBlock.stories';
+
+import { TestColors } from './PopupCourseBlock.stories';
 
 const numberOfCourses = 5;
 
-export const generateCourses = count => {
+/**
+ * Generates an array of courses.
+ *
+ * @param count - The number of courses to generate.
+ * @returns An array of generated courses.
+ */
+export const GenerateCourses = count => {
     const courses = [];
 
     for (let i = 0; i < count; i++) {
@@ -61,10 +68,10 @@ export const generateCourses = count => {
     return courses;
 };
 
-const exampleCourses = generateCourses(numberOfCourses);
+const exampleCourses = GenerateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
     exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, TestColors);
 
 const meta = {
     title: 'Components/Common/List',
@@ -87,7 +94,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        draggableElements: exampleCourseBlocks,
+        draggableElements: ExampleCourseBlocks,
         itemHeight: 55,
         listHeight: 300,
         listWidth: 300,

src/stories/components/PopupCourseBlock.stories.tsx

@@ -1,13 +1,19 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import Instructor from '@shared/types/Instructor';
+import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
-import Instructor from 'src/shared/types/Instructor';
-import { getCourseColors } from 'src/shared/util/colors';
 import { theme } from 'unocss/preset-mini';
 
-export const exampleCourse: Course = new Course({
+/**
+ * Represents an example course.
+ *
+ * @remarks
+ * This is a sample course object that provides information about a specific course.
+ */
+export const ExampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
     creditHours: 3,
     department: 'C S',
@@ -62,7 +68,7 @@ const meta = {
     // More on argTypes: https://storybook.js.org/docs/api/argtypes
     args: {
         colors: getCourseColors('emerald'),
-        course: exampleCourse,
+        course: ExampleCourse,
     },
     argTypes: {
         colors: {
@@ -87,15 +93,15 @@ export const Default: Story = {
 export const Variants: Story = {
     render: props => (
         <div className='grid grid-cols-2 max-w-2xl w-90vw gap-x-4 gap-y-2'>
-            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.OPEN })} />
-            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CLOSED })} />
-            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.WAITLISTED })} />
-            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CANCELLED })} />
+            <PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.OPEN })} />
+            <PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.CLOSED })} />
+            <PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.WAITLISTED })} />
+            <PopupCourseBlock {...props} course={new Course({ ...ExampleCourse, status: Status.CANCELLED })} />
         </div>
     ),
 };
 
-export const test_colors = Object.keys(theme.colors)
+export const TestColors = Object.keys(theme.colors)
     // check that the color is a colorway (is an object)
     .filter(color => typeof theme.colors[color] === 'object')
     .slice(0, 17)
@@ -104,8 +110,8 @@ export const test_colors = Object.keys(theme.colors)
 export const AllColors: Story = {
     render: props => (
         <div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
-            {test_colors.map((color, i) => (
-                <PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
+            {TestColors.map((color, i) => (
+                <PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
             ))}
         </div>
     ),

src/stories/components/PopupMain.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import PopupMain from '@views/components/PopupMain';
 
 const meta = {
@@ -8,16 +8,12 @@ const meta = {
         layout: 'centered',
     },
     tags: ['autodocs'],
-    argTypes: {
-        
-    },
+    argTypes: {},
 } satisfies Meta<typeof PopupMain>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    args: {
-        
-    },
-};
+    args: {},
+};

src/stories/components/SchedulTotalHoursAndCourses.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
 
 const meta = {
@@ -11,7 +11,7 @@ const meta = {
     argTypes: {
         scheduleName: { control: 'text' },
         totalHours: { control: 'number' },
-        totalCourses: { control: 'number' }
+        totalCourses: { control: 'number' },
     },
 } satisfies Meta<typeof ScheduleTotalHoursAndCourses>;
 export default meta;
@@ -22,6 +22,6 @@ export const Default: Story = {
     args: {
         scheduleName: 'SCHEDULE',
         totalHours: 22,
-        totalCourses: 8
+        totalCourses: 8,
     },
-};
+};

src/stories/components/ScheduleListItem.stories.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
 import React from 'react';
-import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
 
 export default {
     title: 'Components/Common/ScheduleListItem',
@@ -14,21 +15,21 @@ export default {
     },
 };
 
-export const Default = (args) => <ScheduleListItem {...args} />;
+export const Default = args => <ScheduleListItem {...args} />;
 
 Default.args = {
     name: 'My Schedule',
     active: true,
 };
 
-export const Active = (args) => <ScheduleListItem {...args} />;
+export const Active = args => <ScheduleListItem {...args} />;
 
 Active.args = {
     name: 'My Schedule',
     active: true,
 };
 
-export const Inactive = (args) => <ScheduleListItem {...args} />;
+export const Inactive = args => <ScheduleListItem {...args} />;
 
 Inactive.args = {
     name: 'My Schedule',

src/stories/components/Settings.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Settings from 'src/views/components/Settings';
+import type { Meta, StoryObj } from '@storybook/react';
+import Settings from '@views/components/Settings';
 
 const meta = {
     title: 'Components/Common/Settings',

src/stories/components/Spinner.stories.ts

@@ -1,11 +1,11 @@
-import Spinner from 'src/views/components/common/Spinner/Spinner';
 import type { Meta, StoryObj } from '@storybook/react';
+import Spinner from '@views/components/common/Spinner/Spinner';
 
 const meta = {
-  title: 'Components/Common/Spinner',
-  component: Spinner,
-  tags: ['autodocs'],
-  argTypes: {},
+    title: 'Components/Common/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+    argTypes: {},
 } satisfies Meta<typeof Spinner>;
 
 export default meta;

src/stories/components/Text.stories.tsx

@@ -1,7 +1,6 @@
-import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
+import Text from '@views/components/common/Text/Text';
 import React from 'react';
-import Text from '../../views/components/common/Text/Text';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

src/stories/components/calendar/Calendar.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Calendar } from 'src/views/components/calendar/Calendar/Calendar';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from '@views/components/calendar/Calendar/Calendar';
 
 const meta = {
     title: 'Components/Calendar/Calendar',
@@ -8,16 +8,12 @@ const meta = {
         layout: 'centered',
     },
     tags: ['autodocs'],
-    argTypes: {
-        
-    },
+    argTypes: {},
 } satisfies Meta<typeof Calendar>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    args: {
-        
-    },
-};
+    args: {},
+};

src/stories/components/calendar/CalendarBottomBar.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
 import { Course, Status } from '@shared/types/Course';
 import Instructor from '@shared/types/Instructor';
-import { CalendarBottomBar } from 'src/views/components/calendar/CalendarBottomBar/CalendarBottomBar';
-import { getCourseColors } from '../../../shared/util/colors';
+import { getCourseColors } from '@shared/util/colors';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarBottomBar } from '@views/components/calendar/CalendarBottomBar/CalendarBottomBar';
+import React from 'react';
 
 const exampleGovCourse: Course = new Course({
     courseName: 'Nope',

src/stories/components/calendar/CalendarCourse.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
 import { CourseSchedule } from '@shared/types/CourseSchedule';
 import Instructor from '@shared/types/Instructor';
-import CalendarCourse from 'src/views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarCourse from '@views/components/calendar/CalendarCourseBlock/CalendarCourseMeeting';
 
 const meta = {
     title: 'Components/Calendar/CalendarCourseMeeting',

src/stories/components/calendar/CalendarCourseCell.stories.tsx

@@ -1,9 +1,10 @@
 import { Course, Status } from '@shared/types/Course';
 import { getCourseColors } from '@shared/util/colors';
-import { Meta, StoryObj } from '@storybook/react';
-import CalendarCourseCell from 'src/views/components/calendar/CalendarCourseCell/CalendarCourseCell';
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
-import { exampleCourse } from '../PopupCourseBlock.stories';
+
+import { ExampleCourse } from '../PopupCourseBlock.stories';
 
 const meta = {
     title: 'Components/Calendar/CalendarCourseCell',
@@ -25,10 +26,10 @@ const meta = {
         </div>
     ),
     args: {
-        courseDeptAndInstr: exampleCourse.department,
-        className: exampleCourse.number,
-        status: exampleCourse.status,
-        timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
+        courseDeptAndInstr: ExampleCourse.department,
+        className: ExampleCourse.number,
+        status: ExampleCourse.status,
+        timeAndLocation: ExampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
 
         colors: getCourseColors('emerald', 500),
     },

src/stories/components/calendar/CalendarGrid.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import CalendarGrid from 'src/views/components/calendar/CalendarGrid/CalendarGrid';
-import { getCourseColors } from '@shared/util/colors';
-import { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 import { Status } from '@shared/types/Course';
+import { getCourseColors } from '@shared/util/colors';
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
+import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule';
 
 const meta = {
     title: 'Components/Calendar/CalendarGrid',

src/stories/components/calendar/CalendarGridCell.stories.tsx

@@ -1,7 +1,6 @@
 // Calendar.stories.tsx
-import React from 'react';
-import CalendarCell from 'src/views/components/calendar/CalendarGridCell/CalendarGridCell';
 import type { Meta, StoryObj } from '@storybook/react';
+import CalendarCell from '@views/components/calendar/CalendarGridCell/CalendarGridCell';
 
 const meta = {
     title: 'Components/Calendar/CalendarGridCell',

src/stories/components/calendar/CalendarHeader.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import CalendarHeader from 'src/views/components/calendar/CalendarHeader/CalenderHeader';
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
 
 const meta = {
     title: 'Components/Calendar/CalendarHeader',

src/stories/components/calendar/CalendarSchedules.stories.tsx

@@ -1,11 +1,11 @@
 import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
+import { CourseSchedule } from '@shared/types/CourseSchedule';
+import Instructor from '@shared/types/Instructor';
 import { UserSchedule } from '@shared/types/UserSchedule';
 import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
 import React from 'react';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import { CalendarSchedules } from 'src/views/components/calendar/CalendarSchedules/CalendarSchedules';
 
 const meta = {
     title: 'Components/Calendar/CalendarSchedules',

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -1,10 +1,9 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
+import { CourseSchedule } from '@shared/types/CourseSchedule';
+import Instructor from '@shared/types/Instructor';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-
-import CourseCatalogInjectedPopup from 'src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 
 const exampleCourse: Course = new Course({
     uniqueId: 50805,

src/stories/injected/CoursePopup.stories.ts

@@ -1,9 +1,9 @@
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
-import { UserSchedule } from 'src/shared/types/UserSchedule';
-import CoursePopup from 'src/views/components/injected/CoursePopupOld/CoursePopup';
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import Instructor from '@shared/types/Instructor';
+import { UserSchedule } from '@shared/types/UserSchedule';
 import type { Meta, StoryObj } from '@storybook/react';
-import Instructor from 'src/shared/types/Instructor';
+import CoursePopup from '@views/components/injected/CoursePopupOld/CoursePopup';
 
 const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',