From 990441295c2fb8ad3fab357e9eb21e4e05360753 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Fri, 25 Aug 2023 20:06:55 +0800
Subject: [PATCH] chore: add ImageUploader in storybook (CALCOM-10760) (#10865)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
---
 apps/storybook/components/VariantsTable.tsx   |  3 +-
 .../image-uploader/imageUploader.stories.mdx  | 57 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/components/image-uploader/imageUploader.stories.mdx

diff --git a/apps/storybook/components/VariantsTable.tsx b/apps/storybook/components/VariantsTable.tsx
index 5ba017c608..1120d4b8ba 100644
--- a/apps/storybook/components/VariantsTable.tsx
+++ b/apps/storybook/components/VariantsTable.tsx
@@ -18,6 +18,7 @@ export function VariantsTable({
   const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
   return (
     <div
+      id="light-variant"
       className={classNames(
         isDark &&
           "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
@@ -43,7 +44,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark" className="dark">
+        <div id="dark-variant" data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>
diff --git a/packages/ui/components/image-uploader/imageUploader.stories.mdx b/packages/ui/components/image-uploader/imageUploader.stories.mdx
new file mode 100644
index 0000000000..9260a70b9b
--- /dev/null
+++ b/packages/ui/components/image-uploader/imageUploader.stories.mdx
@@ -0,0 +1,57 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, VariantRow, VariantsTable, CustomArgsTable } from "@calcom/storybook/components";
+
+import ImageUploader from "./ImageUploader";
+
+<Meta title="UI/ImageUploader" component={ImageUploader} />
+
+<Title title="ImageUploader" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
+
+## Definitions
+
+`ImageUploader` is used to upload images of all image types
+
+## Structure
+
+Below are the props for `Image uploader`
+
+<CustomArgsTable of={ImageUploader} />
+
+## ImageUploader Story
+
+<Canvas>
+  <Story
+    name="ImageUploader"
+    play={({ canvasElement }) => {
+      const darkVariantContainer = canvasElement.querySelector("#dark-variant");
+      const imageUploaderElement = darkVariantContainer.querySelector("button");
+      imageUploaderElement?.addEventListener("click", () => {
+        setTimeout(() => {
+          document.querySelector('[role="dialog"]')?.classList.add("dark");
+        }, 1);
+      });
+    }}
+    args={{
+      id: "image-1",
+      buttonMsg: "upload",
+      target: "target",
+      handleAvatarChange: (src) => {
+        console.debug(src);
+      },
+    }}>
+    {({ id, buttonMsg, handleAvatarChange, imageSrc, target }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <ImageUploader
+            id={id}
+            buttonMsg={buttonMsg}
+            handleAvatarChange={handleAvatarChange}
+            imageSrc={imageSrc}
+            target={target}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>