From 04f5a8767258cdeb0ca6d28ff7a3922a32e248fe Mon Sep 17 00:00:00 2001
From: MarcosPierasNL <pieras.marcos@gmail.com>
Date: Thu, 19 Sep 2024 11:53:17 +0200
Subject: [PATCH] feat: adds stories for layout components and adds panel
 folder

---
 apps/web/src/components/navbar/navbar.tsx     |  2 +-
 .../lib/components/layout/dialog.stories.tsx  | 42 +++++++++++++++++++
 .../lib/components/layout/panel.stories.tsx   | 27 ++++++++++++
 .../lib/components/layout/popover.stories.tsx |  2 +-
 .../UserManagementContent.tsx                 |  0
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 libs/shared/lib/components/layout/dialog.stories.tsx
 create mode 100644 libs/shared/lib/components/layout/panel.stories.tsx
 rename libs/shared/lib/components/{ => panels}/userManagementContent/UserManagementContent.tsx (100%)

diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index cd2a94c1c..3307e9dc8 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 000000000..bed70258b
--- /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 000000000..23a5eb1aa
--- /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 eabc813da..97ea825e7 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
-- 
GitLab