@remit/ui 0.0.105 → 0.0.106

package/package.json

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

package/src/components/attachment-list.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 import { type AttachmentItem, AttachmentList } from "./attachment-list.js";
 
 /**
@@ -25,57 +26,95 @@ const report: AttachmentItem = {
 	download: { status: "idle" },
 };
 
+const sitePlan: AttachmentItem = {
+	attachmentId: "part-3",
+	filename: "site-plan.png",
+	typeLabel: "PNG",
+	sizeOctets: 486_120,
+	download: { status: "idle" },
+};
+
+/** How long the app's own fetch takes on a small attachment, near enough. */
+const DOWNLOAD_MS = 900;
+
+/**
+ * The app owns the fetch and hands per-row state back. The harness plays that
+ * part: a press puts the row on the spinner, and the row returns to rest when
+ * the file has been handed to the browser. A row is only pressable once at a
+ * time, which is the state the component reads to disable it.
+ */
+const Harness = ({
+	attachments,
+	hasUnlistedAttachment,
+}: {
+	attachments: readonly AttachmentItem[];
+	hasUnlistedAttachment?: boolean;
+}) => {
+	const [rows, setRows] = useState<readonly AttachmentItem[]>(attachments);
+
+	const setDownload = (attachmentId: string, item: AttachmentItem) =>
+		setRows((current) =>
+			current.map((row) => (row.attachmentId === attachmentId ? item : row)),
+		);
+
+	const download = (attachmentId: string) => {
+		const row = rows.find((item) => item.attachmentId === attachmentId);
+		if (!row || row.download.status === "downloading") return;
+		setDownload(attachmentId, { ...row, download: { status: "downloading" } });
+		setTimeout(
+			() => setDownload(attachmentId, { ...row, download: { status: "idle" } }),
+			DOWNLOAD_MS,
+		);
+	};
+
+	return (
+		<AttachmentList
+			attachments={rows}
+			onDownload={download}
+			hasUnlistedAttachment={hasUnlistedAttachment}
+		/>
+	);
+};
+
 export const OneAttachment: Story = {
-	args: {
-		attachments: [report],
-		onDownload: (id) => alert(`Download ${id}`),
-	},
+	render: () => <Harness attachments={[report]} />,
 };
 
 export const SeveralAttachments: Story = {
-	args: {
-		attachments: [
-			report,
-			{
-				attachmentId: "part-3",
-				filename: "site-plan.png",
-				typeLabel: "PNG",
-				sizeOctets: 486_120,
-				download: { status: "idle" },
-			},
-			{
-				attachmentId: "part-4",
-				filename: "notes.txt",
-				typeLabel: "PLAIN",
-				sizeOctets: 812,
-				download: { status: "idle" },
-			},
-			{
-				attachmentId: "part-5",
-				filename: "archive",
-				typeLabel: "FILE",
-				sizeOctets: 1024 ** 3 + 1024 ** 2 * 200,
-				download: { status: "idle" },
-			},
-		],
-		onDownload: (id) => alert(`Download ${id}`),
-	},
+	render: () => (
+		<Harness
+			attachments={[
+				report,
+				sitePlan,
+				{
+					attachmentId: "part-4",
+					filename: "notes.txt",
+					typeLabel: "PLAIN",
+					sizeOctets: 812,
+					download: { status: "idle" },
+				},
+				{
+					attachmentId: "part-5",
+					filename: "archive",
+					typeLabel: "FILE",
+					sizeOctets: 1024 ** 3 + 1024 ** 2 * 200,
+					download: { status: "idle" },
+				},
+			]}
+		/>
+	),
 };
 
