@leancodepl/image-uploader 9.6.2

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

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+import { UploadImagesCropperEditorChildProps } from "../types";
+/**
+ * Props for the image cropper component.
+ */
+export type UploadImagesCropperProps = {
+    children: ((props: UploadImagesCropperEditorChildProps) => ReactNode) | ReactNode;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesCropper({ children }: UploadImagesCropperProps): ReactNode;
+/**
+ * Configuration for image cropper functionality.
+ */
+export type CropperConfig = {
+    aspect: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    withRotation?: boolean;
+    withZoom?: boolean;
+};

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

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from "react";
+/**
+ * Props for the cropper editor visual component.
+ */
+export type UploadImagesCropperEditorProps = Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesCropperEditor({ style, ...props }: UploadImagesCropperEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { FileWithId, UploadFileItemChildProps } from "../types";
+/**
+ * Props for individual file item component.
+ */
+export type UploadImagesFileItemProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: ((props: UploadFileItemChildProps) => ReactNode) | ReactNode;
+    file: FileWithId;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesFileItem({ children, file, ...props }: UploadImagesFileItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { UploadFilesChildProps } from "../types";
+/**
+ * Props for the UploadImages files container component.
+ */
+export type UploadImagesFilesProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: ((props: UploadFilesChildProps) => ReactNode) | ReactNode;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesFiles({ children, ...props }: UploadImagesFilesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { useUploadImages } from "../_hooks/useUploadImages";
+type UploadImagesContextValue = ReturnType<typeof useUploadImages>;
+export interface UploadImagesProviderProps {
+    children: ReactNode;
+    uploader: UploadImagesContextValue;
+}
+export declare function UploadImagesProvider({ children, uploader }: UploadImagesProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useUploadImagesContext(): UploadImagesContextValue;
+export {};

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from "react";
+import { useUploadImages } from "../_hooks/useUploadImages";
+/**
+ * Props for the UploadImages root component.
+ */
+export type UploadImagesRootProps = HTMLAttributes<HTMLDivElement> & {
+    uploader: ReturnType<typeof useUploadImages>;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesRoot({ uploader, ...props }: UploadImagesRootProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { UploadZoneChildProps } from "../types";
+/**
+ * Props for the UploadImages zone component.
+ */
+export type UploadImagesZoneProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: ((props: UploadZoneChildProps) => ReactNode) | ReactNode;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare function UploadImagesZone({ children, ...props }: UploadImagesZoneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+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";

package/src/lib/_hooks/useCropper.d.ts

@@ -0,0 +1,30 @@
+import { Area } from "react-easy-crop";
+import { FileWithId } from "../types";
+export type UseCropperProps = {
+    value?: FileWithId[];
+    onChange?: (files: FileWithId[]) => void;
+};
+export declare function useCropper({ value, onChange }: UseCropperProps): {
+    fileQueue: FileWithId[];
+    file: FileWithId | undefined;
+    editorImage: string | undefined;
+    cropArea: Area | undefined;
+    crop: {
+        x: number;
+        y: number;
+    };
+    zoom: number;
+    rotation: number;
+    isOpen: boolean;
+    setFileQueue: import("react").Dispatch<import("react").SetStateAction<FileWithId[]>>;
+    setEditorImage: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setCropArea: import("react").Dispatch<import("react").SetStateAction<Area | undefined>>;
+    setCrop: import("react").Dispatch<import("react").SetStateAction<{
+        x: number;
+        y: number;
+    }>>;
+    setZoom: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setRotation: import("react").Dispatch<import("react").SetStateAction<number>>;
+    closeImage: () => void;
+    acceptImage: (file: FileWithId) => void | undefined;
+};

package/src/lib/_hooks/useUploadImages.d.ts

@@ -0,0 +1,101 @@
+import { Accept } from "react-dropzone";
+import { ErrorCode } from "../_utils/errors";
+import { FileWithId } from "../types";
+import { CropperConfig } from "../UploadImages/Cropper";
+/**
+ * Configuration for the image upload hook.
+ */
+export type UseUploadImagesProps = {
+    value?: FileWithId[];
+    accept?: Accept;
+    cropper?: CropperConfig;
+    onError?: (errorCode: ErrorCode) => void;
+    onChange?: (files: FileWithId[]) => void;
+};
+/**
+ * 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"] }
+ * });
+ * ```
+ */
+export declare function useUploadImages({ value, accept, cropper: cropperConfig, onError, onChange, }: UseUploadImagesProps): {
+    uploader: {
+        value: FileWithId[] | undefined;
+        dropzone: import("react-dropzone").DropzoneState;
+        addFiles: (newFiles: FileWithId[]) => void;
+        removeFile: (id: string) => void;
+        clearFiles: () => void;
+        cropper: {
+            fileQueue: FileWithId[];
+            file: FileWithId | undefined;
+            editorImage: string | undefined;
+            cropArea: import("react-easy-crop").Area | undefined;
+            crop: {
+                x: number;
+                y: number;
+            };
+            zoom: number;
+            rotation: number;
+            isOpen: boolean;
+            setEditorImage: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+            setCropArea: import("react").Dispatch<import("react").SetStateAction<import("react-easy-crop").Area | undefined>>;
+            setCrop: import("react").Dispatch<import("react").SetStateAction<{
+                x: number;
+                y: number;
+            }>>;
+            setZoom: import("react").Dispatch<import("react").SetStateAction<number>>;
+            setRotation: import("react").Dispatch<import("react").SetStateAction<number>>;
+            closeImage: () => void;
+            acceptImage: (file: FileWithId) => void | undefined;
+            config: CropperConfig;
+        } | undefined;
+    };
+    value: FileWithId[] | undefined;
+    dropzone: import("react-dropzone").DropzoneState;
+    addFiles: (newFiles: FileWithId[]) => void;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+    cropper: {
+        fileQueue: FileWithId[];
+        file: FileWithId | undefined;
+        editorImage: string | undefined;
+        cropArea: import("react-easy-crop").Area | undefined;
+        crop: {
+            x: number;
+            y: number;
+        };
+        zoom: number;
+        rotation: number;
+        isOpen: boolean;
+        setEditorImage: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+        setCropArea: import("react").Dispatch<import("react").SetStateAction<import("react-easy-crop").Area | undefined>>;
+        setCrop: import("react").Dispatch<import("react").SetStateAction<{
+            x: number;
+            y: number;
+        }>>;
+        setZoom: import("react").Dispatch<import("react").SetStateAction<number>>;
+        setRotation: import("react").Dispatch<import("react").SetStateAction<number>>;
+        closeImage: () => void;
+        acceptImage: (file: FileWithId) => void | undefined;
+        config: CropperConfig;
+    } | undefined;
+};

package/src/lib/_utils/errors.d.ts

@@ -0,0 +1,23 @@
+import { FileRejection } from "react-dropzone";
+/**
+ * Error codes for file upload validation failures.
+ *
+ * Wraps `"react-dropzone"` error codes with an additional Unknown state.
+ *
+ * @example
+ * ```typescript
+ * import { ErrorCode } from "@leancodepl/image-uploader";
+ *
+ * if (errorCode === ErrorCode.FileTooLarge) {
+ *   console.log("File exceeds maximum size limit");
+ * }
+ * ```
+ */
+export declare enum ErrorCode {
+    FileTooLarge = "file-too-large",
+    FileTooSmall = "file-too-small",
+    FileInvalidType = "file-invalid-type",
+    TooManyFiles = "too-many-files",
+    Unknown = "unknown"
+}
+export declare function mapFileRejectionsToErrorCode(fileRejections: FileRejection[]): ErrorCode;

package/src/lib/_utils/getImagePreviewData.d.ts

@@ -0,0 +1 @@
+export declare function getImagePreviewData(file: File): Promise<string>;

package/src/lib/_utils/isExactFile.d.ts

@@ -0,0 +1 @@
+export declare function isExactFile(a: File, b: File): boolean;

package/src/lib/_utils/tryUploadWithUploadParams.d.ts

@@ -0,0 +1,24 @@
+import { FileWithId, UploadedFileWithId, UploadParams } from "../types";
+/**
+ * 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" }
+ * }));
+ * ```
+ */
+export declare function tryUploadWithUploadParams(image: FileWithId | UploadedFileWithId, getUploadParams: (image: FileWithId) => Promise<UploadParams | null | undefined>): Promise<UploadedFileWithId>;

package/src/lib/config.d.ts

@@ -0,0 +1,8 @@
+import { Accept } from "react-dropzone";
+export declare const defaultAccept: Accept;
+export declare const defaultCrop: {
+    x: number;
+    y: number;
+};
+export declare const defaultZoom = 1;
+export declare const defaultRotation = 0;

package/src/lib/types.d.ts

@@ -0,0 +1,34 @@
+export type { Accept, FileRejection } from "react-dropzone";
+export type FileWithId = {
+    originalFile: File;
+    id: string;
+};
+export type UploadedFileWithId = FileWithId & {
+    url: string;
+};
+export type UploadParams = {
+    uri: string;
+    method: string;
+    requiredHeaders: Record<string, string>;
+};
+export type UploadFilesChildProps = {
+    files?: FileWithId[];
+};
+export type UploadFileItemChildProps = {
+    file: FileWithId;
+    preview?: string;
+    remove: () => void;
+};
+export type UploadZoneChildProps = {
+    isDragActive: boolean;
+    isFileDialogActive: boolean;
+    isFocused: boolean;
+};
+export type UploadImagesCropperEditorChildProps = {
+    zoom: number;
+    rotation: number;
+    setZoom: (zoom: number) => void;
+    setRotation: (rotation: number) => void;
+    accept: () => void;
+    close: () => void;
+};