@sqrzro/ui 4.0.0-alpha.69 → 4.0.0-alpha.70

package/dist/forms/components/ImageInput/index.d.ts

@@ -8,8 +8,10 @@ export interface ImageInputClassNames {
     title: string;
 }
 export interface ImageInputComponentProps {
+    maxSize?: [number?, number?];
+    minSize?: [number?, number?];
     onUpload?: (file: File) => FormResponse<string>;
 }
 export type ImageInputProps = ClassNameProps<ImageInputClassNames> & InputProps<string | null> & ImageInputComponentProps;
-declare function ImageInput({ classNames, classNameProps, id, isDisabled, name, onChange, onUpload, value, }: Readonly<ImageInputProps>): React.ReactElement;
+declare function ImageInput({ classNames, classNameProps, id, isDisabled, maxSize, minSize, name, onChange, onUpload, value, }: Readonly<ImageInputProps>): React.ReactElement;
 export default ImageInput;

package/dist/forms/components/ImageInput/index.js

@@ -5,7 +5,7 @@ import preprocessImage from '../../../forms/utility/preprocess-image';
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
 import ImageInputPanel from '../ImageInputPanel';
-function ImageInput({ classNames, classNameProps, id, isDisabled, name, onChange, onUpload, value, }) {
+function ImageInput({ classNames, classNameProps, id, isDisabled, maxSize, minSize, name, onChange, onUpload, value, }) {
     const [error, setError] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const componentClassNames = useClassNames('imageInput', {
@@ -23,7 +23,7 @@ function ImageInput({ classNames, classNameProps, id, isDisabled, name, onChange
             return;
         }
         try {
-            const preprocessed = await preprocessImage(imageFiles[0]);
+            const preprocessed = await preprocessImage(imageFiles[0], { maxSize, minSize });
             const fnReturn = await onUpload(preprocessed);
             setIsLoading(false);
             if (fnReturn.error) {
@@ -41,6 +41,6 @@ function ImageInput({ classNames, classNameProps, id, isDisabled, name, onChange
             setError(err instanceof Error ? err.message : 'An unexpected error occurred');
         }
     }
-    return (_jsxs("div", { className: tw('relative flex items-center justify-center overflow-hidden text-center', componentClassNames?.root, isDisabled || isLoading ? 'pointer-events-none opacity-20' : null), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: "image/*", className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled || isLoading, id: id || name, name: name, onChange: handleChange, type: "file" }), _jsx(ImageInputPanel, { classNames: classNames, classNameProps: { ...classNameProps, isError: Boolean(error) }, error: error, isLoading: isLoading, value: value })] }));
+    return (_jsxs("div", { className: tw('relative flex items-center justify-center overflow-hidden text-center', componentClassNames?.root, isDisabled || isLoading ? 'pointer-events-none opacity-20' : null), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: "image/*", className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled || isLoading, id: id || name, name: name, onChange: handleChange, type: "file" }), _jsx(ImageInputPanel, { classNames: classNames, classNameProps: { ...classNameProps, isError: Boolean(error) }, error: error, isLoading: isLoading, minSize: minSize, value: value })] }));
 }
 export default ImageInput;

package/dist/forms/components/ImageInputPanel/index.d.ts

@@ -3,7 +3,8 @@ import type { ImageInputClassNames } from '../ImageInput';
 interface ImageInputPanelProps extends ClassNameProps<ImageInputClassNames> {
     error?: string | null;
     isLoading?: boolean;
+    minSize?: [number?, number?];
     value?: string | null;
 }
-declare function ImageInputPanel({ classNameProps, classNames, error, isLoading, value, }: ImageInputPanelProps): React.ReactElement;
+declare function ImageInputPanel({ classNameProps, classNames, error, isLoading, minSize, value, }: ImageInputPanelProps): React.ReactElement;
 export default ImageInputPanel;

package/dist/forms/components/ImageInputPanel/index.js

