refactor: match dropdown to figma & fix issues (#142)

src/stories/components/Dropdown.stories.tsx

@@ -1,144 +1,78 @@
-import { Course, Status } from '@shared/types/Course';
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-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 Dropdown from '@views/components/common/Dropdown/Dropdown';
+import List from '@views/components/common/List/List';
+import ScheduleDropdown from '@views/components/common/ScheduleDropdown/ScheduleDropdown';
 import ScheduleListItem from '@views/components/common/ScheduleListItem/ScheduleListItem';
+import useSchedules, { switchSchedule } from '@views/hooks/useSchedules';
 import type { Serialized } from 'chrome-extension-toolkit';
 import React from 'react';
 
-const meta: Meta<typeof Dropdown> = {
+import { exampleSchedule } from '../injected/mocked';
+
+const schedules: UserSchedule[] = new Array(10).fill(exampleSchedule).map(
+    (schedule: UserSchedule, index) =>
+        new UserSchedule({
+            ...schedule,
+            name: `Schedule ${index + 1}`,
+        })
+);
+
+UserScheduleStore.set(
+    'schedules',
+    schedules.reduce((acc, schedule) => {
+        acc.push(schedule);
+        return acc;
+    }, [] as Serialized<UserSchedule>[])
+);
+
+UserScheduleStore.set('activeIndex', 0);
+
+const meta: Meta<typeof ScheduleDropdown> = {
     title: 'Components/Common/Dropdown',
-    component: Dropdown,
+    component: ScheduleDropdown,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
     argTypes: {
-        dummySchedules: { control: 'object' },
+        defaultOpen: {
-        dummyActiveIndex: { control: 'number' },
+            control: {
-        scheduleComponents: { control: 'object' },
+                type: 'boolean',
+            },
+        },
+        children: {
+            control: {
+                type: 'node',
+            },
+        },
     },
     render: (args: any) => (
         <div className='w-80'>
-            <Dropdown {...args} />
+            <ScheduleDropdown {...args}>
+                <List
+                    draggableElements={schedules.map((schedule, index) => {
+                        const [activeSchedule] = useSchedules();
+                        return (
+                            <ScheduleListItem
+                                active={activeSchedule?.name === schedule.name}
+                                name={schedule.name}
+                                onClick={() => {
+                                    switchSchedule(schedule.name);
+                                }}
+                            />
+                        );
+                    })}
+                    gap={10}
+                />
+            </ScheduleDropdown>
         </div>
     ),
-} satisfies Meta<typeof Dropdown>;
+} satisfies Meta<typeof ScheduleDropdown>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const schedules = [
-    new UserSchedule({
-        courses: [
-            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.M, DAY_MAP.W, DAY_MAP.F],
-                            startTime: 480,
-                            endTime: 570,
-                            location: {
-                                building: 'UTC',
-                                room: '123',
-                            },
-                        }),
-                    ],
-                }),
-                instructionMode: 'In Person',
-                semester: {
-                    year: 2024,
-                    season: 'Fall',
-                },
-            }),
-        ],
-        name: 'Main Schedule',
-        hours: 0,
-    } as Serialized<UserSchedule>),
-    new UserSchedule({
-        courses: [
-            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.M, DAY_MAP.W, DAY_MAP.F],
-                            startTime: 480,
-                            endTime: 570,
-                            location: {
-                                building: 'UTC',
-                                room: '123',
-                            },
-                        }),
-                    ],
-                }),
-                instructionMode: 'In Person',
-                semester: {
-                    year: 2024,
-                    season: 'Fall',
-                },
-            }),
-            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.M, DAY_MAP.W, DAY_MAP.F],
-                            startTime: 480,
-                            endTime: 570,
-                            location: {
-                                building: 'UTC',
-                                room: '123',
-                            },
-                        }),
-                    ],
-                }),
-                instructionMode: 'In Person',
-                semester: {
-                    year: 2024,
-                    season: 'Fall',
-                },
-            }),
-        ],
-        name: 'Backup #3',
-        hours: 0,
-    } as Serialized<UserSchedule>),
-];
-
 export const Hidden: Story = {
     parameters: {
         design: {
@@ -148,10 +82,12 @@ export const Hidden: Story = {
     },
 
     args: {
-        dummySchedules: schedules,
+        defaultOpen: false,
-        dummyActiveIndex: 0,
+    },
-        scheduleComponents: schedules.map((schedule, index) => (
+};
-            <ScheduleListItem active={index === 0} name={schedule.name} />
+
-        )),
+export const Visible: Story = {
+    args: {
+        defaultOpen: true,
     },
 };

src/views/components/common/Dropdown/Dropdown.tsx

@@ -1,106 +0,0 @@
-import { Disclosure, Transition } from '@headlessui/react';
-import userScheduleHandler from '@pages/background/handler/userScheduleHandler';
-import type { UserSchedule } from '@shared/types/UserSchedule';
-import List from '@views/components/common/List/List';
-import Text from '@views/components/common/Text/Text';
-import React from 'react';
-
-import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
-import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
-
-/**
- * Props for the Dropdown component.
- */
-export type Props = {
-    style?: React.CSSProperties;
-    // Dummy value solely for storybook
-    dummySchedules?: UserSchedule[];
-    dummyActiveIndex?: number;
-    dummyActiveSchedule?: UserSchedule;
-    scheduleComponents?: any[];
-};
-
-/**
- * This is a reusable dropdown component that can be used to toggle the visiblity of information
- */
-export default function Dropdown(props: Props) {
-    // Expand/Hide state for dropdown
-    let [expanded, toggle] = React.useState(false);
-    let [activeScheduleIndex, select] = React.useState(props.dummyActiveIndex);
-    let [activeSchedule, selectFrom] = React.useState(props.dummyActiveSchedule);
-    let [scheduleComponents, setScheduleComponents] = React.useState(props.scheduleComponents);
-
-    const schedules = props.dummySchedules;
-    if (schedules == null) {
-        // TODO
-        // if no dummy values passed in
-        // useSchedules hook here
-    }
-
-    const toggleSwitch = () => {
-        toggle(!expanded);
-    };
-
-    // TODO
-    // WIP function to swap schedules. Prefer to use the hook when in production
-    const switchSchedule = (index: number) => {
-        const scheduleToSwitchTo = schedules[index];
-
-        select(index);
-        selectFrom(scheduleToSwitchTo);
-        if (scheduleToSwitchTo != null && scheduleToSwitchTo.name != null) {
-            userScheduleHandler.switchSchedule({
-                data: {
-                    scheduleName: scheduleToSwitchTo.name,
-                },
-                sender: null,
-                sendResponse: null,
-            });
-        }
-    };
-
-    return (
-        <div
-            style={{ ...props.style, height: expanded && schedules ? `${40 * schedules.length + 54}px` : '72px' }}
-            className='items-left absolute w-72 flex flex-col border'
-        >
-            <Disclosure>
-                <Disclosure.Button>
-                    <div className='flex items-center border-none bg-white p-3 text-left'>
-                        <div className='flex-1'>
-                            <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
-                                MAIN SCHEDULE:
-                            </Text>
-                            <div>
-                                <Text variant='h3' className='text-theme-black leading-[75%]!'>
-                                    {activeSchedule ? activeSchedule.hours : 0} HOURS
-                                </Text>
-                                <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
-                                    {activeSchedule ? activeSchedule.courses.length : 0} Courses
-                                </Text>
-                            </div>
-                        </div>
-                        <Text className='text-2xl text-ut-burntorange font-normal'>
-                            {expanded ? <DropdownArrowDown /> : <DropdownArrowUp />}
-                        </Text>
-                    </div>
-                </Disclosure.Button>
-
-                <Transition
-                    enter='transition duration-100 ease-out'
-                    enterFrom='transform scale-95 opacity-0'
-                    enterTo='transform scale-100 opacity-100'
-                    leave='transition duration-75 ease-out'
-                    leaveFrom='transform scale-100 opacity-100'
-                    leaveTo='transform scale-95 opacity-0'
-                    beforeEnter={toggleSwitch}
-                    afterLeave={toggleSwitch}
-                >
-                    <Disclosure.Panel>
-                        <List draggableElements={scheduleComponents} gap={10} />
-                    </Disclosure.Panel>
-                </Transition>
-            </Disclosure>
-        </div>
-    );
-}

src/views/components/common/ScheduleDropdown/ScheduleDropdown.tsx

@@ -0,0 +1,61 @@
+import { Disclosure, Transition } from '@headlessui/react';
+import Text from '@views/components/common/Text/Text';
+import useSchedules from '@views/hooks/useSchedules';
+import React from 'react';
+
+import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
+import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
+
+/**
+ * Props for the Dropdown component.
+ */
+export type Props = {
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+};
+
+/**
+ * This is a reusable dropdown component that can be used to toggle the visiblity of information
+ */
+export default function ScheduleDropdown(props: Props) {
+    const [activeSchedule] = useSchedules();
+
+    return (
+        <div className='border border-ut-offwhite rounded border-solid bg-white'>
+            <Disclosure defaultOpen={props.defaultOpen}>
+                {({ open }) => (
+                    <>
+                        <Disclosure.Button className='w-full flex items-center border-none bg-transparent px-3.5 py-2.5 text-left'>
+                            <div className='flex-1'>
+                                <Text as='div' variant='h4' className='mb-1 w-100% text-ut-burntorange'>
+                                    {(activeSchedule ? activeSchedule.name : 'Schedule').toUpperCase()}:
+                                </Text>
+                                <p className='-mb-0.5'>
+                                    <Text variant='h3' className='text-theme-black leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.hours : 0} HOURS
+                                    </Text>
+                                    <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
+                                        {activeSchedule ? activeSchedule.courses.length : 0} Courses
+                                    </Text>
+                                </p>
+                            </div>
+                            <Text className='text-2xl text-ut-burntorange font-normal'>
+                                {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
+                            </Text>
+                        </Disclosure.Button>
+
+                        <Transition
+                            className='contain-paint max-h-55 origin-top overflow-auto transition-all duration-400 ease-out-expo'
+                            enterFrom='transform scale-98 opacity-0 max-h-0!'
+                            enterTo='transform scale-100 opacity-100 max-h-55'
+                            leaveFrom='transform scale-100 opacity-100 max-h-55'
+                            leaveTo='transform scale-98 opacity-0 max-h-0!'
+                        >
+                            <Disclosure.Panel className='px-3.5 pb-2.5 pt-2'>{props.children}</Disclosure.Panel>
+                        </Transition>
+                    </>
+                )}
+            </Disclosure>
+        </div>
+    );
+}

src/views/components/common/ScheduleListItem/ScheduleListItem.tsx

@@ -1,6 +1,7 @@
 import Text from '@views/components/common/Text/Text';
+import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 
@@ -11,34 +12,35 @@ export type Props = {
     style?: React.CSSProperties;
     active?: boolean;
     name: string;
-    dragHandleProps?: any;
+    dragHandleProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
-    onClick?: (index) => void;
+    onClick?: React.DOMAttributes<HTMLDivElement>['onClick'];
 };
 
 /**
  * This is a reusable dropdown component that can be used to toggle the visiblity of information
  */
-export default function ScheduleListItem({ style, active, name, dragHandleProps, onClick }: Props): JSX.Element {
+export default function ScheduleListItem({ style, name, dragHandleProps, onClick }: Props): JSX.Element {
+    const [activeSchedule] = useSchedules();
+
+    const isActive = useMemo(() => activeSchedule?.name === name, [activeSchedule, name]);
+
     return (
-        <div style={{ ...style }} className='items-center'>
+        <div style={{ ...style }} className='items-center rounded bg-white'>
             <li className='w-100% flex cursor-pointer items-center self-stretch justify-left text-ut-burntorange'>
-                <div className='group flex justify-center'>
+                <div className='flex justify-center'>
                     <div
                         className='flex cursor-move items-center self-stretch rounded rounded-r-0'
                         {...dragHandleProps}
                     >
                         <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
                     </div>
-                    <div className='inline-flex items-center justify-center gap-1.5'>
+                    <div className='group inline-flex items-center justify-center gap-1.5' onClick={onClick}>
-                        <div
+                        <div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
-                            className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'
-                            onClick={onClick}
-                        >
                             <div
                                 className={clsx(
-                                    'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
+                                    'bg-current h-2.9 w-2.9 rounded-full transition tansform scale-100 ease-out-expo duration-250',
                                     {
-                                        'scale-0! opacity-0 ease-in-out! duration-200!': !active,
+                                        'scale-0! opacity-0 ease-in-out! duration-200!': !isActive,
                                     }
                                 )}
                             />