@drivenets/design-system 0.0.1

package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.tsx

@@ -0,0 +1,143 @@
+import type React from 'react';
+import classNames from 'classnames';
+import { Progress } from '@ark-ui/react';
+import { DsTooltip } from '../../../ds-tooltip';
+import { DsButton } from '../../../ds-button';
+import { DsIcon } from '../../../ds-icon';
+import { getErrorMessage } from '../../utils/get-error-message';
+import type { FileUploadItemProps } from './file-upload-item.types';
+import styles from './file-upload-item.module.scss';
+
+/**
+ * Individual file upload item component
+ * Displays a single file with its upload status, progress, and action buttons
+ */
+export const FileUploadItem: React.FC<FileUploadItemProps> = ({
+	id,
+	name,
+	progress,
+	hideProgress = false,
+	status,
+	errors,
+	onCancel,
+	onRetry,
+	onRemove,
+	onDelete,
+}) => {
+	const fileItemClass = classNames(styles.fileItemContent, {
+		[styles.fileItemError]: status === 'error',
+		[styles.fileItemCompleted]: status === 'completed',
+		[styles.fileItemUploading]: status === 'uploading',
+		[styles.fileItemInterrupted]: status === 'interrupted' || status === 'cancelled',
+	});
+
+	return (
+		<div className={styles.fileItem}>
+			<div className={fileItemClass}>
+				<DsIcon className={styles.filePreview} icon="upload_file" size="tiny" />
+
+				<div className={styles.fileInfo}>
+					<div className={styles.fileName} title={name}>
+						{name}
+					</div>
+
+					<Progress.Root value={status === 'error' ? 1 : progress} className={styles.progressBar}>
+						<Progress.Track className={styles.progressTrack}>
+							<Progress.Range className={styles.progressRange} />
+						</Progress.Track>
+					</Progress.Root>
+				</div>
+
+				{(status === 'interrupted' || status === 'cancelled') && onRetry && (
+					<DsTooltip content="Retry">
+						<DsButton
+							type="button"
+							design="v1.2"
+							buttonType="tertiary"
+							aria-label={`Retry ${name} upload`}
+							onClick={() => onRetry(id)}
+						>
+							<DsIcon icon="refresh" size="small" />
+						</DsButton>
+					</DsTooltip>
+				)}
+
+				{(status === 'pending' || status === 'error' || status === 'interrupted') && (
+					<DsTooltip content="Remove">
+						<DsButton
+							type="button"
+							design="v1.2"
+							buttonType="tertiary"
+							aria-label={`Remove ${name} upload`}
+							onClick={() => onRemove?.(id)}
+						>
+							<DsIcon icon="do_not_disturb_on" size="small" />
+						</DsButton>
+					</DsTooltip>
+				)}
+
+				{status === 'uploading' && onCancel && (
+					<DsTooltip content="Cancel">
+						<DsButton
+							type="button"
+							design="v1.2"
+							buttonType="tertiary"
+							aria-label={`Cancel ${name} upload`}
+							onClick={() => onCancel(id)}
+						>
+							<DsIcon icon="close" size="small" />
+						</DsButton>
+					</DsTooltip>
+				)}
+
+				{status === 'completed' && (
+					<DsTooltip content="Delete">
+						<DsButton
+							type="button"
+							design="v1.2"
+							buttonType="tertiary"
+							aria-label={`Delete ${name}`}
+							onClick={() => onDelete?.(id)}
+						>
+							<DsIcon icon="delete" size="small" />
+						</DsButton>
+					</DsTooltip>
+				)}
+			</div>
+
+			{status === 'completed' && (
+				<div className={styles.completedText}>
+					<DsIcon icon="check_circle" size="tiny" filled />
+					Upload complete
+				</div>
+			)}
+
+			{status === 'interrupted' && (
+				<div className={styles.interruptedText}>
+					<DsIcon icon="info" size="tiny" filled />
+					Upload interrupted
+				</div>
+			)}
+
+			{status === 'cancelled' && (
+				<div className={styles.interruptedText}>
+					<DsIcon icon="info" size="tiny" filled />
+					Upload cancelled
+				</div>
+			)}
+
+			{status === 'error' &&
+				errors?.length &&
+				errors.map((error) => (
+					<div key={error} className={styles.errorMessage}>
+						<DsIcon icon="cancel" size="tiny" filled />
+						{getErrorMessage(error)}
+					</div>
+				))}
+
+			{!hideProgress && status === 'uploading' && (
+				<span className={styles.progressText}>Uploading...({Math.round(progress)}%)</span>
+			)}
+		</div>
+	);
+};

