@sqrzro/ui 4.0.0-alpha.61 → 4.0.0-alpha.63

package/dist/components/elements/InfoPanel/index.d.ts

@@ -1,6 +1,8 @@
 import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { StyleVariant } from '../../../utility/interfaces';
 export interface InfoPanelClassNames {
+    content: string;
+    icon: StylableClassName;
     root: StylableClassName;
 }
 export interface InfoPanelProps extends ClassNameProps<InfoPanelClassNames> {

package/dist/components/elements/InfoPanel/index.js

@@ -1,9 +1,20 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/context';
 import applyVariants from '../../../styles/classnames/utility/apply-variants';
 function InfoPanel({ classNameProps, classNames, children, variant, }) {
-    const componentClassNames = useClassNames('infoPanel', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
-    return _jsx("aside", { className: componentClassNames?.root, children: children });
+    const ErrorIcon = useIcon('infoPanel.error');
+    const InfoIcon = useIcon('infoPanel.info');
+    const SuccessIcon = useIcon('infoPanel.success');
+    const WarningIcon = useIcon('infoPanel.warning');
+    const iconMap = {
+        error: ErrorIcon,
+        info: InfoIcon,
+        success: SuccessIcon,
+        warning: WarningIcon,
+    };
+    const Icon = variant ? iconMap[Array.isArray(variant) ? variant[0] : variant] : undefined;
+    const componentClassNames = useClassNames('infoPanel', { props: { ...classNameProps, ...applyVariants(variant), hasIcon: Boolean(Icon) } }, classNames);
+    return (_jsxs("aside", { className: componentClassNames?.root, children: [Icon && _jsx(Icon, { className: componentClassNames?.icon }), _jsx("div", { className: componentClassNames?.content, children: children })] }));
 }
 export default InfoPanel;

package/dist/components/elements/MenuItem/index.d.ts

@@ -5,5 +5,5 @@ interface MenuItemProps<Data, Response> extends ClassNameProps<MenuClassNames>,
     isDownload?: boolean;
     isNewWindow?: boolean;
 }
-declare function MenuItem<Data, Response>({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }: MenuItemProps<Data, Response>): React.ReactElement;
+declare function MenuItem<Data, Response>({ children, classNameProps, classNames, href, isDisabled, isDownload, isLoading, isNewWindow, onClick, }: MenuItemProps<Data, Response>): React.ReactElement;
 export default MenuItem;

package/dist/components/elements/MenuItem/index.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import Link from '../Link';
-function MenuItem({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }) {
+function MenuItem({ children, classNameProps, classNames, href, isDisabled, isDownload, isLoading, isNewWindow, onClick, }) {
     const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);
+    const linkClass = tw(componentClassNames?.link, isDisabled ? 'pointer-events-none opacity-30' : null);
     if (href) {
-        return (_jsx(Link, { className: componentClassNames?.link, href: href, isDownload: isDownload, isNewWindow: isNewWindow, onClick: onClick, children: children }));
+        return (_jsx(Link, { className: linkClass, href: href, isDownload: isDownload, isNewWindow: isNewWindow, onClick: onClick, children: children }));
     }
-    return (_jsxs("button", { className: componentClassNames?.link, onClick: onClick, type: "button", children: [children, " ", isLoading && '...'] }));
+    return (_jsxs("button", { className: linkClass, onClick: onClick, type: "button", children: [children, " ", isLoading && '...'] }));
 }
 export default MenuItem;

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

@@ -1,12 +1,15 @@
 import type { EditableFormFieldComponentProps } from '../../interfaces';
 import type { ColorInputComponentProps } from '../ColorInput';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { ImageInputComponentProps } from '../ImageInput';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
 export type EditableColorFormFieldProps = EditableFormFieldComponentProps<string | undefined> & ColorInputComponentProps;
 export declare function EditableColorFormField(props: Readonly<EditableColorFormFieldProps>): React.ReactElement;
 export type EditableDropdownFormFieldProps<T> = EditableFormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function EditableDropdownFormField<T>(props: Readonly<EditableDropdownFormFieldProps<T>>): React.ReactElement;
+export type EditableImageFormFieldProps = EditableFormFieldComponentProps<string | null> & ImageInputComponentProps;
+export declare function EditableImageFormField(props: Readonly<EditableImageFormFieldProps>): React.ReactElement;
 export type EditableTextAreaFormFieldProps = EditableFormFieldComponentProps<string> & TextAreaComponentProps;
 export declare function EditableTextAreaFormField(props: Readonly<EditableTextAreaFormFieldProps>): React.ReactElement;
 export type EditableTextFormFieldProps = EditableFormFieldComponentProps<string> & TextInputComponentProps;

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

@@ -5,6 +5,7 @@ import tw from '../../../styles/classnames/utility/tw';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
 import ColorInput from '../ColorInput';
 import Dropdown from '../Dropdown';
+import ImageInput from '../ImageInput';
 import EditableFormField from '../EditableFormField';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
@@ -29,6 +30,18 @@ export function EditableDropdownFormField(props) {
     }, [inputProps]);
     return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
 }
