@sparkstudio/storage-ui 1.0.12 → 1.0.13

package/dist/index.js

@@ -206,75 +206,246 @@ var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
   return ContainerType2;
 })(ContainerType || {});
 
+// src/components/ContainerUploadPanel.tsx
+import "react";
+
 // src/components/UploadContainer.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
+
+// src/components/UploadDropzone.tsx
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var UploadContainer = ({
-  title = "Upload files",
-  description = "Drag and drop files here, or click the button to browse.",
-  multiple = true,
+var UploadDropzone = ({
+  isDragging,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "border rounded-3 p-4 text-center mb-3 d-flex flex-column align-items-center justify-content-center " + (isDragging ? "bg-light border-primary" : "border-secondary border-dashed"),
+      style: { cursor: "pointer", minHeight: "140px" },
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      children: [
+        /* @__PURE__ */ jsx("i", { className: "bi bi-cloud-arrow-up fs-1 mb-2" }),
+        /* @__PURE__ */ jsx("p", { className: "mb-2", children: "Drop files here" }),
+        /* @__PURE__ */ jsx("small", { className: "text-muted", children: "or click the button below" })
+      ]
+    }
+  );
+};
+
+// src/components/UploadFilePicker.tsx
+import "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var UploadFilePicker = ({
+  multiple,
   accept,
-  onFilesSelected,
-  autoUpload = false,
-  getPresignedUrl,
-  onUploadComplete,
-  onUploadError
+  fileNames,
+  onFileChange
 }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [fileNames, setFileNames] = useState([]);
-  const [uploads, setUploads] = useState([]);
-  const startUploadsIfNeeded = (files) => {
-    if (!autoUpload || !getPresignedUrl) return;
-    const newUploads = Array.from(files).map((file) => ({
-      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
-      file,
-      progress: 0,
-      status: "pending"
-    }));
-    setUploads((prev) => [...prev, ...newUploads]);
-    newUploads.forEach((upload) => {
-      uploadFile(upload);
-    });
-  };
-  const uploadFile = async (upload) => {
-    setUploads(
-      (prev) => prev.map(
-        (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
+  return /* @__PURE__ */ jsxs2("div", { className: "d-flex gap-2 align-items-center", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "btn btn-primary mb-0", children: [
+      /* @__PURE__ */ jsx2("i", { className: "bi bi-folder2-open me-2" }),
+      "Browse files",
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "file",
+          className: "d-none",
+          multiple,
+          accept,
+          onChange: onFileChange
+        }
       )
-    );
-    try {
-      if (!getPresignedUrl) {
-        throw new Error("getPresignedUrl is not provided.");
+    ] }),
+    fileNames.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex-grow-1", children: [
+      /* @__PURE__ */ jsx2("div", { className: "small text-muted", children: "Selected:" }),
+      /* @__PURE__ */ jsx2("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ jsx2("li", { children: name }, name)) })
+    ] })
+  ] });
+};
+
+// src/components/UploadProgressList.tsx
+import "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var UploadProgressList = ({
+  uploads
+}) => {
+  if (uploads.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ jsxs3("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "d-flex justify-content-between small mb-1", children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
+        u.file.name,
+        " - ",
+        u?.publicUrl ?? ""
+      ] }),
+      /* @__PURE__ */ jsx3("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
+        role: "progressbar",
+        style: { width: `${u.progress}%` },
+        "aria-valuenow": u.progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
       }
-      const presignedUrl = await getPresignedUrl(upload.file);
-      const url = presignedUrl?.PresignedUrl ?? "";
-      await uploadFileToS3(upload.file, url, (progress) => {
-        setUploads(
-          (prev) => prev.map(
-            (u) => u.id === upload.id ? { ...u, progress } : u
+    ) }),
+    u.status === "error" && /* @__PURE__ */ jsx3("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
+  ] }, u.id)) });
+};
+
+// src/hooks/UseUploadManager.ts
+import { useState, useCallback } from "react";
+
+// src/engines/UploadFileToS3.ts
+async function UploadFileToS3(file, presignedUrl, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", presignedUrl);
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      const percent = Math.round(event.loaded / event.total * 100);
+      onProgress(percent);
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `S3 upload failed with status ${xhr.status}: ${xhr.statusText}`
           )
         );
