@salesforce/webapp-template-feature-react-file-upload-experimental 1.61.2 → 1.61.3

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadDropZone.tsx

@@ -1,90 +0,0 @@
-import { LABELS } from "../utils/labels";
-
-import { ImageIcon } from "./FileUploadIcons";
-
-export interface FileUploadDropZoneProps {
-	/** Props for the hidden file input (ref, type, accept, multiple, onChange) */
-	inputProps: {
-		ref: React.RefObject<HTMLInputElement | null>;
-		type: "file";
-		accept?: string;
-		multiple: boolean;
-		onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-	};
-	/** Props for the drop zone (onClick, onDragOver, onDragLeave, onDrop, onKeyDown) */
-	dropZoneProps: {
-		onClick: () => void;
-		onDragOver: (e: React.DragEvent) => void;
-		onDragLeave: (e: React.DragEvent) => void;
-		onDrop: (e: React.DragEvent) => void;
-		onKeyDown: (e: React.KeyboardEvent) => void;
-	};
-	/** Whether the user is currently dragging over the drop zone */
-	isDragging: boolean;
-	/** Optional format hint (e.g. "JPEG, PNG, PDF, and MP4 formats, up to 50MB"). Defaults to LABELS.formatHint. */
-	formatHint?: string;
-	/** Optional CSS class for the drop zone (e.g. "h-full" for flex layouts) */
-	className?: string;
-}
-
-const DROP_ZONE_BASE_CLASSES =
-	"mb-2 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed bg-white px-6 pt-4 pb-8 transition-colors";
-const DROP_ZONE_DRAGGING_CLASSES = "border-blue-500 bg-blue-50";
-const DROP_ZONE_IDLE_CLASSES = "border-gray-300 hover:border-gray-400 hover:bg-gray-50";
-
-/**
- * Drop zone for file selection. Renders a dashed border area with document icon,
- * primary instruction text, and format hint. Accepts click and drag-and-drop.
- * Uses a hidden file input; props come from useFileUpload.
- */
-export function FileUploadDropZone({
-	inputProps,
-	dropZoneProps,
-	isDragging,
-	formatHint = LABELS.formatHint,
-	className = "",
-}: FileUploadDropZoneProps) {
-	const dropZoneClassName = [
-		DROP_ZONE_BASE_CLASSES,
-		isDragging ? DROP_ZONE_DRAGGING_CLASSES : DROP_ZONE_IDLE_CLASSES,
-		className,
-	]
-		.filter(Boolean)
-		.join(" ");
-
-	return (
-		<div
-			role="button"
-			tabIndex={0}
-			onClick={dropZoneProps.onClick}
-			onDragOver={dropZoneProps.onDragOver}
-			onDragLeave={dropZoneProps.onDragLeave}
-			onDrop={dropZoneProps.onDrop}
-			onKeyDown={dropZoneProps.onKeyDown}
-			className={dropZoneClassName}
-			aria-label={LABELS.dropZone}
-			data-testid="file-upload-drop-zone"
-		>
-			<input
-				id="file-upload-input-id"
-				ref={inputProps.ref}
-				type="file"
-				accept={inputProps.accept}
-				multiple={inputProps.multiple}
-				onChange={inputProps.onChange}
-				className="sr-only"
-				aria-hidden
-			/>
-			<span
-				className="inline-flex h-12 w-12 shrink-0 items-center justify-center text-gray-500"
-				aria-hidden
-			>
-				<ImageIcon size="lg" />
-			</span>
-			<p className="text-center text-sm font-medium text-gray-900">
-				{isDragging ? LABELS.dropFilesHere : LABELS.chooseFileOrDrop}
-			</p>
-			<p className="text-center text-xs text-gray-500">{formatHint}</p>
-		</div>
-	);
-}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadFileItem.tsx

