Merge remote-tracking branch 'origin/hackathon' into feat-conflict-row

README.md

@@ -2,17 +2,29 @@
 
 ## Built Using
 
-- React 18
-- TypeScript
-- Vite 5
-- ESLint
-- Prettier
-- Semantic-Release
-- Custom Messaging & Storage Wrappers
+-   React 18
+-   TypeScript
+-   Vite 5
+-   ESLint
+-   Prettier
+-   Semantic-Release
+-   Custom Messaging & Storage Wrappers
 
 ## Getting Started
 
 1. Clone this repo
 2. Run `pnpm install` to install and patch all the required dependencies
-3. Run `pnpm run dev` to start the development server
-4. Run `pnpm build` to build the extension for production
+
+-   If you want to run the development build:
+
+    -   Run `pnpm run dev`
+
+-   If you want to build the extension for production:
+
+    -   Run `pnpm build`
+
+You may have to rename the `__uno.css.js` to `uno.css.js` in dist
+
+Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
+
+Navigate to the 'dist' folder and click 'select' to import the extension

src/stories/components/CalendarHeader.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
 
 const meta = {
-    title: 'Components/CalendarHeader',
+    title: 'Components/Common/CalendarHeader',
     component: CalendarHeader,
     parameters: {
         layout: 'centered',

src/views/components/common/CalendarHeader/CalenderHeader.tsx

@@ -12,40 +12,41 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 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 className='min-h-79px min-w-672px flex px-0 py-15'>
+        <div className='flex flex-row gap-20'>
+            <div className='flex gap-10'>
+                <div className='flex gap-1'>
+                    <Button variant='single' icon={MenuIcon} color='ut-gray' />
+                    <div className='flex items-center'>
+                        <LogoIcon style={{ marginRight: '5px' }} />
+                        <div className='flex flex-col gap-1 whitespace-nowrap'>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
+                                UT Registration
+                            </Text>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
+                                Plus
+                            </Text>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+                    DATA UPDATED ON: 12:00 AM 02/01/2024
+                </div>
+            </div>
+            <div className='flex flex-row items-center space-x-8'>
+                <div className='flex flex-row space-x-4'>
+                    <CourseStatus size='small' status={Status.WAITLISTED} />
+                    <CourseStatus size='small' status={Status.CLOSED} />
+                    <CourseStatus size='small' status={Status.CANCELLED} />
+                </div>
+                <div className='flex flex-row'>
+                    <Button variant='single' icon={UndoIcon} color='ut-black' />
+                    <Button variant='single' icon={RedoIcon} color='ut-black' />
+                    <Button variant='single' icon={SettingsIcon} color='ut-black' />
+                </div>
+            </div>
         </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>
 );

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -21,7 +21,7 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+        <div className='min-w-64 flex whitespace-nowrap	content-center items-baseline gap-2 uppercase'>
             <Text className='text-[#BF5700]' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -19,7 +19,7 @@ interface CalendarGridPoint {
  * Return type of useFlattenedCourseSchedule
  */
 export interface CalendarGridCourse {
-    calendarGridPoint?: CalendarGridPoint;
+    calendarGridPoint: CalendarGridPoint;
     componentProps: CalendarCourseCellProps;
 }
 
@@ -33,55 +33,70 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
     const [activeSchedule] = useSchedules();
     const { courses } = activeSchedule;
 
-    return courses.flatMap(course => {
-        const {
-            status,
-            department,
-            instructors,
-            schedule: { meetings },
-        } = course;
-        const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
+    return courses
+        .flatMap(course => {
+            const {
+                status,
+                department,
+                instructors,
+                schedule: { meetings },
+            } = course;
+            const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
 
-        if (meetings.length === 0) {
-            // asynch, online course
-            return [
-                {
+            if (meetings.length === 0) {
+                // asynch, online course
+                return [
+                    {
+                        calendarGridPoint: {
+                            dayIndex: 0,
+                            startIndex: 0,
+                            endIndex: 0,
+                        },
+                        componentProps: {
+                            courseDeptAndInstr,
+                            status,
+                            colors: {
+                                // TODO: figure out colors - these are defaults
+                                primaryColor: 'ut-gray',
+                                secondaryColor: 'ut-gray',
+                            },
+                        },
+                    },
+                ];
+            }
+
+            // in-person
+            return meetings.flatMap(meeting => {
+                const { days, startTime, endTime, location } = meeting;
+                const time = meeting.getTimeString({ separator: '-', capitalize: true });
+                const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
+
+                return days.map(d => ({
+                    calendarGridPoint: {
+                        dayIndex: dayToNumber[d],
+                        startIndex: convertMinutesToIndex(startTime),
+                        endIndex: convertMinutesToIndex(endTime),
+                    },
                     componentProps: {
                         courseDeptAndInstr,
+                        timeAndLocation,
                         status,
                         colors: {
                             // TODO: figure out colors - these are defaults
-                            primaryColor: 'ut-gray',
-                            secondaryColor: 'ut-gray',
+                            primaryColor: 'ut-orange',
+                            secondaryColor: 'ut-orange',
                         },
                     },
-                },
-            ];
-        }
-
-        // in-person
-        return meetings.flatMap(meeting => {
-            const { days, startTime, endTime, location } = meeting;
-            const time = meeting.getTimeString({ separator: '-', capitalize: true });
-            const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
-
-            return days.map(d => ({
-                calendarGridPoint: {
-                    dayIndex: dayToNumber[d],
-                    startIndex: convertMinutesToIndex(startTime),
-                    endIndex: convertMinutesToIndex(endTime),
-                },
-                componentProps: {
-                    courseDeptAndInstr,
-                    timeAndLocation,
-                    status,
-                    colors: {
-                        // TODO: figure out colors - these are defaults
-                        primaryColor: 'ut-orange',
-                        secondaryColor: 'ut-orange',
-                    },
-                },
-            }));
+                }));
+            });
+        })
+        .sort((a: CalendarGridCourse, b: CalendarGridCourse) => {
+            if (a.calendarGridPoint.dayIndex !== b.calendarGridPoint.dayIndex) {
+                return a.calendarGridPoint.dayIndex - b.calendarGridPoint.dayIndex;
+            }
+            if (a.calendarGridPoint.startIndex !== b.calendarGridPoint.startIndex) {
+                return a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex;
+            }
+            return a.calendarGridPoint.endIndex - b.calendarGridPoint.endIndex;
         });
-    });
 }