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

2024-02-17 14:32:34 -06:00
parent a46526fa40 71d8ac7486
commit 9ce69c2f2e
11 changed files with 211 additions and 115 deletions
--- a/src/shared/util/colors.ts
+++ b/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,
-        secondaryColor: theme.colors[colorway][800] as string,
+        primaryColor: theme.colors[colorway][index] as string,
+        secondaryColor: theme.colors[colorway][index + offset] as string,
    };
 }
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/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 { 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';
+import { exampleCourse } from './PopupCourseBlock.stories';

 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 = {
-    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.WAITLISTED,
-            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
-            isReserved: false,
-            url: '',
-            flags: [],
-            schedule: new CourseSchedule({
-                meetings: [
-                    new CourseMeeting({
-                        days: [DAY_MAP.MON, DAY_MAP.WED, DAY_MAP.FRI],
-                        startTime: 480,
-                        endTime: 570,
-                        location: {
-                            building: 'UTC',
-                            room: '123',
-                        },
-                    }),
-                ],
-            }),
-            instructionMode: 'In Person',
-            semester: {
-                year: 2024,
-                season: 'Spring',
-            },
-        }),
-        meetingIdx: 0,
-        color: 'red',
-    },
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: props => (
+        <div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
+                colors={getCourseColors('green', 500)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+                colors={getCourseColors('teal', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                colors={getCourseColors('indigo', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                colors={getCourseColors('red', 500)}
+            />
+        </div>
+    ),
 };
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -1,19 +1,23 @@
-// Calendar.stories.tsx
-import React from 'react';
-import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';

 const meta = {
-  title: 'Components/Common/Calendar',
-  component: Calendar,
+    title: 'Components/Common/CalendarGrid',
+    component: CalendarGrid,
    parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
        layout: 'centered',
+    },
    tags: ['autodocs'],
-  }
-} satisfies Meta<typeof Calendar>;
-
+    argTypes: {
+        saturdayClass: { control: 'boolean' },
+    },
+} satisfies Meta<typeof CalendarGrid>;
 export default meta;
+
 type Story = StoryObj<typeof meta>;

-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        saturdayClass: true,
+    },
+};
--- a/src/stories/components/CalendarHeader.stories.tsx
+++ b/src/stories/components/CalendarHeader.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+
+const meta = {
+    title: 'Components/CalendarHeader',
+    component: CalendarHeader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
--- a/src/stories/components/PopupCourseBlock.stories.tsx
+++ b/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} />
            ))}
--- a/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
+++ b/src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx
@@ -1,6 +1,8 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import clsx from 'clsx';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import { CourseColors, pickFontColor } from 'src/shared/util/colors';
 import ClosedIcon from '~icons/material-symbols/lock';
 import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
@@ -11,11 +13,14 @@ export interface CalendarCourseBlockProps {
    course: Course;
    /* index into course meeting array to display */
    meetingIdx?: number;
-    /** The background color for the course. */
-    color: string;
+    colors: CourseColors;
 }

-const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
+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 +31,40 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
        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='flex flex-1 flex-col gap-1'>
-                <Text variant='h1-course' className='leading-[75%]!'>
+        <div
+            className={`w-full flex justify-center rounded p-2 ${fontColor}`}
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+        >
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: meeting,
+                    })}
+                >
                    {course.department} {course.number} - {course.instructors[0].lastName}
                </Text>
