@sparkstudio/storage-ui 1.0.15 → 1.0.17

package/dist/index.cjs

@@ -267,7 +267,7 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "border rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
+  const baseClass = "rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
   const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
   const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
@@ -526,8 +526,81 @@ var UploadProgressList = ({
 };
 
 // src/components/DesktopFileIcon.tsx
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome = require("@fortawesome/react-fontawesome");
 var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function getFileExtension(name) {
+  if (!name) return null;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === name.length - 1) return null;
+  return name.substring(lastDot + 1).toLowerCase();
+}
+function getIconForExtension(ext) {
+  if (!ext) return import_free_solid_svg_icons.faFile;
+  switch (ext) {
+    // Images
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+    case "bmp":
+      return import_free_solid_svg_icons.faFileImage;
+    // PDF
+    case "pdf":
+      return import_free_solid_svg_icons.faFilePdf;
+    // Word docs
+    case "doc":
+    case "docx":
+      return import_free_solid_svg_icons.faFileWord;
+    // Excel / spreadsheets
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return import_free_solid_svg_icons.faFileExcel;
+    // Archives
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+      return import_free_solid_svg_icons.faFileArchive;
+    // Video
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+      return import_free_solid_svg_icons.faFileVideo;
+    // Audio
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+      return import_free_solid_svg_icons.faFileAudio;
+    // Code files
+    case "js":
+    case "ts":
+    case "tsx":
+    case "jsx":
+    case "json":
+    case "html":
+    case "css":
+    case "cs":
+    case "java":
+    case "py":
+    case "rb":
+    case "php":
+    case "sql":
+    case "xml":
+    case "yml":
+    case "yaml":
+      return import_free_solid_svg_icons.faFileCode;
+    default:
+      return import_free_solid_svg_icons.faFile;
+  }
+}
 var DesktopFileIcon = ({
   name,
   sizeBytes,
@@ -597,6 +670,8 @@ var DesktopFileIcon = ({
     }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  const ext = getFileExtension(name);
+  const iconToRender = getIconForExtension(ext);
   (0, import_react4.useEffect)(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
@@ -619,23 +694,19 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border-primary" : "border-transparent"),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-primary-subtle" : ""),
         style: {
           width: 96,
           cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease",
-          opacity: isDeleting ? 0.6 : 1,
-          borderWidth: 1,
-          borderStyle: "solid"
+          transition: "background-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
         title: name ?? void 0,
         onClick: () => {
-          if (contextMenuPos) {
-            closeMenu();
-          }
+          if (contextMenuPos) closeMenu();
         },
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
@@ -649,19 +720,12 @@ var DesktopFileIcon = ({
                 height: 64
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon: iconToRender, className: "fs-2" }),
                 isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "spinner-border spinner-border-sm text-danger" }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "div",
-            {
-              className: "small text-center text-truncate",
-              style: { width: "100%" },
-              children: name
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "small text-center text-truncate", style: { width: "100%" }, children: name }),
           formattedSize && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { className: "text-muted mt-1", children: formattedSize })
         ]
       }
@@ -781,7 +845,39 @@ var UploadContainer = ({
           {
             className: "w-100 d-flex flex-wrap gap-4 align-content-start",
             style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                style: {
+                  minHeight: "160px",
+                  padding: "20px",
+                  cursor: "pointer",
+                  transition: "background 0.12s, border-color 0.12s"
+                },
+                onClick: () => document.getElementById("filePicker")?.click(),
+                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "input",
+                    {
+                      id: "filePicker",
+                      type: "file",
+                      multiple: true,
+                      hidden: true,
+                      onChange: (e) => {
+                        if (!e.target.files) return;
+                        onFilesSelected?.(e.target.files);
+                        startUploadsIfNeeded(e.target.files);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
+                ]
+              }
+            ) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               DesktopFileIcon,
               {
                 name: file.Name,
@@ -928,8 +1024,8 @@ function HomeContent() {
     user && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://localhost:5001",
-        storageApiBaseUrl: "https://localhost:5001"
+        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
       }
     )
   ] });

package/dist/index.js

@@ -226,7 +226,7 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "border rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
+  const baseClass = "rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
   const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
   const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
