@remit/ui 0.0.100 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "type": "module",
   "files": [
     "src"
@@ -32,6 +32,7 @@
     "@react-types/shared": "^3.36.0",
     "clsx": "^2",
     "dompurify": "^3.4.7",
+    "franc-min": "^6.2.0",
     "lexical": "0.49.0",
     "lucide-react": "^0.468",
     "react-aria": "^3.50.0",

package/src/components/button.tsx

@@ -2,6 +2,7 @@ import type {
 	AnchorHTMLAttributes,
 	ButtonHTMLAttributes,
 	ReactNode,
+	Ref,
 } from "react";
 import { cn } from "../lib/cn.js";
 
@@ -13,6 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	size?: Size;
 	/** Optional leading icon (lucide-react element). */
 	icon?: ReactNode;
+	ref?: Ref<HTMLButtonElement>;
 }
 
 const base =
@@ -41,11 +43,13 @@ export function Button({
 	icon,
 	className,
 	children,
+	ref,
 	...props
 }: ButtonProps) {
 	return (
 		<button
 			type="button"
+			ref={ref}
 			className={cn(base, variants[variant], sizes[size], className)}
 			{...props}
 		>

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");
+	},
+};

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

@@ -0,0 +1,106 @@
+import { Star, X } from "lucide-react";
+import {
+	COMPOSE_LANGUAGE_OPTIONS,
+	languageLabel,
+	primaryLanguageSubtag,
+} from "../lib/compose-language.js";
+import { Button } from "./button.js";
+
+export interface ComposeLanguageSettingProps {
+	/** The account's tags, most-used first. The first is the compose default. */
+	value: readonly string[];
+	onChange: (languages: string[]) => void;
+	busy?: boolean;
+}
+
+const addable = (chosen: readonly string[]): string[] => {
+	const taken = new Set(chosen.map(primaryLanguageSubtag));
+	return COMPOSE_LANGUAGE_OPTIONS.map((option) => option.tag)
+		.filter((tag) => !taken.has(tag))
+		.sort((left, right) =>
+			languageLabel(left).localeCompare(languageLabel(right)),
+		);
+};
+
+/**
+ * The account's writing languages. The list is two things at once: the menu the
+ * composer's language chip offers, and the set detection is allowed to choose
+ * inside — which is what keeps detection accurate on one sentence. The first
+ * entry is what a new message opens on.
+ */
+export const ComposeLanguageSetting = ({
+	value,
+	onChange,
+	busy = false,
+}: ComposeLanguageSettingProps) => {
+	const options = addable(value);
+
+	return (
+		<div className="space-y-2" data-testid="compose-language-setting">
+			<ul className="space-y-1">
+				{value.map((tag, index) => (
+					<li
+						key={tag}
+						data-testid={`compose-language-row-${tag}`}
+						className="flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 py-1.5"
+					>
+						<span
+							className="min-w-0 flex-1 truncate text-sm text-fg"
+							lang={tag}
+						>
+							{languageLabel(tag)}
+						</span>
+						{index === 0 ? (
+							<span className="shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+								Default
+							</span>
+						) : (
+							<Button
+								variant="ghost"
+								size="sm"
+								icon={<Star className="size-3.5" />}
+								disabled={busy}
+								aria-label={`Write new messages in ${languageLabel(tag)} by default`}
+								onClick={() =>
+									onChange([tag, ...value.filter((other) => other !== tag)])
+								}
+							>
+								Default
+							</Button>
+						)}
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<X className="size-3.5" />}
+							disabled={busy || value.length === 1}
+							aria-label={`Remove ${languageLabel(tag)}`}
+							onClick={() => onChange(value.filter((other) => other !== tag))}
+						/>
+					</li>
+				))}
+			</ul>
+			<select
+				aria-label="Add a language"
+				value=""
+				disabled={busy || options.length === 0}
+				onChange={(event) => {
+					if (event.target.value === "") return;
+					onChange([...value, event.target.value]);
+				}}
+				className="w-full rounded-md border border-line bg-surface-sunken px-3 py-2 text-sm text-fg outline-none transition-colors focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30"
+			>
+				<option value="">Add a language…</option>
+				{options.map((tag) => (
+					<option key={tag} value={tag}>
+						{languageLabel(tag)}
+					</option>
+				))}
+			</select>
+			<p className="text-xs text-fg-muted">
+				A message is tagged with the language you write it in, picked from this
+				list. Your browser, not this app, decides which dictionaries it
+				spellchecks against — add the language there too to get its underlines.
+			</p>
+		</div>
+	);
+};

package/src/components/compose-mode-toggle.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export type ComposeBodyMode = "rich" | "plain";
+
+export interface ComposeModeToggleProps {
+	mode: ComposeBodyMode;
+	onToggle: () => void;
+}
+
+/**
+ * A text button, not an icon. The two glyphs a reader would reach for are
+ * already spoken for in an editor toolbar — the eraser clears formatting on a
+ * selection and the `A` opens formatting options — and the label reads the same
+ * in both states, so the control never changes under the finger.
+ */
+export const ComposeModeToggle = ({
+	mode,
+	onToggle,
+}: ComposeModeToggleProps) => (
+	<Button
+		variant="ghost"
+		size="md"
+		aria-pressed={mode === "plain"}
+		title="Plain text"
+		onClick={onToggle}
+		data-testid="compose-mode-toggle"
+		className={cn(
+			"min-h-11 shrink-0",
+			mode === "plain" && "bg-accent-2-soft text-accent-2",
+		)}
+	>
+		Plain text
+	</Button>
+);