@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/file-upload/file-upload-motion.ts

@@ -0,0 +1,85 @@
+// Rows grow open when a file arrives and collapse before it leaves, so the
+// list never jumps. Items already in the list on first render stay still.
+const OPTIONS = { duration: 240, easing: "cubic-bezier(0.16, 1, 0.3, 1)" };
+const settledLists = new WeakSet<Element>();
+const seenItems = new WeakSet<Element>();
+const leavingItems = new WeakSet<Element>();
+
+// Skips motion when the user asks for less, or the DOM can't animate (jsdom).
+function stillMotion(node: HTMLElement): boolean {
+	return (
+		typeof node.animate !== "function" ||
+		window.matchMedia?.("(prefers-reduced-motion: reduce)").matches !== false
+	);
+}
+
+// The closed frame also takes back the list gap beside the item.
+function closedGap(node: HTMLElement, isTile: boolean): Keyframe {
+	const parent = node.parentElement;
+	const gap = parent
+		? getComputedStyle(parent)[isTile ? "columnGap" : "rowGap"]
+		: "0px";
+	const side = node.previousElementSibling ? "Start" : "End";
+	const margin = isTile ? `marginInline${side}` : `marginBlock${side}`;
+	return gap === "normal" ? {} : { [margin]: `-${gap}` };
+}
+
+function sizeFrames(node: HTMLElement): [Keyframe, Keyframe] {
+	const style = getComputedStyle(node);
+	const isTile = node.dataset.layout === "tile";
+	const open: Keyframe = isTile
+		? { width: style.width }
+		: {
+				height: style.height,
+				paddingBlockEnd: style.paddingBlockEnd,
+				paddingBlockStart: style.paddingBlockStart,
+			};
+	const closed: Keyframe = isTile
+		? { width: "0px" }
+		: { height: "0px", paddingBlockEnd: "0px", paddingBlockStart: "0px" };
+	return [
+		{ ...closed, ...closedGap(node, isTile), opacity: 0, overflow: "hidden" },
+		{ ...open, opacity: 1, overflow: "hidden" },
+	];
+}
+
+export function settleList(node: HTMLElement | null): void {
+	if (node) {
+		settledLists.add(node);
+	}
+}
+
+export function growItem(node: HTMLElement | null): void {
+	if (!node || seenItems.has(node)) {
+		return;
+	}
+	seenItems.add(node);
+	const list = node.parentElement;
+	if (list && settledLists.has(list) && !stillMotion(node)) {
+		node.animate(sizeFrames(node), OPTIONS);
+	}
+}
+
+// Collapses the item, then removes it. A removal the app cancels opens it again.
+export function collapseItem(
+	node: HTMLElement | null,
+	remove: () => void
+): void {
+	if (!node || stillMotion(node)) {
+		remove();
+		return;
+	}
+	if (leavingItems.has(node)) {
+		return;
+	}
+	leavingItems.add(node);
+	const animation = node.animate(sizeFrames(node).reverse(), {
+		...OPTIONS,
+		fill: "forwards",
+	});
+	animation.onfinish = () => {
+		remove();
+		leavingItems.delete(node);
+		animation.cancel();
+	};
+}

package/src/components/file-upload/file-upload-validation.ts