-      });
-      const fileUrl = url.split("?")[0];
-      setUploads(
-        (prev) => prev.map(
-          (u) => u.id === upload.id ? { ...u, status: "success", progress: 100, s3Url: fileUrl, publicUrl: presignedUrl.PublicUrl } : u
-        )
-      );
-      onUploadComplete?.(upload.file, fileUrl);
-    } catch (err) {
-      let message = "Upload failed";
-      if (err instanceof Error) {
-        message = err.message;
       }
+    };
+    xhr.onerror = () => {
+      reject(new Error("Network error while uploading to S3"));
+    };
+    xhr.setRequestHeader(
+      "Content-Type",
+      file.type || "application/octet-stream"
+    );
+    xhr.send(file);
+  });
+}
+
+// src/hooks/UseUploadManager.ts
+function UseUploadManager({
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
+}) {
+  const [uploads, setUploads] = useState([]);
+  const createUploadStates = (files) => Array.from(files).map((file) => ({
+    id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
+    file,
+    progress: 0,
+    status: "pending"
+  }));
+  const uploadFile = useCallback(
+    async (upload) => {
       setUploads(
         (prev) => prev.map(
-          (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+          (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
         )
       );
-      onUploadError?.(upload.file, err instanceof Error ? err : new Error(message));
-    }
+      try {
+        if (!getPresignedUrl) {
+          throw new Error("getPresignedUrl is not provided.");
+        }
+        const presignedUrl = await getPresignedUrl(
+          upload.file
+        );
+        const url = presignedUrl?.PresignedUrl ?? "";
+        await UploadFileToS3(upload.file, url, (progress) => {
+          setUploads(
+            (prev) => prev.map(
+              (u) => u.id === upload.id ? { ...u, progress } : u
+            )
+          );
+        });
+        const fileUrl = url.split("?")[0];
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? {
+              ...u,
+              status: "success",
+              progress: 100,
+              s3Url: fileUrl,
+              // assumes your DTO has PublicUrl
+              publicUrl: presignedUrl.PublicUrl
+            } : u
+          )
+        );
+        onUploadComplete?.(upload.file, fileUrl);
+      } catch (err) {
+        let message = "Upload failed";
+        if (err instanceof Error) {
+          message = err.message;
+        }
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+          )
+        );
+        onUploadError?.(
+          upload.file,
+          err instanceof Error ? err : new Error(message)
+        );
+      }
+    },
+    [getPresignedUrl, onUploadComplete, onUploadError]
+  );
+  const startUploadsIfNeeded = useCallback(
+    (files) => {
+      if (!autoUpload || !getPresignedUrl) return;
+      const newUploads = createUploadStates(files);
+      setUploads((prev) => [...prev, ...newUploads]);
+      newUploads.forEach((upload) => {
+        void uploadFile(upload);
+      });
+    },
+    [autoUpload, getPresignedUrl, uploadFile]
+  );
+  const resetUploads = useCallback(() => setUploads([]), []);
+  return {
+    uploads,
+    startUploadsIfNeeded,
+    resetUploads
   };
