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

@@ -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>

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>