diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx index cd2a94c1cde7b304a5f196b1641110ad252d245f..3307e9dc846c12f362f547168998eba70d172539 100644 --- a/apps/web/src/components/navbar/navbar.tsx +++ b/apps/web/src/components/navbar/navbar.tsx @@ -16,7 +16,7 @@ import GpLogo from './gp-logo'; import { Popover, PopoverContent, PopoverTrigger } from '@graphpolaris/shared/lib/components/layout/Popover'; import { useDispatch } from 'react-redux'; import { Dialog, DialogContent, DialogTrigger } from '@graphpolaris/shared/lib/components/layout/Dialog'; -import { UserManagementContent } from '@graphpolaris/shared/lib/components/userManagementContent/UserManagementContent'; +import { UserManagementContent } from '@graphpolaris/shared/lib/components/panels/userManagementContent/UserManagementContent'; import { addInfo } from '@graphpolaris/shared/lib/data-access/store/configSlice'; export const Navbar = () => { diff --git a/libs/shared/lib/components/layout/dialog.stories.tsx b/libs/shared/lib/components/layout/dialog.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..bed70258b436ca42a04f02a94b78f9bf31e6eb47 --- /dev/null +++ b/libs/shared/lib/components/layout/dialog.stories.tsx @@ -0,0 +1,42 @@ +// Dialog.stories.tsx +/* eslint-disable react-hooks/rules-of-hooks */ + +import React, { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Dialog, DialogTrigger, DialogContent, DialogHeading, DialogDescription, DialogClose } from './Dialog'; + +const metaDialog: Meta<typeof Dialog> = { + component: Dialog, + title: 'Components/Layout/Dialog', +}; + +export default metaDialog; + +type Story = StoryObj<typeof Dialog>; + +export const mainStory: Story = { + render: (args) => { + const [isOpen, setIsOpen] = useState(false); + + const handleToggle = () => setIsOpen(!isOpen); + + return ( + <Dialog {...args} open={isOpen} onOpenChange={setIsOpen}> + <DialogTrigger asChild> + <button onClick={handleToggle} className="px-4 py-2 bg-secondary-200 text-white rounded"> + Open Dialog + </button> + </DialogTrigger> + <DialogContent> + <DialogHeading>Dialog Title</DialogHeading> + <DialogDescription>This is a description inside the dialog.</DialogDescription> + <DialogClose>Close</DialogClose> + </DialogContent> + </Dialog> + ); + }, + args: { + initialOpen: false, + onOpenChange: (open: boolean) => console.log(`Dialog is ${open ? 'open' : 'closed'}`), + }, +}; diff --git a/libs/shared/lib/components/layout/panel.stories.tsx b/libs/shared/lib/components/layout/panel.stories.tsx new file mode 100644 index 0000000000000000000000000000000000000000..23a5eb1aa5719e666cfdcef55ed57e5b394151cd --- /dev/null +++ b/libs/shared/lib/components/layout/panel.stories.tsx @@ -0,0 +1,27 @@ +// Panel.stories.tsx +/* eslint-disable react-hooks/rules-of-hooks */ + +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Panel } from './Panel'; + +const metaPanel: Meta<typeof Panel> = { + component: Panel, + title: 'Components/Layout/Panel', +}; + +export default metaPanel; + +type Story = StoryObj<typeof Panel>; + +export const mainStory: Story = { + render: (args) => ( + <Panel {...args}> + <p>This is the content inside the panel.</p> + </Panel> + ), + args: { + title: 'Panel Title', + tooltips: <span>Some tooltip</span>, + }, +}; diff --git a/libs/shared/lib/components/layout/popover.stories.tsx b/libs/shared/lib/components/layout/popover.stories.tsx index eabc813da8a8cf7aba7276f93d9d32e68d5b0e46..97ea825e7336aa3a03191e3734cac88c3be61ac3 100644 --- a/libs/shared/lib/components/layout/popover.stories.tsx +++ b/libs/shared/lib/components/layout/popover.stories.tsx @@ -7,7 +7,7 @@ import { Popover, PopoverTrigger, PopoverContent, PopoverHeading, PopoverDescrip import { Icon } from '../icon'; const metaPopover: Meta<typeof Popover> = { component: Popover, - title: 'Components/Popover', + title: 'Components/Layout/Popover', }; export default metaPopover; diff --git a/libs/shared/lib/components/userManagementContent/UserManagementContent.tsx b/libs/shared/lib/components/panels/userManagementContent/UserManagementContent.tsx similarity index 100% rename from libs/shared/lib/components/userManagementContent/UserManagementContent.tsx rename to libs/shared/lib/components/panels/userManagementContent/UserManagementContent.tsx