@@ -485,8 +485,91 @@ var UploadProgressList = ({
 };
 
 // src/components/DesktopFileIcon.tsx
+import {
+  faFile,
+  faFilePdf,
+  faFileImage,
+  faFileWord,
+  faFileExcel,
+  faFileVideo,
+  faFileAudio,
+  faFileArchive,
+  faFileCode
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useRef, useState as useState2 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function getFileExtension(name) {
+  if (!name) return null;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === name.length - 1) return null;
+  return name.substring(lastDot + 1).toLowerCase();
+}
+function getIconForExtension(ext) {
+  if (!ext) return faFile;
+  switch (ext) {
+    // Images
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+    case "bmp":
+      return faFileImage;
+    // PDF
+    case "pdf":
+      return faFilePdf;
+    // Word docs
+    case "doc":
+    case "docx":
+      return faFileWord;
+    // Excel / spreadsheets
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return faFileExcel;
+    // Archives
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+      return faFileArchive;
+    // Video
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+      return faFileVideo;
+    // Audio
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+      return faFileAudio;
+    // Code files
+    case "js":
+    case "ts":
+    case "tsx":
+    case "jsx":
+    case "json":
+    case "html":
+    case "css":
+    case "cs":
+    case "java":
+    case "py":
+    case "rb":
+    case "php":
+    case "sql":
+    case "xml":
+    case "yml":
+    case "yaml":
+      return faFileCode;
+    default:
+      return faFile;
+  }
+}
 var DesktopFileIcon = ({
   name,
   sizeBytes,
@@ -556,6 +639,8 @@ var DesktopFileIcon = ({
     }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  const ext = getFileExtension(name);
+  const iconToRender = getIconForExtension(ext);
   useEffect(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
@@ -578,23 +663,19 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border-primary" : "border-transparent"),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-primary-subtle" : ""),
         style: {
           width: 96,
           cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease",
-          opacity: isDeleting ? 0.6 : 1,
-          borderWidth: 1,
-          borderStyle: "solid"
+          transition: "background-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
         title: name ?? void 0,
         onClick: () => {
-          if (contextMenuPos) {
-            closeMenu();
-          }
+          if (contextMenuPos) closeMenu();
         },
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
@@ -608,19 +689,12 @@ var DesktopFileIcon = ({
                 height: 64
               },
               children: [
-                /* @__PURE__ */ jsx3("i", { className: "bi bi-file-earmark fs-2" }),
+                /* @__PURE__ */ jsx3(FontAwesomeIcon, { icon: iconToRender, className: "fs-2" }),
                 isDeleting && /* @__PURE__ */ jsx3("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ jsx3("div", { className: "spinner-border spinner-border-sm text-danger" }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              className: "small text-center text-truncate",
-              style: { width: "100%" },
-              children: name
-            }
-          ),
+          /* @__PURE__ */ jsx3("div", { className: "small text-center text-truncate", style: { width: "100%" }, children: name }),
           formattedSize && /* @__PURE__ */ jsx3("small", { className: "text-muted mt-1", children: formattedSize })
         ]
       }
@@ -740,7 +814,39 @@ var UploadContainer = ({
           {
             className: "w-100 d-flex flex-wrap gap-4 align-content-start",
             style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ jsx4("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
+            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                style: {
+                  minHeight: "160px",
+                  padding: "20px",
+                  cursor: "pointer",
+                  transition: "background 0.12s, border-color 0.12s"
+                },
+                onClick: () => document.getElementById("filePicker")?.click(),
+                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    "input",
+                    {
+                      id: "filePicker",
+                      type: "file",
+                      multiple: true,
+                      hidden: true,
+                      onChange: (e) => {
+                        if (!e.target.files) return;
+                        onFilesSelected?.(e.target.files);
+                        startUploadsIfNeeded(e.target.files);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
+                  /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
+                ]
+              }
+            ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
               DesktopFileIcon,
               {
                 name: file.Name,
@@ -892,8 +998,8 @@ function HomeContent() {
     user && /* @__PURE__ */ jsx6(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://localhost:5001",
-        storageApiBaseUrl: "https://localhost:5001"
+        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -37,8 +37,10 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.958.0",
     "@aws-sdk/s3-request-presigner": "^3.958.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@sparkstudio/authentication-ui": "^1.0.29",
-    "@sparkstudio/common-ui": "^1.0.5",
+    "@sparkstudio/common-ui": "^1.0.11",
     "barrelsby": "^2.8.1"
   },
   "devDependencies": {