Merge branch 'pr/90' into PopupMain

src/stories/components/CalendarCourse.stories.tsx

@@ -0,0 +1,62 @@
+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 '@views/components/common/CalendarCourseBlock/CalendarCourseMeeting';
+
+const meta = {
+    title: 'Components/Common/CalendarCourseMeeting',
+    component: CalendarCourse,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        course: { control: 'object' },
+        meetingIdx: { control: 'number' },
+        color: { control: 'color' },
+        rightIcon: { control: 'object' },
+    },
+} satisfies Meta<typeof CalendarCourse>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        course: new Course({
+            uniqueId: 123,
+            number: '311C',
+            fullName: "311C - Bevo's Default Course",
+            courseName: "Bevo's Default Course",
+            department: 'BVO',
+            creditHours: 3,
+            status: Status.OPEN,
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            isReserved: false,
+            url: '',
+            flags: [],
+            schedule: new CourseSchedule({
+                meetings: [
+                    new CourseMeeting({
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        startTime: 480,
+                        endTime: 570,
+                        location: {
+                            building: 'UTC',
+                            room: '123',
+                        },
+                    }),
+                ],
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+        }),
+        meetingIdx: 0,
+        color: 'red',
+    },
+};

src/stories/components/List.stories.tsx

@@ -0,0 +1,96 @@
+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 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';
+
+const numberOfCourses = 5;
+
+const generateCourses = count => {
+    const courses = [];
+
+    for (let i = 0; i < count; i++) {
+        const 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: 'Bevo',
+                    lastName: 'Bevo',
+                    fullName: 'Bevo Bevo',
+                }),
+            ],
+            isReserved: false,
+            number: '303E',
+            schedule: {
+                meetings: [
+                    new CourseMeeting({
+                        days: ['Tuesday', 'Thursday'],
+                        endTime: 660,
+                        startTime: 570,
+                    }),
+                ],
+            },
+            semester: {
+                code: '12345',
+                season: 'Spring',
+                year: 2024,
+            },
+            status: Status.WAITLISTED,
+            uniqueId: 12345 + i, // Make uniqueId different for each course
+            url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+        });
+
+        courses.push(course);
+    }
+
+    return courses;
+};
+
+const exampleCourses = generateCourses(numberOfCourses);
+const generateCourseBlocks = (exampleCourses, colors) =>
+    exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
+const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+
+const meta = {
+    title: 'Components/Common/List',
+    component: List,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        draggableElements: { control: 'object' },
+        itemHeight: { control: 'number' },
+        listHeight: { control: 'number' },
+        listWidth: { control: 'number' },
+        gap: { control: 'number' },
+    },
+} satisfies Meta<typeof List>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        draggableElements: exampleCourseBlocks,
+        itemHeight: 55,
+        listHeight: 300,
+        listWidth: 300,
+        gap: 12,
+    },
+};

src/stories/components/PopupCourseBlock.stories.tsx

@@ -95,7 +95,7 @@ export const Variants: Story = {
     ),
 };
 
-const colors = Object.keys(theme.colors)
+export const test_colors = 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,7 +104,7 @@ const colors = Object.keys(theme.colors)
 export const AllColors: Story = {
     render: props => (
         <div className='grid grid-rows-9 grid-cols-2 grid-flow-col max-w-2xl w-90vw gap-x-4 gap-y-2'>
-            {colors.map((color, i) => (
+            {test_colors.map((color, i) => (
                 <PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
             ))}
         </div>