Create modal component stories

2025-11-30 17:47:10 +01:00
parent 66696251c7
commit c2d64ed341
1 changed files with 49 additions and 0 deletions
@@ -0,0 +1,49 @@
+import Modal from "../components/ui/modal/modal.jsx";
+import Button from "../components/ui/button/button.jsx";
+import { useState } from "react";
+
+export default {
+    title: 'UI/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Variable qui gère si la modal est ouverte ou fermée.',
+        },
+        children: {
+            control: Object,
+            description: 'Contenu de la modal.',
+        },
+        title: {
+            control: 'text',
+            description: 'Titre de la modal',
+        },
+        onClose: {
+            action: 'changed',
+            description: 'Fonction appelée pour fermer la modal.',
+        },
+    },
+};
+
+const Template = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div>
+            <Button onClick={() => setIsOpen(true)}>Ouvrir</Button>
+            <Modal {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+                {args.children}
+            </Modal>
+        </div>
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    title: "Hello",
+    children: <p>Lorem Ipsum...</p>,
+};