@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/FileUpload/components/FileUploadCanvas/FileUploadCanvas.tsx

@@ -0,0 +1,125 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useContext } from 'react';
+
+import { UploadSimple } from '../../../Icons';
+/* eslint-disable curly */
+import { BodyPrimary } from '../../../Typography/Text/Text';
+import {
+    FileUploadContext,
+    FileUploadProvider,
+    FileUploadProviderConfigProps,
+} from '../../providers/FileUploadProvider';
+import { FileUploadCanvasProps } from '../../types/sharedTypes';
+import { FileDropzoneOverlay } from '../FileDropzoneOverlay/FileDropzoneOverlay';
+import { FilePreviewList } from '../FilePreviewList/FilePreviewList';
+
+/**
+ * Empty state component displayed when no files are present
+ */
+const EmptyState = () => {
+    return (
+        <div className={cn('flex h-full flex-col items-center justify-center gap-xs', 'bg-gray-50 px-md py-2xl')}>
+            <UploadSimple color="secondary" />
+            <BodyPrimary
+                className="text-center"
+                color="secondary"
+            >
+                Drag files here to upload
+            </BodyPrimary>
+        </div>
+    );
+};
+
+/**
+ * Canvas content that shows either FilePreviewList or empty state
+ */
+const CanvasContent = ({
+    onFileDelete,
+    previewConfig,
+    previewStyle,
+}: {
+    onFileDelete?: FileUploadCanvasProps['onFileDelete'];
+    previewConfig?: FileUploadCanvasProps['previewConfig'];
+    previewStyle: FileUploadCanvasProps['previewStyle'];
+}) => {
+    const uploadContext = useContext(FileUploadContext);
+    const files = uploadContext?.files ?? [];
+
+    // Show empty state when no files
+    if (files.length === 0) {
+        return <EmptyState />;
+    }
+
+    // Show file preview list when files exist
+    return (
+        <FilePreviewList
+            {...previewConfig}
+            onDelete={onFileDelete}
+            previewStyle={previewStyle}
+        />
+    );
+};
+
+/**
+ * FileUploadCanvas component - An out-of-the-box solution for drag-and-drop file uploads
+ * with overlay-based interaction.
+ *
+ * This component wraps FilePreviewList with FileDropzoneOverlay, allowing users to drag
+ * files over existing content. The overlay appears during drag operations and provides
+ * visual feedback. It uses FileUploadProvider for state management.
+ *
+ * Key differences from FileUpload:
+ * - Uses FileDropzoneOverlay (overlay-based) instead of FileDropzone (dedicated area)
+ * - Supports disableClickThrough for interactive content underneath
+ * - Always shows FilePreviewList (no hideFilePreview option)
+ * - Ideal for gallery views and canvas-style interfaces
+ */
+export const FileUploadCanvas = ({
+    className,
+    disabled,
+    error,
+    initialFiles,
+    maxFiles,
+    maxSize,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    onFileDelete,
+    previewConfig,
+    previewStyle = 'list',
+    ...dropzoneOverlayProps
+}: FileUploadCanvasProps) => {
+    const providerProps: FileUploadProviderConfigProps = {
+        accept: dropzoneOverlayProps.accept,
+        disabled,
+        error,
+        initialFiles,
+        maxFiles,
+        maxSize,
+        onDrop,
+        onDropAccepted,
+        onDropRejected,
+        onFileDelete,
+        strictValidation: dropzoneOverlayProps.strictValidation,
+        validator: dropzoneOverlayProps.validator,
+    };
+
+    return (
+        <FileUploadProvider {...providerProps}>
+            <div className={cn('h-full w-full overflow-y-auto', className)}>
+                <FileDropzoneOverlay
+                    {...dropzoneOverlayProps}
+                    styleOptions={{ ...dropzoneOverlayProps.styleOptions, fillParent: true }}
+                >
+                    <CanvasContent
+                        onFileDelete={onFileDelete}
+                        previewConfig={previewConfig}
+                        previewStyle={previewStyle}
+                    />
+                </FileDropzoneOverlay>
+            </div>
+        </FileUploadProvider>
+    );
+};
+
+FileUploadCanvas.displayName = 'FileUploadCanvas';

package/src/FileUpload/components/GridFileCard/GridFileCard.tsx

