@remit/ui 0.0.69 → 0.0.71

package/src/components/move-mailbox-picker.stories.tsx

@@ -1,313 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
-
-const mailboxes: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox", isCurrent: true },
-	{ id: "archive", label: "Archive" },
-	{ id: "trash", label: "Trash" },
-	{ id: "spam", label: "Spam" },
-	{ id: "receipts", label: "Receipts", searchValue: "finance/receipts" },
-	{ id: "travel", label: "Travel", searchValue: "finance/travel" },
-	{ id: "newsletters", label: "Newsletters" },
-];
-
-const manyMailboxes: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox", isCurrent: true },
-	...Array.from({ length: 24 }, (_, i) => ({
-		id: `folder-${i}`,
-		label: `Project ${String(i + 1).padStart(2, "0")}`,
-	})),
-];
-
-const meta: Meta<typeof MoveMailboxPicker> = {
-	title: "Mail/MoveMailboxPicker",
-	component: MoveMailboxPicker,
-	parameters: { layout: "centered" },
-	decorators: [
-		(Story) => (
-			<div className="w-72 max-h-96 overflow-hidden rounded-md border border-line bg-surface shadow-lg">
-				<Story />
-			</div>
-		),
-	],
-};
-export default meta;
-
-type Story = StoryObj<typeof MoveMailboxPicker>;
-
-const Picker = ({ options }: { options: MoveMailboxOption[] }) => {
-	const [moved, setMoved] = useState<string | null>(null);
-	return (
-		<div className="flex flex-col">
-			<MoveMailboxPicker mailboxes={options} onSelect={setMoved} />
-			{moved && (
-				<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-					Moved to {moved}
-				</p>
-			)}
-		</div>
-	);
-};
-
-export const Default: Story = {
-	name: "Default (current folder marked)",
-	render: () => <Picker options={mailboxes} />,
-};
-
-export const ManyMailboxes: Story = {
-	name: "Many mailboxes (scrolls)",
-	render: () => <Picker options={manyMailboxes} />,
-};
-
-export const Empty: Story = {
-	name: "Empty list",
-	render: () => <Picker options={[]} />,
-};
-
-export const Autofocus: Story = {
-	name: "Autofocus search (mobile sheet)",
-	render: () => (
-		<MoveMailboxPicker mailboxes={mailboxes} onSelect={() => {}} autoFocus />
-	),
-};
-
-let createdSeq = 0;
-const mockCreateFolder = (name: string): Promise<MoveMailboxOption> =>
-	new Promise((resolve) => {
-		createdSeq += 1;
-		setTimeout(
-			() => resolve({ id: `created-${createdSeq}`, label: name }),
-			400,
-		);
-	});
-
-const CreatePicker = () => {
-	const [moved, setMoved] = useState<string | null>(null);
-	return (
-		<div className="flex flex-col">
-			<MoveMailboxPicker
-				mailboxes={mailboxes}
-				onSelect={setMoved}
-				onCreateFolder={mockCreateFolder}
-			/>
-			{moved && (
-				<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-					Moved to {moved}
-				</p>
-			)}
-		</div>
-	);
-};
-
-/**
- * With `onCreateFolder` wired, a search that names no existing folder offers a
- * create-and-move row at the bottom. Type e.g. "Taxes", then pick the create
- * row — the folder is created and the message moved into it in one step.
- */
-export const CreateAndMove: Story = {
-	name: "Create folder from search",
-	render: () => <CreatePicker />,
-};
-
-/**
- * Type a folder name into the search box and press the create-and-move row —
- * used by the pending and error stories so each lands in its state without a
- * manual click-through.
- */
-async function typeAndCreate(canvasElement: HTMLElement, folderName: string) {
-	const setInputValue = Object.getOwnPropertyDescriptor(
-		HTMLInputElement.prototype,
-		"value",
-	)?.set;
-	const input = canvasElement.querySelector<HTMLInputElement>(
-		'input[type="search"]',
-	);
-	if (!input) return;
-	setInputValue?.call(input, folderName);
-	input.dispatchEvent(new Event("input", { bubbles: true }));
-	const createButton = Array.from(
-		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-	).find((button) => button.textContent?.includes(`Create "${folderName}"`));
-	createButton?.click();
-}
-
-/** Mirrors the web-client wait's honest timeout copy. */
-const TIMEOUT_MESSAGE =
-	"The folder was created but the mail server hasn't confirmed it yet, so nothing was attached to it. It's in your folder list — try again in a moment.";
-
-const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
-
-const neverResolvesCreateFolder = (): Promise<MoveMailboxOption> =>
-	new Promise<MoveMailboxOption>(() => undefined);
-
-const rejectingCreateFolder =
-	(message: string) => (): Promise<MoveMailboxOption> =>
-		Promise.reject(new Error(message));
-
-/** Rejects the first attempt, resolves the retry — the resume the hook performs. */
-const failThenSucceedCreateFolder = () => {
-	let attempts = 0;
-	return (name: string): Promise<MoveMailboxOption> => {
-		attempts += 1;
-		return attempts === 1
-			? Promise.reject(new Error(TIMEOUT_MESSAGE))
-			: Promise.resolve({ id: "mbx-created", label: name });
-	};
-};
-
-/** Never resolves on its own; rejects with an AbortError when the signal aborts. */
-const abortAwareCreateFolder = (
-	_name: string,
-	signal?: AbortSignal,
-): Promise<MoveMailboxOption> =>
-	new Promise<MoveMailboxOption>((_resolve, reject) => {
-		signal?.addEventListener("abort", () =>
-			reject(new DOMException("Aborted", "AbortError")),
-		);
-	});
-
-/**
- * The move is a dependent write on the folder: the create-and-move row does not
- * resolve until the mail server confirms the folder, so the move never races the
- * folder into existence. The wait shows as "Creating folder…".
- */
-export const CreateFolderInFlight: Story = {
-	name: "Create folder — waiting for the server",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={neverResolvesCreateFolder}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * The folder create failed on the mail server. No move runs; the error is shown
- * inline and the create row can be pressed again to retry.
- */
-export const CreateFolderFailed: Story = {
-	name: "Create folder — failed (retry)",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={rejectingCreateFolder(
-				"The folder couldn't be created on the mail server. Please try again.",
-			)}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * The folder create was never confirmed within the wait bound — the timeout is
- * named distinctly, and no move runs.
- */
-export const CreateFolderTimedOut: Story = {
-	name: "Create folder — timed out (retry)",
-	render: () => (
-		<MoveMailboxPicker
-			mailboxes={mailboxes}
-			onSelect={() => undefined}
-			onCreateFolder={rejectingCreateFolder(TIMEOUT_MESSAGE)}
-		/>
-	),
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-	},
-};
-
-/**
- * Retry is a resume: the first create times out, and pressing the create row
- * again with the same name resolves and moves — the hook re-waits on the folder
- * it already made rather than re-creating it.
- */
-export const CreateFolderRetrySucceeds: Story = {
-	name: "Create folder — retry resumes and moves",
-	render: () => {
-		const RetryStage = () => {
-			const [moved, setMoved] = useState<string | null>(null);
-			return (
-				<div className="flex flex-col">
-					<MoveMailboxPicker
-						mailboxes={mailboxes}
-						onSelect={setMoved}
-						onCreateFolder={failThenSucceedCreateFolder()}
-					/>
-					{moved && (
-						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-							Moved to {moved}
-						</p>
-					)}
-				</div>
-			);
-		};
-		return <RetryStage />;
-	},
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-		await tick();
-		const retry = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.includes('Create "Taxes"'));
-		retry?.click();
-	},
-};
-
-/**
- * Closing the picker while "Creating folder…" is in flight aborts the wait: the
- * create promise rejects with an AbortError, so a folder that would confirm later
- * never fires the move after the picker is gone. Here "Close picker" unmounts it
- * mid-wait; no "Moved to" line appears.
- */
-export const CreateFolderClosedMidWait: Story = {
-	name: "Create folder — closing aborts the move",
-	render: () => {
-		const AbortStage = () => {
-			const [open, setOpen] = useState(true);
-			const [moved, setMoved] = useState<string | null>(null);
-			return (
-				<div className="flex flex-col">
-					<button
-						type="button"
-						onClick={() => setOpen(false)}
-						className="border-b border-line px-3 py-2 text-left text-xs text-fg-muted"
-					>
-						Close picker
-					</button>
-					{open && (
-						<MoveMailboxPicker
-							mailboxes={mailboxes}
-							onSelect={setMoved}
-							onCreateFolder={abortAwareCreateFolder}
-						/>
-					)}
-					{moved && (
-						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
-							Moved to {moved}
-						</p>
-					)}
-				</div>
-			);
-		};
-		return <AbortStage />;
-	},
-	play: async ({ canvasElement }) => {
-		await typeAndCreate(canvasElement, "Taxes");
-		await tick();
-		const close = Array.from(
-			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
-		).find((button) => button.textContent?.trim() === "Close picker");
-		close?.click();
-	},
-};

