feat: update dialog component to headlessui (#159)

src/stories/injected/CourseCatalogInjectedPopup.stories.ts → src/stories/injected/CourseCatalogInjectedPopup.stories.tsx

@@ -3,13 +3,15 @@ import { Status } from '@shared/types/Course';
 import { UserSchedule } from '@shared/types/UserSchedule';
 import type { Meta, StoryObj } from '@storybook/react';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import React, { useState } from 'react';
 
 import { bevoCourse, bevoScheule, MikeScottCS314Course, MikeScottCS314Schedule } from './mocked';
 
 const meta = {
     title: 'Components/Injected/CourseCatalogInjectedPopup',
     component: CourseCatalogInjectedPopup,
     args: {
+        open: true,
         onClose: () => {},
     },
     argTypes: {
@@ -29,6 +31,12 @@ const meta = {
             },
         },
     },
+    render(args) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [isOpen, setIsOpen] = useState(args.open);
+
+        return <CourseCatalogInjectedPopup {...args} open={isOpen} onClose={() => setIsOpen(false)} />;
+    },
 } satisfies Meta<typeof CourseCatalogInjectedPopup>;
 
 export default meta;

src/views/components/CourseCatalogMain.tsx

@@ -24,11 +24,18 @@ interface Props {
 export default function CourseCatalogMain({ support }: Props): JSX.Element {
     const [rows, setRows] = React.useState<ScrapedRow[]>([]);
     const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
+    const [showPopup, setShowPopup] = useState(false);
 
     useEffect(() => {
         populateSearchInputs();
     }, []);
 
+    useEffect(() => {
+        if (selectedCourse) {
+            setShowPopup(true);
+        }
+    }, [selectedCourse]);
+
     useEffect(() => {
         const tableRows = getCourseTableRows(document);
         const ccs = new CourseCatalogScraper(support);
@@ -75,13 +82,13 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
                         />
                     )
             )}
-            {selectedCourse && (
-                <CourseCatalogInjectedPopup
-                    course={selectedCourse}
-                    activeSchedule={activeSchedule}
-                    onClose={handleClearSelectedCourse}
-                />
-            )}
+            <CourseCatalogInjectedPopup
+                course={selectedCourse}
+                activeSchedule={activeSchedule}
+                show={showPopup}
+                onClose={() => setShowPopup(false)}
+                afterLeave={handleClearSelectedCourse}
+            />
             <AutoLoad addRows={addRows} />
         </ExtensionRoot>
     );

src/views/components/calendar/Calendar/Calendar.tsx

@@ -4,7 +4,6 @@ import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
 import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
 import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
-import TeamLinks from '@views/components/calendar/TeamLinks';
 import Divider from '@views/components/common/Divider/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
@@ -19,6 +18,7 @@ export default function Calendar(): JSX.Element {
     const calendarRef = useRef<HTMLDivElement>(null);
     const { courseCells, activeSchedule } = useFlattenedCourseSchedule();
     const [course, setCourse] = useState<Course | null>(null);
+    const [showPopup, setShowPopup] = useState(false);
     const [sidebarWidth, setSidebarWidth] = useState('20%');
     const [scale, setScale] = useState(1);
 
@@ -48,6 +48,10 @@ export default function Calendar(): JSX.Element {
         return () => window.removeEventListener('resize', adjustLayout);
     }, []);
 
