@appcorp/shadcn 1.1.24 → 1.1.25

package/components/enhanced-dropzone.d.ts

@@ -33,6 +33,8 @@ export type EnhancedDropzoneProps = {
     onChange?: (files: File[]) => void;
     /** Called when a remote URL preview is removed by the user. */
     onRemoveRemote?: (url: string) => void;
+    /** Enable image resize/crop functionality. When true, opens a dialog to crop images to square aspect ratio. */
+    resize?: boolean;
     /** `data-testid` for the root dropzone container. */
     testIdDropzone?: string;
     /** `data-testid` for the hidden file input element. */

package/components/enhanced-dropzone.js

@@ -60,13 +60,18 @@ var react_dropzone_1 = require("react-dropzone");
 var utils_1 = require("../lib/utils");
 var carousel_1 = require("./ui/carousel");
 var button_1 = require("./ui/button");
+var image_resize_dialog_1 = require("./image-resize-dialog");
 var lucide_react_1 = require("lucide-react");
 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, testIdDropzone = _a.testIdDropzone, testIdInput = _a.testIdInput, testIdPrev = _a.testIdPrev, testIdNext = _a.testIdNext, testIdPreviewPrefix = _a.testIdPreviewPrefix, testIdImagePrefix = _a.testIdImagePrefix, testIdRemovePrefix = _a.testIdRemovePrefix, testIdCount = _a.testIdCount, testIdEmptyIcon = _a.testIdEmptyIcon, testIdEmptyTitle = _a.testIdEmptyTitle, testIdEmptySubtitle = _a.testIdEmptySubtitle, testIdEmptyNote = _a.testIdEmptyNote, testIdMessage = _a.testIdMessage;
+    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, _d = _a.resize, resize = _d === void 0 ? false : _d, className = _a.className, testIdDropzone = _a.testIdDropzone, testIdInput = _a.testIdInput, testIdPrev = _a.testIdPrev, testIdNext = _a.testIdNext, testIdPreviewPrefix = _a.testIdPreviewPrefix, testIdImagePrefix = _a.testIdImagePrefix, testIdRemovePrefix = _a.testIdRemovePrefix, testIdCount = _a.testIdCount, testIdEmptyIcon = _a.testIdEmptyIcon, testIdEmptyTitle = _a.testIdEmptyTitle, testIdEmptySubtitle = _a.testIdEmptySubtitle, testIdEmptyNote = _a.testIdEmptyNote, testIdMessage = _a.testIdMessage;
     // Local files selected by user
-    var _d = (0, react_1.useState)([]), localFiles = _d[0], setLocalFiles = _d[1];
+    var _e = (0, react_1.useState)([]), localFiles = _e[0], setLocalFiles = _e[1];
     // Track object URLs created for local files
     var localPreviewsRef = (0, react_1.useRef)(new Map());
+    // State for resize dialog
+    var _f = (0, react_1.useState)(false), resizeDialogOpen = _f[0], setResizeDialogOpen = _f[1];
+    var _g = (0, react_1.useState)(null), pendingFile = _g[0], setPendingFile = _g[1];
+    var _h = (0, react_1.useState)(""), pendingFileUrl = _h[0], setPendingFileUrl = _h[1];
     // Create object URLs for local files synchronously to avoid loading state
     var createObjectURLs = (0, react_1.useCallback)(function () {
         var map = localPreviewsRef.current;
@@ -104,6 +109,14 @@ var EnhancedDropzone = function (_a) {
             map.clear();
         };
     }, []);
+    // Cleanup pending file URL when dialog closes
+    (0, react_1.useEffect)(function () {
+        if (!resizeDialogOpen && pendingFileUrl) {
+            URL.revokeObjectURL(pendingFileUrl);
+            setPendingFileUrl("");
+            setPendingFile(null);
+        }
+    }, [resizeDialogOpen, pendingFileUrl]);
     var dropzoneOptions = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         accept: (Array.isArray(accept) ? undefined : accept) || undefined,
@@ -112,15 +125,26 @@ var EnhancedDropzone = function (_a) {
         minSize: minSize,
         disabled: disabled,
         onDrop: (0, react_1.useCallback)(function (acceptedFiles) {
-            setLocalFiles(function (prev) {
-                var combined = __spreadArray(__spreadArray([], prev, true), acceptedFiles, true);
-                var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
-                onChange === null || onChange === void 0 ? void 0 : onChange(limited);
-                return limited;
-            });
-        }, [maxFiles, onChange]),
+            if (resize && acceptedFiles.length > 0) {
+                // If resize is enabled, open the resize dialog with the first file
+                var file = acceptedFiles[0];
+                var url = URL.createObjectURL(file);
+                setPendingFile(file);
+                setPendingFileUrl(url);
+                setResizeDialogOpen(true);
+            }
+            else {
+                // If resize is disabled, add files directly
+                setLocalFiles(function (prev) {
+                    var combined = __spreadArray(__spreadArray([], prev, true), acceptedFiles, true);
+                    var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
+                    onChange === null || onChange === void 0 ? void 0 : onChange(limited);
+                    return limited;
+                });
+            }
+        }, [maxFiles, onChange, resize]),
     };
