@remit/web-client 0.0.321 → 0.0.323

package/src/components/ui/ErrorBanner.render.test.ts

@@ -1,104 +0,0 @@
-/**
- * Banner rendering (#55): a banner sits on top of the toolbar and the message
- * list, so it is opaque, it says which severity it is out loud, and only an
- * error interrupts a screen reader.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ErrorBanner } from "./ErrorBanner";
-import { ErrorBannerStack } from "./ErrorBannerStack";
-import type { ErrorBannerEntry, ErrorBannerSeverity } from "./error-banners.js";
-
-(globalThis as { React?: typeof React }).React = React;
-
-const renderBanner = (severity: ErrorBannerSeverity, detail?: string): string =>
-	renderToString(
-		createElement(ErrorBanner, {
-			id: "b1",
-			severity,
-			title: "Couldn't move message",
-			detail,
-			onDismiss: () => undefined,
-		}) as never,
-	);
-
-describe("ErrorBanner", () => {
-	it("interrupts assertively for an error and politely for the rest", () => {
-		assert.match(renderBanner("error"), /role="alert"/);
-		assert.match(renderBanner("error"), /aria-live="assertive"/);
-		for (const severity of ["warning", "info"] as const) {
-			assert.match(renderBanner(severity), /role="status"/);
-			assert.match(renderBanner(severity), /aria-live="polite"/);
-		}
-	});
-
-	it("names the severity in the dismiss label so it is not just an X", () => {
-		assert.match(renderBanner("error"), /aria-label="Dismiss error"/);
-		assert.match(renderBanner("warning"), /aria-label="Dismiss warning"/);
-		assert.match(renderBanner("info"), /aria-label="Dismiss information"/);
-	});
-
-	it("stays opaque — no translucent surface over the message list (#55)", () => {
-		const backgrounds: Record<ErrorBannerSeverity, RegExp> = {
-			error: /bg-danger-soft/,
-			warning: /bg-warning-soft/,
-			info: /bg-accent-2-soft/,
-		};
-		for (const [severity, background] of Object.entries(backgrounds)) {
-			const html = renderBanner(severity as ErrorBannerSeverity);
-			assert.match(html, background);
-			// An alpha-suffixed background (`bg-x/40`) is see-through; text over
-			// the message list behind it stops being readable.
-			assert.doesNotMatch(html, /class="[^"]*\sbg-[\w-]+\/\d/);
-		}
-	});
-
-	it("shows the detail only when there is one", () => {
-		assert.match(renderBanner("error", "Connection reset"), /Connection reset/);
-		assert.doesNotMatch(renderBanner("error"), /Connection reset/);
-	});
-});
-
-const entry = (
-	id: string,
-	severity: ErrorBannerSeverity,
-	title: string,
-): ErrorBannerEntry => ({
-	id,
-	severity,
-	title,
-	createdAt: 0,
-});
-
-const renderStack = (errors: ErrorBannerEntry[]): string =>
-	renderToString(
-		createElement(ErrorBannerStack, {
-			errors,
-			onDismiss: () => undefined,
-		}) as never,
-	);
-
-describe("ErrorBannerStack", () => {
-	it("renders nothing at all when there is nothing to say", () => {
-		assert.equal(renderStack([]), "");
-	});
-
-	it("stacks every banner it is given under one labelled region", () => {
-		const html = renderStack([
-			entry("a", "error", "Couldn't delete"),
-			entry("b", "info", "Sync finished"),
-		]);
-		assert.match(html, /aria-label="Notifications"/);
-		assert.match(html, /Couldn&#x27;t delete/);
-		assert.match(html, /Sync finished/);
-	});
-
-	it("lets clicks through the region so it never blocks the mail behind it", () => {
-		const html = renderStack([entry("a", "error", "Couldn't delete")]);
-		assert.match(html, /pointer-events-none/);
-		assert.match(html, /pointer-events-auto/);
-	});
-});

package/src/components/ui/ErrorBanner.stories.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ErrorBanner } from "./ErrorBanner";
-
-/**
- * The soft, dismissible notification (#55). It sits over the toolbar and the
- * message list, so it is opaque and it names its own severity out loud rather
- * than leaving colour to carry the meaning.
- *
- * Every error banner carries a prefilled report link, so reporting a failure
- * the user cannot act on is one click instead of a form they have to
- * assemble. The hrefs below stand in for the real report URL, which the app
- * builds from build-time constants Storybook has no `define` for.
- */
-const meta: Meta<typeof ErrorBanner> = {
-	title: "Playground/Shipped/Mail/ErrorBanner",
-	component: ErrorBanner,
-	parameters: { layout: "padded" },
-	args: {
-		id: "banner-1",
-		onDismiss: () => undefined,
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof ErrorBanner>;
-
-const REPORT_URL =
-	"https://github.com/remit-mail/reader/issues/new?title=Spellcheck+stopped";
-
-/** A mutation that failed, with the reason underneath and a way out. */
-export const Failed: Story = {
-	name: "Error",
-	args: {
-		severity: "error",
-		title: "Couldn't move message",
-		detail: "Connection reset by peer",
-		action: { label: "Report an issue", href: REPORT_URL },
-	},
-};
-
-/** Nothing more to say than the title — the report link still stands. */
-export const NoDetail: Story = {
-	args: {
-		severity: "error",
-		title: "Couldn't move message",
-		action: { label: "Report an issue", href: REPORT_URL },
-	},
-};
-
-/**
- * Report spam failing because the account has nowhere to file it. The reason
- * names the folder and the fix, so this one is actionable without the report
- * link — which is offered anyway, because the user should not have to decide.
- */
-export const NoJunkFolder: Story = {
-	args: {
-		severity: "error",
-		title: "Couldn't report this message as spam",
-		detail:
-			"This account has no Junk folder. Create one named Junk or Spam in your mail provider, then report this message again.",
-		action: { label: "Report an issue", href: REPORT_URL },
-	},
-};
-
-/** Something degraded rather than broke. */
-export const Warning: Story = {
-	args: {
-		severity: "warning",
-		title: "Draft saved locally",
-		detail: "The server did not answer, so this draft has not been uploaded.",
-	},
-};
-
-/** A statement of fact, not a problem. */
-export const Info: Story = {
-	args: {
-		severity: "info",
-		title: "Sync finished",
-		detail: "1,204 messages are up to date.",
-	},
-};
-
-/**
- * The spellchecker stopping (#707): the writer cannot fix this one, so the
- * banner says what stopped, what is happening instead, and offers the report
- * already filled in.
- */
-export const WithActionLink: Story = {
-	args: {
-		severity: "warning",
-		title: "Spellcheck stopped",
-		detail:
-			"Spellcheck for en is off: the checker could not start. Your browser is checking this message instead. Failed to fetch dynamically imported module.",
-		action: { label: "Report this", href: REPORT_URL },
-	},
-};
-
-/**
- * A delete refused because the message is still being moved on the mail server
- * (#845). Transient: the same press works once the move confirms, so the copy
- * says so rather than sending the user off to report a bug.
- */
-export const PlacementInFlight: Story = {
-	args: {
-		severity: "warning",
-		title: "Couldn't delete this message yet",
-		detail:
-			"It is still being moved on the mail server. Try again in a moment.",
-		action: { label: "Report an issue", href: REPORT_URL },
-	},
-};
-
-/**
- * The same refusal after the move gave up without confirming. Waiting will
- * never clear this one, so the remedy is a resync instead.
- */
-export const PlacementUnverified: Story = {
-	args: {
-		severity: "warning",
-		title: "Couldn't delete 4 messages yet",
-		detail:
-			"An earlier move never finished, so where this message sits is unknown. Sync the folder, then delete it again.",
-		action: { label: "Report an issue", href: REPORT_URL },
-	},
-};
-
-/** The action link on the dark theme. */
-export const WithActionLinkDark: Story = {
-	name: "With Action Link (dark)",
-	parameters: { theme: "dark" },
-	args: WithActionLink.args,
-};

package/src/components/ui/ErrorBanner.tsx

@@ -1,106 +0,0 @@
-import { cn } from "@remit/ui";
-import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
-import type {
-	ErrorBannerAction,
-	ErrorBannerSeverity,
-} from "./error-banners.js";
-
-interface ErrorBannerProps {
-	id: string;
-	severity: ErrorBannerSeverity;
-	title: string;
-	detail?: string;
-	action?: ErrorBannerAction;
-	onDismiss: (id: string) => void;
-}
-
-const SEVERITY_STYLES: Record<
-	ErrorBannerSeverity,
-	{ container: string; icon: string; title: string }
-> = {
-	error: {
-		container: "border-danger/50 bg-danger-soft",
-		icon: "text-danger",
-		title: "text-danger",
-	},
-	warning: {
-		container: "border-warning/50 bg-warning-soft",
-		icon: "text-warning",
-		title: "text-warning",
-	},
-	info: {
-		container: "border-accent-2/50 bg-accent-2-soft",
-		icon: "text-accent-2",
-		title: "text-accent-2",
-	},
-};
-
-const SEVERITY_ICONS: Record<
-	ErrorBannerSeverity,
-	typeof AlertCircle | typeof AlertTriangle | typeof Info
-> = {
-	error: AlertCircle,
-	warning: AlertTriangle,
-	info: Info,
-};
-
-const SEVERITY_LABEL: Record<ErrorBannerSeverity, string> = {
-	error: "Error",
-	warning: "Warning",
-	info: "Information",
-};
-
-export const ErrorBanner = ({
-	id,
-	severity,
-	title,
-	detail,
-	action,
-	onDismiss,
-}: ErrorBannerProps) => {
-	const styles = SEVERITY_STYLES[severity];
-	const Icon = SEVERITY_ICONS[severity];
-
-	return (
-		<div
-			role={severity === "error" ? "alert" : "status"}
-			aria-live={severity === "error" ? "assertive" : "polite"}
-			className={cn(
-				// Opaque, not translucent: a banner overlaps the toolbar and the
-				// message list, and see-through text on top of see-through text is
-				// unreadable (issue #55).
-				"pointer-events-auto flex items-start gap-3 rounded-md border bg-canvas px-3 py-2 shadow-lg",
-				styles.container,
-			)}
-		>
-			<Icon
-				className={cn("size-5 shrink-0 mt-0.5", styles.icon)}
-				aria-hidden="true"
-			/>
-			<div className="flex-1 min-w-0">
-				<p className={cn("text-sm font-medium", styles.title)}>{title}</p>
-				{detail && (
-					<p className="mt-0.5 text-xs text-fg-muted break-words">{detail}</p>
-				)}
-				{action && (
-					<a
-						href={action.href}
-						target="_blank"
-						rel="noopener noreferrer"
-						className="mt-1 inline-block text-xs font-medium text-accent-2 underline underline-offset-2"
-					>
-						{action.label}
-					</a>
-				)}
-			</div>
-			<button
-				type="button"
-				onClick={() => onDismiss(id)}
-				className="shrink-0 rounded-md p-1 text-fg-muted hover:bg-surface-raised hover:text-fg transition-colors"
-				aria-label={`Dismiss ${SEVERITY_LABEL[severity].toLowerCase()}`}
-			>
-				<X className="size-4" aria-hidden="true" />
-			</button>
-		</div>
-	);
-};

package/src/components/ui/ErrorBannerStack.tsx

@@ -1,35 +0,0 @@
-import { ErrorBanner } from "./ErrorBanner.js";
-import type { ErrorBannerEntry } from "./error-banners.js";
-
-interface ErrorBannerStackProps {
-	errors: ErrorBannerEntry[];
-	onDismiss: (id: string) => void;
-}
-
-export const ErrorBannerStack = ({
-	errors,
-	onDismiss,
-}: ErrorBannerStackProps) => {
-	if (errors.length === 0) return null;
-
-	return (
-		<section
-			aria-label="Notifications"
-			className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex flex-col items-center gap-2 px-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] sm:items-end sm:pr-6"
-		>
-			<div className="flex w-full max-w-md flex-col gap-2">
-				{errors.map((entry) => (
-					<ErrorBanner
-						key={entry.id}
-						id={entry.id}
-						severity={entry.severity}
-						title={entry.title}
-						detail={entry.detail}
-						action={entry.action}
-						onDismiss={onDismiss}
-					/>
-				))}
-			</div>
-		</section>
-	);
-};

package/src/components/ui/ErrorState.render.test.ts

@@ -1,82 +0,0 @@
-/**
- * ErrorState is the shared "this didn't load" surface. Two things matter about
- * it: the message it shows comes from whatever the caller caught (which is
- * rarely an `Error`), and Retry only exists when there is something to retry.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ErrorState, formatErrorMessage } from "./ErrorState";
-
-(globalThis as { React?: typeof React }).React = React;
-
-const render = (props: Parameters<typeof ErrorState>[0]): string =>
-	renderToString(createElement(ErrorState, props) as never);
-
-describe("formatErrorMessage", () => {
-	it("uses an Error's message", () => {
-		assert.equal(
-			formatErrorMessage(new Error("imap timed out")),
-			"imap timed out",
-		);
-	});
-
-	it("passes a bare string through", () => {
-		assert.equal(formatErrorMessage("nope"), "nope");
-	});
-
-	it("reads `message` off a plain object — what a rejected fetch body looks like", () => {
-		assert.equal(formatErrorMessage({ message: "Bad Gateway" }), "Bad Gateway");
-	});
-
-	it("falls back for a shape it cannot read", () => {
-		assert.equal(
-			formatErrorMessage({ status: 500 }),
-			"An unexpected error occurred",
-		);
-		assert.equal(formatErrorMessage(null), "An unexpected error occurred");
-		assert.equal(
-			formatErrorMessage({ message: 42 }),
-			"An unexpected error occurred",
-		);
-	});
-});
-
-describe("ErrorState", () => {
-	it("announces itself as an alert and shows the caught message", () => {
-		const html = render({ error: new Error("mailbox unreachable") });
-		assert.match(html, /role="alert"/);
-		assert.match(html, /mailbox unreachable/);
-		assert.match(html, /Couldn&#x27;t load content/);
-	});
-
-	it("takes a caller-supplied title over the default", () => {
-		const html = render({ error: "x", title: "Couldn't load folders" });
-		assert.match(html, /Couldn&#x27;t load folders/);
-		assert.doesNotMatch(html, /load content/);
-	});
-
-	it("offers no Retry when the caller has no retry to give", () => {
-		assert.doesNotMatch(render({ error: "x" }), /Retry/);
-		assert.doesNotMatch(render({ error: "x", variant: "inline" }), /Retry/);
-	});
-
-	it("offers Retry in both variants when it can retry", () => {
-		const retry = () => undefined;
-		assert.match(render({ error: "x", onRetry: retry }), /Retry/);
-		assert.match(
-			render({ error: "x", onRetry: retry, variant: "inline" }),
-			/Retry/,
-		);
-	});
-
-	it("renders the inline variant as a single row, not the centred block", () => {
-		const inline = render({ error: "x", variant: "inline" });
-		const block = render({ error: "x" });
-		assert.match(inline, /items-start/);
-		assert.match(block, /justify-center/);
-		assert.doesNotMatch(inline, /justify-center/);
-	});
-});

package/src/components/ui/ErrorState.tsx

@@ -1,80 +0,0 @@
-import { AlertCircle } from "lucide-react";
-
-interface ErrorStateProps {
-	title?: string;
-	error: unknown;
-	onRetry?: () => void;
-	variant?: "block" | "inline";
-}
-
-export const formatErrorMessage = (error: unknown): string => {
-	if (error instanceof Error) return error.message;
-	if (typeof error === "string") return error;
-	if (
-		typeof error === "object" &&
-		error !== null &&
-		"message" in error &&
-		typeof (error as { message: unknown }).message === "string"
-	) {
-		return (error as { message: string }).message;
-	}
-	return "An unexpected error occurred";
-};
-
-export const ErrorState = ({
-	title = "Couldn't load content",
-	error,
-	onRetry,
-	variant = "block",
-}: ErrorStateProps) => {
-	const message = formatErrorMessage(error);
-
-	if (variant === "inline") {
-		return (
-			<div
-				role="alert"
-				className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm"
-			>
-				<AlertCircle
-					className="size-4 shrink-0 text-danger mt-0.5"
-					aria-hidden="true"
-				/>
-				<div className="flex-1 min-w-0">
-					<p className="font-medium text-danger">{title}</p>
-					<p className="text-fg-muted mt-0.5 break-words">{message}</p>
-				</div>
-				{onRetry && (
-					<button
-						type="button"
-						onClick={onRetry}
-						className="shrink-0 text-sm font-medium text-accent hover:underline"
-					>
-						Retry
-					</button>
-				)}
-			</div>
-		);
-	}
-
-	return (
-		<div
-			role="alert"
-			className="flex flex-col items-center justify-center gap-3 p-8 text-center"
-		>
-			<AlertCircle className="size-8 text-danger" aria-hidden="true" />
-			<div>
-				<p className="font-medium text-danger">{title}</p>
-				<p className="text-sm text-fg-muted mt-1 break-words">{message}</p>
-			</div>
-			{onRetry && (
-				<button
-					type="button"
-					onClick={onRetry}
-					className="inline-flex items-center rounded-md border border-line bg-canvas px-4 py-2 text-sm font-medium hover:bg-surface-raised transition-colors"
-				>
-					Retry
-				</button>
-			)}
-		</div>
-	);
-};

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,113 +0,0 @@
-import {
-	cn,
-	DialogBackdrop,
-	Kbd,
-	KEY_HINT_GROUPS,
-	useModalFocus,
-	useOverlayScope,
-} from "@remit/ui";
-import { X } from "lucide-react";
-import { Fragment, useRef } from "react";
-
-interface KeyboardShortcutsModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-}
-
-/**
- * The `?` help overlay (#429). Renders the full triage key map from the single
- * source of truth (`@remit/ui`'s keymap) using the `Kbd` component, so the
- * displayed bindings can never drift from what the dispatcher actually routes.
- */
-export const KeyboardShortcutsModal = ({
-	isOpen,
-	onClose,
-}: KeyboardShortcutsModalProps) => {
-	const modalRef = useRef<HTMLDivElement>(null);
-
-	useOverlayScope({
-		id: "shortcuts",
-		open: isOpen,
-		answers: { back: onClose },
-	});
-	useModalFocus(modalRef, isOpen);
-
-	if (!isOpen) return null;
-
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
-			<DialogBackdrop
-				label="Dismiss keyboard shortcuts"
-				onDismiss={onClose}
-				className="backdrop-blur-sm"
-			/>
-
-			{/* Modal */}
-			<div
-				ref={modalRef}
-				role="dialog"
-				aria-modal="true"
-				aria-label="Keyboard shortcuts"
-				tabIndex={-1}
-				className={cn(
-					"relative z-10 max-h-[85vh] w-full max-w-2xl overflow-y-auto",
-					"rounded-lg border border-line bg-surface shadow-lg",
-					"p-6",
-				)}
-			>
-				{/* Header */}
-				<div className="mb-6 flex items-center justify-between">
-					<h2 className="text-lg font-semibold">Keyboard shortcuts</h2>
-					<button
-						type="button"
-						onClick={onClose}
-						className="p-1 text-fg-muted transition-colors hover:text-fg"
-						aria-label="Close"
-					>
-						<X className="size-5" />
-					</button>
-				</div>
-
-				{/* Sections — two columns on wider modals */}
-				<div className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
-					{KEY_HINT_GROUPS.map((group) => (
-						<div key={group.title}>
-							<h3 className="mb-3 text-sm font-medium text-fg-muted">
-								{group.title}
-							</h3>
-							<div className="space-y-2">
-								{group.hints.map((hint) => (
-									<div
-										key={`${hint.action}-${hint.keys.join("+")}`}
-										className="flex items-center justify-between gap-4"
-									>
-										<span className="text-sm">{hint.description}</span>
-										<span className="flex shrink-0 items-center gap-1">
-											{hint.keys.map((key, index) => (
-												<Fragment key={key}>
-													{index > 0 && hint.keys[0] === "g" && (
-														<span className="text-2xs text-fg-subtle">
-															then
-														</span>
-													)}
-													<Kbd>{key}</Kbd>
-												</Fragment>
-											))}
-										</span>
-									</div>
-								))}
-							</div>
-						</div>
-					))}
-				</div>
-
-				{/* Footer */}
-				<div className="mt-6 border-t border-line pt-4">
-					<p className="text-center text-xs text-fg-muted">
-						Press <Kbd>Esc</Kbd> to close
-					</p>
-				</div>
-			</div>
-		</div>
-	);
-};