@@ -1,99 +0,0 @@
-import { Button } from "./ui/__inherit__button";
-import { FileTypeIcon, IconImageClose, SuccessIcon } from "./FileUploadIcons";
-import {
-	formatFileSize,
-	getFileExtension,
-	getProgressWidth,
-	isUploading,
-} from "../utils/fileUploadUtils";
-import { LABELS } from "../utils/labels";
-import type { FileUploadItem } from "../types/fileUpload";
-
-export interface FileUploadFileItemProps {
-	/** The file item with upload state, progress, and optional error */
-	item: FileUploadItem;
-	/** Called when the user cancels an in-progress upload */
-	onCancel: (fileName: string) => void;
-}
-
-/**
- * Renders a single file upload item with file type icon, name, size, progress bar,
- * cancel button (when uploading), and status icon (success, error, or cancelled).
- */
-export function FileUploadFileItem({ item, onCancel }: FileUploadFileItemProps) {
-	const extension = getFileExtension(item.file.name);
-	const progressWidth = getProgressWidth(item.state, item.progress);
-
-	return (
-		<li
-			className="grid min-w-0 grid-cols-[auto_minmax(0,4fr)_minmax(0,5fr)] items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 p-2"
-			data-testid="file-upload-item"
-		>
-			<FileTypeIcon extension={extension} />
-			<div className="min-w-0 overflow-hidden">
-				<p
-					className="truncate text-sm font-medium text-gray-900"
-					title={item.file.name}
-					aria-label={LABELS.fileName(item.file.name)}
-				>
-					{item.file.name}
-				</p>
-				<p
-					className="truncate text-xs text-gray-600"
-					aria-label={LABELS.fileSize(formatFileSize(item.file.size))}
-				>
-					{formatFileSize(item.file.size)}
-				</p>
-			</div>
-			<div className="flex min-w-0 items-center gap-1.5">
-				<div
-					className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200"
-					role="progressbar"
-					aria-label={LABELS.uploadProgress(item.file.name)}
-					aria-valuenow={progressWidth}
-					aria-valuemin={0}
-					aria-valuemax={100}
-				>
-					<div
-						className="h-full bg-blue-600 transition-all duration-300"
-						style={{ width: `${progressWidth}%` }}
-					/>
-				</div>
-				{isUploading(item.state) && (
-					<Button
-						type="button"
-						variant="ghost"
-						size="icon"
-						className="h-7 w-7 shrink-0 text-gray-600 hover:text-red-600"
-						onClick={() => onCancel(item.file.name)}
-						aria-label={LABELS.cancelUpload(item.file.name)}
-					>
-						<IconImageClose fill="rgb(116, 116, 116)" />
-					</Button>
-				)}
-				{renderStatusIcon(item.state)}
-				{item.state === "error" && item.error && <p className="sr-only">{item.error}</p>}
-			</div>
-		</li>
-	);
-}
-
-function renderStatusIcon(state: FileUploadItem["state"]): React.ReactNode {
-	if (isUploading(state)) return null;
-	if (state === "success") return <SuccessIcon fill="rgb(46, 132, 74)" />;
-	if (state === "cancelled") {
-		return (
-			<span className="shrink-0 text-xs text-gray-500" aria-label={LABELS.cancelled}>
-				{LABELS.cancelled}
-			</span>
-		);
-	}
-	return (
-		<span
-			className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-red-600"
-			aria-label={LABELS.uploadFailed}
-		>
-			×
-		</span>
-	);
-}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadIcons.tsx