-    var _e = (0, react_dropzone_1.useDropzone)(dropzoneOptions), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, isDragActive = _e.isDragActive;
+    var _j = (0, react_dropzone_1.useDropzone)(dropzoneOptions), getRootProps = _j.getRootProps, getInputProps = _j.getInputProps, isDragActive = _j.isDragActive;
     // Remove remote URL
     var handleRemoveRemote = (0, react_1.useCallback)(function (url) {
         onRemoveRemote === null || onRemoveRemote === void 0 ? void 0 : onRemoveRemote(url);
@@ -133,6 +157,19 @@ var EnhancedDropzone = function (_a) {
             return updated;
         });
     }, [onChange]);
+    // Handle crop completion from resize dialog
+    var handleCropComplete = (0, react_1.useCallback)(function (croppedImage) {
+        setLocalFiles(function (prev) {
+            var combined = __spreadArray(__spreadArray([], prev, true), [croppedImage], false);
+            var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
+            onChange === null || onChange === void 0 ? void 0 : onChange(limited);
+            return limited;
+        });
+    }, [maxFiles, onChange]);
+    // Handle resize dialog close
+    var handleResizeDialogClose = (0, react_1.useCallback)(function () {
+        setResizeDialogOpen(false);
+    }, []);
     // Get all preview URLs (remote + local)
     var allPreviews = __spreadArray(__spreadArray([], value.map(function (url) { return ({ type: "remote", url: url, index: 0 }); }), true), localFiles.map(function (file, index) { return ({
         type: "local",
@@ -182,6 +219,7 @@ var EnhancedDropzone = function (_a) {
                         "Up to ",
                         maxFiles,
                         " files")))))),
-        (error || info) && (react_1.default.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, 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))));
+        (error || info) && (react_1.default.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, 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)),
+        resize && pendingFile && (react_1.default.createElement(image_resize_dialog_1.ImageResizeDialog, { open: resizeDialogOpen, onClose: handleResizeDialogClose, imageUrl: pendingFileUrl, onCropComplete: handleCropComplete, fileName: pendingFile.name }))));
 };
 exports.EnhancedDropzone = EnhancedDropzone;

package/components/image-resize-dialog.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * Props for `ImageResizeDialog` component.
+ */
+export type ImageResizeDialogProps = {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog should close (user cancels or saves). */
+    onClose: () => void;
+    /** The image URL to be resized/cropped. */
+    imageUrl: string;
+    /** Called when the user confirms the crop. Receives the cropped image as a File. */
+    onCropComplete: (croppedImage: File) => void;
+    /** Original file name for the cropped output. */
+    fileName?: string;
+};
+/**
+ * A dialog component that allows users to crop/resize an image to a square aspect ratio.
+ * Uses react-easy-crop for the cropping functionality.
+ */
+export declare const ImageResizeDialog: React.FC<ImageResizeDialogProps>;

package/components/image-resize-dialog.js