@@ -0,0 +1,141 @@
+export type FileRejectionCode =
+	| "file-invalid-type"
+	| "file-too-large"
+	| "too-many-files";
+
+export interface FileRejection {
+	readonly code: FileRejectionCode;
+	readonly file: File;
+}
+
+export interface ValidationOptions {
+	accept?: string;
+	currentFiles?: readonly File[];
+	maxFiles?: number;
+	maxSize?: number;
+}
+
+export interface ValidationResult {
+	accepted: File[];
+	rejected: FileRejection[];
+}
+
+export function formatFileSize(bytes: number): string {
+	if (bytes < 1024) {
+		return `${bytes} B`;
+	}
+	const kb = 1024;
+	const mb = kb * 1024;
+	if (bytes < mb) {
+		return `${Number((bytes / kb).toFixed(1))} KB`;
+	}
+	return `${Number((bytes / mb).toFixed(1))} MB`;
+}
+
+function matchesPattern(name: string, type: string, pattern: string): boolean {
+	if (pattern.startsWith(".")) {
+		return name.endsWith(pattern);
+	}
+	if (pattern.endsWith("/*")) {
+		return type.startsWith(pattern.slice(0, -1));
+	}
+	return type === pattern;
+}
+
+function matchesAccept(file: File, accept: string): boolean {
+	const patterns = accept
+		.split(",")
+		.map((pattern) => pattern.trim().toLowerCase())
+		.filter((pattern) => pattern.length > 0);
+
+	if (patterns.length === 0) {
+		return true;
+	}
+
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return patterns.some((pattern) => matchesPattern(name, type, pattern));
+}
+
+function computeAvailableSlots(maxFiles?: number, currentCount = 0): number {
+	if (maxFiles === undefined) {
+		return Number.POSITIVE_INFINITY;
+	}
+	if (!Number.isSafeInteger(maxFiles) || maxFiles <= 0) {
+		return 0;
+	}
+	if (maxFiles === 1) {
+		return 1;
+	}
+	return Math.max(0, maxFiles - currentCount);
+}
+
+type EffectiveMaxSize =
+	| { readonly kind: "invalid" }
+	| { readonly kind: "unlimited" }
+	| { readonly kind: "valid"; readonly limit: number };
+
+function checkFileRejection(
+	file: File,
+	accept?: string,
+	maxSize: EffectiveMaxSize = { kind: "unlimited" },
+	availableSlots = Number.POSITIVE_INFINITY
+): FileRejectionCode | null {
+	if (accept && !matchesAccept(file, accept)) {
+		return "file-invalid-type";
+	}
+	if (
+		maxSize.kind === "invalid" ||
+		(maxSize.kind === "valid" && file.size > maxSize.limit)
+	) {
+		return "file-too-large";
+	}
+	if (availableSlots <= 0) {
+		return "too-many-files";
+	}
+	return null;
+}
+
+function computeEffectiveMaxSize(maxSize?: number): EffectiveMaxSize {
+	if (maxSize === undefined) {
+		return { kind: "unlimited" };
+	}
+	if (!Number.isSafeInteger(maxSize) || maxSize < 0) {
+		return { kind: "invalid" };
+	}
+	return { kind: "valid", limit: maxSize };
+}
+
+export function validateFiles(
+	files: readonly File[],
+	options: ValidationOptions = {}
+): ValidationResult {
+	const { accept, currentFiles = [], maxFiles, maxSize } = options;
+	const effectiveMaxSize = computeEffectiveMaxSize(maxSize);
+	const accepted: File[] = [];
+	const rejected: FileRejection[] = [];
+	let availableSlots = computeAvailableSlots(maxFiles, currentFiles.length);
+
+	for (const file of files) {
+		const rejection = checkFileRejection(
+			file,
+			accept,
+			effectiveMaxSize,
+			availableSlots
+		);
+		if (rejection) {
+			rejected.push({ code: rejection, file });
+		} else {
+			accepted.push(file);
+			availableSlots -= 1;
+		}
+	}
+
+	return { accepted, rejected };
+}
+
+export function cloneRejections(
+	rejections: readonly FileRejection[]
+): FileRejection[] {
+	return rejections.map((r) => ({ code: r.code, file: r.file }));
+}

package/src/components/file-upload/file-upload.styles.ts

