@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,278 @@
+"use client";
+
+import { props as stylexProps } from "@stylexjs/stylex";
+import type { ChangeEvent, FocusEvent, RefCallback } from "react";
+import { useCallback, useRef, useState } from "react";
+import { assignRef } from "../../ref-utils";
+import { fileUploadStyles } from "./file-upload.styles";
+import type { FileUploadProps } from "./file-upload.types";
+import {
+	attachFormResetListener,
+	computeNextFiles,
+	createChangeDetails,
+	FileUploadContext,
+	restoreFocusAfterRemoval,
+	stripForbidden,
+	syncInputFiles,
+} from "./file-upload-context";
+import {
+	FileUploadDropzone as BaseDropzone,
+	FileUploadInput as BaseInput,
+	FileUploadTrigger as BaseTrigger,
+} from "./file-upload-controls";
+import { FileUploadItemPreview as BaseItemPreview } from "./file-upload-item-preview";
+import {
+	FileUploadItem as BaseItem,
+	FileUploadItemName as BaseItemName,
+	FileUploadItemProgress as BaseItemProgress,
+	FileUploadItemRemove as BaseItemRemove,
+	FileUploadItemSize as BaseItemSize,
+	FileUploadItemStatus as BaseItemStatus,
+	FileUploadList as BaseList,
+} from "./file-upload-items";
+import { cloneRejections, validateFiles } from "./file-upload-validation";
+
+const NO_FILES: readonly File[] = [];
+
+export function FileUpload({
+	accept,
+	children,
+	defaultValue,
+	disabled = false,
+	maxFiles = 1,
+	maxSize,
+	name,
+	onBlur,
+	onFileReject,
+	onValueChange,
+	ref: forwardedRef,
+	value,
+	...rest
+}: FileUploadProps) {
+	// Controlled or not is fixed at mount, like a native input.
+	const [isControlled] = useState(value !== undefined);
+	const initialFiles = defaultValue ? [...defaultValue] : [];
+	const [uncontrolledFiles, setUncontrolledFiles] =
+		useState<readonly File[]>(initialFiles);
+	const [message, setMessage] = useState("");
+	const [revision, setRevision] = useState(0);
+	const announce = (m: string) => {
+		setMessage(m);
+		setRevision((r) => r + 1);
+	};
+
+	const currentFiles = isControlled ? (value ?? NO_FILES) : uncontrolledFiles;
+	const initialDefaultRef = useRef(initialFiles);
+	const controlledSnapshotRef = useRef({
+		files: isControlled ? (value ?? NO_FILES) : NO_FILES,
+		revision: 0,
+	});
+
+	const rootRef = useRef<HTMLDivElement>(null),
+		inputRef = useRef<HTMLInputElement>(null),
+		triggerRef = useRef<HTMLButtonElement>(null);
+
+	const setInputCallbackRef: RefCallback<HTMLInputElement> = useCallback(
+		(node) => {
+			inputRef.current = node;
+			if (!node) {
+				return;
+			}
+			if (isControlled) {
+				controlledSnapshotRef.current.files = currentFiles;
+				controlledSnapshotRef.current.revision += 1;
+			}
+			syncInputFiles(node, currentFiles);
+
+			const removeResetListener = attachFormResetListener(node, () => {
+				const target = isControlled
+					? (value ?? NO_FILES)
+					: initialDefaultRef.current;
+				if (!isControlled) {
+					setUncontrolledFiles(target);
+				}
+				syncInputFiles(node, target);
+			});
+
+			return () => {
+				inputRef.current = null;
+				removeResetListener?.();
+			};
+		},
+		[currentFiles, isControlled, value]
+	);
+
+	const commitTransition = (
+		nextFiles: File[],
+		details: { readonly isCanceled: boolean },
+		action?: () => void
+	) => {
+		const snap = controlledSnapshotRef.current;
+		const startRevision = snap.revision;
+		const committed = isControlled ? snap.files : currentFiles;
+		syncInputFiles(inputRef.current, nextFiles);
+		let succeeded = false;
+		try {
+			action?.();
+			succeeded = !details.isCanceled;
+		} finally {
+			if (isControlled) {
+				syncInputFiles(
+					inputRef.current,
+					snap.revision > startRevision ? snap.files : committed
+				);
+			} else if (succeeded) {
+				setUncontrolledFiles(nextFiles);
+			} else {
+				syncInputFiles(inputRef.current, committed);
+			}
+		}
+	};
+
+	const processIncomingFiles = (
+		incoming: readonly File[],
+		source: "picker" | "drop"
+	) => {
+		const { accepted, rejected } = validateFiles(incoming, {
+			accept,
+			currentFiles,
+			maxFiles,
+			maxSize,
+		});
+		const nextFiles = computeNextFiles(currentFiles, accepted, maxFiles);
+		const details = createChangeDetails({
+			accepted: [...accepted],
+			reason: source,
+			rejected: cloneRejections(rejected),
+		});
+		const msg = rejected.length
+			? `Rejected ${rejected.map((r) => r.file.name).join(", ")}`
+			: "";
+
+		commitTransition(nextFiles, details, () => {
+			if (msg) {
+				onFileReject?.(cloneRejections(rejected));
+				announce(msg);
+			}
+			onValueChange?.([...nextFiles], details);
+		});
+	};
+
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+		const files = Array.from(event.target.files ?? []);
+		if (files.length > 0) {
+			processIncomingFiles(files, "picker");
+		}
+	};
+
+	const removeFile = (removeIndex: number, expectedFile?: File) => {
+		const file = currentFiles[removeIndex];
+		if (!file || (expectedFile && file !== expectedFile)) {
+			return;
+		}
+
+		const nextFiles = currentFiles.filter((_, index) => index !== removeIndex);
+		const details = createChangeDetails({
+			file,
+			index: removeIndex,
+			reason: "remove" as const,
+		});
+
+		commitTransition(nextFiles, details, () => {
+			onValueChange?.([...nextFiles], details);
+		});
+
+		if (!details.isCanceled) {
+			announce(`Removed ${file.name}`);
+			queueMicrotask?.(() =>
+				restoreFocusAfterRemoval(
+					rootRef.current,
+					removeIndex,
+					triggerRef.current
+				)
+			);
+		}
+	};
+
+	const mergedRootRef: RefCallback<HTMLDivElement> = useCallback(
+		(node) => {
+			rootRef.current = node;
+			const consumerCleanup = assignRef(forwardedRef, node);
+			return () => {
+				rootRef.current = null;
+				consumerCleanup?.();
+			};
+		},
+		[forwardedRef]
+	);
+
+	const handleBlur = useCallback(
+		(event: FocusEvent<HTMLDivElement>) => {
+			const target = event.relatedTarget;
+			if (target instanceof Node && rootRef.current?.contains(target)) {
+				return;
+			}
+			onBlur?.(event);
+		},
+		[onBlur]
+	);
+	const rootProps = { ...stripForbidden(rest), onBlur: handleBlur };
+
+	return (
+		<FileUploadContext
+			value={{
+				accept,
+				disabled,
+				files: currentFiles,
+				handleDropFiles: (f: readonly File[]) =>
+					processIncomingFiles(f, "drop"),
+				handleInputChange,
+				inputRef,
+				maxFiles,
+				name,
+				onBlur,
+				openPicker: () => inputRef.current?.click(),
+				removeFile,
+				rootRef,
+				setInputCallbackRef,
+				triggerRef,
+			}}
+		>
+			<div
+				{...rootProps}
+				data-disabled={disabled ? "" : undefined}
+				data-slot="file-upload"
+				ref={mergedRootRef}
+				{...stylexProps(fileUploadStyles.root)}
+			>
+				{children}
+				<div
+					aria-atomic="true"
+					aria-live="polite"
+					{...stylexProps(fileUploadStyles.liveRegion)}
+				>
+					{message ? <span key={revision}>{message}</span> : null}
+				</div>
+			</div>
+		</FileUploadContext>
+	);
+}
+
+export const FileUploadDropzone = BaseDropzone;
+export const FileUploadTrigger = BaseTrigger;
+export const FileUploadInput = BaseInput;
+export const FileUploadList = BaseList;
+export const FileUploadItem = BaseItem;
+export type { FileUploadItemPreviewProps } from "./file-upload-item-preview";
+export const FileUploadItemPreview = BaseItemPreview;
+export const FileUploadItemName = BaseItemName;
+export const FileUploadItemSize = BaseItemSize;
+export const FileUploadItemStatus = BaseItemStatus;
+export const FileUploadItemProgress = BaseItemProgress;
+export const FileUploadItemRemove = BaseItemRemove;
+
+export type * from "./file-upload.types";
+export type {
+	FileRejection,
+	FileRejectionCode,
+} from "./file-upload-validation";

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