+}
+
+// src/components/UploadContainer.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var UploadContainer = ({
+  title = "Upload files",
+  description = "Drag and drop files here, or click the button to browse.",
+  multiple = true,
+  accept,
+  onFilesSelected,
+  existingFiles = [],
+  onExistingFileClick,
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
+}) => {
+  const [isDragging, setIsDragging] = useState2(false);
+  const [fileNames, setFileNames] = useState2([]);
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload,
+    getPresignedUrl,
+    onUploadComplete,
+    onUploadError
+  });
   const handleDragOver = (e) => {
     e.preventDefault();
     setIsDragging(true);
@@ -299,150 +470,209 @@ var UploadContainer = ({
     onFilesSelected?.(files);
     startUploadsIfNeeded(files);
   };
-  return /* @__PURE__ */ jsx("div", { className: "container my-3", children: /* @__PURE__ */ jsx("div", { className: "card shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "card-body", children: [
-    /* @__PURE__ */ jsx("h5", { className: "card-title mb-2", children: title }),
-    /* @__PURE__ */ jsx("p", { className: "card-text text-muted", children: description }),
-    /* @__PURE__ */ jsxs(
-      "div",
+  const handleExistingFileClickInternal = (file) => {
+    if (onExistingFileClick) {
+      onExistingFileClick(file);
+      return;
+    }
+    const a = document.createElement("a");
+    a.download = file.Name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4("h5", { className: "card-title mb-2", children: title }),
+    /* @__PURE__ */ jsx4("p", { className: "card-text text-muted", children: description }),
+    existingFiles.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsx4("h6", { className: "mb-2", children: "Existing files" }),
+      /* @__PURE__ */ jsx4("ul", { className: "list-group", children: existingFiles.map((file) => /* @__PURE__ */ jsxs4(
+        "li",
+        {
+          className: "list-group-item d-flex justify-content-between align-items-center",
+          style: { cursor: "pointer" },
+          onClick: () => handleExistingFileClickInternal(file),
+          children: [
+            /* @__PURE__ */ jsx4("span", { children: file.Name }),
+            typeof file.FileSize === "number" && /* @__PURE__ */ jsxs4("small", { className: "text-muted", children: [
+              (file.FileSize / 1024).toFixed(1),
+              " KB"
+            ] })
+          ]
+        },
+        file.Id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      UploadDropzone,
       {
-        className: "border rounded-3 p-4 text-center mb-3 d-flex flex-column align-items-center justify-content-center " + (isDragging ? "bg-light border-primary" : "border-secondary border-dashed"),
-        style: { cursor: "pointer", minHeight: "140px" },
+        isDragging,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
-        onDrop: handleDrop,
-        children: [
-          /* @__PURE__ */ jsx("i", { className: "bi bi-cloud-arrow-up fs-1 mb-2" }),
-          /* @__PURE__ */ jsx("p", { className: "mb-2", children: "Drop files here" }),
-          /* @__PURE__ */ jsx("small", { className: "text-muted", children: "or click the button below" })
-        ]
+        onDrop: handleDrop
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "d-flex gap-2 align-items-center", children: [
-      /* @__PURE__ */ jsxs("label", { className: "btn btn-primary mb-0", children: [
-        /* @__PURE__ */ jsx("i", { className: "bi bi-folder2-open me-2" }),
-        "Browse files",
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "file",
-            className: "d-none",
-            multiple,
-            accept,
-            onChange: handleFileChange
-          }
-        )
-      ] }),
-      fileNames.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex-grow-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "small text-muted", children: "Selected:" }),
-        /* @__PURE__ */ jsx("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ jsx("li", { children: name }, name)) })
-      ] })
-    ] }),
-    uploads.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between small mb-1", children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          u.file.name,
-          " - ",
-          u?.publicUrl ?? ""
-        ] }),
-        /* @__PURE__ */ jsx("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
-          role: "progressbar",
-          style: { width: `${u.progress}%` },
-          "aria-valuenow": u.progress,
-          "aria-valuemin": 0,
-          "aria-valuemax": 100
-        }
-      ) }),
-      u.status === "error" && /* @__PURE__ */ jsx("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
-    ] }, u.id)) })
-  ] }) }) });
-};
-async function uploadFileToS3(file, presignedUrl, onProgress) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open("PUT", presignedUrl);
-    xhr.upload.onprogress = (event) => {
-      if (!event.lengthComputable) return;
-      const percent = Math.round(event.loaded / event.total * 100);
-      onProgress(percent);
-    };
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        onProgress(100);
-        resolve();
-      } else {
-        reject(
-          new Error(`S3 upload failed with status ${xhr.status}: ${xhr.statusText}`)
-        );
+    /* @__PURE__ */ jsx4(
+      UploadFilePicker,
+      {
+        multiple,
+        accept,
+        fileNames,
+        onFileChange: handleFileChange
       }
-    };
-    xhr.onerror = () => {
-      reject(new Error("Network error while uploading to S3"));
-    };
-    xhr.setRequestHeader(
-      "Content-Type",
-      file.type || "application/octet-stream"
-    );
-    xhr.send(file);
-  });
+    ),
+    /* @__PURE__ */ jsx4(UploadProgressList, { uploads })
+  ] });
+};
+
+// src/hooks/UseContainers.ts
+import { useEffect, useState as useState3 } from "react";
+function UseContainers({ apiBaseUrl, parentId }) {
+  const [containers, setContainers] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const sdkDb = new SparkStudioStorageSDK(
+        "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
+      );
+      const result = await sdkDb.container.ReadRootContainers();
+      setContainers(result);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    void load();
+  }, [apiBaseUrl, parentId]);
+  return {
+    containers,
+    loading,
+    error,
+    reload: load
+  };
 }
 
