@appcorp/stellar-solutions-modules 0.1.52 → 0.1.53

package/components/ui/enhanced-dropzone.js

@@ -61,15 +61,14 @@ var utils_1 = require("../../lib/utils");
 var carousel_1 = require("./carousel");
 var button_1 = require("./button");
 var lucide_react_1 = require("lucide-react");
-var dropzone_1 = require("./shadcn-io/dropzone");
 var EnhancedDropzone = function (_a) {
     var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveRemote = _a.onRemoveRemote, className = _a.className;
     // Local files selected by user
     var _d = (0, react_1.useState)([]), localFiles = _d[0], setLocalFiles = _d[1];
     // Track object URLs created for local files
     var localPreviewsRef = (0, react_1.useRef)(new Map());
-    // Create object URLs for local files
-    (0, react_1.useEffect)(function () {
+    // Create object URLs for local files synchronously to avoid loading state
+    var createObjectURLs = (0, react_1.useCallback)(function () {
         var map = localPreviewsRef.current;
         // Create URLs for new files
         localFiles.forEach(function (file) {
@@ -92,14 +91,19 @@ var EnhancedDropzone = function (_a) {
                 map.delete(file);
             }
         });
-        // Cleanup on unmount
+    }, [localFiles]);
+    // Run synchronously on every render to avoid "loading" flash
+    createObjectURLs();
+    // Cleanup on unmount
+    (0, react_1.useEffect)(function () {
+        var map = localPreviewsRef.current;
         return function () {
             Array.from(map.values()).forEach(function (url) {
                 URL.revokeObjectURL(url);
             });
             map.clear();
         };
-    }, [localFiles]);
+    }, []);
     var dropzoneOptions = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         accept: (Array.isArray(accept) ? undefined : accept) || undefined,
@@ -137,9 +141,9 @@ var EnhancedDropzone = function (_a) {
     }); }), true);
     return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className) },
         label && (react_1.default.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
-        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
+        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-[280px] flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
             react_1.default.createElement("input", __assign({}, getInputProps(), { id: id })),
-            allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center" },
+            allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
                 react_1.default.createElement("div", { className: "relative w-full max-w-md" },
                     react_1.default.createElement(carousel_1.Carousel, { className: "w-full" },
                         react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); } }),
@@ -163,7 +167,21 @@ var EnhancedDropzone = function (_a) {
                     " image",
                     allPreviews.length !== 1 ? "s" : "",
                     " ",
-                    "selected"))) : (react_1.default.createElement(dropzone_1.DropzoneEmptyState, null))),
+                    "selected"))) : (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
+                react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground" },
+                    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
+                        react_1.default.createElement("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                        react_1.default.createElement("circle", { cx: "9", cy: "9", r: "2" }),
+                        react_1.default.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
+                react_1.default.createElement("div", { className: "space-y-1 text-center" },
+                    react_1.default.createElement("p", { className: "font-medium text-sm" },
+                        "Upload ",
+                        maxFiles === 1 ? "an image" : "images"),
+                    react_1.default.createElement("p", { className: "text-muted-foreground text-xs" }, "Drag and drop or click to browse"),
+                    maxFiles > 1 && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs" },
+                        "Up to ",
+                        maxFiles,
+                        " files")))))),
         (error || info) && (react_1.default.createElement("div", { className: "mt-2" }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
 };
 exports.EnhancedDropzone = EnhancedDropzone;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/stellar-solutions-modules",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "scripts": {
     "automate": "./automate.sh",
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",