update share dialog

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

@@ -2,11 +2,10 @@ import { ShareDialog } from "./ShareDialog";
 import { Meta, StoryObj } from "@storybook/react";
 
 /**
- * ShareDialog Description
- *
- * Reference: #
+ * ShareDialog component can be used to share/download/embed an image.
  */
 const meta = {
+  title: "Components/ShareDialog",
   component: ShareDialog,
 } satisfies Meta<typeof ShareDialog>;
 
@@ -19,18 +18,26 @@ export const Default: Story = {
     alt: "visualisation",
     title: "Share Visualization",
     onDownload: () => {
-      downloadImg({
-        url: "https://opub-www.vercel.app/og.png",
-        name: "test.png",
-      });
+      download("https://opub-www.vercel.app/og.png", "test");
     },
   },
 };
 
-function downloadImg({ url, name }: { url: string; name: string }) {
-  var link = document.createElement("a");
-  link.download = name;
-  link.href = url;
-  link.click();
-  link.remove();
-}
+const download = (url: RequestInfo | URL, name: string) => {
+  if (!url) {
+    throw new Error("Resource URL not provided");
+  }
+  fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      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");
+    });
+};

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

@@ -1,14 +1,14 @@
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Sheet } from './Sheet';
-import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Sheet } from "./Sheet";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 
 /**
  * Sheet is a panel that slides in from the side of the screen.
  */
 const meta = {
-  title: 'Components/Sheet',
+  title: "Components/Sheet",
   component: Sheet.Content,
 } satisfies Meta<typeof Sheet.Content>;
 
@@ -30,7 +30,7 @@ export const Default: Story = {
       >
         <Sheet>
           <Sheet.Trigger>
-            <Button primary>Open Sheet</Button>
+            <Button>Open Sheet</Button>
           </Sheet.Trigger>
           <Sheet.Content>Sheet Content</Sheet.Content>
         </Sheet>
@@ -43,7 +43,7 @@ export const Default: Story = {
 export const Sides: Story = {
   render: () => {
     const [open, setOpen] = React.useState(false);
-    const [side, setSide] = React.useState<any>('');
+    const [side, setSide] = React.useState<any>("");
 
     // React.useEffect(() => {
     //   if (side) setOpen((val) => !val);
@@ -65,7 +65,7 @@ export const Sides: Story = {
       >
         <Sheet>
           <Sheet.Trigger>
-            <Button onClick={() => handleOpenChange('top')}>From Top</Button>
+            <Button onClick={() => handleOpenChange("top")}>From Top</Button>
           </Sheet.Trigger>
           <Sheet.Content side={side}>Sheet Content</Sheet.Content>
         </Sheet>
@@ -79,15 +79,15 @@ export const Sides: Story = {
         >
           <Sheet>
             <Sheet.Trigger>
-              <Button onClick={() => handleOpenChange('left')}>
+              <Button onClick={() => handleOpenChange("left")}>
                 From Left
               </Button>
             </Sheet.Trigger>
             <Sheet.Content side={side}>Sheet Content</Sheet.Content>
           </Sheet>
           <Sheet>
             <Sheet.Trigger>
-              <Button onClick={() => handleOpenChange('right')}>
+              <Button onClick={() => handleOpenChange("right")}>
                 From Right
               </Button>
             </Sheet.Trigger>
@@ -97,7 +97,7 @@ export const Sides: Story = {
 
         <Sheet>
           <Sheet.Trigger>
-            <Button onClick={() => handleOpenChange('bottom')}>
+            <Button onClick={() => handleOpenChange("bottom")}>
               From Bottom
             </Button>
           </Sheet.Trigger>
@@ -109,8 +109,8 @@ export const Sides: Story = {
   args: {},
 };
 
-type sizes = 'narrow' | 'medium' | 'wide' | 'extended' | 'full';
-const sizeArr = ['narrow', 'medium', 'wide', 'extended', 'full'];
+type sizes = "narrow" | "medium" | "wide" | "extended" | "full";
+const sizeArr = ["narrow", "medium", "wide", "extended", "full"];
 export const Sizes: Story = {
   render: () => {
     const [size, setSize] = React.useState<sizes | undefined>(undefined);
@@ -139,7 +139,7 @@ export const Sizes: Story = {
               minHeight="100%"
             >
               {sizeArr.map((size: any) => (
-                <Button key={size} primary onClick={() => setSize(size)}>
+                <Button key={size} onClick={() => setSize(size)}>
                   {size}
                 </Button>
               ))}