From f14ffb9e442d7d86afe1d594fbd204faab5fb700 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Mon, 21 Aug 2023 06:58:26 -0300
Subject: [PATCH] chore: add Dialog component in storybook (#10822)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../ui/components/dialog/dialog.stories.mdx   | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 packages/ui/components/dialog/dialog.stories.mdx

diff --git a/packages/ui/components/dialog/dialog.stories.mdx b/packages/ui/components/dialog/dialog.stories.mdx
new file mode 100644
index 0000000000..e06fe3e75c
--- /dev/null
+++ b/packages/ui/components/dialog/dialog.stories.mdx
@@ -0,0 +1,114 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, CustomArgsTable } from "@calcom/storybook/components";
+
+import { Dialog, DialogContent, DialogFooter, DialogClose, DialogHeader } from "./Dialog";
+
+<Meta title="UI/Dialog" component={Dialog} />
+
+<Title title="Dialog" suffix="Brief" subtitle="Version 1.0 — Last Update: 18 Aug 2023" />
+
+## Definition
+
+The `Dialog` component provides a flexible way to create dialogs in your application.
+
+## Structure
+
+The `Dialog` component is composed of the following components:
+
+- `Dialog`: The main component that wraps the entire dialog. It manages the dialog's open and close states.
+
+- `DialogContent`: Represents the content of the dialog. It can have different sizes, types, and an optional icon.
+
+- `DialogHeader`: Renders the header of the dialog, including the title and subtitle.
+
+- `DialogFooter`: Renders the footer of the dialog, which can contain action buttons.
+
+- `DialogClose`: Renders a close button for the dialog.
+
+## Components Arguments
+
+### Dialog
+
+<CustomArgsTable of={Dialog} />
+
+### DialogContent
+
+<CustomArgsTable of={DialogContent} />
+
+### DialogHeader
+
+<CustomArgsTable of={DialogHeader} />
+
+### DialogFooter
+
+<CustomArgsTable of={DialogFooter} />
+
+### DialogClose
+
+<CustomArgsTable of={DialogClose} />
+
+## Dialog Story
+
+<Canvas>
+  <Story
+    name="Dialog"
+    args={{
+      title: "Example Dialog",
+      description: "Example Dialog Description",
+      type: "creation",
+      open: true,
+      showDivider: false,
+      disabled: false,
+      color: "minimal",
+    }}
+    argTypes={{
+      title: {
+        control: "text",
+      },
+      description: {
+        control: "text",
+      },
+      type: {
+        control: {
+          type: "select",
+          options: ["creation", "confirmation"],
+        },
+      },
+      open: {
+        control: "boolean",
+      },
+      showDivider: {
+        control: "boolean",
+      },
+      disabled: {
+        control: "boolean",
+      },
+      color: {
+        control: {
+          type: "select",
+          options: ["minimal", "primary", "secondary", "emphasis"],
+        },
+      },
+      onClick: { action: "clicked" },
+    }}>
+    {({ title, description, type, open, showDivider, disabled, color, onClick }) => (
+      <Dialog title="Default" open={open}>
+        <DialogContent type={type}>
+          <DialogHeader title={title} subtitle={description} />
+          <DialogFooter showDivider={showDivider}>
+            <DialogClose
+              disabled={disabled}
+              color={color}
+              onClick={() => {
+                const newPath = "?path=/story/ui-dialog--dialog&args=open:false";
+                window.open(newPath, "_self");
+                onClick();
+              }}
+            />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )}
+  </Story>
+</Canvas>