@remit/web-client 0.0.138 → 0.0.140

package/src/components/compose/ComposeBody.stories.tsx

@@ -1,463 +0,0 @@
-import type { RichTextValue } from "@remit/ui/rich-text";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import { ComposeBody, type ConversionFailure } from "./ComposeBody";
-
-const RICH_DOCUMENT = [
-	"<h2>Quarterly numbers</h2>",
-	"<p>Revenue is <strong>up</strong> on the quarter.</p>",
-	"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
-	"<tbody><tr><td>EMEA</td><td>412</td></tr></tbody></table>",
-].join("");
-
-const PLAIN_PARAGRAPHS =
-	"<p>Thanks — that works.</p><p></p><p>See you then.</p>";
-
-const UNDERLINED = "<p>Please <u>read this</u> before Friday.</p>";
-
-const PLAIN_MARKDOWN = [
-	"## Quarterly numbers",
-	"",
-	"| Region | Total |",
-	"| --- | --- |",
-	"| EMEA | 412 |",
-].join("\n");
-
-const DUTCH_DOCUMENT =
-	"<p>Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel voor de planning.</p>";
-
-const DUTCH_PROSE =
-	"Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel.";
-
-/** The languages a Dutch-writing account has configured, most-used first. */
-const LANGUAGES = ["nl", "en", "de"];
-
-const noop = () => undefined;
-
-const Harness = ({
-	initialHtml = "",
-	initialText = "",
-	startIn = "rich",
-	onConversionError = () => undefined,
-	conversions,
-	languages = LANGUAGES,
-	quoted,
-}: {
-	initialHtml?: string;
-	initialText?: string;
-	startIn?: "rich" | "plain";
-	onConversionError?: (failure: ConversionFailure) => void;
-	conversions?: {
-		toPlain: (value: RichTextValue) => string;
-		toRich: (text: string) => string;
-	};
-	languages?: string[];
-	quoted?: string;
-}) => {
-	const [mode, setMode] = useState<"rich" | "plain">(startIn);
-	return (
-		<div className="flex h-[460px] w-[680px] flex-col overflow-auto rounded-md border border-line bg-canvas">
-			<ComposeBody
-				mode={mode}
-				onModeChange={setMode}
-				initialHtml={initialHtml}
-				initialText={initialText}
-				onChange={() => undefined}
-				onConversionError={onConversionError}
-				conversions={conversions}
-				languages={languages}
-				onLanguageChange={noop}
-			/>
-			{quoted && (
-				<blockquote
-					data-testid="compose-quoted"
-					lang="fr"
-					className="border-l-2 border-line px-3 py-2 text-sm text-fg-muted"
-				>
-					{quoted}
-				</blockquote>
-			)}
-		</div>
-	);
-};
-
-const chipOf = (canvasElement: HTMLElement): HTMLElement => {
-	const chip = canvasElement.querySelector<HTMLElement>(
-		"[data-testid=compose-language-chip]",
-	);
-	if (!chip) throw new Error("the language chip is not mounted");
-	return chip;
-};
-
-/**
- * The mode switch as the compose window runs it: the toolbar control, the one
- * warning it raises, and the two surfaces it swaps between. The live
- * `ComposeForm` adds the recipients, the autosave and the send around this.
- */
-const meta: Meta<typeof Harness> = {
-	title: "Screens/WebClient/ComposeModes",
-	component: Harness,
-	parameters: { layout: "centered" },
-};
-export default meta;
-
-type Story = StoryObj<typeof Harness>;
-
-const toggleOf = (canvasElement: HTMLElement): HTMLElement => {
-	const toggle = canvasElement.querySelector<HTMLElement>(
-		"[data-testid=compose-mode-toggle]",
-	);
-	if (!toggle) throw new Error("the mode toggle is not mounted");
-	return toggle;
-};
-
-const plainSurface = (canvasElement: HTMLElement): HTMLTextAreaElement | null =>
-	canvasElement.querySelector<HTMLTextAreaElement>(
-		"[data-testid=compose-body-plain]",
-	);
-
-export const RichDocument: Story = {
-	name: "Rich, with formatting",
-	args: { initialHtml: RICH_DOCUMENT },
-};
-
-export const PlainDraft: Story = {
-	name: "Plain, reopened from Markdown",
-	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
-};
-
-/**
- * Cancel changes nothing: the mode stays rich, the document is untouched, and
- * focus comes back to the control that was pressed. `aria-pressed` never flips
- * optimistically.
- */
-export const WarningCancelled: Story = {
-	name: "The warning, cancelled",
-	args: { initialHtml: RICH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		const toggle = toggleOf(canvasElement);
-		await userEvent.click(toggle);
-
-		const dialog = within(document.body).getByRole("dialog");
-		await expect(dialog).toHaveTextContent("Switch to plain text?");
-		await expect(dialog).toHaveTextContent(
-			"Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it.",
-		);
-		await expect(toggle).toHaveAttribute("aria-pressed", "false");
-
-		await userEvent.click(
-			within(dialog).getByRole("button", { name: "Cancel" }),
-		);
-
-		await expect(plainSurface(canvasElement)).toBeNull();
-		await expect(
-			canvasElement.querySelector("[data-testid=compose-body] table"),
-		).not.toBeNull();
-		await expect(toggleOf(canvasElement)).toHaveFocus();
-	},
-};
-
-export const WarningConfirmed: Story = {
-	name: "The warning, confirmed",
-	args: { initialHtml: RICH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-		await userEvent.click(
-			within(within(document.body).getByRole("dialog")).getByRole("button", {
-				name: "Switch to plain text",
-			}),
-		);
-
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface did not arrive");
-		await expect(textarea.value).toContain("## Quarterly numbers");
-		await expect(textarea.value).toContain("**up**");
-		await expect(textarea.value).toContain("| EMEA | 412 |");
-
-		// The formatting buttons leave with the rich surface.
-		await expect(
-			canvasElement.querySelector("[aria-label='Bold (Ctrl+B)']"),
-		).toBeNull();
-		await expect(toggleOf(canvasElement)).toHaveAttribute(
-			"aria-pressed",
-			"true",
-		);
-		await expect(textarea).toHaveFocus();
-		await expect(textarea.selectionStart).toBe(textarea.value.length);
-	},
-};
-
-/** Nothing but paragraphs and a blank line: switching changes nothing, so nothing is asked. */
-export const PlainProseSwitchesSilently: Story = {
-	name: "Plain paragraphs switch without asking",
-	args: { initialHtml: PLAIN_PARAGRAPHS },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).queryByRole("dialog")).toBeNull();
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface did not arrive");
-		await expect(textarea.value).toContain("Thanks");
-		await expect(textarea.value).toContain("See you then.");
-	},
-};
-
-/**
- * An underlined word exports identical to its own characters, so a comparison
- * of the two strings would switch in silence and destroy it. The rule reads the
- * document instead.
- */
-export const UnderlineStillWarns: Story = {
-	name: "An underline alone still warns",
-	args: { initialHtml: UNDERLINED },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).getByRole("dialog")).toHaveTextContent(
-			"Switch to plain text?",
-		);
-	},
-};
-
-export const PlainToRich: Story = {
-	name: "Markdown back to rich, without asking",
-	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).queryByRole("dialog")).toBeNull();
-		const editable = canvasElement.querySelector("[data-testid=compose-body]");
-		if (!editable) throw new Error("the rich surface did not arrive");
-		await expect(editable.querySelector("h2")).not.toBeNull();
-		await expect(editable.querySelector("table td")).not.toBeNull();
-	},
-};
-
-/** Switching an ordinary note to rich must not reflow it. */
-export const PlainProseToRich: Story = {
-	name: "Prose with no Markdown in it",
-	args: {
-		startIn: "plain",
-		initialText: "Thanks — that works.\n\nI'll send the deck tomorrow.",
-	},
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		const editable = canvasElement.querySelector("[data-testid=compose-body]");
-		if (!editable) throw new Error("the rich surface did not arrive");
-		await expect(editable.querySelectorAll("p").length).toBe(2);
-		await expect(editable.textContent).toContain("Thanks — that works.");
-		await expect(editable.textContent).toContain(
-			"I'll send the deck tomorrow.",
-		);
-	},
-};
-
-/**
- * A conversion that would blank a written message does not happen: autosave
- * would persist the empty body a moment later and the draft would be gone with
- * nothing said.
- */
-export const ConversionCameBackEmpty: Story = {
-	name: "A conversion that came back empty",
-	args: {
-		startIn: "plain",
-		initialText: "Everything I wrote this morning.",
-		onConversionError: fn(),
-		conversions: {
-			toPlain: (value) => value.text,
-			toRich: () => "",
-		},
-	},
-	play: async ({ args, canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(args.onConversionError).toHaveBeenCalledWith({
-			outcome: "blocked",
-			title: "Couldn't switch to rich text",
-			detail: "The conversion came back empty, so your message is unchanged.",
-		});
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface left");
-		await expect(textarea.value).toBe("Everything I wrote this morning.");
-		await expect(toggleOf(canvasElement)).toHaveAttribute(
-			"aria-pressed",
-			"true",
-		);
-	},
-};
-
-/** One Shift+Tab out of the body reaches the toggle, and Enter acts. */
-export const ReachableFromTheBody: Story = {
-	name: "Shift+Tab from the body reaches it",
-	args: { initialHtml: PLAIN_PARAGRAPHS },
-	play: async ({ canvasElement }) => {
-		const editable = canvasElement.querySelector<HTMLElement>(
-			"[data-testid=compose-body]",
-		);
-		if (!editable) throw new Error("the rich surface is not mounted");
-
-		await userEvent.click(editable);
-		await userEvent.tab({ shift: true });
-		await expect(toggleOf(canvasElement)).toHaveFocus();
-
-		await userEvent.keyboard("{Enter}");
-		await expect(plainSurface(canvasElement)).not.toBeNull();
-	},
-};
-
-/**
- * Detection runs over the body against the account's own languages and writes
- * the result onto the writing surface. Firefox picks a dictionary from that tag
- * among the ones the user installed; Chrome and Safari ignore it, and nothing
- * here says otherwise.
- */
-export const DutchIsDetected: Story = {
-	name: "Dutch prose sets the chip",
-	args: { initialHtml: DUTCH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		await waitFor(
-			async () => {
-				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-			},
-			{ timeout: 5000 },
-		);
-		await expect(
-			canvasElement.querySelector("[data-testid=compose-body]"),
-		).toHaveAttribute("lang", "nl");
-	},
-};
-
-/** Under twenty characters detection is a coin toss, so the account default stands. */
-export const TooShortHoldsTheDefault: Story = {
-	name: "Nine characters hold the default",
-	args: { startIn: "plain" },
-	play: async ({ canvasElement }) => {
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface is not mounted");
-
-		await userEvent.click(textarea);
-		await userEvent.keyboard("Hi Sophie");
-
-		await new Promise((resolve) => setTimeout(resolve, 800));
-		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-	},
-};
-
-/**
- * The first manual pick freezes the language for the rest of the message.
- * Detection does not argue with a choice the user made — a tag that moved back
- * under the caret would be a control that undoes itself.
- */
-export const ManualPickSticks: Story = {
-	name: "A picked language survives more typing",
-	args: { startIn: "plain" },
-	play: async ({ canvasElement }) => {
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface is not mounted");
-
-		await userEvent.click(textarea);
-		await userEvent.keyboard(DUTCH_PROSE);
-		await waitFor(
-			async () => {
-				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-			},
-			{ timeout: 5000 },
-		);
-
-		await userEvent.click(chipOf(canvasElement));
-		await userEvent.click(
-			within(canvasElement).getByRole("menuitemradio", { name: /English/ }),
-		);
-		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
-
-		await userEvent.click(textarea);
-		await userEvent.keyboard(" Groetjes, Matthijs.");
-		await new Promise((resolve) => setTimeout(resolve, 800));
-		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
-		await expect(textarea).toHaveAttribute("lang", "en");
-	},
-};
-
-/**
- * Two Shift+Tabs out of the body reach the chip — one still reaches the mode
- * toggle, where #673 put it. The menu takes focus as it opens and hands it back
- * to the chip on a pick, so the keyboard never lands somewhere it cannot leave.
- */
-export const ChipFromTheKeyboard: Story = {
-	name: "Shift+Tab twice reaches the chip",
-	// Short enough that detection declines, so the chip is on the account
-	// default and the arrow key below has a known row to move off.
-	args: { initialHtml: "<p>Hoi.</p>" },
-	play: async ({ canvasElement }) => {
-		const editable = canvasElement.querySelector<HTMLElement>(
-			"[data-testid=compose-body]",
-		);
-		if (!editable) throw new Error("the rich surface is not mounted");
-
-		await userEvent.click(editable);
-		await userEvent.tab({ shift: true });
-		await expect(toggleOf(canvasElement)).toHaveFocus();
-		await userEvent.tab({ shift: true });
-		await expect(chipOf(canvasElement)).toHaveFocus();
-
-		await userEvent.keyboard("{Enter}");
-		await waitFor(async () => {
-			await expect(
-				canvasElement.querySelector("[data-testid=compose-language-menu]"),
-			).not.toBeNull();
-		});
-		await userEvent.keyboard("{ArrowDown}{Enter}");
-
-		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
-		await expect(chipOf(canvasElement)).toHaveFocus();
-		await expect(editable).toHaveAttribute("lang", "en");
-	},
-};
-
-/** The tag follows the message across the mode switch, onto whichever surface is up. */
-export const PlainSurfaceCarriesTheLanguage: Story = {
-	name: "Plain text keeps the same language",
-	args: { initialHtml: DUTCH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		await waitFor(
-			async () => {
-				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-			},
-			{ timeout: 5000 },
-		);
-
-		await userEvent.click(toggleOf(canvasElement));
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface did not arrive");
-
-		await expect(textarea).toHaveAttribute("lang", "nl");
-		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-	},
-};
-
-/**
- * The quoted block a reply is written above is somebody else's text. It lives
- * outside the editor, so detection never sees it and a French thread answered
- * in Dutch is tagged Dutch.
- */
-export const QuotedTextIsNotRead: Story = {
-	name: "A French quote under a Dutch reply",
-	args: {
-		initialHtml: DUTCH_DOCUMENT,
-		quoted:
-			"Bonjour, je vous confirme que la réunion de jeudi est annulée. Je vous propose de la reporter à la semaine prochaine.",
-	},
-	play: async ({ canvasElement }) => {
-		await waitFor(
-			async () => {
-				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
-			},
-			{ timeout: 5000 },
-		);
-		await expect(
-			canvasElement.querySelector("[data-testid=compose-body]"),
-		).toHaveAttribute("lang", "nl");
-	},
-};

package/src/components/compose/ComposeBody.tsx

@@ -1,210 +0,0 @@
-import {
-	type ComposeBodyMode,
-	ComposeLanguageChip,
-	ComposeModeToggle,
-	markdownToHtml,
-	PlainTextEditor,
-	RichTextEditor,
-	type RichTextValue,
-	useComposeLanguage,
-} from "@remit/ui/rich-text";
-import { useEffect, useRef, useState } from "react";
-import { ConfirmDialog } from "../ui/ConfirmDialog";
-import { conversionOutcome, switchNeedsWarning } from "./compose-mode";
-
-export interface ConversionFailure {
-	title: string;
-	detail: string;
-}
-
-/**
- * The two directions of the mode switch, injectable so a story can drive the
- * conversion that comes back empty — the branch that keeps autosave from
- * persisting a blanked draft, and the one case no real document produces on
- * demand.
- */
-export interface ComposeConversions {
-	toPlain: (value: RichTextValue) => string;
-	toRich: (text: string) => string;
-}
-
-export const DEFAULT_COMPOSE_CONVERSIONS: ComposeConversions = {
-	toPlain: (value) => value.text,
-	toRich: (text) => markdownToHtml(text),
-};
-
-const textOf = (html: string): string =>
-	new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
-
-const plainValue = (text: string): RichTextValue => ({
-	html: "",
-	text,
-	formatting: [],
-});
-
-interface ComposeBodyProps {
-	mode: ComposeBodyMode;
-	onModeChange: (mode: ComposeBodyMode) => void;
-	initialHtml: string;
-	initialText: string;
-	onChange: (value: RichTextValue) => void;
-	onSubmit?: () => void;
-	autoFocus?: boolean;
-	onConversionError: (failure: ConversionFailure) => void;
-	conversions?: ComposeConversions;
-	/** The account's writing languages, most-used first. */
-	languages: readonly string[];
-	/** The tag a reopened draft was stored under. */
-	initialLanguage?: string;
-	/** Reports the language the message is being written in, so the form can tag it. */
-	onLanguageChange: (language: string) => void;
-}
-
-/**
- * The compose writing surface and the control that swaps it. Rich text is the
- * WYSIWYG document; plain text is a textarea whose content is the Markdown that
- * will be sent verbatim. The conversion runs over an in-memory document, so the
- * surface swaps in the same frame the choice is made.
- */
-export const ComposeBody = ({
-	mode,
-	onModeChange,
-	initialHtml,
-	initialText,
-	onChange,
-	onSubmit,
-	autoFocus = false,
-	onConversionError,
-	conversions = DEFAULT_COMPOSE_CONVERSIONS,
-	languages,
-	initialLanguage,
-	onLanguageChange,
-}: ComposeBodyProps) => {
-	const [richHtml, setRichHtml] = useState(initialHtml);
-	const [richGeneration, setRichGeneration] = useState(0);
-	const [plainText, setPlainText] = useState(initialText);
-	const [bodyText, setBodyText] = useState(initialText);
-	const [confirming, setConfirming] = useState(false);
-	// The caret does not survive a conversion: a rich selection is a node path
-	// and Markdown is a character offset. The surface that arrives takes focus
-	// with the caret at the end; the toggle keeps it when the mode did not change.
-	const [focusSwitchedSurface, setFocusSwitchedSurface] = useState(false);
-	const richValue = useRef<RichTextValue>({
-		html: initialHtml,
-		text: initialText,
-		formatting: [],
-	});
-
-	// Detection reads the body the user typed. The quoted reply block is not part
-	// of it — that lives outside the editor, in the form's own `quoted` slot.
-	const { language, choose } = useComposeLanguage({
-		languages,
-		text: bodyText,
-		initialLanguage,
-	});
-
-	useEffect(() => {
-		onLanguageChange(language);
-	}, [language, onLanguageChange]);
-
-	const handleRichChange = (value: RichTextValue) => {
-		richValue.current = value;
-		setBodyText(value.text);
-		onChange(value);
-	};
-
-	const handlePlainChange = (text: string) => {
-		setPlainText(text);
-		setBodyText(text);
-		onChange(plainValue(text));
-	};
-
-	const switchToPlain = () => {
-		const value = richValue.current;
-		const converted = conversions.toPlain(value);
-		const decision = conversionOutcome("plain", textOf(value.html), converted);
-		if (decision.outcome === "blocked") {
-			onConversionError(decision);
-			return;
-		}
-		setPlainText(converted);
-		setBodyText(converted);
-		setFocusSwitchedSurface(true);
-		onChange(plainValue(converted));
-		onModeChange("plain");
-	};
-
-	const switchToRich = () => {
-		const converted = conversions.toRich(plainText);
-		const decision = conversionOutcome("rich", plainText, textOf(converted));
-		if (decision.outcome === "blocked") {
-			onConversionError(decision);
-			return;
-		}
-		setRichHtml(converted);
-		setRichGeneration((generation) => generation + 1);
-		setFocusSwitchedSurface(true);
-		onModeChange("rich");
-	};
-
-	const handleToggle = () => {
-		if (mode === "plain") {
-			switchToRich();
-			return;
-		}
-		if (switchNeedsWarning("plain", richValue.current.formatting)) {
-			setConfirming(true);
-			return;
-		}
-		switchToPlain();
-	};
-
-	// The chip comes first so the mode toggle stays one Shift+Tab out of the
-	// body, where #673 put it, and the chip is the second.
-	const trailing = (
-		<>
-			<ComposeLanguageChip
-				language={language}
-				languages={languages}
-				onSelect={choose}
-			/>
-			<ComposeModeToggle mode={mode} onToggle={handleToggle} />
-		</>
-	);
-
-	return (
-		<>
-			{mode === "plain" ? (
-				<PlainTextEditor
-					value={plainText}
-					onChange={handlePlainChange}
-					onSubmit={onSubmit}
-					autoFocus={focusSwitchedSurface}
-					lang={language}
-					trailing={trailing}
-				/>
-			) : (
-				<RichTextEditor
-					key={richGeneration}
-					initialHtml={richHtml}
-					onChange={handleRichChange}
-					onSubmit={onSubmit}
-					autoFocus={autoFocus || focusSwitchedSurface}
-					lang={language}
-					trailing={trailing}
-				/>
-			)}
-			<ConfirmDialog
-				isOpen={confirming}
-				title="Switch to plain text?"
-				description="Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it."
-				confirmLabel="Switch to plain text"
-				onConfirm={() => {
-					setConfirming(false);
-					switchToPlain();
-				}}
-				onCancel={() => setConfirming(false)}
-			/>
-		</>
-	);
-};

package/src/components/compose/SubjectField.tsx

@@ -1,19 +0,0 @@
-interface SubjectFieldProps {
-	value: string;
-	onChange: (value: string) => void;
-}
-
-export const SubjectField = ({ value, onChange }: SubjectFieldProps) => (
-	<div className="flex items-start gap-2">
-		{/* biome-ignore lint/a11y/noLabelWithoutControl: label is visually adjacent to the sibling input; static id risks duplicates */}
-		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">Subj:</label>
-		<input
-			type="text"
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-			className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
-			placeholder="Subject"
-			data-subject-field
-		/>
-	</div>
-);