Merge branch 'hackathon' of https://github.com/UT-Developers/UT-Registration-Plus into hackathon

.eslintrc

@@ -73,6 +73,7 @@
                 "ignoreReadBeforeAssign": false
             }
         ],
+        "no-plusplus": "off",
         "no-inner-declarations": "off",
         "sort-imports": "off",
         "no-case-declarations": "off",

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

src/shared/util/colors.ts

@@ -42,9 +42,9 @@ export function pickFontColor(bgColor: string): 'text-white' | 'text-black' {
  * Get primary and secondary colors from a tailwind colorway
  * @param colorway the tailwind colorway ex. "emerald"
  */
-export function getCourseColors(colorway: keyof typeof theme.colors): CourseColors {
+export function getCourseColors(colorway: keyof typeof theme.colors, index = 600, offset = 200): CourseColors {
     return {
-        primaryColor: theme.colors[colorway][600] as string,
+        primaryColor: theme.colors[colorway][index] as string,
-        secondaryColor: theme.colors[colorway][800] as string,
+        secondaryColor: theme.colors[colorway][index + offset] as string,
     };
 }

src/stories/components/CalendarCourseCell.stories.tsx

@@ -1,10 +1,9 @@
+import { Course, Status } from '@shared/types/Course';
+import { getCourseColors } from '@shared/util/colors';
 import { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
+import { exampleCourse } from './PopupCourseBlock.stories';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
 
 const meta = {
     title: 'Components/Common/CalendarCourseCell',
@@ -16,52 +15,48 @@ const meta = {
     argTypes: {
         course: { control: 'object' },
         meetingIdx: { control: 'number' },
-        color: { control: 'color' },
+        colors: { control: 'object' },
     },
     render: (args: any) => (
-        <div className="w-45">
+        <div className='w-45'>
             <CalendarCourseCell {...args} />
         </div>
     ),
+    args: {
+        course: exampleCourse,
+        meetingIdx: 0,
+        colors: getCourseColors('emerald', 500),
+    },
 } satisfies Meta<typeof CalendarCourseCell>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Default: Story = {};
-    args: {
+
-        course: new Course({
+export const Variants: Story = {
-            uniqueId: 123,
+    render: props => (
-            number: '311C',
+        <div className='grid grid-cols-2 h-40 max-w-xl w-90vw gap-x-4 gap-y-2'>
-            fullName: "311C - Bevo's Default Course",
+            <CalendarCourseCell
-            courseName: "Bevo's Default Course",
+                {...props}
-            department: 'BVO',
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
-            creditHours: 3,
+                colors={getCourseColors('green', 500)}
-            status: Status.WAITLISTED,
+            />
-            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            <CalendarCourseCell
-            isReserved: false,
+                {...props}
-            url: '',
+                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
-            flags: [],
+                colors={getCourseColors('teal', 400)}
-            schedule: new CourseSchedule({
+            />
-                meetings: [
+            <CalendarCourseCell
-                    new CourseMeeting({
+                {...props}
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
-                        startTime: 480,
+                colors={getCourseColors('indigo', 400)}
-                        endTime: 570,
+            />
-                        location: {
+            <CalendarCourseCell
-                            building: 'UTC',
+                {...props}
-                            room: '123',
+                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
-                        },
+                colors={getCourseColors('red', 500)}
-                    }),
+            />
-                ],
+        </div>
-            }),
+    ),
-            instructionMode: 'In Person',
-            semester: {
-                year: 2024,
-                season: 'Spring',
-            },
-        }),
-        meetingIdx: 0,
-        color: 'red',
-    },
 };

src/stories/components/ImportantLinks.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ImportantLinks from 'src/views/components/ImportantLinks';
+
+const meta = {
+    title: 'Components/Common/ImportantLinks',
+    component: ImportantLinks,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof ImportantLinks>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/stories/components/PopupCourseBlock.stories.tsx

@@ -1,13 +1,13 @@
 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 PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import { getCourseColors } from 'src/shared/util/colors';
 import { theme } from 'unocss/preset-mini';
 
-const exampleCourse: Course = new Course({
+export const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
     creditHours: 3,
     department: 'C S',
@@ -103,7 +103,7 @@ export const test_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'>
+        <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} />
             ))}

src/views/components/ImportantLinks.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from './common/Text/Text';
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+
+type Props = {
+    className?: string;
+};
+
+/**
+ * The "Important Links" section of the calendar website
+ * @returns
+ */
+export default function ImportantLinks({ className }: Props) {
+    return (
+        <article className={clsx(className, 'flex flex-col gap-2')}>
+            <Text variant='h3'>Important Links</Text>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
+                className='text-ut-burntorange flex items-center gap-0.5'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Spring Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
+                className='text-ut-burntorange flex items-center gap-0.5'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Summer Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registrar/ris.WBX'
+                className='text-ut-burntorange flex items-center gap-0.5'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Registration Info Sheet</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
+                className='text-ut-burntorange flex items-center gap-0.5'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Register For Courses</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/degree/audits/'
+                className='text-ut-burntorange flex items-center gap-0.5'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Degree Audit</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+        </article>
+    );
+}

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,6 +1,7 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
+import { CourseColors, pickFontColor } from 'src/shared/util/colors';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 import ClosedIcon from '~icons/material-symbols/lock';
 import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
@@ -11,11 +12,14 @@ export interface CalendarCourseCellProps {
     course: Course;
     /* index into course meeting array to display */
     meetingIdx?: number;
-    /** The background color for the course. */
+    colors: CourseColors;
-    color: string;
 }
 
-const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meetingIdx }: CalendarCourseCellProps) => {
+const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({
+    course,
+    meetingIdx,
+    colors,
+}: CalendarCourseBlockProps) => {
     let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
     let rightIcon: React.ReactNode | null = null;
     if (course.status === Status.WAITLISTED) {
@@ -26,20 +30,34 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({ course, meeting
         rightIcon = <CancelledIcon className='h-5 w-5' />;
     }
 
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
     return (
-        <div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
+        <div
+            className={`w-full flex justify-center rounded p-2 ${fontColor}`}
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+        >
             <div className='flex flex-1 flex-col gap-1'>
                 <Text variant='h1-course' className='leading-[75%]!'>
                     {course.department} {course.number} - {course.instructors[0].lastName}
                 </Text>
                 <Text variant='h3-course' className='leading-[75%]!'>
-                    {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
+                    {meeting &&
+                        `${meeting.getTimeString({ separator: '–', capitalize: true })}${
                             meeting.location ? ` – ${meeting.location.building}` : ''
                         }`}
                 </Text>
             </div>
             {rightIcon && (
-                <div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
+                <div
+                    className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                >
                     {rightIcon}
                 </div>
             )}

src/views/components/common/List/List.tsx

@@ -135,8 +135,7 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
                         <div
                             {...provided.droppableProps}
                             ref={provided.innerRef}
-                            style={{ width: `${listWidth}px` }}
+                            style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
-                            className=''
                         >
                             {items.map((item, index) => (
                                 <Draggable key={item.id} draggableId={item.id} index={index}>
@@ -150,7 +149,9 @@ const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight,
                                                 marginBottom: `${gap}px`,
                                             }}
                                         >
-                                            {React.cloneElement(item.content, { dragHandleProps: draggableProvided.dragHandleProps })}
+                                            {React.cloneElement(item.content, {
+                                                dragHandleProps: draggableProvided.dragHandleProps,
+                                            })}
                                         </div>
                                     )}
                                 </Draggable>