@@ -0,0 +1,364 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { Badge } from '../../../Badge/Badge';
+import { Checkbox } from '../../../ChoiceListItem';
+import { IconButton } from '../../../IconButton/IconButton';
+import { DotsSixVertical, DotsThreeOutlineVertical, Paperclip, Trash } from '../../../Icons';
+import { Menu, MenuItem } from '../../../Menu';
+import { ProgressCircle } from '../../../ProgressCircle/ProgressCircle';
+import { BodyPrimary, BodySecondary } from '../../../Typography/Text/Text';
+import { formatFileSize } from '../../../utils/formatFileSize';
+import { dataNoDragSortable } from '../../components/GridFileCard/utils/sortable';
+import { useImageFilePreviewUrl } from '../../hooks/filePreview/useImageFilePreviewUrl';
+import { FileResource } from '../../types';
+import { BaseFileCardProps } from '../types';
+
+type GridViewProps = BaseFileCardProps & {
+    badge?: string;
+    'data-testid'?: string;
+    statusText?: string;
+};
+
+/**
+ * Actions to render. First 3 actions will be visible buttons,
+ * remaining will appear in overflow menu.
+ */
+const MAX_VISIBLE_ACTIONS = 3;
+
+export const GridFileCard = ({
+    actions = [],
+    badge,
+    className,
+    'data-testid': dataTestId = 'grid-file-card',
+    draggable,
+    errorMessage,
+    fileName,
+    hideFileName = false,
+    hideFileSize = false,
+    hideFileStatus = false,
+    imageSource,
+    isSelected,
+    onDelete,
+    onImageError,
+    onSelect,
+    progress,
+    selectable,
+    sortable,
+    status = 'default',
+    statusIcon,
+    statusText,
+}: GridViewProps) => {
+    const previewUrl = useImageFilePreviewUrl(imageSource);
+
+    const isRemoteFile = 'url' in imageSource;
+    const fileSize = isRemoteFile ? '' : formatFileSize(imageSource.size);
+
+    // Automatically hide file size for URLs, respect the prop for Files
+    const shouldHideFileSize = hideFileSize || isRemoteFile;
+
+    const defaultFileName = isRemoteFile ? (imageSource.url.split('/').pop() ?? 'image') : imageSource.name;
+    const fileDisplayName = fileName ?? defaultFileName;
+
+    // Status checks
+    const isError = status === 'error';
+    const isPending = status === 'pending';
+    const isProgressing = status === 'progressing';
+    const isComplete = status === 'complete';
+    const isDragging = sortable?.isDragging ?? false;
+
+    // Determine when to auto-render ProgressCircle
+    // Only when statusIcon is not provided AND status is pending/progressing/complete
+    const shouldShowProgressCircle = !statusIcon && (isPending || isProgressing || isComplete);
+
+    // Determine what to show below the file name (priority: error > progressing > size)
+    let fileStatusText = null;
+
+    if (isError && errorMessage && !hideFileStatus) {
+        fileStatusText = (
+            <BodySecondary
+                className="text-text-critical"
+                data-no-drag
+            >
+                {errorMessage}
+            </BodySecondary>
+        );
+    } else if ((isProgressing || isPending) && !hideFileStatus) {
+        // Use custom statusText if provided, otherwise use default
+        const defaultStatusText = isPending ? 'Pending' : 'Uploading';
+        const displayStatusText = statusText ?? defaultStatusText;
+        fileStatusText = (
+            <BodySecondary
+                color="secondary"
+                data-no-drag
+            >
+                {displayStatusText}
+            </BodySecondary>
+        );
+    } else if (!shouldHideFileSize) {
+        fileStatusText = (
+            <BodySecondary
+                color={isError ? 'critical' : 'secondary'}
+                data-no-drag
+            >
+                {fileSize}
+            </BodySecondary>
+        );
+    }
+
+    const actionsWithDelete = [
+        ...actions,
+        ...(onDelete
+            ? [
+                  {
+                      icon: Trash,
+                      iconStyle: 'regular',
+                      name: 'Delete',
+                      onClick: (_: React.MouseEvent<HTMLElement>, fileResource: FileResource) => onDelete(fileResource),
+                  },
+              ]
+            : []),
+    ];
+
+    // Modified sortable object that prevents drag events if the parent element has the data-no-drag attribute
+    const modifiedSortable = dataNoDragSortable(sortable);
+
+    // Handle visible actions
+    const visibleActions = actionsWithDelete.slice(0, MAX_VISIBLE_ACTIONS);
+
+    // Handle overflow actions - only used when we have 4+ actions
+    const overflowActions = actionsWithDelete.slice(MAX_VISIBLE_ACTIONS);
+
+    // Map status to ProgressCircle-compatible status (only needed when shouldShowProgressCircle is true)
+    let progressCircleStatus: 'pending' | 'progressing' | 'complete';
+    if (isPending) {
+        progressCircleStatus = 'pending';
+    } else if (isProgressing) {
+        progressCircleStatus = 'progressing';
+    } else {
+        progressCircleStatus = 'complete';
+    }
+
+    const isProcessing = isPending || isProgressing;
+
+    return (
+        <div
+            aria-busy={isProcessing || undefined}
+            className={cn(
+                'group/grid-file-card relative flex w-full min-w-0 cursor-pointer flex-col gap-xs',
+                'rounded-container p-xs',
+                'ring-1',
+                'transition-all duration-200',
+                'hover:z-10',
+                'focus-within:z-10',
+                {
+                    // Error state
+                    'bg-background-critical-light ring-border-critical focus-within:bg-background-critical-light focus-within:ring-border-critical hover:bg-background-critical-light hover:ring-border-critical':
+                        isError && !isDragging,
+                    // Default state
+                    'bg-background-primary ring-transparent focus-within:bg-background-subdued focus-within:ring-border-secondary hover:bg-background-subdued hover:ring-border-secondary':
+                        !isError && !isDragging,
+                    // Drag state
+                    'z-50 scale-105 border-border-selected bg-background-secondary shadow-01': isDragging,
+                },
+                className
+            )}
+            data-testid={dataTestId}
+            ref={modifiedSortable?.setNodeRef}
+            style={modifiedSortable?.styles}
+            {...modifiedSortable?.attributes}
+            {...modifiedSortable?.listeners}
+        >
+            <div className="relative aspect-square min-w-0 items-center justify-center rounded-container bg-background-subdued">
+                <div className="absolute left-0 top-0 z-10 flex items-center gap-[2px] p-xs">
+                    {selectable && (
+                        <div data-no-drag>
+                            <Checkbox.Option
+                                checked={isSelected}
+                                className="![grid-template-columns:24px_0px_1fr]"
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    e.stopPropagation();
+                                    onSelect?.(imageSource, e.target.checked);
+                                }}
+                            />
+                        </div>
+                    )}
+                    {badge && (
+                        <Badge
+                            className="mt-[3px]"
+                            color="neutral"
+                            emphasis="bold"
+                            round
+                            size="xs"
+                        >
+                            {badge}
+                        </Badge>
+                    )}
+                </div>
+                {draggable && (
+                    <div className="absolute right-[4.4px] top-[8px] z-10 p-[2px]">
+                        <DotsSixVertical
+                            className="flex-shrink-0 cursor-grab"
+                            color="inverse"
+                            size="sm"
+                            style="bold"
+                        />
+                    </div>
+                )}
+                {previewUrl ? (
+                    <img
+                        alt={fileDisplayName}
+                        className="absolute inset-0 h-full w-full rounded-container object-cover"
+                        onError={() => onImageError?.(imageSource)}
+                        src={previewUrl}
+                    />
+                ) : (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        <Paperclip
+                            color="primary"
+                            size="md"
+                        />
+                    </div>
+                )}
+                <div
+                    className={cn(
+                        // positioning
+                        'absolute inset-0',
+                        // children element positioning
+                        'flex items-end justify-center',
+                        // styling
+                        'rounded-container bg-background-overlay/20 p-xs',
+                        // transitions
+                        'opacity-0 transition-opacity duration-200',
+                        // group focus/hover states
+                        'group-focus-within/grid-file-card:opacity-100 group-hover/grid-file-card:opacity-100',
+                        // mouse pointer
+                        'cursor-pointer',
+                        {
+                            'cursor-grab': draggable,
+                        }
+                    )}
+                >
+                    <div className="flex items-center gap-xs">
+                        {/* Visible Actions (max of 4) */}
+                        {visibleActions.map((action, index) => (
+                            <IconButton
+                                aria-label={action.name}
+                                data-no-drag
+                                disabled={isProcessing}
+                                hideTooltip
+                                icon={action.icon}
+                                // @ts-expect-error - Look into this
+                                iconStyle={action.iconStyle}
+                                key={`${action.name}-${index}`}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    action.onClick(e, imageSource);
+                                }}
+                                shape="circle"
+                                size="xs"
+                                style="inverse"
+                                type="button"
+                                variant="transparent"
+                            />
+                        ))}
+
+                        {/* Overflow Menu */}
+                        {overflowActions.length > 0 && (
+                            <Menu
+                                data-no-drag
+                                hasRoundedBorders
+                                menuPlacement="bottom-start"
+                                menuSize="sm"
+                                numberOfColumns={3}
+                                trigger={
+                                    <IconButton
+                                        data-no-drag
+                                        disabled={isProcessing}
+                                        hideTooltip
+                                        icon={DotsThreeOutlineVertical}
+                                        iconStyle="fill"
+                                        onClick={() => {}}
+                                        shape="circle"
+                                        size="xs"
+                                        style="inverse"
+                                        type="button"
+                                        variant="transparent"
+                                    />
+                                }
+                            >
+                                {overflowActions.map((action, index) => (
+                                    <MenuItem
+                                        color={action.name === 'Delete' ? 'critical' : undefined}
+                                        data-no-drag
+                                        id={`${action.name}-${fileDisplayName}`}
+                                        key={`${action.name}-${index}`}
+                                        leftIcon={action.icon}
+                                        onClick={() => {
+                                            action.onClick({} as React.MouseEvent<HTMLDivElement>, imageSource);
+                                        }}
+                                        primaryLabel={action.name}
+                                    />
+                                ))}
+                            </Menu>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div className="flex items-center gap-[2px]">
+                <div className="flex min-w-0 flex-1 cursor-auto flex-col gap-[2px]">
+                    {!hideFileName && (
+                        <BodyPrimary
+                            className="truncate"
+                            color={isError ? 'critical' : 'primary'}
+                            data-no-drag
+                        >
+                            {fileDisplayName}
+                        </BodyPrimary>
+                    )}
+                    {fileStatusText}
+                </div>
+                {shouldShowProgressCircle ? (
+                    <div
+                        className="flex items-center"
+                        data-testid="grid-file-card-progress-circle"
+                    >
+                        <ProgressCircle
+                            progress={progress}
+                            size="sm"
+                            status={progressCircleStatus}
+                        />
+                    </div>
+                ) : statusIcon ? (
+                    statusIcon.type === 'progressCircle' ? (
+                        <div
+                            className="flex items-center"
+                            data-testid="grid-file-card-progress-circle"
+                        >
+                            <ProgressCircle
+                                centerIcon={statusIcon.centerIcon}
+                                color={statusIcon.color}
+                                indeterminateAnimation={statusIcon.indeterminateAnimation}
+                                progress={progress}
+                                size="sm"
+                                status={progressCircleStatus}
+                            />
+                        </div>
+                    ) : (
+                        <div
+                            className="flex items-center"
+                            data-testid="grid-file-card-status-icon"
+                        >
+                            <statusIcon.icon
+                                color={statusIcon.color}
+                                size="sm"
+                                style={statusIcon.style}
+                            />
+                        </div>
+                    )
+                ) : null}
+            </div>
+        </div>
+    );
+};
+
+GridFileCard.displayName = 'GridFileCard';