+export function EditableImageFormField(props) {
+    const classNames = useClassNames('imageInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ImageInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsx("div", { className: tw('relative flex items-center justify-center overflow-hidden text-center', classNames?.root), children: _jsx("img", { src: value, className: classNames?.image }) }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
 export function EditableTextAreaFormField(props) {
     const { fieldProps, inputProps } = extractEditableInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(TextArea, { ...renderProps, ...inputProps })), [inputProps]);

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

@@ -3,6 +3,7 @@ import type { AutocompleteComponentProps } from '../Autocomplete';
 import type { ColorInputComponentProps } from '../ColorInput';
 import type { CalendarInputComponentProps } from '../CalendarInput';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { ImageInputComponentProps } from '../ImageInput';
 import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
@@ -20,6 +21,8 @@ export type CSVFormFieldProps = FormFieldComponentProps<string>;
 export declare function CSVFormField(props: Readonly<CSVFormFieldProps>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function DropdownFormField<T>(props: Readonly<DropdownFormFieldProps<T>>): React.ReactElement;
+export type ImageFormFieldProps = FormFieldComponentProps<string | null> & ImageInputComponentProps;
+export declare function ImageFormField(props: Readonly<ImageFormFieldProps>): React.ReactElement;
 export type MoneyFormFieldProps = FormFieldComponentProps<number> & PointsInputComponentProps;
 export declare function MoneyFormField(props: Readonly<MoneyFormFieldProps>): React.ReactElement;
 export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInputComponentProps;

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

@@ -7,6 +7,7 @@ import CSVInput from '../CSVInput';
 import CalendarInput from '../CalendarInput';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
+import ImageInput from '../ImageInput';
 import PointsInput from '../PointsInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
@@ -39,6 +40,11 @@ export function DropdownFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function ImageFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ImageInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function MoneyFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps })), [inputProps]);

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

@@ -0,0 +1,15 @@
+import type { FormResponse, InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
+export interface ImageInputClassNames {
+    description: string;
+    icon: HighlightableClassName;
+    image: string;
+    root: string;
+    title: string;
+}
+export interface ImageInputComponentProps {
+    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;
+export default ImageInput;

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

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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, }) {
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const componentClassNames = useClassNames('imageInput', {
+        props: classNameProps,
+    }, classNames);
+    async function handleChange(event) {
+        if (!onUpload) {
+            return;
+        }
+        setError(null);
+        setIsLoading(true);
+        const imageFiles = event.target.files;
+        if (!imageFiles?.length) {
+            setIsLoading(false);
+            return;
+        }
+        try {
+            const preprocessed = await preprocessImage(imageFiles[0]);
+            const fnReturn = await onUpload(preprocessed);
+            setIsLoading(false);
+            if (fnReturn.error) {
+                setError(fnReturn.error);
+            }
+            else if (fnReturn.validation) {
+                setError(Object.values(fnReturn.validation)[0]);
+            }
+            else if (fnReturn.data !== null) {
+                onChange?.({ target: { name, value: fnReturn.data } });
+            }
+        }
+        catch (err) {
+            setIsLoading(false);
+            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 })] }));
+}
+export default ImageInput;

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

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ImageInputClassNames } from '../ImageInput';
+interface ImageInputPanelProps extends ClassNameProps<ImageInputClassNames> {
+    error?: string | null;
+    isLoading?: boolean;
+    value?: string | null;
+}
+declare function ImageInputPanel({ classNameProps, classNames, error, isLoading, value, }: ImageInputPanelProps): React.ReactElement;
+export default ImageInputPanel;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/context';
+function ImageInputPanel({ classNameProps, classNames, error, isLoading, value, }) {
+    const ErrorIcon = useIcon('imageInput.error');
+    const UploadIcon = useIcon('imageInput.upload');
+    const componentClassNames = useClassNames('imageInput', {
+        props: classNameProps,
+    }, classNames);
+    if (value) {
+        return _jsx("img", { src: value, className: componentClassNames?.image });
+    }
+    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: 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)" })] }));
+}
+export default ImageInputPanel;

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

@@ -14,6 +14,6 @@ function Switch({ classNameProps, classNames, details, id, isDisabled, label, na
             onChange(inputEvent);
         }
     }
-    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control, isDisabled ? 'pointer-events-none opacity-30' : ''), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
 }
 export default Switch;