package/src/components/move-mailbox-picker.tsx

@@ -1,404 +0,0 @@
-import { Search } from "lucide-react";
-import {
-	type KeyboardEvent as ReactKeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { isAbortError } from "../lib/abort.js";
-import { cn } from "../lib/cn.js";
-import { Input } from "./input.js";
-
-export interface MoveMailboxOption {
-	/** Stable identity passed back to `onSelect`. */
-	id: string;
-	/** Display label shown in the row and matched against the search query. */
-	label: string;
-	/**
-	 * The message's current folder. Rendered as a non-selectable row so the
-	 * user sees where the message lives but can't move it onto itself.
-	 */
-	isCurrent?: boolean;
-	/**
-	 * Optional secondary string matched alongside `label` (e.g. the full
-	 * folder path so "gmail/" narrows nested folders). Never displayed.
-	 */
-	searchValue?: string;
-}
-
-export interface MoveMailboxPickerLabels {
-	/** Search input placeholder. */
-	searchPlaceholder?: string;
-	/** Accessible label for the search input. */
-	searchAriaLabel?: string;
-	/** Accessible label for the listbox. */
-	listAriaLabel?: string;
-	/** Suffix announced for the current folder, e.g. `(current folder)`. */
-	currentSuffix?: string;
-	/** Inline tag shown on the current folder row. */
-	currentTag?: string;
-	/** Builds the empty-state message for a query that matches nothing. */
-	emptyMessage?: (query: string) => string;
-	/** Builds the accessible label for a selectable row, e.g. `Move to X`. */
-	optionLabel?: (label: string) => string;
-	/** Builds the label for the create-and-move row, e.g. `Create "Receipts"`. */
-	createLabel?: (query: string) => string;
-	/** Shown on the create row while the folder is being created. */
-	createPending?: string;
-	/** Shown when creating the folder fails. */
-	createError?: string;
-}
-
-export interface MoveMailboxPickerProps {
-	/**
-	 * Destinations to show, already filtered, ordered and labeled by the app.
-	 * The kit owns only search, focus and keyboard — never data shaping.
-	 */
-	mailboxes: readonly MoveMailboxOption[];
-	onSelect: (mailboxId: string) => void;
-	/**
-	 * Create a folder named by the current search query. When provided and the
-	 * query names no existing folder, a create-and-move row is offered at the
-	 * bottom of the list; resolving it — once the mail server confirms the folder
-	 * — yields the new folder, which is selected (moved into). The picker aborts
-	 * the passed signal on unmount, so a folder that confirms after the picker is
-	 * closed never fires the move. Absent means no create affordance renders.
-	 */
-	onCreateFolder?: (
-		name: string,
-		signal?: AbortSignal,
-	) => Promise<MoveMailboxOption>;
-	/**
-	 * Called when the user dismisses the picker via Escape. Trigger consumers
-	 * use this to close their popover/drawer; the picker never owns
-	 * presentation, so it cannot close itself without help.
-	 */
-	onCancel?: () => void;
-	/**
-	 * Mobile callers (bottom-sheet) pass `autoFocus` to focus the search input
-	 * as soon as the sheet opens — keyboard accessory + immediate filter typing
-	 * without an extra tap. Desktop dropdowns leave focus on the trigger so
-	 * click-outside dismissal stays predictable.
-	 */
-	autoFocus?: boolean;
-	labels?: MoveMailboxPickerLabels;
-}
-
-const ROW_BASE =
-	"w-full text-left px-3 py-2.5 min-h-11 flex items-center gap-2 transition-colors text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
-
-const defaultLabels: Required<MoveMailboxPickerLabels> = {
-	searchPlaceholder: "Move to…",
-	searchAriaLabel: "Filter folders",
-	listAriaLabel: "Destination folders",
-	currentSuffix: "(current folder)",
-	currentTag: "current",
-	emptyMessage: (query) => `No folders match "${query}"`,
-	optionLabel: (label) => `Move to ${label}`,
-	createLabel: (query) => `Create "${query}"`,
-	createPending: "Creating folder…",
-	createError: "Couldn't create that folder. Please try again.",
-};
-
-const findFirstSelectable = (options: readonly MoveMailboxOption[]): number => {
-	for (let i = 0; i < options.length; i += 1) {
-		if (!options[i]?.isCurrent) return i;
-	}
-	return -1;
-};
-
-const findLastSelectable = (options: readonly MoveMailboxOption[]): number => {
-	for (let i = options.length - 1; i >= 0; i -= 1) {
-		if (!options[i]?.isCurrent) return i;
-	}
-	return -1;
-};
-
-const findNextSelectable = (
-	options: readonly MoveMailboxOption[],
-	from: number,
-	step: 1 | -1,
-): number => {
-	const count = options.length;
-	if (count <= 0) return -1;
-	const start = from < 0 ? (step === 1 ? -1 : count) : from;
-	for (let offset = 1; offset <= count; offset += 1) {
-		const candidate = (((start + step * offset) % count) + count) % count;
-		if (!options[candidate]?.isCurrent) return candidate;
-	}
-	return -1;
-};
-
-const matchesQuery = (option: MoveMailboxOption, query: string): boolean => {
-	if (option.label.toLowerCase().includes(query)) return true;
-	return option.searchValue?.toLowerCase().includes(query) ?? false;
-};
-
-/**
- * Move-to-folder destination picker: an always-on search input over a
- * roving-focus listbox. Data-agnostic — the app supplies pre-shaped,
- * pre-ordered options and performs the move in `onSelect`; the kit owns search
- * filtering, keyboard navigation and ARIA structure.
- */
-export const MoveMailboxPicker = ({
-	mailboxes,
-	onSelect,
-	onCreateFolder,
-	onCancel,
-	autoFocus = false,
-	labels,
-}: MoveMailboxPickerProps) => {
-	const text = { ...defaultLabels, ...labels };
-	const [query, setQuery] = useState("");
-	const [creating, setCreating] = useState(false);
-	const [createError, setCreateError] = useState<string>();
-	const [focusedIndex, setFocusedIndex] = useState<number>(() =>
-		findFirstSelectable(mailboxes),
-	);
-	const inputRef = useRef<HTMLInputElement>(null);
-	const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
-	// The create waits for the mail server to confirm the folder; abort it when
-	// the picker unmounts (its popover/drawer closes) so a late confirmation never
-	// fires the move after the picker is gone.
-	const createAbort = useRef<AbortController | null>(null);
-	useEffect(() => () => createAbort.current?.abort(), []);
-
-	useEffect(() => {
-		if (autoFocus) inputRef.current?.focus();
-	}, [autoFocus]);
-
-	const trimmedQuery = query.trim().toLowerCase();
-	const filtered = useMemo(() => {
-		if (!trimmedQuery) return [...mailboxes];
-		return mailboxes.filter((mailbox) => matchesQuery(mailbox, trimmedQuery));
-	}, [mailboxes, trimmedQuery]);
-
-	useEffect(() => {
-		setFocusedIndex((current) => {
-			if (
-				current >= 0 &&
-				current < filtered.length &&
-				!filtered[current]?.isCurrent
-			) {
-				return current;
-			}
-			return findFirstSelectable(filtered);
-		});
-	}, [filtered]);
-
-	useEffect(() => {
-		if (focusedIndex < 0) return;
-		const node = optionRefs.current[focusedIndex];
-		if (!node) return;
-		// Only steal focus if the user is already navigating the list — moving
-		// focus while they type in the filter input would trap them. The search
-		// input keeps focus until the first ArrowDown.
-		if (document.activeElement === inputRef.current) return;
-		node.focus();
-	}, [focusedIndex]);
-
-	const handleConfirm = useCallback(() => {
-		if (focusedIndex < 0) return;
-		const target = filtered[focusedIndex];
-		if (!target || target.isCurrent) return;
-		onSelect(target.id);
-	}, [focusedIndex, filtered, onSelect]);
-
-	const showCreate =
-		!!onCreateFolder &&
-		trimmedQuery.length > 0 &&
-		!mailboxes.some((mailbox) => mailbox.label.toLowerCase() === trimmedQuery);
-
-	const handleCreate = useCallback(() => {
-		if (!onCreateFolder) return;
-		const name = query.trim();
-		if (name === "") return;
-		setCreating(true);
-		setCreateError(undefined);
-		createAbort.current?.abort();
-		const controller = new AbortController();
-		createAbort.current = controller;
-		onCreateFolder(name, controller.signal)
-			.then((folder) => {
-				onSelect(folder.id);
-				setCreating(false);
-			})
-			.catch((error: unknown) => {
-				if (isAbortError(error)) return;
-				setCreateError(
-					error instanceof Error ? error.message : text.createError,
-				);
-				setCreating(false);
-			});
-	}, [onCreateFolder, query, onSelect, text.createError]);
-
-	const handleListKeyDown = useCallback(
-		(event: ReactKeyboardEvent<HTMLElement>) => {
-			switch (event.key) {
-				case "ArrowDown":
-					event.preventDefault();
-					setFocusedIndex((current) =>
-						findNextSelectable(filtered, current, 1),
-					);
-					return;
-				case "ArrowUp":
-					event.preventDefault();
-					setFocusedIndex((current) =>
-						findNextSelectable(filtered, current, -1),
-					);
-					return;
-				case "Home":
-					event.preventDefault();
-					setFocusedIndex(findFirstSelectable(filtered));
-					return;
-				case "End":
-					event.preventDefault();
-					setFocusedIndex(findLastSelectable(filtered));
-					return;
-				case "Enter":
-				case " ":
-					event.preventDefault();
-					handleConfirm();
-					return;
-				case "Escape":
-					event.preventDefault();
-					onCancel?.();
-					return;
-				default:
-					return;
-			}
-		},
-		[filtered, handleConfirm, onCancel],
-	);
-
-	const handleInputKeyDown = useCallback(
-		(event: ReactKeyboardEvent<HTMLInputElement>) => {
-			if (event.key === "ArrowDown") {
-				event.preventDefault();
-				if (filtered.length === 0) return;
-				const target = optionRefs.current[focusedIndex >= 0 ? focusedIndex : 0];
-				target?.focus();
-				return;
-			}
-			if (event.key === "Escape") {
-				event.preventDefault();
-				onCancel?.();
-			}
-		},
-		[filtered.length, focusedIndex, onCancel],
-	);
-
-	return (
-		<div className="flex flex-col">
-			<Input
-				variant="inline"
-				className="border-b border-line px-3 py-2"
-				icon={<Search className="size-4" aria-hidden="true" />}
-				ref={inputRef}
-				type="search"
-				value={query}
-				onChange={(event) => setQuery(event.target.value)}
-				onKeyDown={handleInputKeyDown}
-				placeholder={text.searchPlaceholder}
-				aria-label={text.searchAriaLabel}
-			/>
-			<div
-				className="flex-1 overflow-y-auto py-1"
-				role="listbox"
-				aria-label={text.listAriaLabel}
-				onKeyDown={handleListKeyDown}
-			>
-				{filtered.length === 0 ? (
-					<div className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
-						{text.emptyMessage(query)}
-					</div>
-				) : (
-					filtered.map((mailbox, idx) => {
-						const isCurrent = mailbox.isCurrent ?? false;
-						const isFocused = idx === focusedIndex;
-						// The current folder is a "you are here" marker, not a target —
-						// rendered as a static option (never a disabled control) so the
-						// user can see where the message lives without a dead button.
-						// Selectable folders are real <button> options. Each interactive
-						// element IS the listbox option: a role="option" <div> wrapping a
-						// separately-interactive <button> is invalid ARIA.
-						if (isCurrent) {
-							return (
-								<div key={mailbox.id}>
-									{/* biome-ignore lint/a11y/useFocusableInteractive: focus managed by the parent listbox component */}
-									<div
-										role="option"
-										aria-selected={false}
-										aria-current="true"
-										aria-label={`${mailbox.label} ${text.currentSuffix}`}
-										className={cn(ROW_BASE, "opacity-60 bg-surface-sunken/40")}
-									>
-										<span className="truncate flex-1">{mailbox.label}</span>
-										<span className="text-xs text-fg-muted shrink-0">
-											{text.currentTag}
-										</span>
-									</div>
-								</div>
-							);
-						}
-						return (
-							<div key={mailbox.id}>
-								<button
-									ref={(node) => {
-										optionRefs.current[idx] = node;
-									}}
-									type="button"
-									role="option"
-									aria-selected={false}
-									tabIndex={isFocused ? 0 : -1}
-									onClick={() => onSelect(mailbox.id)}
-									onFocus={() => setFocusedIndex(idx)}
-									aria-label={text.optionLabel(mailbox.label)}
-									className={cn(ROW_BASE, "hover:bg-surface-raised")}
-								>
-									<span className="truncate flex-1">{mailbox.label}</span>
-								</button>
-							</div>
-						);
-					})
-				)}
-			</div>
-			{showCreate && (
-				<div className="border-t border-line p-1">
-					<button
-						type="button"
-						onClick={handleCreate}
-						disabled={creating}
-						className={cn(
-							ROW_BASE,
-							"font-medium text-accent-2 hover:bg-surface-raised disabled:opacity-60",
-						)}
-					>
-						<span className="truncate">
-							{creating ? text.createPending : text.createLabel(query.trim())}
-						</span>
-					</button>
-					{createError && (
-						<p className="px-3 py-1 text-xs text-danger" role="alert">
-							{createError}
-						</p>
-					)}
-				</div>
-			)}
-		</div>
-	);
-};
-
-/**
- * Pure selection/filter helpers exposed for unit testing the roving-focus and
- * search logic without a DOM. Component consumers should use
- * {@link MoveMailboxPicker} instead.
- */
-export const moveMailboxPickerInternals = {
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
-	matchesQuery,
-};