@@ -0,0 +1,161 @@
+import type { ComponentPropsWithRef, FocusEvent, ReactNode, Ref } from "react";
+import type { FileRejection } from "./file-upload-validation";
+
+export type FileUploadStatus = "error" | "pending" | "success" | "uploading";
+
+export type FileUploadChangeDetails =
+	| {
+			readonly accepted: readonly File[];
+			readonly cancel: () => void;
+			readonly isCanceled: boolean;
+			readonly reason: "picker";
+			readonly rejected: readonly FileRejection[];
+	  }
+	| {
+			readonly accepted: readonly File[];
+			readonly cancel: () => void;
+			readonly isCanceled: boolean;
+			readonly reason: "drop";
+			readonly rejected: readonly FileRejection[];
+	  }
+	| {
+			readonly cancel: () => void;
+			readonly file: File;
+			readonly index: number;
+			readonly isCanceled: boolean;
+			readonly reason: "remove";
+	  };
+
+abstract class BivariantWrapper<T extends (...args: never[]) => unknown> {
+	abstract bivariance(...args: Parameters<T>): ReturnType<T>;
+}
+
+type BivariantCallback<T extends (...args: never[]) => unknown> =
+	BivariantWrapper<T>["bivariance"];
+
+export type FileUploadProps = Omit<
+	ComponentPropsWithRef<"div">,
+	| "className"
+	| "data-slot"
+	| "defaultValue"
+	| "multiple"
+	| "required"
+	| "style"
+	| "value"
+> & {
+	accept?: string;
+	children?: ReactNode;
+	defaultValue?: readonly File[];
+	disabled?: boolean;
+	maxFiles?: number;
+	maxSize?: number;
+	name?: string;
+	onBlur?: (event: FocusEvent<HTMLElement>) => void;
+	onFileReject?: BivariantCallback<
+		(rejections: readonly FileRejection[]) => void
+	>;
+	onValueChange?: BivariantCallback<
+		(files: readonly File[], details: FileUploadChangeDetails) => void
+	>;
+	ref?: Ref<HTMLDivElement>;
+	value?: readonly File[];
+};
+
+export interface FileUploadDropzoneState {
+	/** Files under the pointer; 0 when the browser hides the count. */
+	dragCount: number;
+	isDragging: boolean;
+}
+
+export type FileUploadDropzoneProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"children" | "className" | "data-slot" | "style"
+> & {
+	children?: ReactNode | ((state: FileUploadDropzoneState) => ReactNode);
+	disabled?: boolean;
+	ref?: Ref<HTMLDivElement>;
+};
+
+export type FileUploadTriggerProps = Omit<
+	ComponentPropsWithRef<"button">,
+	"className" | "data-slot" | "style" | "type"
+> & {
+	disabled?: boolean;
+	ref?: Ref<HTMLButtonElement>;
+};
+
+export type FileUploadInputProps = Omit<
+	ComponentPropsWithRef<"input">,
+	| "accept"
+	| "children"
+	| "className"
+	| "data-slot"
+	| "defaultValue"
+	| "disabled"
+	| "multiple"
+	| "name"
+	| "onChange"
+	| "required"
+	| "style"
+	| "type"
+	| "value"
+> & {
+	ref?: Ref<HTMLInputElement>;
+};
+
+export type FileUploadListProps = Omit<
+	ComponentPropsWithRef<"ul">,
+	"children" | "className" | "data-slot" | "style"
+> & {
+	children?: ReactNode | ((file: File, index: number) => ReactNode);
+	layout?: "rows" | "tiles";
+	ref?: Ref<HTMLUListElement>;
+};
+
+export type FileUploadItemProps = Omit<
+	ComponentPropsWithRef<"li">,
+	"className" | "data-slot" | "style"
+> & {
+	file: File;
+	index: number;
+	layout?: "row" | "tile" | "upload";
+	ref?: Ref<HTMLLIElement>;
+};
+
+export type FileUploadItemNameProps = Omit<
+	ComponentPropsWithRef<"span">,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: Ref<HTMLSpanElement>;
+};
+
+export type FileUploadItemSizeProps = Omit<
+	ComponentPropsWithRef<"span">,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: Ref<HTMLSpanElement>;
+};
+
+export type FileUploadItemStatusProps = Omit<
+	ComponentPropsWithRef<"span">,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: Ref<HTMLSpanElement>;
+	status?: FileUploadStatus;
+};
+
+export type FileUploadItemProgressProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"children" | "className" | "data-slot" | "style"
+> & {
+	ref?: Ref<HTMLDivElement>;
+	value?: number | null;
+};
+
+export type FileUploadItemRemoveProps = Omit<
+	ComponentPropsWithRef<"button">,
+	"className" | "data-slot" | "style" | "type"
+> & {
+	disabled?: boolean;
+	ref?: Ref<HTMLButtonElement>;
+};