package/src/FileUpload/components/GridFileCard/utils/sortable.ts

@@ -0,0 +1,48 @@
+import { BaseFileCardProps } from '../../../components/types';
+
+/**
+ * Helper function to check if an element or its parents have the data-no-drag attribute
+ * Exported for testing, you should probably be using the `dataNoDragSortable` function instead
+ * @param element - The element to check
+ * @returns Whether the element or any of its parents have the data-no-drag attribute
+ */
+export const hasDataNoDragOrParent = (element: HTMLElement | null): boolean => {
+    if (!element) {
+        return false;
+    }
+    if (element.hasAttribute('data-no-drag')) {
+        return true;
+    }
+    if (element.parentElement) {
+        return hasDataNoDragOrParent(element.parentElement);
+    }
+    return false;
+};
+
+/**
+ * Modified sortable object that stops propagation if the parent element has the data-no-drag attribute
+ * @param sortable - The sortable object to modify
+ * @returns The modified sortable object
+ */
+export const dataNoDragSortable = (sortable: BaseFileCardProps['sortable'] | undefined | null) => {
+    if (!sortable) {
+        return null;
+    }
+    return {
+        ...sortable,
+        attributes: {
+            ...sortable.attributes,
+        },
+        listeners: {
+            ...sortable.listeners,
+            onPointerDown: (e: React.PointerEvent) => {
+                if (hasDataNoDragOrParent(e.target as HTMLElement)) {
+                    e.stopPropagation();
+                    return;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                sortable.listeners?.onPointerDown?.(e);
+            },
+        },
+    };
+};