@remit/web-client 0.0.296 → 0.0.298

package/src/mocks/story-frame/mail-handlers.ts

@@ -0,0 +1,299 @@
+import type {
+	FilterOperationsListFiltersResponse,
+	LabelOperationsListLabelsResponse,
+	MailboxOperationsListMailboxesResponse,
+	MeOperationsListQuarantineResponse,
+	MeOperationsListVipSuggestionsResponse,
+	MessageBulkOperationsUpdateFlagsResponse,
+	MessageCalendarSuggestionOperationsListMessageCalendarSuggestionsResponse,
+	OutboxOperationsListOutboxMessagesResponse,
+	RemitImapConfigDescriptionResponse,
+	RemitImapDescribeMessageResponse,
+	RemitImapThreadMessageResponse,
+	RemitImapThreadSearchResponse,
+	SemanticSearchOperationsSemanticSearchResponse,
+	SyncOperationsGetSyncStatusResponse,
+	SyncOperationsTriggerSyncResponse,
+	SystemOperationsGetSystemUpdateResponse,
+	ThreadDetailOperationsListThreadMessagesResponse,
+	ThreadOperationsListThreadsResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { type HttpHandler, HttpResponse, http } from "msw";
+import { makeConfig } from "@/test-support/fixtures";
+import type { MailWorld } from "./mail-world";
+
+const API = "/api";
+
+export interface MailHandlerOptions {
+	withholdCounts?: boolean;
+	pageSize?: number;
+	holdLaterPages?: boolean;
+}
+
+const contentPath = (row: RemitImapThreadMessageResponse): string =>
+	`/content/accounts/${row.accountConfigId}/${row.accountId}/messages/${row.messageId}/parts/1`;
+
+const describe = (
+	row: RemitImapThreadMessageResponse,
+): RemitImapDescribeMessageResponse => ({
+	message: {
+		messageId: row.messageId,
+		mailboxId: row.mailboxId,
+		uid: 1,
+		rfc822Size: 2048,
+		internalDate: row.sentDate,
+		status: row.status,
+		syncStatus: row.syncStatus,
+		abandonedMutation: row.abandonedMutation,
+	},
+	envelope: {
+		messageId: row.messageId,
+		date: row.sentDate,
+		subject: row.subject,
+		from: [
+			{
+				addressId: `addr-${row.messageId}`,
+				displayName: row.fromName,
+				normalizedEmail: row.fromEmail ?? "",
+				addressRole: "from",
+				addressOrder: 0,
+			},
+		],
+		to: [],
+		cc: [],
+		bcc: [],
+		replyTo: [],
+		category: row.category,
+		senderTrust: row.senderTrust,
+	},
+	flags: row.isRead ? ["\\Seen"] : [],
+	bodyParts: [
+		{
+			bodyPartId: `part-${row.messageId}`,
+			mediaType: "TEXT",
+			mediaSubtype: "plain",
+			sizeOctets: (row.snippet ?? "").length,
+			isMultipart: false,
+			contentUrl: contentPath(row),
+		},
+	],
+	references: [],
+});
+
+const matchesText = (
+	row: RemitImapThreadMessageResponse,
+	needle: string,
+	fields: (keyof RemitImapThreadMessageResponse)[],
+): boolean => {
+	const lowered = needle.toLowerCase();
+	return fields.some((field) =>
+		String(row[field] ?? "")
+			.toLowerCase()
+			.includes(lowered),
+	);
+};
+
+const narrow = (
+	rows: RemitImapThreadMessageResponse[],
+	params: URLSearchParams,
+): RemitImapThreadMessageResponse[] => {
+	const categories = params.getAll("category");
+	const query = params.get("query");
+	const from = params.get("from");
+	const subject = params.get("subject");
+	const accountId = params.get("accountId");
+	const mailboxId = params.get("mailboxId");
+	return rows.filter((row) => {
+		if (params.get("starred") === "true" && !row.hasStars) return false;
+		if (params.get("unread") === "true" && row.isRead) return false;
+		if (params.get("attachments") === "true" && !row.hasAttachment)
+			return false;
+		if (categories.length > 0 && !categories.includes(row.category))
+			return false;
+		if (accountId && row.accountId !== accountId) return false;
+		if (mailboxId && row.mailboxId !== mailboxId) return false;
+		if (query && !matchesText(row, query, ["subject", "fromName", "snippet"]))
+			return false;
+		if (from && !matchesText(row, from, ["fromName", "fromEmail"]))
+			return false;
+		if (subject && !matchesText(row, subject, ["subject"])) return false;
+		return true;
+	});
+};
+
+const newestFirst = (
+	rows: RemitImapThreadMessageResponse[],
+): RemitImapThreadMessageResponse[] =>
+	[...rows].sort((a, b) => b.sentDate - a.sentDate);
+
+const listing = (
+	rows: RemitImapThreadMessageResponse[],
+	params: URLSearchParams,
+	options: MailHandlerOptions,
+): RemitImapThreadSearchResponse => {
+	const offset = Number(params.get("continuationToken") ?? 0);
+	const size = options.pageSize ?? Number(params.get("limit") ?? rows.length);
+	const next = offset + size;
+	const counted = params.get("count") === "true" && !options.withholdCounts;
+	return {
+		items:
+			params.get("results") === "false"
+				? []
+				: newestFirst(rows).slice(offset, next),
+		continuationToken:
+			options.pageSize !== undefined && next < rows.length
+				? String(next)
+				: undefined,
+		count: counted ? new Set(rows.map((row) => row.threadId)).size : undefined,
+	};
+};
+
+const pending = (): Promise<never> => new Promise<never>(() => undefined);
+
+export const mailHandlers = (
+	world: MailWorld,
+	options: MailHandlerOptions = {},
+): HttpHandler[] => {
+	const byMessageId = new Map(world.threads.map((row) => [row.messageId, row]));
+	const inboxIds = new Set(
+		world.accounts.flatMap((account) =>
+			account.folderAppointments
+				.filter((appointment) => appointment.role === "Inbox")
+				.map((appointment) => appointment.mailboxId),
+		),
+	);
+
+	return [
+		http.get(`${API}/config`, () =>
+			HttpResponse.json<RemitImapConfigDescriptionResponse>(
+				makeConfig(world.accounts),
+			),
+		),
+		http.get(`${API}/accounts/:accountId/mailboxes`, ({ params }) =>
+			HttpResponse.json<MailboxOperationsListMailboxesResponse>({
+				items: world.mailboxes.filter(
+					(mailbox) => mailbox.accountId === params.accountId,
+				),
+			}),
+		),
+		http.get(`${API}/accounts/:accountId/sync/status`, ({ params }) =>
+			HttpResponse.json<SyncOperationsGetSyncStatusResponse>({
+				accountId: String(params.accountId),
+				syncPhase: "complete",
+				mailboxes: [],
+			}),
+		),
+		http.get(`${API}/accounts/:accountId/labels`, () =>
+			HttpResponse.json<LabelOperationsListLabelsResponse>({ items: [] }),
+		),
+		http.get(`${API}/accounts/:accountId/filters`, () =>
+			HttpResponse.json<FilterOperationsListFiltersResponse>({ items: [] }),
+		),
+		http.post(`${API}/accounts/:accountId/sync`, () =>
+			HttpResponse.json<SyncOperationsTriggerSyncResponse>({
+				triggered: false,
+				message: "Already up to date",
+			}),
+		),
+		http.get(`${API}/messages/:messageId/calendar-suggestions`, () =>
+			HttpResponse.json<MessageCalendarSuggestionOperationsListMessageCalendarSuggestionsResponse>(
+				{ items: [] },
+			),
+		),
+		http.get(`${API}/messages/:messageId`, ({ params }) => {
+			const row = byMessageId.get(String(params.messageId));
+			if (!row)
+				return HttpResponse.json(
+					{ status: 404, message: "Message not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<RemitImapDescribeMessageResponse>(describe(row));
+		}),
+		http.post(`${API}/messages/flags`, () =>
+			HttpResponse.json<MessageBulkOperationsUpdateFlagsResponse>({
+				successCount: 1,
+				failureCount: 0,
+			}),
+		),
+		http.get(
+			"/content/accounts/:accountConfigId/:accountId/messages/:messageId/parts/*",
+			({ params }) =>
+				HttpResponse.text(
+					byMessageId.get(String(params.messageId))?.snippet ?? "",
+				),
+		),
+		http.get(`${API}/threads/:threadId/messages`, ({ params }) =>
+			HttpResponse.json<ThreadDetailOperationsListThreadMessagesResponse>({
+				items: world.threads.filter((row) => row.threadId === params.threadId),
+			}),
+		),
+		http.get(`${API}/threads`, ({ request }) => {
+			const params = new URL(request.url).searchParams;
+			const searching = params.has("query");
+			const scope = world.threads.filter(
+				(row) =>
+					searching ||
+					params.get("starred") === "true" ||
+					inboxIds.has(row.mailboxId),
+			);
+			if (options.holdLaterPages && params.has("continuationToken"))
+				return pending();
+			return HttpResponse.json(listing(narrow(scope, params), params, options));
+		}),
+		http.get(
+			`${API}/mailboxes/:mailboxId/threads/search`,
+			({ request, params }) =>
+				HttpResponse.json(
+					listing(
+						narrow(
+							world.threads.filter((row) => row.mailboxId === params.mailboxId),
+							new URL(request.url).searchParams,
+						),
+						new URL(request.url).searchParams,
+						options,
+					),
+				),
+		),
+		http.get(`${API}/mailboxes/:mailboxId/threads`, ({ params }) =>
+			HttpResponse.json<ThreadOperationsListThreadsResponse>({
+				items: newestFirst(
+					world.threads.filter((row) => row.mailboxId === params.mailboxId),
+				),
+			}),
+		),
+		http.get(`${API}/outbox`, () =>
+			HttpResponse.json<OutboxOperationsListOutboxMessagesResponse>({
+				items: world.outbox,
+			}),
+		),
+		http.get(`${API}/search/semantic`, () =>
+			HttpResponse.json<SemanticSearchOperationsSemanticSearchResponse>({
+				items: [],
+			}),
+		),
+		http.get(`${API}/me/quarantine`, () =>
+			HttpResponse.json<MeOperationsListQuarantineResponse>({ entries: [] }),
+		),
+		http.get(`${API}/me/vip-suggestions`, () =>
+			HttpResponse.json<MeOperationsListVipSuggestionsResponse>({
+				suggestions: [],
+			}),
+		),
+		http.get(`${API}/system/update`, () =>
+			HttpResponse.json<SystemOperationsGetSystemUpdateResponse>({
+				currentVersion: "0.0.0-storybook",
+				check: { status: "disabled" },
+				run: null,
+			}),
+		),
+		http.all(`${API}/*`, ({ request }) =>
+			HttpResponse.json(
+				{
+					status: 501,
+					message: `No story handler for ${request.method} ${new URL(request.url).pathname}`,
+				},
+				{ status: 501 },
+			),
+		),
+	];
+};

package/src/mocks/story-frame/mail-world.ts

@@ -0,0 +1,389 @@
+import type {
+	RemitImapAccountResponse,
+	RemitImapCanonicalMailboxRole,
+	RemitImapMailboxResponse,
+	RemitImapMessageCategory,
+	RemitImapOutboxMessageResponse,
+	RemitImapOutboxMessageStatus,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	makeAccount,
+	makeMailbox,
+	makeThreadMessage,
+} from "@/test-support/fixtures";
+
+export interface MailWorld {
+	accounts: RemitImapAccountResponse[];
+	mailboxes: RemitImapMailboxResponse[];
+	threads: RemitImapThreadMessageResponse[];
+	outbox: RemitImapOutboxMessageResponse[];
+}
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const NOW = Date.UTC(2026, 8, 24, 13, 0);
+
+const ROLES = [
+	"Inbox",
+	"Drafts",
+	"Sent",
+	"Archive",
+	"Junk",
+	"Trash",
+] as const satisfies readonly RemitImapCanonicalMailboxRole[];
+
+const FOLDER_PATHS: Record<(typeof ROLES)[number], string> = {
+	Inbox: "INBOX",
+	Drafts: "Drafts",
+	Sent: "Sent",
+	Archive: "Archive",
+	Junk: "Junk",
+	Trash: "Trash",
+};
+
+export const mailboxIdFor = (
+	accountId: string,
+	role: RemitImapCanonicalMailboxRole,
+): string => `mbx-${accountId}-${role.toLowerCase()}`;
+
+const accountWithFolders = (
+	accountId: string,
+	email: string,
+	displayName: string,
+): RemitImapAccountResponse =>
+	makeAccount({
+		accountId,
+		email,
+		username: email,
+		smtpUsername: email,
+		displayName,
+		lastSyncAt: NOW,
+		folderAppointments: ROLES.map((role) => ({
+			role,
+			source: "Appointed",
+			mailboxId: mailboxIdFor(accountId, role),
+		})),
+	});
+
+const foldersOf = (accountId: string): RemitImapMailboxResponse[] =>
+	ROLES.map((role) =>
+		makeMailbox({
+			accountId,
+			mailboxId: mailboxIdFor(accountId, role),
+			fullPath: FOLDER_PATHS[role],
+			specialUse: role === "Inbox" ? undefined : [role],
+		}),
+	);
+
+export const PERSONAL = "acc-personal";
+export const WORK = "acc-work";
+
+const accounts = [
+	accountWithFolders(PERSONAL, "alice@example.com", "Personal"),
+	accountWithFolders(WORK, "alice.tan@acme.example", "Work"),
+];
+
+interface ThreadSeed {
+	id: string;
+	accountId: string;
+	role?: RemitImapCanonicalMailboxRole;
+	fromName: string;
+	fromEmail: string;
+	subject: string;
+	snippet: string;
+	category: RemitImapMessageCategory;
+	ago: number;
+	isRead?: boolean;
+	starred?: boolean;
+	hasAttachment?: boolean;
+}
+
+const thread = (seed: ThreadSeed): RemitImapThreadMessageResponse =>
+	makeThreadMessage({
+		messageId: `msg-${seed.id}`,
+		threadId: `thread-${seed.id}`,
+		threadMessageId: `tm-${seed.id}`,
+		accountId: seed.accountId,
+		mailboxId: mailboxIdFor(seed.accountId, seed.role ?? "Inbox"),
+		fromName: seed.fromName,
+		fromEmail: seed.fromEmail,
+		subject: seed.subject,
+		snippet: seed.snippet,
+		category: seed.category,
+		sentDate: NOW - seed.ago,
+		isRead: seed.isRead ?? false,
+		hasAttachment: seed.hasAttachment ?? false,
+		star: seed.starred ? "yellow" : "none",
+		hasStars: seed.starred ?? false,
+		syncStatus: "synced",
+	});
+
+const inboxThreads: RemitImapThreadMessageResponse[] = [
+	thread({
+		id: "q3-planning",
+		accountId: WORK,
+		fromName: "Ada Lovelace",
+		fromEmail: "ada@acme.example",
+		subject: "Q3 planning",
+		snippet: "Can we move the review to Thursday? I have the numbers ready.",
+		category: "personal",
+		ago: 20 * MINUTE,
+		starred: true,
+	}),
+	thread({
+		id: "lease",
+		accountId: PERSONAL,
+		fromName: "Amara Okafor",
+		fromEmail: "amara@example.org",
+		subject: "Signed lease attached",
+		snippet: "Here is the countersigned copy for your records.",
+		category: "personal",
+		ago: 2 * HOUR,
+		hasAttachment: true,
+		starred: true,
+	}),
+	thread({
+		id: "dinner",
+		accountId: PERSONAL,
+		fromName: "Grace Hopper",
+		fromEmail: "grace@example.org",
+		subject: "Dinner on Saturday?",
+		snippet: "We are thinking the new place on the corner, around seven.",
+		category: "personal",
+		ago: 5 * HOUR,
+		isRead: true,
+	}),
+	thread({
+		id: "invoice",
+		accountId: WORK,
+		fromName: "Billing",
+		fromEmail: "billing@saas.example",
+		subject: "Invoice #1042",
+		snippet: "Your invoice for September is ready.",
+		category: "transactional",
+		ago: 7 * HOUR,
+		isRead: true,
+		starred: true,
+	}),
+	thread({
+		id: "shipping",
+		accountId: PERSONAL,
+		fromName: "Parcel Service",
+		fromEmail: "track@parcel.example",
+		subject: "Your order has shipped",
+		snippet: "Estimated delivery: tomorrow before noon.",
+		category: "transactional",
+		ago: 9 * HOUR,
+	}),
+	thread({
+		id: "weekly-digest",
+		accountId: PERSONAL,
+		fromName: "The Weekly",
+		fromEmail: "digest@weekly.example",
+		subject: "This week in type systems",
+		snippet: "Variance, soundness and a long read on gradual typing.",
+		category: "newsletter",
+		ago: DAY,
+	}),
+	thread({
+		id: "sale",
+		accountId: PERSONAL,
+		fromName: "Outdoor Store",
+		fromEmail: "news@outdoor.example",
+		subject: "Autumn sale starts now",
+		snippet: "Up to 40% off jackets and boots this weekend only.",
+		category: "marketing",
+		ago: DAY + 3 * HOUR,
+	}),
+	thread({
+		id: "mention",
+		accountId: WORK,
+		fromName: "Chat",
+		fromEmail: "notifications@chat.example",
+		subject: "Linus mentioned you in #design",
+		snippet: "Linus: can you take a look at the new header?",
+		category: "social",
+		ago: DAY + 5 * HOUR,
+	}),
+	thread({
+		id: "build",
+		accountId: WORK,
+		fromName: "CI",
+		fromEmail: "ci@builds.example",
+		subject: "Build passed on main",
+		snippet: "All 212 checks passed in 6m 12s.",
+		category: "automated",
+		ago: 2 * DAY,
+		isRead: true,
+	}),
+	thread({
+		id: "talk-outline",
+		accountId: PERSONAL,
+		role: "Archive",
+		fromName: "Ken Thompson",
+		fromEmail: "ken@example.org",
+		subject: "Conference talk outline",
+		snippet: "Here is the rough structure for the keynote.",
+		category: "personal",
+		ago: 3 * DAY,
+		isRead: true,
+		starred: true,
+	}),
+];
+
+const serverDrafts: RemitImapThreadMessageResponse[] = [
+	thread({
+		id: "draft-talk",
+		accountId: PERSONAL,
+		role: "Drafts",
+		fromName: "Alice",
+		fromEmail: "alice@example.com",
+		subject: "Re: Conference talk outline",
+		snippet: "Thanks Ken, I will send slides by Friday.",
+		category: "personal",
+		ago: 4 * HOUR,
+		isRead: true,
+	}),
+];
+
+interface OutboxSeed {
+	id: string;
+	accountId: string;
+	to: string;
+	subject: string;
+	body: string;
+	status: RemitImapOutboxMessageStatus;
+	ago: number;
+	lastError?: string;
+}
+
+export const outboxMessage = (
+	seed: OutboxSeed,
+): RemitImapOutboxMessageResponse => {
+	const from = accounts.find((account) => account.accountId === seed.accountId);
+	return {
+		outboxMessageId: `out-${seed.id}`,
+		accountId: seed.accountId,
+		fromAddress: from?.email ?? "alice@example.com",
+		fromName: "Alice",
+		toAddresses: [seed.to],
+		ccAddresses: [],
+		bccAddresses: [],
+		subject: seed.subject,
+		references: [],
+		textBody: seed.body,
+		status: seed.status,
+		lastError: seed.lastError,
+		sentAt: seed.status === "sent" ? NOW - seed.ago : undefined,
+		createdAt: NOW - seed.ago,
+		updatedAt: NOW - seed.ago,
+		attachments: [],
+	};
+};
+
+const remitDrafts: RemitImapOutboxMessageResponse[] = [
+	outboxMessage({
+		id: "draft-q3",
+		accountId: PERSONAL,
+		to: "ada@acme.example",
+		subject: "Re: Q3 planning",
+		body: "Thanks, Thursday works for me.",
+		status: "draft",
+		ago: 10 * MINUTE,
+	}),
+	outboxMessage({
+		id: "draft-untitled",
+		accountId: PERSONAL,
+		to: "team@example.com",
+		subject: "",
+		body: "",
+		status: "draft",
+		ago: HOUR,
+	}),
+];
+
+export const outboxInEveryStatus: RemitImapOutboxMessageResponse[] = [
+	outboxMessage({
+		id: "queued",
+		accountId: WORK,
+		to: "ada@acme.example",
+		subject: "Re: Q3 planning",
+		body: "Thursday it is.",
+		status: "queued",
+		ago: 2 * MINUTE,
+	}),
+	outboxMessage({
+		id: "sending",
+		accountId: WORK,
+		to: "team@acme.example",
+		subject: "Weekly update",
+		body: "Highlights from this week.",
+		status: "sending",
+		ago: 3 * MINUTE,
+	}),
+	outboxMessage({
+		id: "sent",
+		accountId: WORK,
+		to: "grace@example.org",
+		subject: "Invoice #1042",
+		body: "Paid, thanks.",
+		status: "sent",
+		ago: 16 * MINUTE,
+	}),
+	outboxMessage({
+		id: "unfiled",
+		accountId: PERSONAL,
+		to: "amara@example.org",
+		subject: "Signed lease",
+		body: "Signed and attached.",
+		status: "unfiled",
+		ago: 22 * MINUTE,
+		lastError: "Sent, but not filed: this account has no Sent folder",
+	}),
+	outboxMessage({
+		id: "failed",
+		accountId: WORK,
+		to: "linus@example.org",
+		subject: "Design review notes",
+		body: "Notes from today.",
+		status: "failed",
+		ago: 34 * MINUTE,
+		lastError: "SMTP connection timed out",
+	}),
+	outboxMessage({
+		id: "blocked",
+		accountId: PERSONAL,
+		to: "ken@example.org",
+		subject: "Re: contract",
+		body: "Looks good to me.",
+		status: "blocked",
+		ago: DAY,
+		lastError: "No SMTP server configured for this account",
+	}),
+];
+
+export const newsletterBacklog = (
+	count: number,
+): RemitImapThreadMessageResponse[] =>
+	Array.from({ length: count }, (_, index) =>
+		thread({
+			id: `digest-${index}`,
+			accountId: PERSONAL,
+			fromName: "The Weekly",
+			fromEmail: "digest@weekly.example",
+			subject: `Issue ${index + 1}: notes from the field`,
+			snippet: "Three long reads and a short one.",
+			category: "newsletter",
+			ago: 2 * DAY + index * HOUR,
+		}),
+	);
+
+export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
+	accounts,
+	mailboxes: accounts.flatMap((account) => foldersOf(account.accountId)),
+	threads: [...inboxThreads, ...serverDrafts],
+	outbox: [...remitDrafts, ...outboxInEveryStatus],
+	...overrides,
+});

package/src/mocks/story-frame/touch.ts

@@ -0,0 +1,21 @@
+const HOLD_MS = 700;
+
+const touch = (target: HTMLElement, type: string) => {
+	const { left, top } = target.getBoundingClientRect();
+	target.dispatchEvent(
+		new PointerEvent(type, {
+			bubbles: true,
+			pointerType: "touch",
+			pointerId: 1,
+			isPrimary: true,
+			clientX: left + 20,
+			clientY: top + 10,
+		}),
+	);
+};
+
+export const longPress = async (target: HTMLElement): Promise<void> => {
+	touch(target, "pointerdown");
+	await new Promise((resolve) => setTimeout(resolve, HOLD_MS));
+	touch(target, "pointerup");
+};