feat: update dialog component to headlessui (#159)

src/stories/injected/CourseCatalogInjectedPopup.stories.tsx

@@ -3,6 +3,7 @@ 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';
 
@@ -10,6 +11,7 @@ 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;