package/src/components/frame/frame.styles.ts

@@ -0,0 +1,66 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } from "../../styles/interaction.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";
+
+export const frameStyles = create({
+	description: {
+		boxSizing: "border-box",
+		color: colors.secondaryContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+	},
+	footer: {
+		boxSizing: "border-box",
+		paddingBlock: space["4"],
+		paddingInline: space["5"],
+	},
+	frame: {
+		backgroundColor: colors.secondary,
+		borderRadius: shape.surfaceRadiusLarge,
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		// with flex gap, which also spaces header, panel, and footer siblings by 4px.
+		gap: space["1"],
+		minWidth: 0,
+		padding: space["1"],
+		position: "relative",
+		width: "100%",
+	},
+	header: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		paddingBlock: space["4"],
+		paddingInline: space["5"],
+	},
+	panel: {
+		backgroundClip: "padding-box",
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: shape.surfaceRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.outlineRest,
+		boxSizing: "border-box",
+		minWidth: 0,
+		padding: space["5"],
+		position: "relative",
+	},
+	title: {
+		boxSizing: "border-box",
+		color: colors.content,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.semibold,
+		lineHeight: lineHeight["20"],
+	},
+});

package/src/components/frame/frame.tsx

@@ -0,0 +1,126 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { frameStyles } from "./frame.styles";
+
+export type FrameProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "style"
+>;
+export type FramePanelProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "style"
+>;
+export type FrameHeaderProps = Omit<
+	ComponentPropsWithRef<"header">,
+	"className" | "style"
+>;
+export type FrameTitleProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "style"
+>;
+export type FrameDescriptionProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "style"
+>;
+export type FrameFooterProps = Omit<
+	ComponentPropsWithRef<"footer">,
+	"className" | "style"
+>;
+
+export function Frame({ children, ref: forwardedRef, ...rest }: FrameProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="frame"
+			ref={forwardedRef}
+			{...props(frameStyles.frame)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function FramePanel({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FramePanelProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="frame-panel"
+			ref={forwardedRef}
+			{...props(frameStyles.panel)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function FrameHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FrameHeaderProps) {
+	return (
+		<header
+			{...rest}
+			data-slot="frame-panel-header"
+			ref={forwardedRef}
+			{...props(frameStyles.header)}
+		>
+			{children}
+		</header>
+	);
+}
+
+export function FrameTitle({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FrameTitleProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="frame-panel-title"
+			ref={forwardedRef}
+			{...props(frameStyles.title)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function FrameDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FrameDescriptionProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="frame-panel-description"
+			ref={forwardedRef}
+			{...props(frameStyles.description)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function FrameFooter({
+	children,
+	ref: forwardedRef,
+	...rest
+}: FrameFooterProps) {
+	return (
+		<footer
+			{...rest}
+			data-slot="frame-panel-footer"
+			ref={forwardedRef}
+			{...props(frameStyles.footer)}
+		>
+			{children}
+		</footer>
+	);
+}