@sqrzro/ui 4.0.0-alpha.71 → 4.0.0-alpha.72

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

@@ -1,3 +1,4 @@
+import type { ImageTypeKey } from '../../../forms/utility/preprocess-image';
 import type { FormResponse, InputProps } from '../../../forms/interfaces';
 import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
 export interface ImageInputClassNames {
@@ -8,10 +9,12 @@ export interface ImageInputClassNames {
     title: string;
 }
 export interface ImageInputComponentProps {
+    accept?: ImageTypeKey[];
+    format?: ImageTypeKey;
     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, maxSize, minSize, name, onChange, onUpload, value, }: Readonly<ImageInputProps>): React.ReactElement;
+declare function ImageInput({ accept, classNames, classNameProps, format, 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, maxSize, minSize, name, onChange, onUpload, value, }) {
+function ImageInput({ accept, classNames, classNameProps, format, 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,12 @@ function ImageInput({ classNames, classNameProps, id, isDisabled, maxSize, minSi
             return;
         }
         try {
-            const preprocessed = await preprocessImage(imageFiles[0], { maxSize, minSize });
+            const preprocessed = await preprocessImage(imageFiles[0], {
+                accept,
+                format,
+                maxSize,
+                minSize,
+            });
             const fnReturn = await onUpload(preprocessed);
             setIsLoading(false);
             if (fnReturn.error) {
@@ -41,6 +46,6 @@ function ImageInput({ classNames, classNameProps, id, isDisabled, maxSize, minSi
             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, minSize: minSize, 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: accept?.map((type) => `.${type}`).join(',') || '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/utility/preprocess-image.d.ts

@@ -1,4 +1,7 @@
+export type ImageTypeKey = 'jpg' | 'png' | 'gif' | 'svg' | 'webp';
 interface PreprocessImageOptions {
+    accept?: ImageTypeKey[];
+    format?: ImageTypeKey;
     maxSize?: [number?, number?];
     minSize?: [number?, number?];
 }

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

@@ -1,19 +1,21 @@
-const ALLOWED_TYPES = [
-    'image/jpeg',
-    'image/png',
-    'image/gif',
-    'image/svg+xml',
-    'image/webp',
-];
-function isSupportedImage(file) {
-    return ALLOWED_TYPES.includes(file.type);
+const DEFAULT_FORMAT = 'webp';
+const DEFAULT_ACCEPT = ['jpg', 'png', 'gif', 'svg', 'webp'];
+const imageTypeMap = {
+    jpg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+};
+function isAccepted(file, accept = DEFAULT_ACCEPT) {
+    return accept.map((key) => imageTypeMap[key]).includes(file.type);
 }
 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)) {
+    if (!isAccepted(file, options.accept)) {
         throw new Error('Unsupported file type');
     }
     if (file.type === 'image/svg+xml') {
@@ -38,20 +40,21 @@ export async function preprocessImage(file, options = {}) {
         throw new Error('Could not get canvas context');
     }
     ctx.drawImage(bitmap, 0, 0, newWidth, newHeight);
+    const format = options.format || DEFAULT_FORMAT;
     const blob = await new Promise((resolve, reject) => {
         canvas.toBlob((data) => {
             if (data) {
                 resolve(data);
             }
             else {
-                reject(new Error('Failed to create WebP blob'));
+                reject(new Error(`Failed to create ${format.toUpperCase()} blob`));
             }
-        }, 'image/webp', 1);
+        }, imageTypeMap[format], 1);
     });
     const baseName = file.name.replace(/\.\w+$/, '');
-    const newName = `${baseName}.webp`;
+    const newName = `${baseName}.${format}`;
     return new File([blob], newName, {
-        type: 'image/webp',
+        type: imageTypeMap[format],
         lastModified: Date.now(),
     });
 }

package/package.json

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