fix: chromatic storybook - CourseCatalogInjectedPopup (#106)

* chore: add pnpm peer deps

* fix: merge conflict and rebase

* chore: remove deps

src/stories/components/PopupMain.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
         layout: 'centered',
     },
     tags: ['autodocs'],
+    args: {},
     argTypes: {},
 } satisfies Meta<typeof PopupMain>;
 export default meta;

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -1,55 +1,8 @@
-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 CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 
-const exampleCourse: Course = new Course({
-    uniqueId: 50805,
-    number: '314',
-    fullName: 'C S 314 DATA STRUCTURES',
-    courseName: 'DATA STRUCTURES',
-    department: 'C S',
-    creditHours: 3,
-    status: Status.OPEN,
-    instructors: [
-        new Instructor({ fullName: 'SCOTT, MICHAEL', firstName: 'MICHAEL', lastName: 'SCOTT', middleInitial: 'D' }),
-    ],
-    isReserved: true,
-    description: [
-        'Second part of a two-part sequence in programming. Introduction to specifications, simple unit testing, and debugging; building and using canonical data structures; algorithm analysis and reasoning techniques such as assertions and invariants.',
-        'Computer Science 314 and 314H may not both be counted.',
-        'BVO 311C and 312H may not both be counted.',
-        'Prerequisite: Computer Science 312 or 312H with a grade of at least C-.',
-        'May be counted toward the Quantitative Reasoning flag requirement.',
-    ],
-    schedule: new CourseSchedule({
-        meetings: [
-            new CourseMeeting({
-                days: [DAY_MAP.T, DAY_MAP.TH],
-                startTime: 480,
-                endTime: 570,
-                location: { building: 'UTC', room: '123' },
-            }),
-            new CourseMeeting({
-                days: [DAY_MAP.TH],
-                startTime: 570,
-                endTime: 630,
-                location: { building: 'JES', room: '123' },
-            }),
-        ],
-    }),
-    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
-    flags: ['Writing', 'Independent Inquiry'],
-    instructionMode: 'In Person',
-    semester: {
-        code: '12345',
-        year: 2024,
-        season: 'Spring',
-    },
-});
+import { exampleCourse } from './mocked';
 
 const exampleSchedule: UserSchedule = new UserSchedule({
     courses: [exampleCourse],
@@ -57,20 +10,40 @@ const exampleSchedule: UserSchedule = new UserSchedule({
     hours: 0,
 });
 
-const meta: Meta<typeof CourseCatalogInjectedPopup> = {
+const meta = {
     title: 'Components/Injected/CourseCatalogInjectedPopup',
     component: CourseCatalogInjectedPopup,
-    argTypes: {
-        onClose: { action: 'onClose' },
+    args: {
+        course: exampleCourse,
+        activeSchedule: exampleSchedule,
+        onClose: () => {},
     },
-};
+    argTypes: {
+        course: {
+            control: {
+                type: 'object',
+            },
+        },
+        activeSchedule: {
+            control: {
+                type: 'object',
+            },
+        },
+        onClose: {
+            control: {
+                type: 'function',
+            },
+        },
+    },
+} satisfies Meta<typeof CourseCatalogInjectedPopup>;
 
 export default meta;
-type Story = StoryObj<typeof CourseCatalogInjectedPopup>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
         course: exampleCourse,
         activeSchedule: exampleSchedule,
+        onClose: () => {},
     },
 };

src/stories/injected/CoursePopup.stories.ts

@@ -1,64 +1,9 @@
 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 CoursePopup from '@views/components/injected/CoursePopupOld/CoursePopup';
 
-const exampleCourse: Course = new Course({
-    courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
-    creditHours: 3,
-    department: 'C S',
-    description: [
-        'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
-        'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
-        'May be counted toward the Quantitative Reasoning flag requirement.',
-        'Designed to accommodate 100 or more students.',
-        'Taught as a Web-based course.',
-    ],
-    flags: ['Quantitative Reasoning'],
-    fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
-    instructionMode: 'Online',
-    instructors: [
-        new Instructor({
-            firstName: 'William',
-            lastName: 'Young',
-            middleInitial: 'D',
-            fullName: 'William D Young',
-        }),
-        new Instructor({
-            firstName: 'William',
-            lastName: 'Young',
-            middleInitial: 'D',
-            fullName: 'William D Young',
-        }),
-    ],
-    isReserved: false,
-    number: '303E',
-    schedule: {
-        meetings: [
-            new CourseMeeting({
-                days: ['Tuesday', 'Thursday'],
-                endTime: 660,
-                startTime: 570,
-            }),
-        ],
-    },
-    semester: {
-        code: '12345',
-        season: 'Spring',
-        year: 2024,
-    },
-    status: Status.CANCELLED,
-    uniqueId: 12345,
-    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
-});
-
-const exampleSchedule: UserSchedule = new UserSchedule({
-    courses: [exampleCourse],
-    name: 'Example Schedule',
-    hours: 0,
-});
+import { exampleCourse, exampleSchedule } from './mocked';
 
 const meta = {
     title: 'Components/Injected/CoursePopup',

src/stories/injected/mocked.ts

@@ -0,0 +1,59 @@
+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';
+
+export const exampleCourse: Course = new Course({
+    courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
+    creditHours: 3,
+    department: 'C S',
+    description: [
+        'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
+        'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
+        'May be counted toward the Quantitative Reasoning flag requirement.',
+        'Designed to accommodate 100 or more students.',
+        'Taught as a Web-based course.',
+    ],
+    flags: ['Quantitative Reasoning'],
+    fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
+    instructionMode: 'Online',
+    instructors: [
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+    ],
+    isReserved: false,
+    number: '303E',
+    schedule: {
+        meetings: [
+            new CourseMeeting({
+                days: ['Tuesday', 'Thursday'],
+                endTime: 660,
+                startTime: 570,
+            }),
+        ],
+    },
+    semester: {
+        code: '12345',
+        season: 'Spring',
+        year: 2024,
+    },
+    status: Status.CANCELLED,
+    uniqueId: 12345,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+export const exampleSchedule: UserSchedule = new UserSchedule({
+    courses: [exampleCourse],
+    name: 'Example Schedule',
+    hours: 0,
+});

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

@@ -1,7 +1,7 @@
+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 type { Course } from 'src/shared/types/Course';
-import type { UserSchedule } from 'src/shared/types/UserSchedule';
 
 import Description from './Description';
 import GradeDistribution from './GradeDistribution';
@@ -23,13 +23,18 @@ interface CourseCatalogInjectedPopupProps {
  * @param {Function} props.onClose - The function to close the popup.
  * @returns {JSX.Element} The CourseCatalogInjectedPopup component.
  */
-const CourseCatalogInjectedPopup: React.FC<CourseCatalogInjectedPopupProps> = ({ course, activeSchedule, onClose }) => (
-    <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
-        <div className='flex flex-col'>
-            <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
-            <Description lines={course.description} />
-            <GradeDistribution course={course} />
-        </div>
-    </Popup>
-);
-export default CourseCatalogInjectedPopup;
+export default function CourseCatalogInjectedPopup({
+    course,
+    activeSchedule,
+    onClose,
+}: CourseCatalogInjectedPopupProps) {
+    return (
+        <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
+            <div className='flex flex-col'>
+                <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
+                <Description lines={course.description} />
+                <GradeDistribution course={course} />
+            </div>
+        </Popup>
+    );
+}