package/dist/forms/hooks/useForm.d.ts

@@ -1,12 +1,6 @@
-import type { Default, InputEvent } from '../../forms/interfaces';
+import type { Default, FormResponse, InputEvent } from '../../forms/interfaces';
 import type { UseSuccessArgs } from '../../hooks/useSuccess';
 import type { FormProps } from '../components/Form';
-interface AwaitedFormResponse<M> {
-    data: M | null;
-    error: string | null;
-    validation: Record<string, string> | null;
-}
-export type FormResponse<M> = Promise<AwaitedFormResponse<M>>;
 export interface FieldPropsReturn<Request, K extends keyof Request = keyof Request> {
     error: Record<string, string> | null;
     isDisabled?: boolean;

package/dist/forms/interfaces.d.ts

@@ -1,5 +1,11 @@
 import type { EditableFormFieldProps } from './components/EditableFormField';
 import type { FormFieldProps } from './components/FormField';
+export interface AwaitedFormResponse<M> {
+    data: M | null;
+    error: string | null;
+    validation: Record<string, string> | null;
+}
+export type FormResponse<M> = Promise<AwaitedFormResponse<M>>;
 export type Default<T> = {
     [K in keyof T]?: T[K] | null;
 };
@@ -28,6 +34,7 @@ export interface InputProps<V, T extends V = V> {
     name: string;
     ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;
+    onError?: (error: string) => void;
     onKeyDown?: React.KeyboardEventHandler;
     value?: V;
 }

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

@@ -0,0 +1,2 @@
+export declare function preprocessImage(file: File, maxWidth?: number): Promise<File>;
+export default preprocessImage;

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

@@ -0,0 +1,50 @@
+const ALLOWED_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/svg+xml',
+    'image/webp',
+];
+function isSupportedImage(file) {
+    return ALLOWED_TYPES.includes(file.type);
+}
+export async function preprocessImage(file, maxWidth = 1200) {
+    if (!isSupportedImage(file)) {
+        throw new Error('Unsupported file type');
+    }
+    if (file.type === 'image/svg+xml') {
+        return file;
+    }
+    const bitmap = await createImageBitmap(file);
+    let { width, height } = bitmap;
+    if (width > maxWidth) {
+        const scale = maxWidth / width;
+        width = maxWidth;
+        height = Math.round(height * scale);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get canvas context');
+    }
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((data) => {
+            if (data) {
+                resolve(data);
+            }
+            else {
+                reject(new Error('Failed to create WebP blob'));
+            }
+        }, 'image/webp', 1);
+    });
+    const baseName = file.name.replace(/\.\w+$/, '');
+    const newName = `${baseName}.webp`;
+    return new File([blob], newName, {
+        type: 'image/webp',
+        lastModified: Date.now(),
+    });
+}
+export default preprocessImage;

package/dist/styles/classnames/config.d.ts

@@ -34,6 +34,7 @@ import type { EditableFormClassNames } from '../../forms/components/EditableForm
 import type { EditableFormFieldClassNames } from '../../forms/components/EditableFormField';
 import type { FormClassNames } from '../../forms/components/Form';
 import type { FormFieldClassNames } from '../../forms/components/FormField';
+import type { ImageInputClassNames } from '../../forms/components/ImageInput';
 import type { PasswordComplexityClassNames } from '../../forms/components/PasswordComplexity';
 import type { PasswordInputClassNames } from '../../forms/components/PasswordInput';
 import type { StaticTextInputClassNames } from '../../forms/components/StaticTextInput';
@@ -66,6 +67,7 @@ export interface UIClassNames {
     filterSearch?: ComponentClassNames<SearchFilterClassNames>;
     form?: ComponentClassNames<FormClassNames>;
     formField?: ComponentClassNames<FormFieldClassNames>;
+    imageInput?: ComponentClassNames<ImageInputClassNames>;
     infoPanel?: ComponentClassNames<InfoPanelClassNames>;
     link?: ComponentClassNames<LinkClassNames>;
     list?: ComponentClassNames<ListClassNames>;

package/dist/styles/icons/config.d.ts

@@ -12,6 +12,12 @@ export interface UIIcons {
     'filter.panel'?: IconComponent;
     'filter.search'?: IconComponent;
     'formField.error'?: IconComponent;
+    'imageInput.error'?: IconComponent;
+    'imageInput.upload'?: IconComponent;
+    'infoPanel.error'?: IconComponent;
+    'infoPanel.info'?: IconComponent;
+    'infoPanel.success'?: IconComponent;
+    'infoPanel.warning'?: IconComponent;
     'passwordComplexity.invalid'?: IconComponent;
     'passwordComplexity.valid'?: IconComponent;
     'passwordInput.hidden'?: IconComponent;

package/package.json

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