@@ -1,90 +0,0 @@
-import symbolsUrl from "../assets/symbols.svg?url";
-
-const IMAGE_EXTENSIONS = new Set([
-	"jpg",
-	"jpeg",
-	"png",
-	"gif",
-	"webp",
-	"svg",
-	"bmp",
-	"ico",
-	"tiff",
-	"tif",
-]);
-
-/**
- * Renders a file-type icon based on extension. Uses symbols.svg: "unknown" for
- * no extension, "image" for image types, or the extension (e.g. pdf) for others.
- */
-export function FileTypeIcon({ extension }: { extension: string }) {
-	/** Symbol ID in symbols.svg: unknown (no ext), image (image types), or extension (e.g. pdf). */
-	const ext = extension.toLowerCase();
-	const symbolId = extension === "FILE" ? "unknown" : IMAGE_EXTENSIONS.has(ext) ? "image" : ext;
-	return (
-		<span
-			className="inline-flex h-8 w-8 shrink-0 items-center justify-center"
-			aria-hidden
-			title={extension}
-		>
-			<svg className="h-full w-full" aria-hidden>
-				<use href={`${symbolsUrl}#${symbolId}`} />
-			</svg>
-		</span>
-	);
-}
-
-import iconImageCloseSvg from "../assets/icon-image-close.svg?raw";
-import successSvg from "../assets/success.svg?raw";
-import imageSvg from "../assets/image.svg?raw";
-
-/** Props for icon components (close, success, image) */
-export interface IconProps {
-	size?: "sm" | "md" | "lg";
-	fill?: string;
-}
-
-const sizeClass = (size: IconProps["size"]) =>
-	size === "sm" ? "h-4 w-4" : size === "lg" ? "h-12 w-12" : "h-6 w-6";
-
-/**
- * Close icon (circle with X). Renders from icon-image-close.svg.
- */
-export function IconImageClose({ size = "md", fill = "currentColor" }: IconProps) {
-	return (
-		<span
-			className={`inline-flex ${sizeClass(size)} shrink-0 items-center justify-center`}
-			style={{ color: fill }}
-			aria-hidden
-			dangerouslySetInnerHTML={{ __html: iconImageCloseSvg }}
-		/>
-	);
-}
-
-/**
- * Success icon (circle with checkmark). Renders from success.svg.
- */
-export function SuccessIcon({ size = "md", fill = "currentColor" }: IconProps) {
-	return (
-		<span
-			className={`inline-flex ${sizeClass(size)} shrink-0 items-center justify-center`}
-			style={{ color: fill }}
-			aria-hidden
-			dangerouslySetInnerHTML={{ __html: successSvg }}
-		/>
-	);
-}
-
-/**
- * Image icon (picture frame). Renders from image.svg. Used for drop zone.
- */
-export function ImageIcon({ size = "lg", fill = "currentColor" }: IconProps) {
-	return (
-		<span
-			className={`inline-flex ${sizeClass(size)} shrink-0 items-center justify-center`}
-			style={{ color: fill }}
-			aria-hidden
-			dangerouslySetInnerHTML={{ __html: imageSvg }}
-		/>
-	);
-}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/__inherit__button.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-				outline:
-					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-function Button({}: React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}) {
-	return <> </>;
-}
-
-export { Button, buttonVariants };

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/__inherit__dialog.tsx

@@ -1,102 +0,0 @@
-import * as React from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-
-import { Button } from "./__inherit__button";
-import { XIcon } from "lucide-react";
-
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-	className,
-	...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-	return <DialogPrimitive.Overlay data-slot="dialog-overlay" {...props} />;
-}
-
-function DialogContent({
-	className,
-	children,
-	showCloseButton = true,
-	...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-	showCloseButton?: boolean;
-}) {
-	return (
-		<DialogPortal>
-			<DialogOverlay />
-			<DialogPrimitive.Content data-slot="dialog-content" {...props}>
-				{children}
-				{showCloseButton && (
-					<DialogPrimitive.Close data-slot="dialog-close" asChild>
-						<Button variant="ghost" className="absolute top-2 right-2" size="icon">
-							<XIcon />
-							<span className="sr-only">Close</span>
-						</Button>
-					</DialogPrimitive.Close>
-				)}
-			</DialogPrimitive.Content>
-		</DialogPortal>
-	);
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-	return <div data-slot="dialog-header" {...props} />;
-}
-
-function DialogFooter({
-	className,
-	showCloseButton = false,
-	children,
-	...props
-}: React.ComponentProps<"div"> & {
-	showCloseButton?: boolean;
-}) {
-	return (
-		<div data-slot="dialog-footer" {...props}>
-			{children}
-			{showCloseButton && (
-				<DialogPrimitive.Close asChild>
-					<Button variant="outline">Close</Button>
-				</DialogPrimitive.Close>
-			)}
-		</div>
-	);
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-	return <DialogPrimitive.Title data-slot="dialog-title" {...props} />;
-}
-
-function DialogDescription({
-	className,
-	...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-	return <DialogPrimitive.Description data-slot="dialog-description" {...props} />;
-}
-
-export {
-	Dialog,
-	DialogClose,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogOverlay,
-	DialogPortal,
-	DialogTitle,
-	DialogTrigger,
-};