-// src/views/HomeView.tsx
-import { AppSettings, AuthenticatorProvider, UserInfoCard } from "@sparkstudio/authentication-ui";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function HomeView() {
-  function handleOnLoginSuccess(user) {
-    alert(user?.Id);
-  }
+// src/components/ContainerUploadPanel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ContainerUploadPanel = ({
+  containerApiBaseUrl,
+  parentContainerId,
+  title = "Upload files",
+  description = "Drop files to upload. Existing files are listed below."
+}) => {
+  const { containers, loading, error, reload } = UseContainers({
+    apiBaseUrl: containerApiBaseUrl,
+    parentId: parentContainerId
+  });
   const getPresignedUrl = async (file) => {
-    const sdkDb = new SparkStudioStorageSDK("https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod");
-    const sdkS3 = new SparkStudioStorageSDK("https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod");
-    const containerDTO = await sdkDb.container.CreateFileContainer(file.name, file.size, encodeURIComponent(file.type));
+    const sdkDb = new SparkStudioStorageSDK(
+      "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
+    );
+    const sdkS3 = new SparkStudioStorageSDK(
+      "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+    );
+    const containerDTO = await sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(file.type)
+    );
     const resultS3 = await sdkS3.s3.GetPreSignedUrl(containerDTO);
     return resultS3;
   };
-  return /* @__PURE__ */ jsxs2(
+  const handleUploadComplete = async (file, s3Url) => {
+    console.log("Upload complete:", file.name, s3Url);
+    await reload();
+  };
+  const handleUploadError = (file, err) => {
+    console.error("Upload failed:", file.name, err);
+  };
+  const handleExistingFileClick = (file) => {
+    const downloadUrl = `${containerApiBaseUrl}/api/Container/Download/${file.Id}`;
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    a.download = file.Name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    loading && /* @__PURE__ */ jsx5("p", { children: "Loading existing files\u2026" }),
+    error && /* @__PURE__ */ jsxs5("p", { className: "text-danger", children: [
+      "Failed to load containers: ",
+      error.message
+    ] }),
+    /* @__PURE__ */ jsx5(
+      UploadContainer,
+      {
+        title,
+        description,
+        existingFiles: containers,
+        onExistingFileClick: handleExistingFileClick,
+        autoUpload: true,
+        getPresignedUrl,
+        onUploadComplete: handleUploadComplete,
+        onUploadError: handleUploadError
+      }
+    )
+  ] });
+};
+
+// src/views/HomeView.tsx
+import {
+  AppSettings,
+  AuthenticatorProvider,
+  UserInfoCard,
+  useUser
+} from "@sparkstudio/authentication-ui";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function HomeView() {
+  return /* @__PURE__ */ jsx6(
     AuthenticatorProvider,
     {
       googleClientId: AppSettings.GoogleClientId,
       authenticationUrl: AppSettings.AuthenticationUrl,
       accountsUrl: AppSettings.AccountsUrl,
-      onLoginSuccess: handleOnLoginSuccess,
-      children: [
-        /* @__PURE__ */ jsx2(UserInfoCard, {}),
-        /* @__PURE__ */ jsx2(
-          UploadContainer,
-          {
-            title: "Upload your files to S3",
-            description: "Drag & drop or browse files. Each file will upload with its own progress bar.",
-            multiple: true,
-            accept: "*/*",
-            autoUpload: true,
-            getPresignedUrl,
-            onUploadComplete: (file, s3Url) => {
-              console.log("Uploaded", file.name, "to", s3Url);
-            },
-            onUploadError: (file, error) => {
-              console.error("Failed to upload", file.name, error);
-            }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx6(HomeContent, {})
     }
   );
 }
+function HomeContent() {
+  const { user } = useUser();
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(UserInfoCard, {}),
+    user && /* @__PURE__ */ jsx6(
+      ContainerUploadPanel,
+      {
+        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      }
+    )
+  ] });
+}
 export {
   AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
   ContainerType,
+  ContainerUploadPanel,
   Home,
   HomeView,
   S3,
   SparkStudioStorageSDK,
-  UploadContainer
+  UploadContainer,
+  UploadDropzone,
+  UploadFilePicker,
+  UploadFileToS3,
+  UploadProgressList,
+  UseContainers,
+  UseUploadManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",