add copy to clipboard

packages/opub-ui/src/components/ShareDialog/ShareDialog.stories.tsx

@@ -1,5 +1,6 @@
 import { ShareDialog } from "./ShareDialog";
 import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 
 /**
  * ShareDialog component can be used to share/download/embed an image.
@@ -12,32 +13,69 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const image = "https://opub-www.vercel.app/og.png";
+const alt = "visualisation";
+
 export const Default: Story = {
-  args: {
-    image: "https://opub-www.vercel.app/og.png",
-    alt: "visualisation",
-    title: "Share Visualization",
-    onDownload: () => {
-      download("https://opub-www.vercel.app/og.png", "test");
-    },
-  },
-};
+  render: (args) => {
+    const [blob, setBlob] = React.useState<Blob>();
 
-const download = (url: RequestInfo | URL, name: string) => {
-  if (!url) {
-    throw new Error("Resource URL not provided");
-  }
-  fetch(url)
-    .then((response) => response.blob())
-    .then((blob) => {
+    async function onOpen(image: RequestInfo | URL) {
+      fetch(image)
+        .then((response) => response.blob())
+        .then(async (blob) => {
+          console.log(blob);
+          await navigator.clipboard
+            .write([
+              new ClipboardItem({
+                [blob.type]: blob,
+              }),
+            ])
+            .then(() => {
+              console.log("Copied image to clipboard.");
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+          setBlob(blob);
+        })
+        .catch(() => {
+          throw new Error("Error while generating Blob");
+        });
+    }
+
+    const download = (blob: Blob | MediaSource | undefined, name: string) => {
+      if (!blob) {
+        throw new Error("Blob is undefined");
+      }
       const blobURL = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = blobURL;
       a.download = name;
       document.body.appendChild(a);
       a.click();
-    })
-    .catch(() => {
-      throw new Error("Error while downloading file");
-    });
+      a.remove();
+    };
+    return (
+      <div className="flex flex-col gap-2 items-center">
+        <img
+          src={image}
+          alt={alt}
+          width={768}
+          height={384}
+          className="object-contain w-full h-96"
+        />
+        <ShareDialog
+          {...args}
+          onOpen={() => onOpen(image)}
+          onDownload={() => download(blob, "test")}
+        />
+      </div>
+    );
+  },
+  args: {
+    image,
+    alt,
+    title: "Share Visualization",
+  },
 };

packages/opub-ui/src/components/ShareDialog/ShareDialog.tsx

@@ -10,20 +10,28 @@ import React from "react";
 type Props = {
   image: string;
   alt: string;
-  onDownload?: () => void;
   title: string;
+  onDownload?: () => void;
+  onOpen?: () => void;
 };
 
 const ShareDialog = React.forwardRef(
   (
-    { image, alt, onDownload, title }: Props,
+    { image, alt, onDownload, title, onOpen }: Props,
     ref?: React.Ref<HTMLDivElement>
   ) => {
     const [isOpen, setIsOpen] = React.useState(false);
 
+    function handleOpen() {
+      if (onOpen && !isOpen) {
+        onOpen();
+      }
+      setIsOpen(!isOpen);
+    }
+
     return (
       <div ref={ref}>
-        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <Dialog open={isOpen} onOpenChange={handleOpen}>
           <Dialog.Trigger>
             <Button
               icon={<Icon source={IconShare} size={14} color="highlight" />}