@remit/web-client 0.0.325 → 0.0.326

package/src/components/settings/warnings.stories.tsx

@@ -1,290 +0,0 @@
-import type {
-	RemitImapQuarantineResponse,
-	RemitImapSyncWarningResponse,
-} from "@remit/api-http-client/types.gen.ts";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HttpResponse, http } from "msw";
-import { expect, userEvent, within } from "storybook/test";
-import { AppStory } from "@/mocks/story-frame/AppStory";
-import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
-import {
-	MINUTE,
-	mailboxIdFor,
-	mailWorld,
-	NOW,
-	PERSONAL,
-} from "@/mocks/story-frame/mail-world";
-
-const setAside = (
-	id: string,
-	role: "Inbox" | "Archive",
-	failureCode: RemitImapQuarantineResponse["failureCode"],
-	failureMessage: string,
-): RemitImapQuarantineResponse => ({
-	quarantineId: `q-${id}`,
-	accountConfigId: "cfg-1",
-	accountId: PERSONAL,
-	mailboxId: mailboxIdFor(PERSONAL, role),
-	uidValidity: 1_712_000_000,
-	uid: 40_217,
-	mailboxRole: role,
-	mailboxPath: role === "Inbox" ? "INBOX" : "Archive",
-	quarantinedAt: NOW,
-	attempts: 3,
-	failureStage: "BodyParse",
-	failureCode,
-	failureMessage,
-	workerVersion: "worker 1.0.0",
-	contentType: "multipart/mixed",
-	sizeBytes: 184_233,
-	structure: [{ depth: 0, contentType: "multipart/mixed" }],
-	createdAt: NOW,
-	updatedAt: NOW,
-});
-
-const failing = (
-	uid: number,
-	role: "Inbox" | "Archive",
-	stage: RemitImapSyncWarningResponse["stage"],
-	attempts: number,
-): RemitImapSyncWarningResponse => ({
-	syncWarningId: `w-${uid}`,
-	accountConfigId: "cfg-1",
-	accountId: PERSONAL,
-	mailboxId: mailboxIdFor(PERSONAL, role),
-	uidValidity: 1_712_000_000,
-	uid,
-	stage,
-	attempts,
-	createdAt: NOW - uid * MINUTE,
-});
-
-const unreadableBody = setAside(
-	"1",
-	"Inbox",
-	"UnreadableBody",
-	"multipart boundary was never closed",
-);
-const unknownCharset = setAside(
-	"2",
-	"Archive",
-	"UnknownCharset",
-	"declared charset is not a known encoding",
-);
-
-const bodyGaveUp = failing(3, "Inbox", "Body", 3);
-const headerRetrying = failing(5, "Archive", "Header", 6);
-
-const meta = {
-	title: "Playground/Shipped/Settings/Warnings",
-	component: AppStory,
-	args: { url: "/settings/warnings" },
-	parameters: {
-		layout: "fullscreen",
-		msw: { handlers: mailHandlers(mailWorld()) },
-	},
-} satisfies Meta<typeof AppStory>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText(/Every message is syncing/),
-		).toBeVisible();
-		await expect(
-			canvas.getByText(/Every message has been read successfully/),
-		).toBeVisible();
-	},
-};
-
-export const Mixed: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(
-				mailWorld({
-					syncWarnings: [bodyGaveUp, headerRetrying],
-					syncWarningsTotal: 2,
-					quarantine: [unreadableBody],
-				}),
-			),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Gave up")).toBeVisible();
-		await expect(canvas.getByText("Retrying")).toBeVisible();
-		await expect(
-			canvas.getByText(/multipart boundary was never closed/),
-		).toBeVisible();
-	},
-};
-
-export const OverCap: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(
-				mailWorld({
-					syncWarnings: [bodyGaveUp, headerRetrying],
-					syncWarningsTotal: 4_812,
-				}),
-			),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText(/Showing the 2 newest of 4812/),
-		).toBeVisible();
-	},
-};
-
-export const QuarantineAlert: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(
-				mailWorld({ quarantine: [unreadableBody, unknownCharset] }),
-			),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("2 messages could not be read."),
-		).toBeVisible();
-	},
-};
-
-export const Loading: Story = {
-	parameters: {
-		msw: {
-			handlers: [
-				http.get(
-					"/api/me/quarantine",
-					() => new Promise<never>(() => undefined),
-				),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("Checking for warnings…"),
-		).toBeVisible();
-	},
-};
-
-export const ReadFailure: Story = {
-	parameters: {
-		msw: {
-			handlers: [
-				http.get("/api/me/quarantine", () => HttpResponse.error()),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("The warnings could not be read."),
-		).toBeVisible();
-		await expect(
-			canvas.getByRole("button", { name: "Report this" }),
-		).toBeVisible();
-	},
-};
-
-export const SignedOut: Story = {
-	parameters: {
-		msw: {
-			handlers: [
-				http.get("/api/me/quarantine", () =>
-					HttpResponse.json(
-						{ status: 401, message: "Unauthorized" },
-						{ status: 401 },
-					),
-				),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("Your session has ended."),
-		).toBeVisible();
-		await expect(canvas.queryByText(/Every message is syncing/)).toBeNull();
-	},
-};
-
-const failingWorld = () =>
-	mailHandlers(mailWorld({ syncWarnings: [bodyGaveUp], syncWarningsTotal: 1 }));
-
-export const NavDot: Story = {
-	parameters: { msw: { handlers: failingWorld() } },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Sync warnings")).toBeInTheDocument();
-	},
-};
-
-export const DotOnMail: Story = {
-	args: { url: "/mail/flagged" },
-	parameters: { msw: { handlers: failingWorld() } },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByRole("button", { name: "Settings — Sync warnings" }),
-		).toBeVisible();
-	},
-};
-
-export const NoDotOnMail: Story = {
-	args: { url: "/mail/flagged" },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByRole("button", { name: "Settings" }),
-		).toBeVisible();
-		await expect(canvas.queryByText("Sync warnings")).toBeNull();
-	},
-};
-
-export const DotOnPhone: Story = {
-	args: { url: "/mail/flagged" },
-	globals: { viewport: { value: "mobile", isRotated: false } },
-	parameters: { msw: { handlers: failingWorld() } },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const [menu] = await canvas.findAllByRole("button", { name: "Menu" });
-		await userEvent.click(menu);
-		const page = within(canvasElement.ownerDocument.body);
-		await expect(await page.findByText("Sync warnings")).toBeInTheDocument();
-	},
-};
-
-export const DotOnSignedOut: Story = {
-	args: { url: "/mail/flagged" },
-	parameters: {
-		msw: {
-			handlers: [
-				http.get("/api/me/quarantine", () =>
-					HttpResponse.json(
-						{ status: 401, message: "Unauthorized" },
-						{ status: 401 },
-					),
-				),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByRole("button", { name: "Settings — Session ended" }),
-		).toBeVisible();
-	},
-};

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

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AppVersion } from "./AppVersion";
-
-const meta: Meta<typeof AppVersion> = {
-	title: "Playground/Shipped/Settings/Advanced/AppVersion",
-	component: AppVersion,
-	parameters: { layout: "padded" },
-	args: {
-		sha: "a1b2c3d",
-		commitUrl: "https://github.com/remit-mail/reader/commit/a1b2c3d4e5f6",
-		buildTime: "2024-06-12T10:30:00.000Z",
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof AppVersion>;
-
-export const Default: Story = {};
-
-export const DevBuild: Story = {
-	args: { sha: "dev", commitUrl: undefined },
-};
-
-export const InAboutSection: Story = {
-	render: (args) => (
-		<div className="mt-4 max-w-sm border-t border-line pt-4">
-			<p className="mb-1 text-sm font-medium text-fg">About</p>
-			<AppVersion {...args} />
-		</div>
-	),
-};

package/src/components/ui/AppVersion.tsx

@@ -1,57 +0,0 @@
-import {
-	APP_BUILD_TIME,
-	APP_SHORT_SHA,
-	GITHUB_COMMIT_URL,
-} from "@/lib/app-info";
-
-export interface AppVersionProps {
-	/** Override SHA for testing/Storybook. Defaults to the build-time constant. */
-	sha?: string;
-	/**
-	 * Override commit URL. Defaults to the GitHub commit link, which is undefined
-	 * for a local "dev" build with no real SHA — the version renders unlinked then.
-	 */
-	commitUrl?: string;
-	/** Override build time ISO string. Defaults to the build-time constant. */
-	buildTime?: string;
-}
-
-function formatBuildTime(iso: string): string {
-	try {
-		return new Date(iso).toLocaleString(undefined, {
-			year: "numeric",
-			month: "short",
-			day: "numeric",
-			hour: "2-digit",
-			minute: "2-digit",
-		});
-	} catch {
-		return iso;
-	}
-}
-
-export function AppVersion({
-	sha = APP_SHORT_SHA,
-	commitUrl = GITHUB_COMMIT_URL,
-	buildTime = APP_BUILD_TIME,
-}: AppVersionProps) {
-	return (
-		<p className="text-xs text-fg-subtle">
-			Version{" "}
-			{commitUrl ? (
-				<a
-					href={commitUrl}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="font-mono hover:text-fg-muted hover:underline"
-				>
-					{sha}
-				</a>
-			) : (
-				<span className="font-mono">{sha}</span>
-			)}
-			{" · "}
-			<span>Built {formatBuildTime(buildTime)}</span>
-		</p>
-	);
-}

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { BugReportButton } from "./BugReportButton";
-
-const meta: Meta<typeof BugReportButton> = {
-	title: "Playground/Shipped/Mail/Nav/BugReportButton",
-	component: BugReportButton,
-	parameters: { layout: "padded" },
-};
-export default meta;
-
-type Story = StoryObj<typeof BugReportButton>;
-
-export const Default: Story = {
-	render: () => (
-		<div className="w-64">
-			<BugReportButton />
-		</div>
-	),
-};

package/src/components/ui/BugReportButton.tsx

@@ -1,20 +0,0 @@
-import { Bug } from "lucide-react";
-import { openBugReport } from "@/lib/bug-report";
-
-/**
- * The mobile drawer's bug-report row — a full-width labeled control beside
- * Settings, where an icon-only button would be unreachable and ambiguous
- * (#685). Above the drawer, the shell's top bar carries this action.
- */
-export function BugReportButton() {
-	return (
-		<button
-			type="button"
-			onClick={openBugReport}
-			className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
-		>
-			<Bug className="size-4 shrink-0" />
-			<span className="flex-1 truncate text-left">Report a bug</span>
-		</button>
-	);
-}

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

@@ -1,85 +0,0 @@
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ApiError } from "@/lib/api";
-import { __resetFatalError, getCurrentFatalError } from "@/lib/fatal-error";
-import { ErrorBannerProvider, useErrorBanners } from "./ErrorBannerProvider";
-import type { PushErrorInput } from "./error-banners";
-
-/**
- * Push one error through the real provider and report where it went. The
- * routing decision happens inside `pushError`, so a single render is enough:
- * either a fatal was recorded, or the error stayed a soft banner.
- */
-const push = (input: PushErrorInput): { escalated: boolean } => {
-	const Pusher = () => {
-		useErrorBanners().pushError(input);
-		return null;
-	};
-	renderToString(
-		createElement(ErrorBannerProvider, null, createElement(Pusher)) as never,
-	);
-	return { escalated: getCurrentFatalError() !== null };
-};
-
-afterEach(() => {
-	__resetFatalError();
-});
-
-describe("pushError — a banner is a soft surface only", () => {
-	it("keeps a soft failure with no error attached in a banner", () => {
-		assert.equal(push({ title: "Couldn't save draft" }).escalated, false);
-	});
-
-	it("treats an absent error as absent, not as a bug", () => {
-		// A caller forwarding an optional error it does not have passes
-		// `undefined`. That is "nothing went wrong that we can classify", not a
-		// client-side exception, and must not take over the screen.
-		assert.equal(
-			push({ title: "Couldn't save draft", error: undefined }).escalated,
-			false,
-		);
-		assert.equal(
-			push({ title: "Couldn't save draft", error: null }).escalated,
-			false,
-		);
-	});
-
-	it("keeps a 4xx the call site owns in a banner", () => {
-		assert.equal(
-			push({
-				title: "Couldn't move this message",
-				error: new ApiError("Not found", 404),
-			}).escalated,
-			false,
-		);
-	});
-
-	it("escalates a 5xx to the fatal page instead of a toast", () => {
-		assert.equal(
-			push({
-				title: "Couldn't move 339 messages",
-				error: new ApiError("Internal error", 500),
-			}).escalated,
-			true,
-		);
-		assert.equal(getCurrentFatalError()?.message, "Internal error");
-	});
-
-	it("escalates an exception thrown by our own code (issue #55)", () => {
-		const bug = new TypeError(
-			'can\'t access property "map", N.pages is undefined',
-		);
-		assert.equal(
-			push({ title: "Couldn't move 339 messages", error: bug }).escalated,
-			true,
-		);
-		assert.equal(getCurrentFatalError()?.message, bug.message);
-		assert.equal(
-			getCurrentFatalError()?.recoverable,
-			false,
-			"a bug is not something the user can retry away",
-		);
-	});
-});

package/src/components/ui/ErrorBannerProvider.tsx

@@ -1,134 +0,0 @@
-import {
-	type ErrorBannerAction,
-	type ErrorBannerEntry,
-	ErrorBannerStack,
-} from "@remit/ui";
-import {
-	createContext,
-	type ReactNode,
-	useCallback,
-	useContext,
-	useMemo,
-	useState,
-} from "react";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-import { isAlwaysFatal } from "@/lib/error-classifier";
-import { reportFatalError } from "@/lib/fatal-error";
-import {
-	appendBanner,
-	buildEntry,
-	dismissBanner,
-	type PushErrorInput,
-} from "./error-banners.js";
-
-interface ErrorBannerContextValue {
-	errors: ErrorBannerEntry[];
-	pushError: (input: PushErrorInput) => string;
-	dismissError: (id: string) => void;
-	clearAll: () => void;
-}
-
-const ErrorBannerContext = createContext<ErrorBannerContextValue | undefined>(
-	undefined,
-);
-
-/**
- * A way out of every failure banner. A soft failure is still a failure the
- * user could not prevent and cannot diagnose, and a banner offering only
- * "Dismiss" is a dead end — the fatal screen has carried a prefilled report
- * since issue #55 and the soft surface never did. The report is seeded from
- * the banner it belongs to, so it names the failure instead of asking the
- * user to describe it, and it carries the same breadcrumbs — failing request,
- * navigation, console — the fatal report does.
- *
- * A caller that already has a better way out keeps it, and a warning or an
- * informational banner gets none: those are not failures to report.
- */
-export const bannerWayOut = (
-	input: PushErrorInput,
-): ErrorBannerAction | undefined => {
-	if (input.action) return input.action;
-	if ((input.severity ?? "error") !== "error") return undefined;
-	return {
-		label: "Report an issue",
-		href: buildGitHubIssueUrl(
-			buildBugReportContext({
-				title: `Bug: ${input.title}`,
-				errorMessage: input.detail
-					? `${input.title} — ${input.detail}`
-					: input.title,
-				stack: input.error instanceof Error ? input.error.stack : undefined,
-			}),
-		),
-	};
-};
-
-const generateId = (): string => {
-	if (
-		typeof globalThis.crypto !== "undefined" &&
-		typeof globalThis.crypto.randomUUID === "function"
-	) {
-		return globalThis.crypto.randomUUID();
-	}
-	return `banner-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
-};
-
-export const ErrorBannerProvider = ({ children }: { children: ReactNode }) => {
-	const [errors, setErrors] = useState<ErrorBannerEntry[]>([]);
-
-	/**
-	 * Show a soft, dismissible banner — and only that. A fatal error is not a
-	 * notification: when the caller hands us a 5xx or an exception from our own
-	 * code, it goes to the fatal seam instead, so the user gets the full-screen
-	 * page with a way forward and a bug report rather than a toast they can only
-	 * dismiss (issue #55). Those two classes are fatal with no opt-out; anything
-	 * a call site can legitimately own — a 404 empty state, a 4xx the user can
-	 * act on — still banners here.
-	 *
-	 * The guard is on the error being present, not on the key being present:
-	 * `error` is optional, so a caller forwarding one it does not have passes
-	 * `undefined`, and "no error at all" must not be classified as a bug.
-	 */
-	const pushError = useCallback((input: PushErrorInput): string => {
-		if (input.error != null && isAlwaysFatal(input.error)) {
-			return reportFatalError(input.error).correlationId;
-		}
-		const entry = buildEntry(
-			{ ...input, action: bannerWayOut(input) },
-			generateId(),
-			Date.now(),
-		);
-		setErrors((current) => appendBanner(current, entry));
-		return entry.id;
-	}, []);
-
-	const dismissError = useCallback((id: string) => {
-		setErrors((current) => dismissBanner(current, id));
-	}, []);
-
-	const clearAll = useCallback(() => {
-		setErrors([]);
-	}, []);
-
-	const value = useMemo(
-		() => ({ errors, pushError, dismissError, clearAll }),
-		[errors, pushError, dismissError, clearAll],
-	);
-
-	return (
-		<ErrorBannerContext.Provider value={value}>
-			{children}
-			<ErrorBannerStack errors={errors} onDismiss={dismissError} />
-		</ErrorBannerContext.Provider>
-	);
-};
-
-export const useErrorBanners = (): ErrorBannerContextValue => {
-	const context = useContext(ErrorBannerContext);
-	if (!context) {
-		throw new Error(
-			"useErrorBanners must be used within an ErrorBannerProvider",
-		);
-	}
-	return context;
-};

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

@@ -1,66 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import type { FatalError } from "@/lib/fatal-error";
-import { FatalErrorScreen } from "./FatalErrorOverlay";
-
-const recoverableFatal: FatalError = {
-	error: new Error("Request failed with status 500"),
-	message: "Request failed with status 500",
-	correlationId: "abc-123",
-	at: 0,
-	recoverable: true,
-};
-
-const deterministicFatal: FatalError = {
-	error: new Error("date value is not finite in DateTimeFormat format()"),
-	message: "date value is not finite in DateTimeFormat format()",
-	correlationId: "def-456",
-	at: 0,
-	recoverable: false,
-	stack: "Error: date value is not finite\n    at format",
-	componentStack: "\n    at AccountsSettings\n    at Route",
-};
-
-const render = (fatal: FatalError): string =>
-	renderToString(createElement(FatalErrorScreen, { fatal }) as never);
-
-describe("FatalErrorScreen — the full-screen red escalation page", () => {
-	it("renders a loud red full-screen overlay (not a benign grey label)", () => {
-		const html = render(recoverableFatal);
-		assert.match(html, /data-testid="fatal-error-overlay"/);
-		assert.match(html, /bg-red-700/);
-		assert.match(html, /fixed inset-0/);
-		assert.match(html, /role="alert"/);
-	});
-
-	it("shows the error message and correlation reference", () => {
-		const html = render(recoverableFatal);
-		assert.match(html, /Request failed with status 500/);
-		assert.match(html, /abc-123/);
-	});
-
-	it("always offers Report a bug and Copy full details", () => {
-		for (const fatal of [recoverableFatal, deterministicFatal]) {
-			const html = render(fatal);
-			assert.match(html, /Report a bug/);
-			assert.match(html, /Copy full details/);
-		}
-	});
-});
-
-describe("FatalErrorScreen — recoverable vs fatal affordances", () => {
-	it("a recoverable error offers Retry and no dead-end safe-route link", () => {
-		const html = render(recoverableFatal);
-		assert.match(html, /Retry/);
-		assert.doesNotMatch(html, /Go to inbox/);
-	});
-
-	it("a deterministic fatal offers a safe route out — never a re-crashing Retry", () => {
-		const html = render(deterministicFatal);
-		assert.doesNotMatch(html, />Retry</);
-		assert.match(html, /Go to inbox/);
-		assert.match(html, /href="\/mail"/);
-	});
-});