@freightos/freightwind 2.1.3 → 2.1.4

package/dist/esm/components/upload.js

@@ -0,0 +1,318 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, } from 'react';
+import { cva } from 'class-variance-authority';
+import { useDirection } from '@radix-ui/react-direction';
+import { cn } from '../lib/utils';
+import { iconMap } from '../lib/icon-utils';
+import { useStableId } from '../lib/use-stable-id';
+import { hasValidExtension } from '../lib/file-extensions';
+const uploadVariants = cva('fw-base group relative flex select-none rounded-fds-md outline-none transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-fds-blue-30 has-[:focus-visible]:ring-offset-2', {
+    variants: {
+        variant: {
+            rectangle: 'items-center gap-fds-sm p-fds-lg',
+            square: 'h-[99px] w-[100px] flex-col items-center justify-center gap-[10px] px-[26px] py-[23px]',
+        },
+        state: {
+            default: 'cursor-pointer justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
+            forbidden: 'cursor-not-allowed justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
+            uploading: 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
+            'uploading-spinner': 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
+            success: 'cursor-pointer border border-solid border-fds-blue-30 bg-fds-gray-10 hover:border-fds-blue-40 dark:border-fds-blue-30 dark:bg-fds-gray-90',
+            error: 'cursor-not-allowed border border-solid border-fds-red-30 bg-fds-gray-10 dark:border-fds-red-30 dark:bg-fds-gray-90',
+            disabled: 'cursor-not-allowed-gray border border-solid border-fds-gray-30 bg-fds-gray-10 text-fds-gray-50 [&_*]:pointer-events-none dark:border-fds-gray-70 dark:bg-fds-gray-90 dark:text-fds-gray-50',
+        },
+    },
+    defaultVariants: { variant: 'rectangle', state: 'default' },
+});
+const DEFAULT_LABELS = {
+    idleTitle: 'Upload your document',
+    idleSubtitle: 'Click or drag your file here',
+    idleCompact: 'Upload',
+    uploading: 'Uploading…',
+    forbidden: {
+        multiple: { title: 'Oops!', subtitle: 'You can only drag one file', compact: 'Oops!' },
+        type: { title: 'Oops!', subtitle: 'Unsupported file format', compact: 'Oops!' },
+        size: { title: 'Oops!', subtitle: 'File is too large', compact: 'Oops!' },
+        extension: { title: 'Oops!', subtitle: 'Invalid file extension', compact: 'Oops!' },
+        custom: { title: 'Oops!', subtitle: 'This file is not allowed', compact: 'Oops!' },
+    },
+};
+const DEFAULT_ICONS = {
+    idleRectangle: 'document',
+    idleSquare: 'plus',
+    forbidden: 'block',
+    success: 'check-circled',
+    error: 'clear-circled',
+    uploading: 'loading',
+    remove: 'trash',
+};
+const identity = (k) => k;
+function truncateMiddle(name, max) {
+    if (name.length <= max)
+        return name;
+    const dot = name.lastIndexOf('.');
+    const ext = dot > 0 ? name.slice(dot) : '';
+    const head = name.slice(0, Math.max(2, Math.floor((max - ext.length - 1) / 2)));
+    return `${head}…${ext || name.slice(-Math.max(2, Math.floor(max / 2)))}`;
+}
+function buildFileLabel(allFiles, isSquare) {
+    const names = allFiles.map((f) => f.name);
+    const tooltip = names.join('\n');
+    if (names.length === 1) {
+        return { display: isSquare ? truncateMiddle(names[0], 12) : names[0], tooltip };
+    }
+    const shown = names.slice(0, 2).map((n) => truncateMiddle(n, 12));
+    const extra = names.length - 2;
+    const display = shown.join(', ') + (extra > 0 ? `, +${extra}` : '');
+    return { display, tooltip };
+}
+const EXT_TO_MIME = {
+    '.pdf': ['application/pdf'],
+    '.png': ['image/png'],
+    '.jpg': ['image/jpeg'],
+    '.jpeg': ['image/jpeg'],
+    '.gif': ['image/gif'],
+    '.webp': ['image/webp'],
+    '.svg': ['image/svg+xml'],
+    '.xlsx': ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    '.xls': ['application/vnd.ms-excel'],
+    '.csv': ['text/csv', 'application/csv', 'text/plain'],
+    '.doc': ['application/msword'],
+    '.docx': ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+    '.txt': ['text/plain'],
+    '.zip': ['application/zip', 'application/x-zip-compressed'],
+};
+function mimeMatchesAccept(mime, accept) {
+    return accept.some((rule) => {
+        if (rule.endsWith('/*'))
+            return mime.startsWith(rule.slice(0, -1));
+        if (rule.startsWith('.'))
+            return (EXT_TO_MIME[rule.toLowerCase()] ?? []).includes(mime);
+        return mime === rule;
+    });
+}
+function extMatchesAccept(filename, accept) {
+    const dot = filename.lastIndexOf('.');
+    if (dot < 0)
+        return false;
+    const ext = filename.slice(dot).toLowerCase();
+    return accept.some((rule) => rule.toLowerCase() === ext);
+}
+function fileMatchesAccept(file, accept) {
+    return mimeMatchesAccept(file.type, accept) || extMatchesAccept(file.name, accept);
+}
+function validateDragItems(items, { maxFiles, accept, alreadyHeld = 0 }) {
+    const limit = maxFiles ?? 1;
+    if (items.length + alreadyHeld > limit)
+        return { ok: false, reason: 'multiple' };
+    if (accept && accept.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (!item || item.kind !== 'file')
+                continue;
+            if (!mimeMatchesAccept(item.type, accept))
+                return { ok: false, reason: 'type' };
+        }
+    }
+    return { ok: true };
+}
+function validatePickedFile(file, { accept, maxSize }) {
+    if (!hasValidExtension(file.name))
+        return { ok: false, reason: 'extension' };
+    if (accept && accept.length > 0 && !fileMatchesAccept(file, accept)) {
+        return { ok: false, reason: 'type' };
+    }
+    if (maxSize != null && file.size > maxSize)
+        return { ok: false, reason: 'size' };
+    return { ok: true };
+}
+export const Upload = forwardRef(function Upload({ dataTestId, variant = 'rectangle', value, files: filesProp, maxFiles, accept, maxSize, isError = false, isDisabled = false, isFillContainer = false, labels, t = identity, onUpload, onRemove, onForbidden, ariaLabel, defaultUploading = false, defaultUploadProgress, defaultForbidden, uploadingStyle = 'progress', className, ...rest }, ref) {
+    const inputId = useStableId('upload');
+    const dir = useDirection();
+    const [forbiddenReason, setForbiddenReason] = useState(defaultForbidden ?? null);
+    const [isUploading, setIsUploading] = useState(defaultUploading);
+    const [uploadProgress, setUploadProgress] = useState(defaultUploadProgress ?? null);
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const mergedForbidden = {
+        ...DEFAULT_LABELS.forbidden,
+        ...(labels?.forbidden ?? {}),
+    };
+    const fbCopy = mergedForbidden[forbiddenReason ?? 'multiple'];
+    const allFiles = filesProp ?? (value ? [value] : []);
+    const hasFiles = allFiles.length > 0;
+    const effectiveState = isDisabled
+        ? 'disabled'
+        : forbiddenReason
+            ? 'forbidden'
+            : isUploading
+                ? uploadingStyle === 'spinner' ? 'uploading-spinner' : 'uploading'
+                : isError
+                    ? 'error'
+                    : hasFiles
+                        ? 'success'
+                        : 'default';
+    const isSquare = variant === 'square';
+    const isMultiple = maxFiles == null || maxFiles > 1;
+    const acceptAttr = accept?.join(',');
+    const triggerUpload = (selected) => {
+        if (selected.length === 0)
+            return;
+        onUpload?.(selected, (v, progress) => {
+            setIsUploading(v);
+            setUploadProgress(v && progress !== undefined ? progress : null);
+        });
+    };
+    const handleDragEnter = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        const result = validateDragItems(e.dataTransfer.items, { maxFiles, accept: accept, alreadyHeld: allFiles.length });
+        if (!result.ok) {
+            setForbiddenReason(result.reason);
+            onForbidden?.(result.reason);
+        }
+    };
+    const handleDragLeave = (e) => {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        setForbiddenReason(null);
+    };
+    const handleDrop = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setForbiddenReason(null);
+        const dropped = Array.from(e.dataTransfer.files);
+        const limit = maxFiles ?? 1;
+        if (dropped.length + allFiles.length > limit) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of dropped) {
+            const result = validatePickedFile(f, { accept: accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        triggerUpload(dropped);
+    };
+    const handleNativeChange = (e) => {
+        const selected = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        const limit = maxFiles ?? 1;
+        if (selected.length + allFiles.length > limit) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of selected) {
+            const result = validatePickedFile(f, { accept: accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        setForbiddenReason(null);
+        triggerUpload(selected);
+    };
+    const handleRemoveClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.();
+    };
+    const renderIdle = () => {
+        const idleIconName = isSquare ? DEFAULT_ICONS.idleSquare : DEFAULT_ICONS.idleRectangle;
+        const IconCmp = iconMap[idleIconName];
+        const tone = effectiveState === 'disabled'
+            ? 'text-fds-gray-50 dark:text-fds-gray-50'
+            : 'text-fds-gray-80 dark:text-fds-gray-20';
+        if (!isSquare) {
+            return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "md", className: cn('shrink-0 rtl:scale-x-[-1]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", children: [_jsx("span", { className: cn('w-[130px] text-fds-sm font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-title`, children: t(mergedLabels.idleTitle) }), _jsx("span", { className: cn('w-[132px] text-fds-xs font-fds-bold leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-subtitle`, children: t(mergedLabels.idleSubtitle) })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { className: cn('w-[18.67px] h-[18.67px]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsx("span", { className: cn('w-12 text-fds-base font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-compact`, children: t(mergedLabels.idleCompact) })] }));
+    };
+    const renderForbidden = () => {
+        const IconCmp = iconMap[DEFAULT_ICONS.forbidden];
+        if (!isSquare) {
+            return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "md", className: "shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", "aria-live": "polite", children: [_jsx("span", { className: "w-[130px] text-fds-sm font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-title`, children: t(fbCopy?.title ?? '') }), _jsx("span", { className: "w-[132px] text-fds-xs font-fds-bold leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-subtitle`, children: t(fbCopy?.subtitle ?? '') })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "lg", className: "text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), _jsx("span", { className: "text-fds-base font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-compact`, children: t(mergedLabels.idleCompact) })] }));
+    };
+    const renderUploading = () => {
+        const SpinnerIcon = iconMap[DEFAULT_ICONS.uploading];
+        if (uploadingStyle === 'spinner') {
+            return (_jsx(SpinnerIcon, { size: "lg", role: "status", "aria-label": t(mergedLabels.uploading), className: "animate-spin text-fds-blue-30 rtl:direction-[reverse]", "data-test-id": `${dataTestId}-uploading-indicator` }));
+        }
+        return (_jsxs("div", { className: "flex w-full flex-col gap-fds-sm", "data-test-id": `${dataTestId}-uploading-indicator`, children: [_jsx("span", { className: cn('font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20', isSquare ? 'w-full text-fds-base' : 'w-[67px] text-fds-sm'), children: t(mergedLabels.uploading) }), _jsx("div", { className: cn('relative h-0.5 overflow-hidden rounded-[6px] bg-fds-gray-20 dark:bg-fds-gray-70', isSquare ? 'w-full' : 'w-[165px]'), role: "progressbar", "aria-valuenow": uploadProgress !== null ? Math.round(uploadProgress * 100) : undefined, "aria-valuemin": uploadProgress !== null ? 0 : undefined, "aria-valuemax": uploadProgress !== null ? 100 : undefined, "aria-label": t(mergedLabels.uploading), children: _jsx("div", { className: cn('absolute inset-y-0 start-0 rounded-[6px] bg-fds-green-30 upload-progress-bar', uploadProgress === null
+                            ? 'w-1/2 animate-[uploading-progress_1.4s_ease-in-out_infinite]'
+                            : 'transition-[width] duration-200 ease-in-out'), style: uploadProgress !== null ? { width: `${uploadProgress * 100}%` } : undefined }) })] }));
+    };
+    const renderFilled = (tone) => {
+        const tokenColor = tone === 'success'
+            ? 'text-fds-blue-30'
+            : tone === 'error'
+                ? 'text-fds-red-30'
+                : 'text-fds-gray-30 dark:text-fds-gray-50';
+        const accent = tone === 'success'
+            ? 'text-fds-green-30'
+            : tone === 'error'
+                ? 'text-fds-red-30'
+                : 'text-fds-gray-30 dark:text-fds-gray-50';
+        const StatusIcon = iconMap[tone === 'error' ? DEFAULT_ICONS.error : DEFAULT_ICONS.success];
+        const RemoveIcon = iconMap[DEFAULT_ICONS.remove];
+        const { display, tooltip } = buildFileLabel(allFiles, isSquare);
+        const statusIconNode = tone === 'success' ? (isSquare
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { className: cn('shrink-0 w-[13.33px] h-[13.33px]', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'error' ? (isSquare
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { size: "sm", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'disabled' ? (isSquare
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { size: "sm", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : (_jsx(StatusIcon, { size: isSquare ? 'md' : 'xs', className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` }));
+        return (_jsxs(_Fragment, { children: [statusIconNode, _jsx("span", { className: cn('truncate font-fds-regular leading-fds-body', isSquare && (tone === 'error' || tone === 'disabled') ? 'text-fds-base' : 'text-fds-sm', !isSquare && !isFillContainer && 'min-w-0 flex-1', !isSquare && isFillContainer && 'min-w-0', tokenColor, isSquare && 'w-full text-center'), title: tooltip, "data-test-id": `${dataTestId}-filename`, children: display }), !isSquare && hasFiles && tone !== 'disabled' && (_jsx("button", { type: "button", onClick: handleRemoveClick, "aria-label": t('Remove all files'), "data-test-id": `${dataTestId}-remove`, className: cn('inline-flex size-6 shrink-0 items-center justify-center rounded-fds-sm focus-visible:outline-none focus-visible:ring-2 cursor-pointer text-fds-red-30 hover:bg-fds-red-05 focus-visible:ring-fds-red-30 dark:hover:bg-fds-red-30/10', !isFillContainer && 'ms-auto'), children: _jsx(RemoveIcon, { size: "sm", "aria-hidden": true }) }))] }));
+    };
+    let body = null;
+    switch (effectiveState) {
+        case 'default':
+            body = renderIdle();
+            break;
+        case 'disabled':
+            body = hasFiles ? renderFilled('disabled') : renderIdle();
+            break;
+        case 'forbidden':
+            body = renderForbidden();
+            break;
+        case 'uploading':
+        case 'uploading-spinner':
+            body = renderUploading();
+            break;
+        case 'success':
+            body = renderFilled('success');
+            break;
+        case 'error':
+            body = (_jsx("div", { role: "alert", className: "contents", children: renderFilled('error') }));
+            break;
+    }
+    const isFilled = effectiveState === 'uploading' ||
+        effectiveState === 'uploading-spinner' ||
+        effectiveState === 'success' ||
+        effectiveState === 'error' ||
+        (effectiveState === 'disabled' && hasFiles);
+    const frameSize = isSquare
+        ? ''
+        : isFillContainer
+            ? isFilled ? 'h-full w-full justify-center' : 'h-full w-full'
+            : effectiveState === 'forbidden'
+                ? 'h-[69px] w-[193px]'
+                : isFilled
+                    ? 'h-[60px] w-[198px]'
+                    : 'h-[69px] w-[196px]';
+    return (_jsxs("label", { ref: ref, htmlFor: inputId, "data-test-id": dataTestId, "data-state": effectiveState, "data-variant": variant, "data-filled": hasFiles ? 'true' : 'false', dir: dir, "aria-label": ariaLabel ?? t(mergedLabels.idleTitle), "aria-disabled": isDisabled || undefined, "aria-busy": (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') || undefined, className: cn(uploadVariants({ variant, state: effectiveState }), effectiveState === 'default' && (isSquare ? 'upload-dash-4-2-square' : isFillContainer ? 'upload-dash-fluid' : 'upload-dash-4-2'), effectiveState === 'forbidden' && (isSquare
+            ? 'h-[100px] gap-[4px] upload-dash-4-4'
+            : isFillContainer ? 'upload-dash-fluid-red' : 'upload-dash-4-2-red'), (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') && isSquare && 'h-[100px] p-[11px]!', effectiveState === 'success' && isSquare && 'h-[100px] gap-[4px]', effectiveState === 'error' && isSquare && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'disabled' && isSquare && hasFiles && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'uploading-spinner' && !isSquare && 'py-3.5!', frameSize, className), onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, ...rest, children: [_jsx("input", { id: inputId, type: "file", accept: acceptAttr, multiple: isMultiple, disabled: isDisabled, className: "sr-only", onChange: handleNativeChange, "data-test-id": `${dataTestId}-input` }), body] }));
+});
+export { uploadVariants };

package/dist/esm/index.js

@@ -2,3 +2,5 @@
 export { cn } from './lib/utils';
 export { useStableId } from './lib/use-stable-id';
 export { iconMap, renderInputIcon } from './lib/icon-utils';
+// Components
+export { Upload, uploadVariants } from './components/upload';