@@ -0,0 +1,426 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors, fieldColors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+	opacity,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+const draw = keyframes({
+	from: { strokeDashoffset: 1 },
+	to: { strokeDashoffset: 0 },
+});
+
+// One dash period is 11px; two periods per loop keeps the march seamless.
+const march = keyframes({
+	from: { strokeDashoffset: 0 },
+	to: { strokeDashoffset: -22 },
+});
+
+export const fileUploadStyles = create({
+	dropzone: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":is(:disabled, [data-disabled])": fieldColors.disabled,
+			"[data-dragging]": colors.brandBackground,
+			default: "transparent",
+		},
+		borderColor: {
+			":is(:disabled, [data-disabled])": colors.border,
+			":is([aria-invalid='true'], [data-invalid]):not(:disabled):not([data-disabled])": `color-mix(in oklch, ${colors.destructive} 62%, ${fieldColors.surface})`,
+			// The marching dashes draw the edge while files hover.
+			"[data-dragging]": "transparent",
+			"[data-slot='file-upload-dropzone']:hover:not([data-disabled], [data-dragging], [data-invalid], [aria-invalid='true'])":
+				{
+					[conditions.canHover]: colors.controlBorderStrong,
+				},
+			default: `color-mix(in oklch, ${colors.content} 22%, transparent)`,
+		},
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "dashed",
+		borderWidth: borderWidth.thin,
+		boxSizing: "border-box",
+		color: colors.content,
+		cursor: {
+			":is(:disabled, [data-disabled])": "not-allowed",
+			default: "default",
+		},
+		// A slim drop row: the prompt reads left to right and the trigger ends it.
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: space["3"],
+		justifyContent: "flex-start",
+		opacity: {
+			":is(:disabled, [data-disabled])": opacity.disabled,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		paddingBlock: space["3"],
+		paddingInline: space["4"],
+		position: "relative",
+		textAlign: "start",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, outline-color, opacity",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	// Line styles inherit to the rect, which only sets its geometry.
+	dropzoneEdge: {
+		animationDuration: "1.2s",
+		animationIterationCount: "infinite",
+		animationName: {
+			[conditions.reducedMotion]: "none",
+			default: march,
+		},
+		animationTimingFunction: "linear",
+		// The edge covers the border box; the svg would default to 300 by 150.
+		blockSize: `calc(100% + ${borderWidth.thin}px * 2)`,
+		fill: "none",
+		inlineSize: `calc(100% + ${borderWidth.thin}px * 2)`,
+		insetBlockStart: `-${borderWidth.thin}px`,
+		insetInlineStart: `-${borderWidth.thin}px`,
+		opacity: {
+			":is([data-dragging] > *)": 1,
+			default: 0,
+		},
+		pointerEvents: "none",
+		position: "absolute",
+		stroke: colors.brandForeground,
+		strokeDasharray: "6 5",
+		strokeWidth: borderWidth.thin,
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity",
+	},
+	hiddenInput: { display: "none" },
+	item: {
+		alignItems: "center",
+		backgroundColor: {
+			":hover": { [conditions.canHover]: colors.controlSurfaceHover },
+			"[data-disabled]": fieldColors.disabled,
+			default: colors.surface,
+		},
+		borderColor: {
+			":has([data-slot='file-upload-item-status'][data-status='error'])":
+				colors.destructive,
+			default: colors.border,
+		},
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.outlineRest,
+		boxSizing: "border-box",
+		display: "flex",
+		gap: space["2"],
+		paddingBlock: space["3"],
+		paddingInline: space["3"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, border-color, box-shadow",
+		width: "100%",
+	},
+	itemContent: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: space["1"],
+		minWidth: 0,
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		listStyle: "none",
+		margin: space["0"],
+		padding: space["0"],
+		width: "100%",
+	},
+	liveRegion: {
+		clip: "rect(0 0 0 0)",
+		height: "1px",
+		margin: "-1px",
+		overflow: "hidden",
+		padding: space["0"],
+		position: "absolute",
+		whiteSpace: "nowrap",
+		width: "1px",
+	},
+	name: {
+		color: colors.content,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["20"],
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	preview: {
+		alignItems: "flex-start",
+		borderRadius: "inherit",
+		boxSizing: "border-box",
+		color: colors.brandForeground,
+		display: "flex",
+		height: "calc(100% - 1.5rem)",
+		justifyContent: "flex-start",
+		overflow: "hidden",
+		padding: space["2"],
+		width: "100%",
+	},
+	previewFull: { height: "100%", padding: 0 },
+	previewImage: { height: "100%", objectFit: "cover", width: "100%" },
+	previewRow: {
+		alignItems: "center",
+		backgroundColor: colors.brandBackground,
+		borderRadius: shape.controlRadius,
+		flexShrink: 0,
+		height: "2.5rem",
+		justifyContent: "center",
+		padding: 0,
+		width: "2.5rem",
+	},
+	previewUpload: {
+		alignItems: "center",
+		backgroundColor: colors.brandBackground,
+		borderRadius: shape.controlRadius,
+		flexShrink: 0,
+		height: "2.5rem",
+		justifyContent: "center",
+		padding: 0,
+		width: "2.5rem",
+	},
+	progress: { width: "100%" },
+	remove: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			":active": colors.secondary,
+			":disabled": "transparent",
+			":hover": { [conditions.canHover]: colors.controlSurfaceHover },
+			default: "transparent",
+		},
+		borderColor: "transparent",
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		color: {
+			":disabled": colors.content,
+			":hover": { [conditions.canHover]: colors.destructive },
+			default: colors.secondaryContent,
+		},
+		cursor: { ":disabled": "not-allowed", default: "pointer" },
+		display: "inline-flex",
+		flexShrink: 0,
+		height: { [conditions.sm]: controlSize["2xs"], default: controlSize.xs },
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		opacity: { ":disabled": opacity.disabled, default: 1 },
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		padding: space["0"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, border-color, color, outline-color",
+		userSelect: "none",
+		width: { [conditions.sm]: controlSize["2xs"], default: controlSize.xs },
+	},
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["3"],
+		width: "100%",
+	},
+	rowItem: {
+		backgroundColor: {
+			":has([data-slot='file-upload-item-status'][data-status='error'])":
+				colors.destructiveSubtle,
+		},
+		borderBlockEndWidth: { ":last-child": 0, default: borderWidth.thin },
+		borderColor: colors.border,
+		borderRadius: 0,
+		// The list draws the outer edge; rows only draw the dividers.
+		borderWidth: 0,
+		boxShadow: "none",
+	},
+	// Rows share one surface with hairline dividers instead of separate cards.
+	rows: {
+		borderColor: colors.border,
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		// No files, no surface.
+		borderWidth: { ":empty": 0, default: borderWidth.thin },
+		gap: 0,
+		overflow: "hidden",
+	},
+	size: {
+		color: colors.secondaryContent,
+		fontSize: fontSize["12"],
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["16"],
+		whiteSpace: "nowrap",
+	},
+	status: {
+		alignItems: "center",
+		color: {
+			"[data-status='error']": colors.destructive,
+			"[data-status='success']": colors.successContent,
+			"[data-status='uploading']": colors.brandForeground,
+			default: colors.secondaryContent,
+		},
+		display: "inline-flex",
+		fontSize: fontSize["12"],
+		fontWeight: fontWeight.medium,
+		gap: space["1"],
+		lineHeight: lineHeight["16"],
+		whiteSpace: "nowrap",
+	},
+	statusCheck: {
+		flexShrink: 0,
+		height: "1.125em",
+		overflow: "visible",
+		width: "1.125em",
+	},
+	statusCheckDraw: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "320ms",
+		},
+		animationFillMode: "both",
+		animationName: draw,
+		animationTimingFunction: easing.easeOut,
+	},
+	statusCheckMark: {
+		strokeDasharray: 1,
+		strokeWidth: 2,
+	},
+	tile: {
+		borderRadius: shape.controlRadiusLarge,
+		boxShadow: "none",
+		flexShrink: 0,
+		height: "4.5rem",
+		paddingBlock: 0,
+		paddingInline: 0,
+		position: "relative",
+		width: "4.5rem",
+	},
+	tileContent: {
+		borderRadius: `calc(${shape.controlRadiusLarge} - ${borderWidth.thin}px)`,
+		gap: 0,
+		height: "100%",
+		position: "relative",
+	},
+	tileName: {
+		bottom: space["1"],
+		clipPath: {
+			":is([data-slot='file-upload-item']:has([data-slot='file-upload-item-preview'] > img) *)":
+				"inset(50%)",
+			default: "none",
+		},
+		color: colors.secondaryContent,
+		fontSize: fontSize["12"],
+		insetInline: space["2"],
+		position: "absolute",
+	},
+	tileRemove: {
+		backgroundColor: {
+			":is([data-slot='file-upload-item']:has([data-slot='file-upload-item-preview'] > img) *)":
+				colors.surface,
+			default: colors.controlSurfaceHover,
+		},
+		borderRadius: "9999px",
+		boxShadow: "none",
+		fontSize: fontSize["14"],
+		insetBlockStart: space["1"],
+		insetInlineEnd: space["1"],
+		position: "absolute",
+		zIndex: 1,
+	},
+	tiles: {
+		flexDirection: "row",
+		gap: space["2"],
+		overflowX: "auto",
+		paddingBlock: space["1"],
+		paddingInline: space["1"],
+	},
+	upload: {
+		backgroundColor: {
+			"[data-disabled]": fieldColors.disabled,
+			default: colors.surface,
+		},
+		borderRadius: shape.controlRadiusLarge,
+		boxShadow: "none",
+		cursor: { "[data-disabled]": "not-allowed", default: "auto" },
+		paddingBlock: space["3"],
+		paddingInline: space["3"],
+		position: "relative",
+	},
+	uploadContent: {
+		alignItems: "center",
+		gap: space["3"],
+		textAlign: "start",
+	},
+	uploadName: {
+		maxWidth: "100%",
+		overflowWrap: "anywhere",
+		whiteSpace: "normal",
+	},
+	visuallyHidden: {
+		clipPath: "inset(50%)",
+		height: 1,
+		overflow: "hidden",
+		position: "absolute",
+		whiteSpace: "nowrap",
+		width: 1,
+	},
+});