@remit/ui 0.0.101 → 0.0.103

package/src/components/compose-header.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import {
+	type AddressEntry,
+	ComposeAddressField,
+} from "./compose-address-field.js";
+import { ComposeHeader, composeHeaderSummary } from "./compose-header.js";
+import { ComposeSubjectField } from "./compose-subject-field.js";
+
+const FromRow = ({ email }: { email: string }) => (
+	<div className="flex items-start gap-2">
+		{/* biome-ignore lint/a11y/noLabelWithoutControl: decorative label for a read-only value, not a form control */}
+		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">From:</label>
+		<div className="text-sm py-1.5">{email}</div>
+	</div>
+);
+
+/**
+ * Who the message is going to and what it is about. Cc and Bcc are not there
+ * until they are asked for — the common message has one recipient line, and
+ * three empty ones push the writing surface off a phone.
+ */
+const meta: Meta<typeof ComposeHeader> = {
+	title: "Mail/ComposeHeader",
+	component: ComposeHeader,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof ComposeHeader>;
+
+const Harness = ({
+	initialTo = [],
+	initialCc,
+	initialBcc,
+	initialSubject = "",
+	collapsed = false,
+}: {
+	initialTo?: AddressEntry[];
+	initialCc?: AddressEntry[];
+	initialBcc?: AddressEntry[];
+	initialSubject?: string;
+	collapsed?: boolean;
+}) => {
+	const [to, setTo] = useState(initialTo);
+	const [cc, setCc] = useState(initialCc ?? []);
+	const [bcc, setBcc] = useState(initialBcc ?? []);
+	const [showCc, setShowCc] = useState(initialCc !== undefined);
+	const [showBcc, setShowBcc] = useState(initialBcc !== undefined);
+	const [subject, setSubject] = useState(initialSubject);
+
+	return (
+		<div className="w-[560px] border border-line bg-surface">
+			<ComposeHeader
+				collapsed={collapsed}
+				summary={composeHeaderSummary({ to, cc, bcc, subject })}
+				from={<FromRow email="alice@northwind.example" />}
+				to={
+					<ComposeAddressField
+						label="To"
+						addresses={to}
+						onChange={setTo}
+						placeholder="Recipients"
+					/>
+				}
+				cc={
+					showCc ? (
+						<ComposeAddressField label="Cc" addresses={cc} onChange={setCc} />
+					) : undefined
+				}
+				bcc={
+					showBcc ? (
+						<ComposeAddressField
+							label="Bcc"
+							addresses={bcc}
+							onChange={setBcc}
+						/>
+					) : undefined
+				}
+				subject={<ComposeSubjectField value={subject} onChange={setSubject} />}
+				onShowCc={() => setShowCc(true)}
+				onShowBcc={() => setShowBcc(true)}
+			/>
+		</div>
+	);
+};
+
+export const NewMessage: Story = {
+	name: "New message — nothing filled in",
+	render: () => <Harness />,
+};
+
+export const Reply: Story = {
+	render: () => (
+		<Harness
+			initialTo={[{ email: "ada@northwind.example", displayName: "Ada" }]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+export const CcAndBccRevealed: Story = {
+	render: () => (
+		<Harness
+			initialTo={[{ email: "ada@northwind.example", displayName: "Ada" }]}
+			initialCc={[{ email: "grace@northwind.example" }]}
+			initialBcc={[]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+/**
+ * The software keyboard is up on a phone. The header gives its space to the
+ * writing surface and keeps one line of what is already filled in.
+ */
+export const Collapsed: Story = {
+	render: () => (
+		<Harness
+			collapsed
+			initialTo={[
+				{ email: "ada@northwind.example", displayName: "Ada Lovelace" },
+			]}
+			initialCc={[{ email: "grace@northwind.example" }]}
+			initialSubject="Re: Q3 planning"
+		/>
+	),
+};
+
+/** Collapsed before anything is typed: an ellipsis, not an empty bar. */
+export const CollapsedAndEmpty: Story = {
+	render: () => <Harness collapsed />,
+};
+
+export const RevealingCcLeavesBccOnOffer: Story = {
+	render: () => <Harness />,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.queryByLabelText("Cc:")).not.toBeInTheDocument();
+		await userEvent.click(canvas.getByRole("button", { name: "Cc" }));
+		await expect(canvas.getByLabelText("Cc:")).toBeVisible();
+		await expect(canvas.queryByLabelText("Bcc:")).not.toBeInTheDocument();
+		await userEvent.click(canvas.getByRole("button", { name: "Bcc" }));
+		await expect(canvas.getByLabelText("Bcc:")).toBeVisible();
+	},
+};

package/src/components/compose-header.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import type { AddressEntry } from "./compose-address-field.js";
+
+export interface ComposeHeaderProps {
+	/**
+	 * The software keyboard is up on a phone and the recipient rows would eat
+	 * the writing surface. The header collapses to one line of what is already
+	 * filled in.
+	 */
+	collapsed?: boolean;
+	/** One line of what the collapsed header stands in for. */
+	summary?: string;
+	from: ReactNode;
+	to: ReactNode;
+	/** Present once the field has been revealed; absent leaves the reveal button. */
+	cc?: ReactNode;
+	bcc?: ReactNode;
+	subject: ReactNode;
+	onShowCc: () => void;
+	onShowBcc: () => void;
+}
+
+const RevealButton = ({
+	label,
+	onClick,
+}: {
+	label: string;
+	onClick: () => void;
+}) => (
+	<button
+		type="button"
+		onClick={onClick}
+		className="text-xs text-fg-muted hover:text-fg transition-colors"
+	>
+		{label}
+	</button>
+);
+
+export const composeHeaderSummary = ({
+	to,
+	cc,
+	bcc,
+	subject,
+}: {
+	to: readonly AddressEntry[];
+	cc: readonly AddressEntry[];
+	bcc: readonly AddressEntry[];
+	subject: string;
+}): string => {
+	const chips: string[] = [];
+	if (to.length > 0)
+		chips.push(`To: ${to.map((a) => a.displayName ?? a.email).join(", ")}`);
+	if (cc.length > 0) chips.push(`Cc: ${cc.length}`);
+	if (bcc.length > 0) chips.push(`Bcc: ${bcc.length}`);
+	if (subject) chips.push(subject);
+	return chips.join(" · ");
+};
+
+/**
+ * Who the message is going to and what it is about. The fields are slots: the
+ * app fills them with the wired address and account controls, a story with
+ * static ones, and both get the same layout, the same Cc/Bcc reveal and the
+ * same collapsed line.
+ */
+export const ComposeHeader = ({
+	collapsed = false,
+	summary = "",
+	from,
+	to,
+	cc,
+	bcc,
+	subject,
+	onShowCc,
+	onShowBcc,
+}: ComposeHeaderProps) => {
+	if (collapsed) {
+		return (
+			<div
+				className="flex items-center gap-2 px-3 py-1.5 border-b border-line overflow-hidden"
+				data-testid="compose-header-collapsed"
+			>
+				<span className="truncate text-xs text-fg-muted">{summary || "…"}</span>
+				<span className="shrink-0 inline-flex items-center justify-center rounded bg-surface-sunken px-1.5 py-0.5 text-2xs text-fg-muted">
+					…
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-1 px-3 py-2 border-b border-line">
+			{from}
+			{to}
+			{cc ?? (
+				<div className="flex gap-2 pl-14">
+					<RevealButton label="Cc" onClick={onShowCc} />
+					<RevealButton label="Bcc" onClick={onShowBcc} />
+				</div>
+			)}
+			{cc && !bcc && (
+				<div className="pl-14">
+					<RevealButton label="Bcc" onClick={onShowBcc} />
+				</div>
+			)}
+			{bcc}
+			{subject}
+		</div>
+	);
+};

package/src/components/compose-language-chip.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { ComposeLanguageChip } from "./compose-language-chip.js";
+
+const LANGUAGES = ["nl", "en", "de"];
+
+const CHROME_HELP =
+	"Chrome checks every language you add under Settings, then Languages. Adding one there checks it alongside the others.";
+const SAFARI_HELP =
+	"macOS decides this under Keyboard, then Text Input, then Spelling. Automatic by Language covers every language enabled there.";
+const FIREFOX_HELP =
+	"Firefox uses this setting. Right-click the message to add a dictionary for it.";
+
+const Chip = ({
+	initial = "nl",
+	helpText,
+}: {
+	initial?: string;
+	helpText?: string;
+}) => {
+	const [language, setLanguage] = useState(initial);
+	return (
+		<div className="flex w-[360px] justify-end rounded-md border border-line bg-canvas p-2">
+			<ComposeLanguageChip
+				language={language}
+				languages={LANGUAGES}
+				onSelect={setLanguage}
+				helpText={helpText}
+			/>
+		</div>
+	);
+};
+
+/**
+ * The language control at the right of the compose toolbar. Two letters, the
+ * language in full to a screen reader, and a menu of the account's languages
+ * over one sentence naming the browser setting that actually fixes spelling.
+ *
+ * The sentence is the only part of this feature that fixes anything for a
+ * Chrome or Safari user, and it says whose setting it is.
+ */
+const meta: Meta<typeof Chip> = {
+	title: "Mail/ComposeLanguageChip",
+	component: Chip,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Closed: Story = {
+	name: "The chip",
+	args: {},
+};
+
+const openMenu = async (canvasElement: HTMLElement): Promise<void> => {
+	await userEvent.click(
+		within(canvasElement).getByRole("button", {
+			name: /^Message language:/,
+		}),
+	);
+};
+
+export const MenuOnChrome: Story = {
+	name: "Open, on Chrome",
+	args: { helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(CHROME_HELP);
+	},
+};
+
+export const MenuOnSafari: Story = {
+	name: "Open, on Safari",
+	args: { helpText: SAFARI_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(SAFARI_HELP);
+	},
+};
+
+export const MenuOnFirefox: Story = {
+	name: "Open, on Firefox",
+	args: { helpText: FIREFOX_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await expect(
+			within(canvasElement).getByTestId("compose-language-help"),
+		).toHaveTextContent(FIREFOX_HELP);
+	},
+};
+
+/**
+ * Each row is a radio: the current language is the checked one, and every row
+ * carries its own `lang`, so a screen reader reads `Nederlands` in Dutch rather
+ * than sounding it out in the reader's own voice.
+ */
+export const MenuMarksTheCurrentLanguage: Story = {
+	name: "The current language is checked",
+	args: { initial: "de", helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		const canvas = within(canvasElement);
+
+		await expect(
+			canvas.getByRole("menuitemradio", { name: /Deutsch/ }),
+		).toHaveAttribute("aria-checked", "true");
+		await expect(
+			canvas.getByRole("menuitemradio", { name: /Nederlands/ }),
+		).toHaveAttribute("aria-checked", "false");
+	},
+};
+
+/** Escape leaves without changing anything, and hands focus back to the chip. */
+export const EscapeReturnsFocus: Story = {
+	name: "Escape closes and returns focus",
+	args: { helpText: CHROME_HELP },
+	play: async ({ canvasElement }) => {
+		await openMenu(canvasElement);
+		await userEvent.keyboard("{Escape}");
+
+		await expect(
+			within(canvasElement).queryByTestId("compose-language-menu"),
+		).toBeNull();
+		const chip = within(canvasElement).getByRole("button", {
+			name: /^Message language:/,
+		});
+		await expect(chip).toHaveFocus();
+		await expect(chip).toHaveTextContent("NL");
+	},
+};

package/src/components/compose-language-chip.tsx

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import {
+	browserSpellcheckHelp,
+	languageChipLabel,
+	languageLabel,
+} from "../lib/compose-language.js";
+import { rovingNextIndex } from "../lib/roving-focus.js";
+import { Button } from "./button.js";
+
+export interface ComposeLanguageChipProps {
+	/** The BCP 47 tag the message is currently being written in. */
+	language: string;
+	/** The account's configured tags — the menu, and detection's candidate set. */
+	languages: readonly string[];
+	onSelect: (tag: string) => void;
+	/**
+	 * The sentence naming where the browser keeps its dictionary setting.
+	 * Derived from the user agent when absent.
+	 */
+	helpText?: string;
+}
+
+/**
+ * The language control at the right of the compose toolbar: two letters, the
+ * language in full to a screen reader, and a menu of the account's languages.
+ *
+ * Nothing here claims to change spellchecking. In Chrome and Safari the
+ * underlines do not move — only the sentence at the foot of the menu names the
+ * setting that does, and it names it as the browser's, not the app's.
+ */
+export const ComposeLanguageChip = ({
+	language,
+	languages,
+	onSelect,
+	helpText,
+}: ComposeLanguageChipProps) => {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const menuRef = useRef<HTMLDivElement>(null);
+	const menuId = useId();
+
+	const close = useCallback((returnFocus: boolean) => {
+		setOpen(false);
+		if (returnFocus) triggerRef.current?.focus();
+	}, []);
+
+	useEffect(() => {
+		if (!open) return;
+		const onPointer = (event: MouseEvent) => {
+			if (containerRef.current?.contains(event.target as Node)) return;
+			setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointer);
+		return () => document.removeEventListener("mousedown", onPointer);
+	}, [open]);
+
+	// The menu takes focus as it opens, so Escape and the arrow keys have
+	// somewhere to land and the caret does not stay behind in the message.
+	useEffect(() => {
+		if (!open) return;
+		const current = menuRef.current?.querySelector<HTMLElement>(
+			'[aria-checked="true"]',
+		);
+		const first = menuRef.current?.querySelector<HTMLElement>(
+			'[role="menuitemradio"]',
+		);
+		(current ?? first)?.focus();
+	}, [open]);
+
+	const onMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			close(true);
+			return;
+		}
+		const items = [
+			...(menuRef.current?.querySelectorAll<HTMLElement>(
+				'[role="menuitemradio"]',
+			) ?? []),
+		];
+		const index = items.indexOf(document.activeElement as HTMLElement);
+		const next = rovingNextIndex(event.key, index, items.length);
+		if (next === null) return;
+		event.preventDefault();
+		items[next]?.focus();
+	};
+
+	const pick = (tag: string) => {
+		onSelect(tag);
+		close(true);
+	};
+
+	return (
+		<div ref={containerRef} className="relative">
+			<Button
+				ref={triggerRef}
+				variant="ghost"
+				size="md"
+				aria-label={`Message language: ${languageLabel(language)}`}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				aria-controls={open ? menuId : undefined}
+				onClick={() => setOpen((value) => !value)}
+				data-testid="compose-language-chip"
+				data-language={language}
+				className="min-h-11 min-w-11 shrink-0 px-2 font-medium"
+			>
+				{languageChipLabel(language)}
+			</Button>
+			{open && (
+				<div
+					ref={menuRef}
+					id={menuId}
+					role="menu"
+					aria-label="Message language"
+					onKeyDown={onMenuKeyDown}
+					data-testid="compose-language-menu"
+					className="absolute right-0 top-full z-50 mt-1 flex max-h-[60dvh] min-w-56 flex-col overflow-y-auto overscroll-contain rounded-md border border-line bg-surface py-1 shadow-lg"
+				>
+					{languages.map((tag) => (
+						<button
+							key={tag}
+							type="button"
+							role="menuitemradio"
+							aria-checked={tag === language}
+							lang={tag}
+							onClick={() => pick(tag)}
+							className={cn(
+								"flex min-h-11 items-center justify-between gap-3 px-4 py-2.5 text-left text-sm text-fg transition-colors hover:bg-surface-sunken",
+								tag === language && "bg-accent-2-soft",
+							)}
+						>
+							{languageLabel(tag)}
+							<span className="shrink-0 text-xs text-fg-subtle">
+								{languageChipLabel(tag)}
+							</span>
+						</button>
+					))}
+					<p
+						data-testid="compose-language-help"
+						className="border-t border-line px-4 pb-1 pt-2 text-xs text-fg-muted"
+					>
+						{helpText ?? browserSpellcheckHelp(navigator.userAgent)}
+					</p>
+				</div>
+			)}
+		</div>
+	);
+};

package/src/components/compose-language-setting.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { ComposeLanguageSetting } from "./compose-language-setting.js";
+
+const Setting = ({ initial = ["nl", "en"] }: { initial?: string[] }) => {
+	const [languages, setLanguages] = useState(initial);
+	return (
+		<div className="w-[420px] rounded-md border border-line bg-canvas p-4">
+			<ComposeLanguageSetting value={languages} onChange={setLanguages} />
+		</div>
+	);
+};
+
+/**
+ * The account's writing languages, in settings. One list doing two jobs: the
+ * menu the composer's chip offers, and the set detection chooses inside — which
+ * is what keeps detection accurate on a single sentence.
+ */
+const meta: Meta<typeof Setting> = {
+	title: "Settings/ComposeLanguages",
+	component: Setting,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Setting>;
+
+export const TwoLanguages: Story = {
+	name: "Two configured languages",
+	args: {},
+};
+
+/** The last language cannot be removed: an empty list is a chip with no menu. */
+export const OneLanguageCannotBeEmptied: Story = {
+	name: "The last language stays",
+	args: { initial: ["nl"] },
+	play: async ({ canvasElement }) => {
+		await expect(
+			within(canvasElement).getByRole("button", { name: "Remove Nederlands" }),
+		).toBeDisabled();
+	},
+};
+
+export const AddingALanguage: Story = {
+	name: "Adding one from the list",
+	args: { initial: ["nl"] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.selectOptions(
+			canvas.getByRole("combobox", { name: "Add a language" }),
+			"de",
+		);
+		await expect(canvas.getByTestId("compose-language-row-de")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Remove Nederlands" }),
+		).toBeEnabled();
+	},
+};
+
+/** The first entry is what a new message opens on, and it can be moved. */
+export const ChangingTheDefault: Story = {
+	name: "Promoting a language to the default",
+	args: { initial: ["nl", "en", "de"] },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			canvas.getByRole("button", {
+				name: "Write new messages in English by default",
+			}),
+		);
+
+		const rows = canvasElement.querySelectorAll(
+			"[data-testid^=compose-language-row-]",
+		);
+		await expect(rows[0]).toHaveAttribute(
+			"data-testid",
+			"compose-language-row-en",
+		);
+		await expect(rows[0]).toHaveTextContent("Default");
+	},
+};