package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.types.tsx

@@ -0,0 +1,26 @@
+import type { UploadFileStatus } from '../../ds-file-upload-api.types';
+
+export interface FileUploadItemProps {
+	/** Unique identifier for the file */
+	id: string;
+	/** Name of the file */
+	name: string;
+	/** Upload progress percentage (0-100) */
+	progress: number;
+	/** Current status of the file upload */
+	status: UploadFileStatus;
+	/** Array of error messages if any */
+	errors?: string[];
+
+	/** Whether to hide progress bar */
+	hideProgress?: boolean;
+
+	/** Callback when cancel button is clicked */
+	onCancel?: (fileId: string) => void;
+	/** Callback when retry button is clicked */
+	onRetry?: (fileId: string) => void;
+	/** Callback when remove button is clicked (for pending/error states) */
+	onRemove?: (fileId: string) => void;
+	/** Callback when delete button is clicked (for completed state) */
+	onDelete?: (fileId: string) => void;
+}

package/src/components/ds-file-upload/components/file-upload-item/index.ts

@@ -0,0 +1,2 @@
+export { FileUploadItem } from './file-upload-item';
+export type { FileUploadItemProps } from './file-upload-item.types';

package/src/components/ds-file-upload/ds-file-upload-api.types.ts

@@ -0,0 +1,38 @@
+import type { FileUploadFileError } from '@ark-ui/react';
+
+export type FileError = FileUploadFileError;
+export type UploadFileStatus = 'pending' | 'uploading' | 'interrupted' | 'completed' | 'error' | 'cancelled';
+export type FileMetadata = Record<string, unknown>;
+
+export interface UploadedFile extends File {
+	id: string;
+	progress: number;
+	status: UploadFileStatus;
+	errors?: FileError[];
+}
+
+export interface FileUploadOptions {
+	file: File;
+	fileId: string;
+	metadata?: FileMetadata;
+	onProgress?: (progress: number) => void;
+	signal?: AbortSignal;
+}
+
+export interface FileUploadResult {
+	url: string;
+	metadata?: FileMetadata;
+}
+
+/**
+ * File upload adapter interface
+ * The upload method should:
+ * - resolve with FileUploadResult on success
+ * - reject with RetryableFileUploadError for transient failures
+ * - reject with FatalFileUploadError for permanent failures
+ */
+export interface FileUploadAdapter {
+	upload: (options: FileUploadOptions) => FileUploadResult | Promise<FileUploadResult>;
+	cancel?: (fileId: string) => void | Promise<void>;
+	delete?: (fileId: string) => void | Promise<void>;
+}

package/src/components/ds-file-upload/ds-file-upload.tsx

@@ -0,0 +1,46 @@
+import type React from 'react';
+import type { DsFileUploadProps } from './ds-file-upload.types';
+import { FileUpload } from './components/file-upload';
+import { useFileUpload } from './hooks';
+
+/**
+ * Design system File Upload component (with state management)
+ */
+const DsFileUpload: React.FC<DsFileUploadProps> = ({
+	adapter,
+	autoUpload = true,
+	maxConcurrent = 3,
+	metadata,
+	onFileUploadComplete,
+	onFileUploadError,
+	onFilesAdded,
+	onFileRemoved,
+	onFileDeleted,
+	onFileUploadCanceled,
+	onFileUploadRetried,
+	onAllFileUploadsComplete,
+	...props
+}) => {
+	const { getProps } = useFileUpload({
+		adapter,
+		autoUpload,
+		maxConcurrent,
+		maxFiles: props.maxFiles,
+		metadata,
+		onFileUploadComplete,
+		onFileUploadError,
+		onAllFileUploadsComplete,
+	});
+
+	const fileUploadProps = getProps({
+		onFilesAdded,
+		onFileRemoved,
+		onFileDeleted,
+		onFileUploadCanceled,
+		onFileUploadRetried,
+	});
+
+	return <FileUpload {...fileUploadProps} {...props} />;
+};
+
+export default DsFileUpload;

