@remit/ui 0.0.102 → 0.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "type": "module",
   "files": [
     "src"

package/src/components/compose-address-field.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import {
+	type AddressEntry,
+	ComposeAddressField,
+} from "./compose-address-field.js";
+
+const KNOWN: AddressEntry[] = [
+	{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+	{ email: "grace@northwind.example", displayName: "Grace Hopper" },
+	{ email: "ops@northwind.example" },
+];
+
+/**
+ * Recipients as chips, with a typeahead over the addresses the account already
+ * knows. Nothing here fetches: the app hands the candidates in and is told what
+ * has been typed, which is what makes the empty-result story below the same
+ * component the app renders.
+ */
+const meta: Meta<typeof ComposeAddressField> = {
+	title: "Mail/ComposeAddressField",
+	component: ComposeAddressField,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeAddressField>;
+
+const Harness = ({
+	initial = [],
+	candidates = KNOWN,
+	label = "To",
+}: {
+	initial?: AddressEntry[];
+	candidates?: AddressEntry[];
+	label?: string;
+}) => {
+	const [addresses, setAddresses] = useState<AddressEntry[]>(initial);
+	const [query, setQuery] = useState("");
+	const suggestions = candidates.filter((candidate) =>
+		`${candidate.displayName ?? ""} ${candidate.email}`
+			.toLowerCase()
+			.includes(query.toLowerCase()),
+	);
+
+	return (
+		<div className="w-[520px]">
+			<ComposeAddressField
+				label={label}
+				addresses={addresses}
+				onChange={setAddresses}
+				placeholder="Recipients"
+				suggestions={query.length >= 2 ? suggestions : []}
+				onQueryChange={setQuery}
+			/>
+		</div>
+	);
+};
+
+export const Empty: Story = {
+	name: "Empty — the placeholder is the only content",
+	render: () => <Harness />,
+};
+
+export const WithRecipients: Story = {
+	render: () => (
+		<Harness
+			initial={[
+				{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+				{ email: "ops@northwind.example" },
+			]}
+		/>
+	),
+};
+
+export const SuggestionsOffered: Story = {
+	render: () => <Harness />,
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByLabelText("To:");
+		await userEvent.type(input, "ada");
+		const list = await within(canvasElement).findByRole("listbox");
+		await expect(within(list).getByText("Ada Lovelace")).toBeVisible();
+		await userEvent.click(within(list).getByText("Ada Lovelace"));
+		await expect(
+			within(canvasElement).getByText("Ada Lovelace"),
+		).toBeInTheDocument();
+	},
+};
+
+/**
+ * Nothing matches. The field stays a plain text field — an address the account
+ * has never written to is still a valid address, and typing it out is the
+ * normal case, not a failure.
+ */
+export const NoMatches: Story = {
+	render: () => <Harness candidates={[]} />,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByLabelText("To:");
+		await userEvent.type(input, "someone@elsewhere.example{enter}");
+		await expect(canvas.queryByRole("listbox")).not.toBeInTheDocument();
+		await expect(canvas.getByText("someone@elsewhere.example")).toBeVisible();
+	},
+};
+
+/** What is not an address stays in the field rather than becoming a chip. */
+export const IncompleteAddressIsNotTaken: Story = {
+	render: () => <Harness candidates={[]} />,
+	play: async ({ canvasElement }) => {
+		const input = within(canvasElement).getByLabelText<HTMLInputElement>("To:");
+		await userEvent.type(input, "not-an-address{enter}");
+		await expect(input).toHaveValue("not-an-address");
+	},
+};
+
+export const BackspaceRemovesTheLastChip: Story = {
+	render: () => (
+		<Harness
+			initial={[
+				{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+				{ email: "ops@northwind.example" },
+			]}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByLabelText("To:");
+		await userEvent.click(input);
+		await userEvent.keyboard("{Backspace}");
+		await waitFor(() =>
+			expect(
+				canvas.queryByText("ops@northwind.example"),
+			).not.toBeInTheDocument(),
+		);
+		await expect(canvas.getByText("Ada Lovelace")).toBeVisible();
+	},
+};

package/src/components/compose-address-field.tsx

@@ -0,0 +1,206 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useSuggestList } from "../lib/use-suggest-list.js";
+import { AddressTag } from "./address-tag.js";
+import { type Suggestion, SuggestList } from "./suggest-list.js";
+
+export interface AddressEntry {
+	email: string;
+	displayName?: string;
+}
+
+export interface ComposeAddressFieldProps {
+	label: string;
+	addresses: AddressEntry[];
+	onChange: (addresses: AddressEntry[]) => void;
+	placeholder?: string;
+	/** Candidates for what is typed so far. The caller looks them up. */
+	suggestions?: readonly AddressEntry[];
+	/** The current text, reported so the caller can look candidates up. */
+	onQueryChange?: (query: string) => void;
+}
+
+/** Beyond Enter, the keys that take the highlighted suggestion in a chips field. */
+const ACCEPT_KEYS = ["Tab", ","] as const;
+
+const isValidEmail = (value: string): boolean =>
+	/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+
+const parseEmailInput = (value: string): AddressEntry | undefined => {
+	const trimmed = value.trim();
+	if (!trimmed) return undefined;
+
+	const angleMatch = trimmed.match(/^(.+?)\s*<([^>]+)>$/);
+	if (angleMatch) {
+		const displayName = angleMatch[1].trim();
+		const email = angleMatch[2].trim();
+		if (isValidEmail(email)) return { email, displayName };
+	}
+
+	if (isValidEmail(trimmed)) return { email: trimmed };
+	return undefined;
+};
+
+export const ComposeAddressField = ({
+	label,
+	addresses,
+	onChange,
+	placeholder,
+	suggestions = [],
+	onQueryChange,
+}: ComposeAddressFieldProps) => {
+	const [inputValue, setInputValue] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const existingEmails = new Set(addresses.map((a) => a.email.toLowerCase()));
+	const filteredSuggestions =
+		inputValue.length >= 2
+			? suggestions.filter((s) => !existingEmails.has(s.email.toLowerCase()))
+			: [];
+
+	const addAddress = useCallback(
+		(entry: AddressEntry) => {
+			if (existingEmails.has(entry.email.toLowerCase())) return;
+			onChange([...addresses, entry]);
+			setInputValue("");
+			onQueryChange?.("");
+		},
+		[addresses, existingEmails, onChange, onQueryChange],
+	);
+
+	const removeAddress = useCallback(
+		(index: number) => {
+			onChange(addresses.filter((_, i) => i !== index));
+		},
+		[addresses, onChange],
+	);
+
+	const selectSuggestion = useCallback(
+		(suggestion: AddressEntry) => {
+			addAddress(suggestion);
+			inputRef.current?.focus();
+		},
+		[addAddress],
+	);
+
+	const commitInput = useCallback(() => {
+		const entry = parseEmailInput(inputValue);
+		if (entry) {
+			addAddress(entry);
+		}
+	}, [inputValue, addAddress]);
+
+	// The open state, the highlight, and the arrow/Enter/Escape handling are the
+	// app's one typeahead behaviour, shared with the filter-rule value field.
+	const suggest = useSuggestList({
+		count: filteredSuggestions.length,
+		acceptKeys: ACCEPT_KEYS,
+		onAccept: (index) => selectSuggestion(filteredSuggestions[index]),
+	});
+
+	const options = useMemo<Suggestion[]>(
+		() =>
+			filteredSuggestions.map((suggestion) => ({
+				value: suggestion.email,
+				label: suggestion.displayName ?? suggestion.email,
+				...(suggestion.displayName ? { hint: suggestion.email } : {}),
+			})),
+		[filteredSuggestions],
+	);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Backspace" && inputValue === "" && addresses.length > 0) {
+				removeAddress(addresses.length - 1);
+				return;
+			}
+
+			if (suggest.handleKeyDown(e)) return;
+
+			if (e.key === "Enter" || e.key === "Tab" || e.key === ",") {
+				if (inputValue.trim()) {
+					e.preventDefault();
+					commitInput();
+				}
+			}
+		},
+		[
+			inputValue,
+			addresses.length,
+			removeAddress,
+			suggest.handleKeyDown,
+			commitInput,
+		],
+	);
+
+	const handleBlur = useCallback(() => {
+		setTimeout(() => {
+			commitInput();
+			suggest.dismiss();
+		}, 150);
+	}, [commitInput, suggest.dismiss]);
+
+	return (
+		<div className="relative">
+			<div className="flex items-start gap-2">
+				<label
+					htmlFor={`address-field-${label}`}
+					className="text-sm text-fg-muted shrink-0 w-12 pt-1.5"
+				>
+					{label}:
+				</label>
+				{/* biome-ignore lint/a11y/noStaticElementInteractions: click-to-focus wrapper for the address input; keyboard is forwarded to the inner input */}
+				<div
+					className="flex-1 flex flex-wrap items-center gap-1 min-h-[36px] px-2 py-1 border rounded-md bg-canvas cursor-text"
+					onClick={() => inputRef.current?.focus()}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") inputRef.current?.focus();
+					}}
+				>
+					{addresses.map((addr, i) => (
+						<AddressTag
+							key={addr.email}
+							email={addr.email}
+							displayName={addr.displayName}
+							onRemove={() => removeAddress(i)}
+						/>
+					))}
+					<input
+						ref={inputRef}
+						id={`address-field-${label}`}
+						type="text"
+						value={inputValue}
+						onChange={(e) => {
+							suggest.reopen();
+							setInputValue(e.target.value);
+							onQueryChange?.(e.target.value);
+						}}
+						onKeyDown={handleKeyDown}
+						onBlur={handleBlur}
+						placeholder={addresses.length === 0 ? placeholder : ""}
+						className="flex-1 min-w-[120px] bg-transparent outline-none text-sm py-0.5"
+						autoComplete="off"
+						{...suggest.comboboxProps}
+					/>
+				</div>
+			</div>
+
+			{suggest.open && (
+				<SuggestList
+					id={suggest.listId}
+					suggestions={options}
+					activeIndex={suggest.activeIndex}
+					optionId={suggest.optionId}
+					onPick={(option) => {
+						const picked = filteredSuggestions.find(
+							(suggestion) => suggestion.email === option.value,
+						);
+						if (picked) selectSuggestion(picked);
+					}}
+					onHighlight={suggest.setActiveIndex}
+					label={`${label} suggestions`}
+					className="absolute left-12 right-0 z-50 mt-1 max-h-[200px] shadow-lg"
+				/>
+			)}
+		</div>
+	);
+};