+    useEffect(() => {
+        if (course) setShowPopup(true);
+    }, [course]);
+
     const calendarContainerStyle = {
         transform: `scale(${scale})`,
         transformOrigin: 'top left',
@@ -68,10 +72,6 @@ export default function Calendar(): JSX.Element {
                     <div className='mt-4'>
                         <ImportantLinks />
                     </div>
-                    <Divider orientation='horizontal' size='100%' />
-                    <div className='mt-4'>
-                        <TeamLinks />
-                    </div>
                 </div>
                 <div className='flex flex-grow flex-col' style={calendarContainerStyle} ref={calendarRef}>
                     <div className='flex-grow overflow-auto'>
@@ -80,13 +80,14 @@ export default function Calendar(): JSX.Element {
                     <CalendarBottomBar calendarRef={calendarRef} />
                 </div>
             </div>
-            {course ? (
-                <CourseCatalogInjectedPopup
-                    course={course}
-                    activeSchedule={activeSchedule}
-                    onClose={() => setCourse(null)}
-                />
-            ) : null}
+
+            <CourseCatalogInjectedPopup
+                course={course}
+                activeSchedule={activeSchedule}
+                onClose={() => setShowPopup(false)}
+                open={showPopup}
+                afterLeave={() => setCourse(null)}
+            />
         </div>
     );
 }

src/views/components/calendar/ImportantLinks.tsx

@@ -8,59 +8,54 @@ type Props = {
     className?: string;
 };
 
+interface LinkItem {
+    text: string;
+    url: string;
+}
+
+const links: LinkItem[] = [
+    {
+        text: "Summer '24 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/',
+    },
+    {
+        text: "Fall '24 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/',
+    },
+    {
+        text: 'Registration Info Sheet',
+        url: 'https://utdirect.utexas.edu/registrar/ris.WBX',
+    },
+    {
+        text: 'Register For Courses',
+        url: 'https://utdirect.utexas.edu/registration/chooseSemester.WBX',
+    },
+    {
+        text: 'Degree Audit',
+        url: 'https://utdirect.utexas.edu/apps/degree/audits/',
+    },
+];
+
 /**
  * The "Important Links" section of the calendar website
  * @returns
  */
 export default function ImportantLinks({ className }: Props): JSX.Element {
     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='flex items-center gap-0.5 text-ut-burntorange'
-                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='flex items-center gap-0.5 text-ut-burntorange'
-                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='flex items-center gap-0.5 text-ut-burntorange'
-                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='flex items-center gap-0.5 text-ut-burntorange'
-                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='flex items-center gap-0.5 text-ut-burntorange'
-                target='_blank'
-                rel='noreferrer'
-            >
-                <Text variant='p'>Degree Audit</Text>
-                <OutwardArrowIcon className='h-3 w-3' />
-            </a>
+            <Text variant='h3'>Useful Links</Text>
+            {links.map((link, index) => (
+                <a
+                    key={link.text}
+                    href={link.url}
+                    className='flex items-center gap-0.5 text-ut-burntorange'
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    <Text variant='p'>{link.text}</Text>
+                    <OutwardArrowIcon className='h-3 w-3' />
+                </a>
+            ))}
         </article>
     );
 }

src/views/components/common/Dialog/Dialog.tsx

@@ -0,0 +1,58 @@
+import type { TransitionRootProps } from '@headlessui/react';
+import { Dialog as HDialog, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import type { PropsWithChildren } from 'react';
+import React, { Fragment } from 'react';
+
+export interface _DialogProps {
+    className?: string;
+    title?: JSX.Element;
+    description?: JSX.Element;
+}
+
+export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog>, 'children'>;
+
+/**
+ * A reusable popup component that can be used to display content on the page
+ */
+export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Element {
+    const { children, className, open, onTransitionEnd, ...rest } = props;
+
+    return (
+        <Transition show={open} as={HDialog} {...rest}>
+            <Transition.Child
+                as={Fragment}
+                enter='transition duration-300 ease-out'
+                enterFrom='opacity-0'
+                enterTo='opacity-100'
+                leave='transition duration-150 ease-in delay-25'
+                leaveFrom='opacity-100'
+                leaveTo='opacity-0'
+            >
+                <div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
+            </Transition.Child>
+            <Transition.Child
+                as={Fragment}
+                enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
+                enterFrom='transform scale-95 opacity-0'
+                enterTo='transform scale-100 opacity-100'
+                leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
+                leaveFrom='transform scale-100 opacity-100'
+                leaveTo='transform scale-95 opacity-0'
+            >
+                <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                    <HDialog.Panel
+                        className={clsx(
+                            'z-99 max-h-[80vh] flex flex-col overflow-y-scroll rounded bg-white shadow-xl',
+                            className
+                        )}
+                    >
+                        {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
+                        {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
+                        {children}
+                    </HDialog.Panel>
+                </div>
+            </Transition.Child>
+        </Transition>
+    );
+}