@@ -1,6 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClassNames, useIcon } from '../../../styles/context';
-function ImageInputPanel({ classNameProps, classNames, error, isLoading, value, }) {
+function renderMinSize(minSize) {
+    if (!minSize) {
+        return null;
+    }
+    const [width, height] = minSize;
+    if (width && height) {
+        return `(Minimum size: ${width} x ${height}px)`;
+    }
+    if (width) {
+        return `(Minimum width: ${width}px)`;
+    }
+    if (height) {
+        return `(Minimum height: ${height}px)`;
+    }
+    return null;
+}
+function ImageInputPanel({ classNameProps, classNames, error, isLoading, minSize, value, }) {
     const ErrorIcon = useIcon('imageInput.error');
     const UploadIcon = useIcon('imageInput.upload');
     const componentClassNames = useClassNames('imageInput', {
@@ -9,9 +25,10 @@ function ImageInputPanel({ classNameProps, classNames, error, isLoading, value,
     if (value) {
         return _jsx("img", { src: value, className: componentClassNames?.image });
     }
+    const minSizeDescription = renderMinSize(minSize);
     if (error) {
-        return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: ErrorIcon ? _jsx(ErrorIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: error }), _jsx("p", { className: componentClassNames?.description, children: "Please try again" })] }));
+        return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: ErrorIcon ? _jsx(ErrorIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: error }), _jsx("p", { className: componentClassNames?.description, children: minSizeDescription ?? 'Please try again' })] }));
     }
-    return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: UploadIcon ? _jsx(UploadIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: "Click to Upload" }), _jsx("p", { className: componentClassNames?.description, children: "(or drag an image over this box)" })] }));
+    return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: UploadIcon ? _jsx(UploadIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: "Click to Upload" }), _jsx("p", { className: componentClassNames?.description, children: minSizeDescription ?? 'or drag an image over this box' })] }));
 }
 export default ImageInputPanel;

package/dist/forms/utility/preprocess-image.d.ts

@@ -1,2 +1,6 @@
-export declare function preprocessImage(file: File, maxWidth?: number): Promise<File>;
+interface PreprocessImageOptions {
+    maxSize?: [number?, number?];
+    minSize?: [number?, number?];
+}
+export declare function preprocessImage(file: File, options?: PreprocessImageOptions): Promise<File>;
 export default preprocessImage;

package/dist/forms/utility/preprocess-image.js

@@ -8,7 +8,11 @@ const ALLOWED_TYPES = [
 function isSupportedImage(file) {
     return ALLOWED_TYPES.includes(file.type);
 }
-export async function preprocessImage(file, maxWidth = 1200) {
+function fitWithinMaxSize(width, height, maxWidth, maxHeight) {
+    const scale = Math.min(maxWidth / width, maxHeight / height, 1);
+    return [Math.round(width * scale), Math.round(height * scale)];
+}
+export async function preprocessImage(file, options = {}) {
     if (!isSupportedImage(file)) {
         throw new Error('Unsupported file type');
     }
@@ -16,20 +20,24 @@ export async function preprocessImage(file, maxWidth = 1200) {
         return file;
     }
     const bitmap = await createImageBitmap(file);
+    const { maxSize, minSize } = options;
+    const maxWidth = maxSize?.[0] || 1000;
+    const maxHeight = maxSize?.[1] || 1000;
+    const minWidth = minSize?.[0] || 0;
+    const minHeight = minSize?.[1] || 0;
     let { width, height } = bitmap;
-    if (width > maxWidth) {
-        const scale = maxWidth / width;
-        width = maxWidth;
-        height = Math.round(height * scale);
+    if (width < minWidth || height < minHeight) {
+        throw new Error(`Image is smaller than the minimum size`);
     }
+    const [newWidth, newHeight] = fitWithinMaxSize(width, height, maxWidth, maxHeight);
     const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
+    canvas.width = newWidth;
+    canvas.height = newHeight;
     const ctx = canvas.getContext('2d');
     if (!ctx) {
         throw new Error('Could not get canvas context');
     }
-    ctx.drawImage(bitmap, 0, 0, width, height);
+    ctx.drawImage(bitmap, 0, 0, newWidth, newHeight);
     const blob = await new Promise((resolve, reject) => {
         canvas.toBlob((data) => {
             if (data) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.69",
+  "version": "4.0.0-alpha.70",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",