-                <Text variant='h3-course' className='leading-[75%]!'>
+                {meeting && (
+                    <Text variant='h3-course' className='-mb-0.5'>
                        {`${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>
            )}
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import { Chip } from '../Chip/Chip';

 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -22,15 +23,15 @@ for (let i = 0; i < 13; i++) {
 }

 interface Props {
-    CourseMeetingBlocks: CourseMeeting[];
+    courseCells: any[];
+    saturdayClass: boolean;
 }

 /**
 * Grid of CalendarGridCell components forming the user's course schedule calendar view
 * @param props
 */
-export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>): JSX.Element {
-
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
    return (
        <div className={styles.calendar}>
            <div className={styles.dayLabelContainer} />
@@ -54,16 +55,22 @@ export function Calendar({ courseMeetingBlocks }: React.PropsWithChildren<Props>
                            {day}
                        </div>
                    ))}
-                    {grid.map((row, rowIndex) => row)}
+                    {grid.map(row => row)}
                </div>
            </div>
-            {courseMeetingBlocks.map((block: CourseMeeting, index: number) => (
-                <div key={index}>
-                    {block}
+            {/* courseCells.map((Block: typeof CalendarCourseCell) => (
+                <div
+                    key={`${Block}`}
+                    style={{
+                        gridColumn: `1`,
+                        gridRow: `1`,
+                    }}
+                >
+                    <Chip label='test' />
                </div>
-            ))}
+                ))  */}
        </div>
    );
-};
+}

-export default Calendar;
+export default CalendarGrid;
--- a/src/views/components/common/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/common/CalendarHeader/CalenderHeader.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Status } from '@shared/types/Course';
+import Divider from '../Divider/Divider';
+import { Button } from '../Button/Button';
+import Text from '../Text/Text';
+import MenuIcon from '~icons/material-symbols/menu';
+import LogoIcon from '~icons/material-symbols/add-circle-outline';
+import UndoIcon from '~icons/material-symbols/undo';
+import RedoIcon from '~icons/material-symbols/redo';
+import SettingsIcon from '~icons/material-symbols/settings';
+import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import CourseStatus from '../CourseStatus/CourseStatus';
+
+const CalendarHeader = () => (
+    <div
+        style={{
+            display: 'flex',
+            minWidth: '672px',
+            minHeight: '79px',
+            padding: '15px 0px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            alignContent: 'center',
+            rowGap: '10px',
+            alignSelf: 'stretch',
+            flexWrap: 'wrap',
+        }}
+    >
+        <Button variant='single' icon={MenuIcon} color='ut-gray' />
+
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <LogoIcon style={{ marginRight: '5px' }} />
+            <Text>Your Logo Text</Text>
+        </div>
+
+        <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+
+        <CourseStatus size='small' status={Status.WAITLISTED} />
+        <CourseStatus size='small' status={Status.CLOSED} />
+        <CourseStatus size='small' status={Status.CANCELLED} />
+
+        <div style={{ display: 'flex' }}>
+            <Button variant='outline' icon={UndoIcon} color='ut-black' />
+            <Button variant='outline' icon={RedoIcon} color='ut-black' />
+        </div>
+
+        <Button variant='outline' icon={SettingsIcon} color='ut-black' />
+
+        <Divider type='solid' />
+    </div>
+);
+
+export default CalendarHeader;
--- a/src/views/components/common/List/List.tsx
+++ b/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` }}
-                            className=''
+                            style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
                        >
                            {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>
--- a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
 import { Course, Status } from '@shared/types/Course';
+import { CourseColors, pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
-import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import clsx from 'clsx';
+import React from 'react';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 import Text from '../Text/Text';

@@ -21,7 +21,12 @@ export interface PopupCourseBlockProps {
 *
 * @param props PopupCourseBlockProps
 */
-export default function PopupCourseBlock({ className, course, colors, dragHandleProps }: PopupCourseBlockProps): JSX.Element {
+export default function PopupCourseBlock({
+    className,
+    course,
+    colors,
+    dragHandleProps,
+}: PopupCourseBlockProps): JSX.Element {
    // whiteText based on secondaryColor
    const fontColor = pickFontColor(colors.primaryColor);

@@ -41,10 +46,7 @@ export default function PopupCourseBlock({ className, course, colors, dragHandle
            >
                <DragIndicatorIcon className='h-6 w-6 text-white' />
            </div>
-            <Text
-                className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
-                variant='h1-course'
-            >
+            <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
                <span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
                {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
            </Text>
--- a/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
+++ b/src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx
@@ -15,27 +15,19 @@ export interface ScheduleTotalHoursAndCoursesProps {
 *
 * @param props ScheduleTotalHoursAndCoursesProps
 */
-export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
+export default function ScheduleTotalHoursAndCourses({
+    scheduleName,
+    totalHours,
+    totalCourses,
+}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
    return (
-        <div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
-            <Text
-                className="text-[#BF5700]"
-                variant='h1'
-                as='span'
-            >
+        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+            <Text className='text-[#BF5700]' variant='h1' as='span'>
                {`${scheduleName}: `}
            </Text>
-            <Text
-                variant='h3'
-                as='div'
-                className="flex flex-row items-center gap-2 text-[#1A2024]"
-            >
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
                {`${totalHours} HOURS`}
-                <Text
-                    variant='h4'
-                    as='span'
-                    className="text-[#333F48]"
-                >
+                <Text variant='h4' as='span' className='text-[#333F48]'>
                    {`${totalCourses} courses`}
                </Text>
            </Text>