package/src/components/ds-file-upload/ds-file-upload.types.tsx

@@ -0,0 +1,54 @@
+import type { FileUploadProps } from './components/file-upload';
+import type { FileMetadata, FileUploadAdapter, FileUploadResult } from './ds-file-upload-api.types';
+
+export interface DsFileUploadProps extends Omit<
+	FileUploadProps,
+	| 'files'
+	| 'acceptedFiles'
+	| 'onFileAccept'
+	| 'onFileReject'
+	| 'onFileRemove'
+	| 'onFileDelete'
+	| 'onFileCancel'
+	| 'onFileRetry'
+	| 'uploadProgress'
+> {
+	/** Upload adapter implementation */
+	adapter: FileUploadAdapter;
+
+	/**
+	 * Whether to start upload automatically when files are added
+	 * @default true
+	 */
+	autoUpload?: boolean;
+
+	/** Maximum number of concurrent uploads */
+	maxConcurrent?: number;
+
+	/** Additional metadata to attach to uploads */
+	metadata?: FileMetadata;
+
+	/** Called when a file upload completes successfully */
+	onFileUploadComplete?: (fileId: string, result: FileUploadResult) => void;
+
+	/** Called when a file upload fails */
+	onFileUploadError?: (fileId: string, error: string) => void;
+
+	/** Called when files are added (before upload) */
+	onFilesAdded?: (files: File[]) => void;
+
+	/** Called when a file is removed */
+	onFileRemoved?: (fileId: string) => void;
+
+	/** Called when a file is deleted */
+	onFileDeleted?: (fileId: string) => void;
+
+	/** Called when a file upload is canceled */
+	onFileUploadCanceled?: (fileId: string) => void;
+
+	/** Called when a file upload is retried */
+	onFileUploadRetried?: (fileId: string) => void;
+
+	/** Called when all file uploads are complete */
+	onAllFileUploadsComplete?: () => void;
+}

package/src/components/ds-file-upload/errors/file-upload-errors.ts

@@ -0,0 +1,27 @@
+/**
+ * Base class for file upload errors
+ */
+export abstract class FileUploadError extends Error {
+	abstract readonly isRetryable: boolean;
+
+	constructor(message: string) {
+		super(message);
+		this.name = this.constructor.name;
+	}
+}
+
+/**
+ * Retryable file upload error - indicates the upload can be retried
+ * Examples: network errors, timeouts, temporary server errors (503), user cancellation
+ */
+export class RetryableFileUploadError extends FileUploadError {
+	readonly isRetryable = true;
+}
+
+/**
+ * Fatal file upload error - indicates the upload should not be retried
+ * Examples: file type not allowed, file too large, invalid credentials, malformed response
+ */
+export class FatalFileUploadError extends FileUploadError {
+	readonly isRetryable = false;
+}

package/src/components/ds-file-upload/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFileUpload } from './use-file-upload';
+export type { UseFileUploadReturn } from './use-file-upload';

package/src/components/ds-file-upload/hooks/use-file-upload.ts