+/** One row mid-fetch. The rows beside it are still pressable. */
 export const Downloading: Story = {
-	args: {
-		attachments: [
-			{ ...report, download: { status: "downloading" } },
-			{
-				attachmentId: "part-3",
-				filename: "site-plan.png",
-				typeLabel: "PNG",
-				sizeOctets: 486_120,
-				download: { status: "idle" },
-			},
-		],
-		onDownload: (id) => alert(`Download ${id}`),
-	},
+	render: () => (
+		<Harness
+			attachments={[
+				{ ...report, download: { status: "downloading" } },
+				sitePlan,
+			]}
+		/>
+	),
 };
 
 /**
@@ -85,28 +124,23 @@ export const Downloading: Story = {
  * outcome this list exists to make impossible.
  */
 export const DownloadFailed: Story = {
-	args: {
-		attachments: [
-			{
-				...report,
-				download: {
-					status: "failed",
-					title: "This attachment is missing from storage",
-					detail:
-						"Remit has the message but not the file. Re-sync the account from Settings, then try again.",
-					reportUrl: "https://github.com/remit-mail/reader/issues/new",
+	render: () => (
+		<Harness
+			attachments={[
+				{
+					...report,
+					download: {
+						status: "failed",
+						title: "This attachment is missing from storage",
+						detail:
+							"Remit has the message but not the file. Re-sync the account from Settings, then try again.",
+						reportUrl: "https://github.com/remit-mail/reader/issues/new",
+					},
 				},
-			},
-			{
-				attachmentId: "part-3",
-				filename: "site-plan.png",
-				typeLabel: "PNG",
-				sizeOctets: 486_120,
-				download: { status: "idle" },
-			},
-		],
-		onDownload: (id) => alert(`Download ${id}`),
-	},
+				sitePlan,
+			]}
+		/>
+	),
 };
 
 /**
@@ -117,32 +151,33 @@ export const DownloadFailed: Story = {
  * what lands.
  */
 export const HostileFilename: Story = {
-	args: {
-		attachments: [
-			{
-				attachmentId: "part-6",
-				filename: "passwd",
-				typeLabel: "FILE",
-				sizeOctets: 3_120,
-				download: { status: "idle" },
-			},
-			{
-				attachmentId: "part-7",
-				filename: "invoicegnp.exe",
-				typeLabel: "FILE",
-				sizeOctets: 118_400,
-				download: { status: "idle" },
-			},
-			{
-				attachmentId: "part-8",
-				filename: `${"long-name-".repeat(11)}report.pdf`,
-				typeLabel: "PDF",
-				sizeOctets: 44_000,
-				download: { status: "idle" },
-			},
-		],
-		onDownload: (id) => alert(`Download ${id}`),
-	},
+	render: () => (
+		<Harness
+			attachments={[
+				{
+					attachmentId: "part-6",
+					filename: "passwd",
+					typeLabel: "FILE",
+					sizeOctets: 3_120,
+					download: { status: "idle" },
+				},
+				{
+					attachmentId: "part-7",
+					filename: "invoicegnp.exe",
+					typeLabel: "FILE",
+					sizeOctets: 118_400,
+					download: { status: "idle" },
+				},
+				{
+					attachmentId: "part-8",
+					filename: `${"long-name-".repeat(11)}report.pdf`,
+					typeLabel: "PDF",
+					sizeOctets: 44_000,
+					download: { status: "idle" },
+				},
+			]}
+		/>
+	),
 };
 
 /**
@@ -151,9 +186,5 @@ export const HostileFilename: Story = {
  * read as broken.
  */
 export const UnlistedAttachment: Story = {
-	args: {
-		attachments: [],
-		onDownload: () => undefined,
-		hasUnlistedAttachment: true,
-	},
+	render: () => <Harness attachments={[]} hasUnlistedAttachment />,
 };

package/src/components/compose-action-bar.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { ComposeActionBar } from "./compose-action-bar.js";
 
 const meta: Meta<typeof ComposeActionBar> = {
@@ -30,11 +32,43 @@ export const Sending: Story = {
 	args: { sending: true },
 };
 
+/**
+ * Send is never greyed out. Pressing it with nothing to send on reports the
+ * reason where the app would raise its banner — a control that swallowed the
+ * press would be the dead button this bar exists to avoid.
+ */
 export const CannotSend: Story = {
 	name: "Cannot send — stays pressable",
-	args: {
-		canSend: false,
-		unavailableReason: "SMTP not configured",
-		onUnavailable: () => undefined,
+	render: () => {
+		const [reason, setReason] = useState<string>();
+		return (
+			<div className="space-y-2">
+				{reason && (
+					<div
+						role="alert"
+						data-testid="compose-unavailable"
+						className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger"
+					>
+						{reason}
+					</div>
+				)}
+				<ComposeActionBar
+					onSend={() => undefined}
+					onDiscard={() => undefined}
+					sending={false}
+					canSend={false}
+					saveStatus="idle"
+					unavailableReason="SMTP not configured"
+					onUnavailable={setReason}
+				/>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Send" }));
+		await expect(canvas.getByTestId("compose-unavailable")).toHaveTextContent(
+			"SMTP not configured",
+		);
 	},
 };

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

@@ -39,7 +39,7 @@ const Harness = ({
 	initialHtml = "",
 	initialText = "",
 	startIn = "rich",
-	onConversionError = () => undefined,
+	onConversionError,
 	conversions,
 	languages = LANGUAGES,
 	quoted,
@@ -56,15 +56,29 @@ const Harness = ({
 	quoted?: string;
 }) => {
 	const [mode, setMode] = useState<"rich" | "plain">(startIn);
+	const [failure, setFailure] = useState<ConversionFailure>();
 	return (
 		<div className="flex h-[460px] w-[680px] flex-col overflow-auto rounded-md border border-line bg-canvas">
+			{failure && (
+				<div
+					role="alert"
+					data-testid="compose-conversion-error"
+					className="border-b border-danger/30 bg-danger-soft px-3 py-2 text-xs"
+				>
+					<p className="font-medium text-danger">{failure.title}</p>
+					<p className="text-fg-muted">{failure.detail}</p>
+				</div>
+			)}
 			<ComposeBody
 				mode={mode}
 				onModeChange={setMode}
 				initialHtml={initialHtml}
 				initialText={initialText}
-				onChange={() => undefined}
-				onConversionError={onConversionError}
+				onChange={noop}
+				onConversionError={(reported) => {
+					setFailure(reported);
+					onConversionError?.(reported);
+				}}
 				conversions={conversions}
 				languages={languages}
 				onLanguageChange={noop}
@@ -278,6 +292,9 @@ export const ConversionCameBackEmpty: Story = {
 			title: "Couldn't switch to rich text",
 			detail: "The conversion came back empty, so your message is unchanged.",
 		});
+		await expect(
+			within(canvasElement).getByTestId("compose-conversion-error"),
+		).toHaveTextContent("Couldn't switch to rich text");
 		const textarea = plainSurface(canvasElement);
 		if (!textarea) throw new Error("the plain surface left");
 		await expect(textarea.value).toBe("Everything I wrote this morning.");

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

@@ -15,22 +15,11 @@ const meta: Meta<typeof ComposeModeToggle> = {
 	title: "Mail/ComposeModeToggle",
 	component: ComposeModeToggle,
 	parameters: { layout: "centered" },
-	args: { onToggle: () => undefined },
 };
 export default meta;
 
 type Story = StoryObj<typeof ComposeModeToggle>;
 
-export const RichText: Story = {
-	name: "Rich text — plain text on offer",
-	args: { mode: "rich" },
-};
-
-export const PlainText: Story = {
-	name: "Plain text — the mode is on",
-	args: { mode: "plain" },
-};
-
 const Harness = ({ start }: { start: ComposeBodyMode }) => {
 	const [mode, setMode] = useState<ComposeBodyMode>(start);
 	return (
@@ -41,6 +30,16 @@ const Harness = ({ start }: { start: ComposeBodyMode }) => {
 	);
 };
 
+export const RichText: Story = {
+	name: "Rich text — plain text on offer",
+	render: () => <Harness start="rich" />,
+};
+
+export const PlainText: Story = {
+	name: "Plain text — the mode is on",
+	render: () => <Harness start="plain" />,
+};
+
 export const PressedStateFollowsTheMode: Story = {
 	render: () => <Harness start="rich" />,
 	play: async ({ canvasElement }) => {

package/src/components/compose-smtp-missing-banner.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof ComposeSmtpMissingBanner> = {
 	title: "Mail/ComposeSmtpMissingBanner",
 	component: ComposeSmtpMissingBanner,
 	parameters: { layout: "padded" },
-	args: { onConfigure: () => undefined },
+	args: { onConfigure: fn().mockName("onConfigure") },
 };
 export default meta;
 

package/src/components/reading-pane.stories.tsx

@@ -1,7 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Paperclip, Star } from "lucide-react";
+import { useState } from "react";
 import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
-import { AttachmentList } from "./attachment-list.js";
+import {
+	type AttachmentDownloadState,
+	type AttachmentItem,
+	AttachmentList,
+} from "./attachment-list.js";
 import { MessageBodyView } from "./message-body-view.js";
 import {
 	CollapsedMessage,
@@ -198,6 +203,44 @@ export const ExpandedRowComposed: StoryObj<typeof ExpandedMessage> = {
 	),
 };
 
+/** The app owns the fetch and hands the row its state back; so does this. */
+const ThreadAttachments = () => {
+	const [rows, setRows] = useState<AttachmentItem[]>([
+		{
+			attachmentId: "part-2",
+			filename: "Q3 board pack.pdf",
+			typeLabel: "PDF",
+			sizeOctets: 2_411_724,
+			download: { status: "idle" },
+		},
+		{
+			attachmentId: "part-3",
+			filename: "headcount.csv",
+			typeLabel: "CSV",
+			sizeOctets: 4_180,
+			download: { status: "idle" },
+		},
+	]);
+
+	const setStatus = (attachmentId: string, download: AttachmentDownloadState) =>
+		setRows((current) =>
+			current.map((row) =>
+				row.attachmentId === attachmentId ? { ...row, download } : row,
+			),
+		);
+
+	return (
+		<AttachmentList
+			className="mt-4 px-2 lg:px-0"
+			attachments={rows}
+			onDownload={(attachmentId) => {
+				setStatus(attachmentId, { status: "downloading" });
+				setTimeout(() => setStatus(attachmentId, { status: "idle" }), 900);
+			}}
+		/>
+	);
+};
+
 /**
  * The expanded row as `MessageCard` composes it when the message carries files
  * (#683): body first, attachment list under it. The indicators row holds no
@@ -222,26 +265,7 @@ export const ExpandedRowWithAttachments: StoryObj<typeof ExpandedMessage> = {
 							category="personal"
 							allowImages
 						/>
-						<AttachmentList
-							className="mt-4 px-2 lg:px-0"
-							attachments={[
-								{
-									attachmentId: "part-2",
-									filename: "Q3 board pack.pdf",
-									typeLabel: "PDF",
-									sizeOctets: 2_411_724,
-									download: { status: "idle" },
-								},
-								{
-									attachmentId: "part-3",
-									filename: "headcount.csv",
-									typeLabel: "CSV",
-									sizeOctets: 4_180,
-									download: { status: "idle" },
-								},
-							]}
-							onDownload={(id) => alert(`Download ${id}`)}
-						/>
+						<ThreadAttachments />
 					</div>
 				}
 			/>

package/src/components/rich-text-editor.stories.tsx

@@ -1,8 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 import { expect, userEvent } from "storybook/test";
 import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
 import { ComposeLanguageChip } from "./compose-language-chip.js";
-import { ComposeModeToggle } from "./compose-mode-toggle.js";
+import {
+	type ComposeBodyMode,
+	ComposeModeToggle,
+} from "./compose-mode-toggle.js";
 import { RichTextEditor } from "./rich-text-editor.js";
 
 /**
@@ -108,18 +112,29 @@ export const ClickBelowTheText: Story = {
 /**
  * The two pinned controls, in the order compose ships them: the chip first, so
  * one Shift+Tab out of the body still reaches the mode toggle and two reach the
- * chip.
+ * chip. Both hold their own state here — the editor knows nothing about either,
+ * and a pinned control that did not answer a press would read as a broken
+ * toolbar rather than a layout story.
  */
-const pinnedControls = (
-	<>
-		<ComposeLanguageChip
-			language="nl"
-			languages={["nl", "en", "de"]}
-			onSelect={() => undefined}
-		/>
-		<ComposeModeToggle mode="rich" onToggle={() => undefined} />
-	</>
-);
+const PinnedControls = () => {
+	const [language, setLanguage] = useState("nl");
+	const [mode, setMode] = useState<ComposeBodyMode>("rich");
+	return (
+		<>
+			<ComposeLanguageChip
+				language={language}
+				languages={["nl", "en", "de"]}
+				onSelect={setLanguage}
+			/>
+			<ComposeModeToggle
+				mode={mode}
+				onToggle={() => setMode(mode === "plain" ? "rich" : "plain")}
+			/>
+		</>
+	);
+};
+
+const pinnedControls = <PinnedControls />;
 
 /** The toolbar as compose ships it: the formatting cluster, then the two pinned controls. */
 export const ToolbarInRich: Story = {