@@ -0,0 +1,180 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageResizeDialog = void 0;
+var react_1 = __importStar(require("react"));
+var react_easy_crop_1 = __importDefault(require("react-easy-crop"));
+var dialog_1 = require("./ui/dialog");
+var button_1 = require("./ui/button");
+var slider_1 = require("./ui/slider");
+/**
+ * Create a cropped image from the provided source and crop area.
+ */
+function getCroppedImg(imageSrc_1, pixelCrop_1) {
+    return __awaiter(this, arguments, void 0, function (imageSrc, pixelCrop, fileName) {
+        var image, canvas, ctx;
+        if (fileName === void 0) { fileName = "cropped-image.jpg"; }
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, createImage(imageSrc)];
+                case 1:
+                    image = _a.sent();
+                    canvas = document.createElement("canvas");
+                    ctx = canvas.getContext("2d");
+                    if (!ctx) {
+                        throw new Error("No 2d context");
+                    }
+                    // Set canvas size to match the crop area
+                    canvas.width = pixelCrop.width;
+                    canvas.height = pixelCrop.height;
+                    // Draw the cropped image
+                    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+                    // Convert canvas to blob and then to File
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            canvas.toBlob(function (blob) {
+                                if (!blob) {
+                                    reject(new Error("Canvas is empty"));
+                                    return;
+                                }
+                                var file = new File([blob], fileName, { type: "image/jpeg" });
+                                resolve(file);
+                            }, "image/jpeg");
+                        })];
+            }
+        });
+    });
+}
+/**
+ * Create an HTMLImageElement from a URL.
+ */
+function createImage(url) {
+    return new Promise(function (resolve, reject) {
+        var image = new Image();
+        image.addEventListener("load", function () { return resolve(image); });
+        image.addEventListener("error", function (error) { return reject(error); });
+        image.src = url;
+    });
+}
+/**
+ * A dialog component that allows users to crop/resize an image to a square aspect ratio.
+ * Uses react-easy-crop for the cropping functionality.
+ */
+var ImageResizeDialog = function (_a) {
+    var open = _a.open, onClose = _a.onClose, imageUrl = _a.imageUrl, onCropComplete = _a.onCropComplete, _b = _a.fileName, fileName = _b === void 0 ? "cropped-image.jpg" : _b;
+    var _c = (0, react_1.useState)({ x: 0, y: 0 }), crop = _c[0], setCrop = _c[1];
+    var _d = (0, react_1.useState)(1), zoom = _d[0], setZoom = _d[1];
+    var _e = (0, react_1.useState)(null), croppedAreaPixels = _e[0], setCroppedAreaPixels = _e[1];
+    var handleCropComplete = (0, react_1.useCallback)(function (_croppedArea, croppedAreaPixels) {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+    var handleSave = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var croppedImage, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!croppedAreaPixels)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, getCroppedImg(imageUrl, croppedAreaPixels, fileName)];
+                case 2:
+                    croppedImage = _a.sent();
+                    onCropComplete(croppedImage);
+                    onClose();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Failed to crop image:", error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [croppedAreaPixels, imageUrl, fileName, onCropComplete, onClose]);
+    return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: onClose },
+        react_1.default.createElement(dialog_1.DialogContent, { className: "max-w-3xl", "data-slot": "image-resize-dialog", "data-testid": "image-resize-dialog" },
+            react_1.default.createElement(dialog_1.DialogHeader, null,
+                react_1.default.createElement(dialog_1.DialogTitle, null, "Resize Image"),
+                react_1.default.createElement(dialog_1.DialogDescription, null, "Adjust the crop area to create a square image. Use the slider to zoom in or out.")),
+            react_1.default.createElement("div", { className: "relative h-[400px] w-full bg-muted rounded-md overflow-hidden" },
+                react_1.default.createElement(react_easy_crop_1.default, { image: imageUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: handleCropComplete, onZoomChange: setZoom })),
+            react_1.default.createElement("div", { className: "space-y-2" },
+                react_1.default.createElement("label", { className: "text-sm font-medium" }, "Zoom"),
+                react_1.default.createElement(slider_1.Slider, { value: [zoom], onValueChange: function (values) { return setZoom(values[0] || 1); }, min: 1, max: 3, step: 0.1, className: "w-full", "data-testid": "zoom-slider" })),
+            react_1.default.createElement(dialog_1.DialogFooter, null,
+                react_1.default.createElement(button_1.Button, { variant: "outline", onClick: onClose, "data-testid": "cancel-button" }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { onClick: handleSave, "data-testid": "save-button" }, "Save")))));
+};
+exports.ImageResizeDialog = ImageResizeDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "storybook build -c .storybook -o .out",
@@ -123,6 +123,7 @@
   },
   "packageManager": "yarn@4.12.0",
   "dependencies": {
-    "@tabler/icons-react": "^3.36.1"
+    "@tabler/icons-react": "^3.36.1",
+    "react-easy-crop": "^5.5.6"
   }
 }