@leancodepl/image-uploader 9.7.2 → 9.7.4

package/index.esm.js

@@ -1,651 +0,0 @@
-import { ErrorCode as ErrorCode$1, useDropzone } from 'react-dropzone';
-import { useContext, createContext, useCallback, useState, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import EasyCrop from 'react-easy-crop';
-import { v4 } from 'uuid';
-import { useSyncState } from '@leancodepl/utils';
-
-var ErrorCode;
-(function(ErrorCode) {
-    ErrorCode[ErrorCode["FileTooLarge"] = ErrorCode$1.FileTooLarge] = "FileTooLarge";
-    ErrorCode[ErrorCode["FileTooSmall"] = ErrorCode$1.FileTooSmall] = "FileTooSmall";
-    ErrorCode[ErrorCode["FileInvalidType"] = ErrorCode$1.FileInvalidType] = "FileInvalidType";
-    ErrorCode[ErrorCode["TooManyFiles"] = ErrorCode$1.TooManyFiles] = "TooManyFiles";
-    ErrorCode["Unknown"] = "unknown";
-})(ErrorCode || (ErrorCode = {}));
-function getFlatErrorCodes(fileRejections) {
-    return fileRejections.flatMap((fileRejection)=>fileRejection.errors.map((error)=>error.code));
-}
-function getErrorCode(errorCodes) {
-    if (errorCodes.includes(ErrorCode$1.FileTooLarge)) {
-        return ErrorCode.FileTooLarge;
-    }
-    if (errorCodes.includes(ErrorCode$1.FileTooSmall)) {
-        return ErrorCode.FileTooSmall;
-    }
-    if (errorCodes.includes(ErrorCode$1.FileInvalidType)) {
-        return ErrorCode.FileInvalidType;
-    }
-    if (errorCodes.includes(ErrorCode$1.TooManyFiles)) {
-        return ErrorCode.TooManyFiles;
-    }
-    return "unknown";
-}
-function mapFileRejectionsToErrorCode(fileRejections) {
-    return getErrorCode(getFlatErrorCodes(fileRejections));
-}
-
-function _extends() {
-    _extends = Object.assign || function assign(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-
-/**
- * Uploads an image file using provided upload parameters.
- *
- * Handles file upload by calling the getUploadParams function to retrieve upload configuration,
- * then performs a fetch request to upload the file. Returns early if the image is already uploaded.
- *
- * @param image - Image file with ID or already uploaded image with URL
- * @param getUploadParams - Function that returns upload parameters (URI, method, headers) for the image
- * @returns Promise resolving to uploaded image with URL
- * @throws {Error} When upload params are not defined, image is not defined, or upload fails
- *
- * @example
- * ```typescript
- * import { tryUploadWithUploadParams } from "@leancodepl/image-uploader";
- *
- * const uploadedImage = await tryUploadWithUploadParams(image, async (img) => ({
- *   uri: "https://api.example.com/upload",
- *   method: "POST",
- *   requiredHeaders: { "Content-Type": "image/jpeg" }
- * }));
- * ```
- */ async function tryUploadWithUploadParams(image, getUploadParams) {
-    if ("url" in image) {
-        return image;
-    }
-    if (!image.originalFile) {
-        throw new Error("Image is not defined");
-    }
-    try {
-        const uploadParams = await getUploadParams(image);
-        if (!uploadParams) {
-            throw new Error("Upload params are not defined");
-        }
-        const { uri, method, requiredHeaders } = uploadParams;
-        const response = await fetch(uri, {
-            method,
-            headers: requiredHeaders,
-            body: image.originalFile
-        });
-        if (!response.ok) {
-            throw new Error("Failed to upload image");
-        }
-        return _extends({}, image, {
-            url: uri
-        });
-    } catch (e) {
-        throw new Error("Failed to upload image");
-    }
-}
-
-const defaultAccept = {
-    "image/*": []
-};
-const defaultCrop = {
-    x: 0,
-    y: 0
-};
-const defaultZoom = 1;
-const defaultRotation = 0;
-
-const UploadImagesContext = /*#__PURE__*/ createContext(undefined);
-function UploadImagesProvider({ children, uploader }) {
-    return /*#__PURE__*/ jsx(UploadImagesContext.Provider, {
-        value: uploader,
-        children: children
-    });
-}
-function useUploadImagesContext() {
-    const context = useContext(UploadImagesContext);
-    if (!context) {
-        throw new Error("All UploadImages components must be wrapped in an UploadImages.Root component");
-    }
-    return context;
-}
-
-/**
- * Image cropper component with editing controls.
- *
- * Provides image cropping functionality with zoom, rotation, and crop area controls.
- * Processes cropped images and integrates with the upload state management.
- *
- * @param children - Content or render function receiving cropper controls
- * @returns JSX element with cropper editing interface
- * @throws {Error} When cropper config is not defined in context
- *
- * @example
- * ```typescript
- * import { UploadImages } from "@leancodepl/image-uploader";
- *
- * <UploadImages.Cropper>
- *   {({ zoom, rotation, setZoom, setRotation, accept, close }) => (
- *     <div>
- *       <UploadImages.CropperEditor />
- *       <input
- *         type="range"
- *         value={zoom}
- *         onChange={(e) => setZoom(Number(e.target.value))}
- *       />
- *       <button onClick={accept}>Accept</button>
- *       <button onClick={close}>Cancel</button>
- *     </div>
- *   )}
- * </UploadImages.Cropper>
- * ```
- */ function UploadImagesCropper({ children }) {
-    const { cropper } = useUploadImagesContext();
-    if (!cropper) {
-        throw new Error("Cropper config is not defined");
-    }
-    const { file, editorImage, acceptImage, closeImage, config, cropArea, zoom, rotation, setCropArea, setCrop, setZoom, setRotation } = cropper;
-    const close = useCallback(()=>{
-        closeImage();
-        setCrop(defaultCrop);
-        setZoom(defaultZoom);
-        setRotation(defaultRotation);
-        setCropArea(undefined);
-    }, [
-        closeImage,
-        setCrop,
-        setCropArea,
-        setRotation,
-        setZoom
-    ]);
-    const accept = useCallback(()=>{
-        if (!editorImage) return;
-        const canvas = document.createElement("canvas");
-        const canvas2 = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        const ctx2 = canvas2.getContext("2d");
-        const img = new Image();
-        img.onload = function() {
-            const { naturalWidth: imgWidth, naturalHeight: imgHeight } = img;
-            const angle = rotation * (Math.PI / 180);
-            const sine = Math.abs(Math.sin(angle));
-            const cosine = Math.abs(Math.cos(angle));
-            const squareWidth = imgWidth * cosine + imgHeight * sine;
-            const squareHeight = imgHeight * cosine + imgWidth * sine;
-            canvas.width = squareWidth;
-            canvas.height = squareHeight;
-            ctx.fillStyle = "#fff";
-            ctx.fillRect(0, 0, squareWidth, squareHeight);
-            const squareHalfWidth = squareWidth / 2;
-            const squareHalfHeight = squareHeight / 2;
-            ctx.translate(squareHalfWidth, squareHalfHeight);
-            ctx.rotate(angle);
-            ctx.translate(-squareHalfWidth, -squareHalfHeight);
-            const imgX = (squareWidth - imgWidth) / 2;
-            const imgY = (squareHeight - imgHeight) / 2;
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight);
-            var _cropArea_width, _config_maxWidth;
-            canvas2.width = Math.min(((_cropArea_width = cropArea == null ? void 0 : cropArea.width) != null ? _cropArea_width : 100) / 100 * squareWidth, (_config_maxWidth = config.maxWidth) != null ? _config_maxWidth : Number.POSITIVE_INFINITY);
-            var _cropArea_height, _config_maxHeight;
-            canvas2.height = Math.min(((_cropArea_height = cropArea == null ? void 0 : cropArea.height) != null ? _cropArea_height : 100) / 100 * squareHeight, (_config_maxHeight = config.maxHeight) != null ? _config_maxHeight : Number.POSITIVE_INFINITY);
-            var _cropArea_x, _cropArea_y, _cropArea_width1, _cropArea_height1;
-            ctx2.drawImage(canvas, ((_cropArea_x = cropArea == null ? void 0 : cropArea.x) != null ? _cropArea_x : 0) / 100 * squareWidth, ((_cropArea_y = cropArea == null ? void 0 : cropArea.y) != null ? _cropArea_y : 0) / 100 * squareHeight, ((_cropArea_width1 = cropArea == null ? void 0 : cropArea.width) != null ? _cropArea_width1 : 100) / 100 * squareWidth, ((_cropArea_height1 = cropArea == null ? void 0 : cropArea.height) != null ? _cropArea_height1 : 100) / 100 * squareHeight, 0, 0, canvas2.width, canvas2.height);
-            canvas2.toBlob((blob)=>{
-                if (!file) {
-                    return;
-                }
-                var _file_originalFile_name, _file_originalFile_type;
-                const newFile = new File([
-                    blob
-                ], (_file_originalFile_name = file.originalFile.name) != null ? _file_originalFile_name : "image.png", {
-                    type: (_file_originalFile_type = file.originalFile.type) != null ? _file_originalFile_type : "image/png"
-                });
-                const uploadFile = {
-                    originalFile: newFile,
-                    id: file.id
-                };
-                acceptImage(uploadFile);
-            });
-            close();
-        };
-        img.src = editorImage;
-    }, [
-        close,
-        config,
-        cropArea,
-        file,
-        editorImage,
-        rotation,
-        acceptImage
-    ]);
-    return typeof children === "function" ? children({
-        zoom,
-        rotation,
-        setZoom,
-        setRotation,
-        accept,
-        close
-    }) : children;
-}
-
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-
-/**
- * Visual editor component for image cropping.
- *
- * Renders the interactive crop editor interface using `"react-easy-crop"`.
- * Provides visual feedback for crop area, zoom, and rotation adjustments.
- *
- * @param style - CSS style object, merged with default positioning styles
- * @param props - Additional HTML div attributes
- * @returns JSX element with interactive crop editor
- * @throws {Error} When cropper config is not defined in context
- *
- * @example
- * ```typescript
- * import { UploadImages } from "@leancodepl/image-uploader";
- *
- * <UploadImages.Cropper>
- *   {({ zoom, setZoom, rotation, setRotation, accept, close }) => (
- *     <div>
- *       <UploadImages.CropperEditor />
- *       <div>
- *         <label>Zoom: <input type="range" value={zoom} onChange={(e) => setZoom(Number(e.target.value))} /></label>
- *         <button onClick={accept}>Accept</button>
- *         <button onClick={close}>Cancel</button>
- *       </div>
- *     </div>
- *   )}
- * </UploadImages.Cropper>
- * ```
- */ function UploadImagesCropperEditor(_param) {
-    var { style } = _param, props = _object_without_properties_loose(_param, [
-        "style"
-    ]);
-    const { cropper } = useUploadImagesContext();
-    if (!cropper) {
-        throw new Error("Cropper config is not defined");
-    }
-    const { editorImage, config, zoom, rotation, crop, setCropArea, setCrop, setZoom, setRotation } = cropper;
-    return /*#__PURE__*/ jsx("div", _extends({}, props, {
-        style: _extends({
-            position: "relative",
-            width: "100%",
-            height: "300px"
-        }, style),
-        children: /*#__PURE__*/ jsx(EasyCrop, {
-            aspect: config.aspect,
-            crop: crop,
-            image: editorImage,
-            rotation: rotation,
-            zoom: zoom,
-            onCropChange: setCrop,
-            onCropComplete: setCropArea,
-            onRotationChange: setRotation,
-            onZoomChange: setZoom
-        })
-    }));
-}
-
-async function getImagePreviewData(file) {
-    return file ? await getBase64(file) : "";
-}
-const getBase64 = (file)=>new Promise((resolve, reject)=>{
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = ()=>resolve(String(reader.result));
-        reader.onerror = (error)=>reject(error);
-    });
-
-/**
- * Individual file item component with preview and removal functionality.
- *
- * Displays a single uploaded file with preview image generation and removal capability.
- * Automatically generates image preview data and provides remove function to children.
- *
- * @param children - Content or render function receiving file, preview, and remove function
- * @param file - File object with ID to display
- * @param props - Additional HTML div attributes
- * @returns JSX element for individual file with preview and controls
- *
- * @example
- * ```typescript
- * import { UploadImages } from "@leancodepl/image-uploader";
- *
- * <UploadImages.File file={fileWithId}>
- *   {({ file, preview, remove }) => (
- *     <div>
- *       <img src={preview} alt={file.originalFile.name} />
- *       <p>{file.originalFile.name}</p>
- *       <button onClick={remove}>Remove</button>
- *     </div>
- *   )}
- * </UploadImages.File>
- * ```
- */ function UploadImagesFileItem(_param) {
-    var { children, file } = _param, props = _object_without_properties_loose(_param, [
-        "children",
-        "file"
-    ]);
-    const { removeFile } = useUploadImagesContext();
-    const [previewData, setPreviewData] = useState();
-    useEffect(()=>{
-        const loadPreview = async ()=>{
-            const preview = await getImagePreviewData(file.originalFile);
-            setPreviewData(preview);
-        };
-        loadPreview();
-    }, [
-        file.originalFile
-    ]);
-    return /*#__PURE__*/ jsx("div", _extends({}, props, {
-        children: typeof children === "function" ? children({
-            file,
-            preview: previewData,
-            remove: ()=>removeFile(file.id)
-        }) : children
-    }));
-}
-
-/**
- * Container component for displaying uploaded files.
- *
- * Renders a container for uploaded files and provides current file list to children.
- * Used to display and manage the collection of uploaded images.
- *
- * @param children - Content or render function receiving files array
- * @param props - Additional HTML div attributes
- * @returns JSX element containing uploaded files
- *
- * @example
- * ```typescript
- * import { UploadImages } from "@leancodepl/image-uploader";
- *
- * <UploadImages.Files>
- *   {({ files }) => (
- *     <div>
- *       {files?.map(file => (
- *         <UploadImages.File key={file.id} file={file}>
- *           {({ preview, remove }) => (
- *             <div>
- *               <img src={preview} alt="Preview" />
- *               <button onClick={remove}>Remove</button>
- *             </div>
- *           )}
- *         </UploadImages.File>
- *       ))}
- *     </div>
- *   )}
- * </UploadImages.Files>
- * ```
- */ function UploadImagesFiles(_param) {
-    var { children } = _param, props = _object_without_properties_loose(_param, [
-        "children"
-    ]);
-    const { value } = useUploadImagesContext();
-    return /*#__PURE__*/ jsx("div", _extends({}, props, {
-        children: typeof children === "function" ? children({
-            files: value
-        }) : children
-    }));
-}
-
-/**
- * Root wrapper component for image upload functionality.
- *
- * Provides upload context to all child UploadImages components and renders a div container.
- * Must wrap all other UploadImages components to provide shared state.
- *
- * @param uploader - Upload state and functions from `useUploadImages` hook
- * @param props - Additional HTML div attributes
- * @returns JSX element wrapping children with upload context
- *
- * @example
- * ```typescript
- * import { UploadImages, useUploadImages } from "@leancodepl/image-uploader";
- *
- * const uploader = useUploadImages({ value: files, onChange: setFiles });
- *
- * <UploadImages.Root uploader={uploader}>
- *   <UploadImages.Zone>Drop files here</UploadImages.Zone>
- *   <UploadImages.Files />
- * </UploadImages.Root>
- * ```
- */ function UploadImagesRoot(_param) {
-    var { uploader } = _param, props = _object_without_properties_loose(_param, [
-        "uploader"
-    ]);
-    return /*#__PURE__*/ jsx(UploadImagesProvider, {
-        uploader: uploader,
-        children: /*#__PURE__*/ jsx("div", _extends({}, props))
-    });
-}
-
-/**
- * Drag-and-drop zone component for file uploads.
- *
- * Creates an interactive drop zone with file input capabilities. Supports both click-to-select
- * and drag-and-drop file uploads. Provides drag state to children for visual feedback.
- *
- * @param children - Content or render function receiving drag state props
- * @param props - Additional HTML div attributes
- * @returns JSX element with drag-and-drop upload functionality
- *
- * @example
- * ```typescript
- * import { UploadImages } from "@leancodepl/image-uploader";
- *
- * <UploadImages.Zone>
- *   {({ isDragActive, isFocused }) => (
- *     <div className={isDragActive ? "drag-active" : ""}>
- *       {isDragActive ? "Drop files here" : "Click or drag files to upload"}
- *     </div>
- *   )}
- * </UploadImages.Zone>
- * ```
- */ function UploadImagesZone(_param) {
-    var { children } = _param, props = _object_without_properties_loose(_param, [
-        "children"
-    ]);
-    const { dropzone: { getRootProps, getInputProps, isDragActive, isFocused, isFileDialogActive } } = useUploadImagesContext();
-    return /*#__PURE__*/ jsxs("div", _extends({}, getRootProps(), props, {
-        children: [
-            /*#__PURE__*/ jsx("input", _extends({}, getInputProps())),
-            typeof children === "function" ? children({
-                isDragActive,
-                isFocused,
-                isFileDialogActive
-            }) : children
-        ]
-    }));
-}
-
-const UploadImages = {
-    Root: UploadImagesRoot,
-    Zone: UploadImagesZone,
-    Files: UploadImagesFiles,
-    File: UploadImagesFileItem,
-    Cropper: UploadImagesCropper,
-    CropperEditor: UploadImagesCropperEditor
-};
-
-function isExactFile(a, b) {
-    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
-}
-
-function useCropper({ value, onChange }) {
-    const [fileQueue, setFileQueue] = useState([]);
-    const [editorImage, setEditorImage] = useState();
-    const [cropArea, setCropArea] = useState();
-    const [crop, setCrop] = useState(defaultCrop);
-    const [zoom, setZoom] = useState(defaultZoom);
-    const [rotation, setRotation] = useState(defaultRotation);
-    const file = fileQueue.at(0);
-    const isOpen = !!file;
-    useSyncState(file, (newCropperFile)=>{
-        setEditorImage(undefined);
-        if (!newCropperFile) {
-            return;
-        }
-        const reader = new FileReader();
-        reader.addEventListener("load", ()=>{
-            if (typeof reader.result === "string") {
-                setEditorImage(reader.result);
-            }
-        });
-        reader.readAsDataURL(newCropperFile.originalFile);
-    });
-    const closeImage = useCallback(()=>{
-        setFileQueue(fileQueue.filter(({ id })=>id !== (file == null ? void 0 : file.id)));
-    }, [
-        fileQueue,
-        file == null ? void 0 : file.id
-    ]);
-    const acceptImage = useCallback((file)=>onChange == null ? void 0 : onChange([
-            ...value != null ? value : [],
-            file
-        ]), [
-        onChange,
-        value
-    ]);
-    return {
-        fileQueue,
-        file,
-        editorImage,
-        cropArea,
-        crop,
-        zoom,
-        rotation,
-        isOpen,
-        setFileQueue,
-        setEditorImage,
-        setCropArea,
-        setCrop,
-        setZoom,
-        setRotation,
-        closeImage,
-        acceptImage
-    };
-}
-
-/**
- * Manages image upload state and provides drag-and-drop functionality.
- *
- * Creates a complete image upload solution with file validation, drag-and-drop support,
- * optional cropping, and duplicate detection. Returns upload state and control functions.
- *
- * @param value - Current array of uploaded files with IDs
- * @param accept - File types to accept (defaults to image types)
- * @param cropper - Optional cropper configuration for image editing
- * @param onError - Callback for handling upload errors
- * @param onChange - Callback when file list changes
- * @returns Upload state and control functions including dropzone props
- *
- * @example
- * ```typescript
- * import { useUploadImages } from "@leancodepl/image-uploader";
- *
- * const uploader = useUploadImages({
- *   value: files,
- *   onChange: setFiles,
- *   onError: (error) => console.error("Upload error:", error),
- *   accept: { "image/*": [".jpg", ".png"] }
- * });
- * ```
- */ function useUploadImages({ value, accept = defaultAccept, cropper: cropperConfig, onError, onChange }) {
-    const _useCropper = useCropper({
-        value,
-        onChange
-    }), { setFileQueue: setCropperFileQueue } = _useCropper, cropperProps = _object_without_properties_loose(_useCropper, [
-        "setFileQueue"
-    ]);
-    const handleNewFiles = useCallback((newFiles)=>{
-        if (cropperConfig) {
-            setCropperFileQueue(newFiles);
-        } else {
-            onChange == null ? void 0 : onChange([
-                ...value != null ? value : [],
-                ...newFiles
-            ]);
-        }
-    }, [
-        cropperConfig,
-        onChange,
-        value,
-        setCropperFileQueue
-    ]);
-    const addFiles = useCallback((newFiles)=>{
-        const uniqueNewFiles = newFiles.filter((newFile)=>!(value == null ? void 0 : value.some((existingFile)=>isExactFile(existingFile.originalFile, newFile.originalFile))));
-        handleNewFiles(uniqueNewFiles);
-    }, [
-        handleNewFiles,
-        value
-    ]);
-    const removeFile = useCallback((id)=>{
-        var _value_filter;
-        onChange == null ? void 0 : onChange((_value_filter = value == null ? void 0 : value.filter((f)=>f.id !== id)) != null ? _value_filter : []);
-    }, [
-        value,
-        onChange
-    ]);
-    const clearFiles = useCallback(()=>{
-        onChange == null ? void 0 : onChange([]);
-    }, [
-        onChange
-    ]);
-    const handleDrop = useCallback((acceptedFiles)=>{
-        addFiles(acceptedFiles.map((file)=>({
-                originalFile: file,
-                id: v4()
-            })));
-    }, [
-        addFiles
-    ]);
-    const handleDropRejected = useCallback((fileRejections)=>{
-        onError == null ? void 0 : onError(mapFileRejectionsToErrorCode(fileRejections));
-    }, [
-        onError
-    ]);
-    const dropzone = useDropzone({
-        onDrop: handleDrop,
-        onDropRejected: handleDropRejected,
-        accept
-    });
-    const uploader = {
-        value,
-        dropzone,
-        addFiles,
-        removeFile,
-        clearFiles,
-        cropper: cropperConfig && _extends({
-            config: cropperConfig
-        }, cropperProps)
-    };
-    return _extends({}, uploader, {
-        uploader
-    });
-}
-
-export { ErrorCode, UploadImages, tryUploadWithUploadParams, useUploadImages };

package/src/index.d.ts

@@ -1,5 +0,0 @@
-export { ErrorCode } from "./lib/_utils/errors";
-export * from "./lib/_utils/tryUploadWithUploadParams";
-export * from "./lib/UploadImages";
-export * from "./lib/types";
-export { useUploadImages, type UseUploadImagesProps } from "./lib/_hooks/useUploadImages";

package/src/lib/UploadImages/index.d.ts

@@ -1,20 +0,0 @@
-import { UploadImagesCropper } from "./Cropper";
-import { UploadImagesCropperEditor } from "./CropperEditor";
-import { UploadImagesFileItem } from "./File";
-import { UploadImagesFiles } from "./Files";
-import { UploadImagesRoot } from "./Root";
-import { UploadImagesZone } from "./Zone";
-export declare const UploadImages: {
-    Root: typeof UploadImagesRoot;
-    Zone: typeof UploadImagesZone;
-    Files: typeof UploadImagesFiles;
-    File: typeof UploadImagesFileItem;
-    Cropper: typeof UploadImagesCropper;
-    CropperEditor: typeof UploadImagesCropperEditor;
-};
-export type { UploadImagesFileItemProps } from "./File";
-export type { UploadImagesFilesProps } from "./Files";
-export type { UploadImagesRootProps } from "./Root";
-export type { UploadImagesZoneProps } from "./Zone";
-export type { UploadImagesCropperProps } from "./Cropper";
-export type { UploadImagesCropperEditorProps } from "./CropperEditor";