@@ -0,0 +1,350 @@
+import { useState } from 'react';
+import type {
+	FileUploadFileAcceptDetails,
+	FileUploadFileRejectDetails,
+	FileUploadFileRejection,
+} from '@ark-ui/react';
+import { createUploadedFile } from '../utils/file-factory';
+import { isFileEqual } from '../utils/is-file-equal';
+import type {
+	FileError,
+	FileMetadata,
+	FileUploadAdapter,
+	FileUploadResult,
+	UploadedFile,
+	UploadFileStatus,
+} from '../ds-file-upload-api.types';
+import { FileUploadError } from '../errors/file-upload-errors';
+import type { FileUploadProps } from '../components/file-upload';
+
+export interface UseFileUploadConfig {
+	adapter: FileUploadAdapter;
+	autoUpload?: boolean;
+	maxConcurrent?: number;
+	maxFiles?: number;
+	metadata?: FileMetadata;
+	onFileUploadComplete?: (fileId: string, result: FileUploadResult) => void;
+	onFileUploadError?: (fileId: string, error: string) => void;
+	onAllFileUploadsComplete?: () => void;
+}
+
+export interface UseFileUploadUserCallbacks {
+	onFilesAdded?: (files: File[]) => void;
+	onFileRemoved?: (fileId: string) => void;
+	onFileDeleted?: (fileId: string) => void;
+	onFileUploadCanceled?: (fileId: string) => void;
+	onFileUploadRetried?: (fileId: string) => void;
+}
+
+export interface UseFileUploadReturn {
+	files: UploadedFile[];
+	acceptedFiles: UploadedFile[];
+	addFiles: (newFiles: File[]) => UploadedFile[];
+	addRejectedFiles: (filesWithErrors: { file: File; errors: FileError[] }[]) => void;
+	removeFile: (fileId: string) => void;
+	deleteFile: (fileId: string) => Promise<void>;
+	uploadFile: (fileId: string) => Promise<void>;
+	uploadAll: () => Promise<void>;
+	cancelUpload: (fileId: string) => Promise<void>;
+	retryUpload: (fileId: string) => Promise<void>;
+	clearFiles: () => void;
+	/**
+	 * Get props for FileUpload component with callback composition
+	 * @param userCallbacks Optional user callbacks to compose with internal logic
+	 * @returns Props ready to spread onto FileUpload component
+	 */
+	getProps: (
+		userCallbacks?: UseFileUploadUserCallbacks,
+	) => Pick<
+		FileUploadProps,
+		| 'files'
+		| 'acceptedFiles'
+		| 'onFileAccept'
+		| 'onFileReject'
+		| 'onFileRemove'
+		| 'onFileDelete'
+		| 'onFileCancel'
+		| 'onFileRetry'
+	>;
+}
+
+/**
+ * File upload state management hook
+ */
+export function useFileUpload({
+	adapter,
+	autoUpload = true,
+	maxConcurrent = 3,
+	maxFiles,
+	metadata,
+	onFileUploadComplete,
+	onFileUploadError,
+	onAllFileUploadsComplete,
+}: UseFileUploadConfig): UseFileUploadReturn {
+	const [abortControllers] = useState(() => new Map<string, AbortController>());
+	const [files, setFiles] = useState<UploadedFile[]>([]);
+	const acceptedFiles = files.filter((file) => file.status !== 'error');
+
+	if (files.length && !files.some((f) => f.status === 'uploading')) {
+		onAllFileUploadsComplete?.();
+	}
+
+	const getAddedFiles = (newFiles: File[]) =>
+		newFiles.filter((file) => !acceptedFiles.some((existing) => isFileEqual(existing, file)));
+
+	const getDuplicatedFiles = (newFiles: File[]) =>
+		newFiles.filter((file) => {
+			const uploadedFile = file as UploadedFile;
+			if (uploadedFile.id) {
+				return false;
+			}
+			const found = files.filter((existing) => isFileEqual(existing, file));
+			if (found.length) {
+				const alreadyAdded = found.some((existing) => existing.errors?.includes('FILE_EXISTS'));
+				return !alreadyAdded;
+			}
+			return false;
+		});
+
+	const markDuplicates = (duplicates: File[]) => {
+		const duplicateFilesWithErrors = duplicates.map((file) => ({
+			file,
+			errors: ['FILE_EXISTS'],
+		}));
+		if (duplicateFilesWithErrors.length) {
+			addRejectedFiles(duplicateFilesWithErrors);
+		}
+	};
+
+	const markMaxFiles = (files: File[]): File[] => {
+		if (maxFiles === undefined) {
+			return files;
+		}
+
+		const currentAcceptedCount = acceptedFiles.length;
+		const availableSlots = maxFiles - currentAcceptedCount;
+
+		let filesToAdd: File[];
+		let rejectedFiles: File[];
+
+		if (availableSlots <= 0) {
+			filesToAdd = [];
+			rejectedFiles = files;
+		} else if (files.length > availableSlots) {
+			filesToAdd = files.slice(0, availableSlots);
+			rejectedFiles = files.slice(availableSlots);
+		} else {
+			return files;
+		}
+
+		const rejectedFilesWithErrors = rejectedFiles.map((file) => ({
+			file,
+			errors: ['TOO_MANY_FILES'],
+		}));
+		addRejectedFiles(rejectedFilesWithErrors);
+
+		return filesToAdd;
+	};
+
+	const addNewFiles = (filesToUpload: File[]): UploadedFile[] => {
+		const uploadedFiles = filesToUpload.map((file) => createUploadedFile(file, 'pending'));
+		setFiles((prev) => [...prev, ...uploadedFiles]);
+		return uploadedFiles;
+	};
+
+	const uploadNewFiles = (uploadedFiles: UploadedFile[]) => {
+		if (autoUpload) {
+			uploadedFiles.forEach((file) => {
+				void uploadSingleFile(file);
+			});
+		}
+	};
+
+	const addFiles = (newFiles: File[]): UploadedFile[] => {
+		const addedFiles = getAddedFiles(newFiles);
+		const duplicateFiles = getDuplicatedFiles(newFiles);
+		markDuplicates(duplicateFiles);
+		const filesToAdd = markMaxFiles(addedFiles);
+		const uploadedFiles = addNewFiles(filesToAdd);
+		uploadNewFiles(uploadedFiles);
+		return uploadedFiles;
+	};
+
+	const addRejectedFiles = (filesWithErrors: { file: File; errors: FileError[] }[]) => {
+		const newFileStates = filesWithErrors.map(({ file, errors }) =>
+			createUploadedFile(file, 'error', errors),
+		);
+		setFiles((prev) => [...prev, ...newFileStates]);
+	};
+
+	const updateFileProgress = (fileId: string, progress: number) => {
+		setFiles((prev) => prev.map((file) => (file.id === fileId ? { ...file, progress } : file)));
+	};
+
+	const updateFileStatus = (fileId: string, status: UploadFileStatus, error?: string) => {
+		setFiles((prev) =>
+			prev.map((file) =>
+				file.id === fileId
+					? {
+							...file,
+							status,
+							errors: error ? [...(file.errors || []), error] : file.errors,
+						}
+					: file,
+			),
+		);
+	};
+
+	const uploadFile = async (fileId: string) => {
+		const file = acceptedFiles.find((f) => f.id === fileId);
+		if (file) {
+			await uploadSingleFile(file);
+		}
+	};
+
+	const uploadSingleFile = async (file: UploadedFile) => {
+		const fileId = file.id;
+		const abortController = new AbortController();
+		abortControllers.set(fileId, abortController);
+
+		updateFileStatus(file.id, 'uploading');
+
+		try {
+			const result = await adapter.upload({
+				file,
+				fileId,
+				metadata,
+				signal: abortController.signal,
+				onProgress: (progress) => {
+					updateFileProgress(fileId, progress);
+				},
+			});
+
+			updateFileStatus(fileId, 'completed');
+			updateFileProgress(fileId, 100);
+			onFileUploadComplete?.(fileId, result);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Upload failed';
+			// Determine status based on error type
+			// Unknown errors are treated as retryable (network errors, etc.)
+			let status: UploadFileStatus = 'interrupted';
+			if (error instanceof FileUploadError) {
+				status = error.isRetryable ? 'interrupted' : 'error';
+			}
+			updateFileStatus(fileId, status, errorMessage);
+			onFileUploadError?.(fileId, errorMessage);
+		} finally {
+			abortControllers.delete(fileId);
+		}
+	};
+
+	const uploadAll = async () => {
+		const pendingFiles = files.filter((f) => f.status === 'pending');
+
+		for (let i = 0; i < pendingFiles.length; i += maxConcurrent) {
+			const batch = pendingFiles.slice(i, i + maxConcurrent);
+			await Promise.allSettled(batch.map((f) => uploadFile(f.id)));
+		}
+	};
+
+	const cancelUpload = async (fileId: string) => {
+		abortControllers.get(fileId)?.abort();
+		abortControllers.delete(fileId);
+
+		if (adapter.cancel) {
+			await adapter.cancel(fileId);
+		}
+
+		updateFileStatus(fileId, 'cancelled');
+	};
+
+	const retryUpload = async (fileId: string) => {
+		updateFileStatus(fileId, 'pending');
+		updateFileProgress(fileId, 0);
+		await uploadFile(fileId);
+	};
+
+	const removeFile = (fileId: string) => {
+		abortControllers.get(fileId)?.abort();
+		abortControllers.delete(fileId);
+
+		setFiles((prev) => prev.filter((file) => file.id !== fileId));
+	};
+
+	const deleteFile = async (fileId: string) => {
+		if (adapter.delete) {
+			await adapter.delete(fileId);
+		}
+
+		removeFile(fileId);
+	};
+
+	const clearFiles = () => {
+		abortControllers.forEach((controller) => controller.abort());
+		abortControllers.clear();
+
+		setFiles([]);
+	};
+
+	const getProps = (userCallbacks?: UseFileUploadUserCallbacks) => {
+		const handleFileAccept = (details: FileUploadFileAcceptDetails) => {
+			const addedFiles = addFiles(details.files);
+			userCallbacks?.onFilesAdded?.(addedFiles);
+		};
+
+		const handleFileReject = (details: FileUploadFileRejectDetails) => {
+			addRejectedFiles(
+				details.files.map((f: FileUploadFileRejection) => ({
+					file: f.file,
+					errors: f.errors,
+				})),
+			);
+		};
+
+		const handleFileRemove = (fileId: string) => {
+			removeFile(fileId);
+			userCallbacks?.onFileRemoved?.(fileId);
+		};
+
+		const handleFileDelete = async (fileId: string) => {
+			await deleteFile(fileId);
+			userCallbacks?.onFileDeleted?.(fileId);
+		};
+
+		const handleFileUploadCanceled = async (fileId: string) => {
+			await cancelUpload(fileId);
+			userCallbacks?.onFileUploadCanceled?.(fileId);
+		};
+
+		const handleFileUploadRetried = async (fileId: string) => {
+			await retryUpload(fileId);
+			userCallbacks?.onFileUploadRetried?.(fileId);
+		};
+
+		return {
+			files,
+			acceptedFiles,
+			onFileAccept: handleFileAccept,
+			onFileReject: handleFileReject,
+			onFileRemove: handleFileRemove,
+			onFileDelete: handleFileDelete,
+			onFileCancel: handleFileUploadCanceled,
+			onFileRetry: handleFileUploadRetried,
+		};
+	};
+
+	return {
+		files,
+		acceptedFiles,
+		addFiles,
+		addRejectedFiles,
+		removeFile,
+		deleteFile,
+		uploadFile,
+		uploadAll,
+		cancelUpload,
+		retryUpload,
+		clearFiles,
+		getProps,
+	};
+}

package/src/components/ds-file-upload/index.ts

@@ -0,0 +1,7 @@
+export { default as DsFileUpload } from './ds-file-upload';
+export { FileUpload } from './components/file-upload';
+export * from './ds-file-upload.types';
+export type { FileUploadAdapter, FileUploadOptions, FileUploadResult } from './ds-file-upload-api.types';
+export * from './hooks';
+export { FileUploadError, RetryableFileUploadError, FatalFileUploadError } from './errors/file-upload-errors';
+export type { AcceptedFileType, FileExtension } from './types/accept-types';