@remit/web-client 0.0.138 → 0.0.140

package/src/components/compose/compose-mode.test.ts

@@ -1,76 +0,0 @@
-/**
- * Which surface a draft reopens in, and when a mode switch is refused.
- *
- * The mode is derived from `htmlBody`, with no field of its own. It has to be
- * "a non-empty string" and not "truthy": the rich editor serializes an empty
- * document to `<p><br></p>` and a plain draft clears the column to `""`, so a
- * falsy check opens a plain draft correctly by accident and an absent column
- * — an old draft, a partial write — the wrong way round.
- */
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import {
-	conversionOutcome,
-	modeOfDraft,
-	switchNeedsWarning,
-} from "./compose-mode.js";
-
-describe("the mode a draft reopens in", () => {
-	it("opens a draft with HTML as rich", () => {
-		assert.equal(modeOfDraft("<p>Hello</p>"), "rich");
-	});
-
-	it("opens an empty rich document as rich", () => {
-		assert.equal(modeOfDraft("<p><br></p>"), "rich");
-	});
-
-	it("opens a draft whose HTML was cleared as plain", () => {
-		assert.equal(modeOfDraft(""), "plain");
-	});
-
-	it("opens a draft that never had HTML as plain", () => {
-		assert.equal(modeOfDraft(undefined), "plain");
-	});
-});
-
-describe("whether the switch warns first", () => {
-	it("warns when the document holds formatting", () => {
-		assert.equal(switchNeedsWarning("plain", ["table"]), true);
-	});
-
-	it("says nothing over plain paragraphs", () => {
-		assert.equal(switchNeedsWarning("plain", []), false);
-	});
-
-	it("never warns on the way back to rich", () => {
-		assert.equal(switchNeedsWarning("rich", ["table", "bold"]), false);
-	});
-});
-
-describe("a conversion that would empty a written message", () => {
-	it("goes ahead when the conversion carried the message across", () => {
-		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "Due Friday."), {
-			outcome: "switch",
-		});
-	});
-
-	it("goes ahead when there was nothing to carry", () => {
-		assert.deepEqual(conversionOutcome("plain", "", ""), { outcome: "switch" });
-	});
-
-	it("refuses, naming the direction, when plain text came back empty", () => {
-		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "   "), {
-			outcome: "blocked",
-			title: "Couldn't switch to plain text",
-			detail: "The conversion came back empty, so your message is unchanged.",
-		});
-	});
-
-	it("refuses, naming the direction, when rich text came back empty", () => {
-		assert.deepEqual(conversionOutcome("rich", "Due Friday.", ""), {
-			outcome: "blocked",
-			title: "Couldn't switch to rich text",
-			detail: "The conversion came back empty, so your message is unchanged.",
-		});
-	});
-});

package/src/components/compose/compose-mode.ts

@@ -1,50 +0,0 @@
-import type { ComposeBodyMode } from "@remit/ui/rich-text";
-
-/**
- * Which surface a draft reopens in, with no field of its own. `htmlBody` a
- * non-empty string is a rich draft; anything else is plain.
- *
- * Not "falsy": the rich editor serializes an empty document to `<p><br></p>`,
- * so a rich draft's `htmlBody` is never absent, and a plain draft clears the
- * column to the empty string rather than omitting it — absent means "leave
- * alone" at every layer below this one.
- */
-export const modeOfDraft = (htmlBody: string | undefined): ComposeBodyMode =>
-	typeof htmlBody === "string" && htmlBody.length > 0 ? "rich" : "plain";
-
-/**
- * Whether switching to plain text destroys something. True for any node type or
- * text format the document holds that plain text cannot carry.
- */
-export const switchNeedsWarning = (
-	target: ComposeBodyMode,
-	formatting: readonly string[],
-): boolean => target === "plain" && formatting.length > 0;
-
-export type ConversionOutcome =
-	| { outcome: "switch" }
-	| { outcome: "blocked"; title: string; detail: string };
-
-const BLOCKED_TITLES: Record<ComposeBodyMode, string> = {
-	plain: "Couldn't switch to plain text",
-	rich: "Couldn't switch to rich text",
-};
-
-/**
- * A conversion that empties a written message does not happen. Autosave would
- * persist the blank body a moment later, so the draft would be gone with
- * nothing said. An empty body converting to an empty body is not this case.
- */
-export const conversionOutcome = (
-	target: ComposeBodyMode,
-	source: string,
-	converted: string,
-): ConversionOutcome => {
-	if (source.trim() === "" || converted.trim() !== "")
-		return { outcome: "switch" };
-	return {
-		outcome: "blocked",
-		title: BLOCKED_TITLES[target],
-		detail: "The conversion came back empty, so your message is unchanged.",
-	};
-};

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

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ConfirmDialog } from "./ConfirmDialog";
-
-const meta: Meta<typeof ConfirmDialog> = {
-	title: "Screens/WebClient/ConfirmDialog",
-	component: ConfirmDialog,
-	parameters: { layout: "centered" },
-	args: {
-		isOpen: true,
-		title: "Move 3,412 messages to Trash?",
-		description: "You can restore them from Trash later.",
-		confirmLabel: "Move to Trash",
-		destructive: true,
-		onConfirm: () => undefined,
-		onCancel: () => undefined,
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof ConfirmDialog>;
-
-/**
- * A single corner tap on the bar's delete icon used to fall straight through
- * to a delete with nothing in between — this is what now sits in the way.
- * Wording says "Move … to Trash", not "Delete": the operation is reversible
- * (IMAP delete moves to Trash), and the confirmation copy says so rather than
- * reading as final.
- */
-export const Default: Story = {};
-
-export const OneMessage: Story = {
-	args: {
-		title: "Move 1 message to Trash?",
-	},
-};
-
-/** The mutation is in flight: the confirm button disables rather than
- *  allowing a second concurrent delete request. */
-export const Busy: Story = {
-	args: {
-		isBusy: true,
-	},
-};
-
-/** A non-destructive confirmation (no `destructive`) uses the accent
- *  affirmative styling instead of danger. */
-export const NonDestructive: Story = {
-	args: {
-		title: "Archive 12 messages?",
-		description: undefined,
-		confirmLabel: "Archive",
-		destructive: false,
-	},
-};

package/src/components/ui/ConfirmDialog.tsx

@@ -1,140 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
-
-interface ConfirmDialogProps {
-	isOpen: boolean;
-	title: string;
-	/** Optional supporting line under the title. */
-	description?: string;
-	confirmLabel: string;
-	cancelLabel?: string;
-	/** Style the confirm button as a destructive action. */
-	destructive?: boolean;
-	/** Disable the confirm button (e.g. while a mutation is in flight). */
-	isBusy?: boolean;
-	onConfirm: () => void;
-	onCancel: () => void;
-}
-
-/**
- * Minimal accessible confirmation dialog. No existing Dialog/ConfirmDialog
- * primitive ships in the web client (only the bespoke KeyboardShortcutsModal
- * and SlidePanel), so this is a small reusable one matching their Tailwind +
- * overlay conventions. Esc cancels, the backdrop cancels, Cancel is focused on
- * open, and the confirm/cancel pair is the only focusable content so the focus
- * stays within the dialog.
- */
-export const ConfirmDialog = ({
-	isOpen,
-	title,
-	description,
-	confirmLabel,
-	cancelLabel = "Cancel",
-	destructive = false,
-	isBusy = false,
-	onConfirm,
-	onCancel,
-}: ConfirmDialogProps) => {
-	const cancelRef = useRef<HTMLButtonElement>(null);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				event.stopPropagation();
-				event.stopImmediatePropagation();
-				onCancel();
-			}
-		},
-		[onCancel],
-	);
-
-	useEffect(() => {
-		if (!isOpen) return;
-		// Capture phase so Esc closes the dialog before any list-level Esc
-		// handler (e.g. clearSelection) also fires on the same keystroke.
-		window.addEventListener("keydown", handleKeyDown, true);
-		return () => window.removeEventListener("keydown", handleKeyDown, true);
-	}, [isOpen, handleKeyDown]);
-
-	// Whoever opened the dialog gets the focus back when it closes. Without this
-	// a cancelled confirmation drops focus to the body, and the control the user
-	// was on — the compose mode toggle, a row's delete button — is gone from
-	// under the keyboard.
-	useEffect(() => {
-		if (!isOpen) return;
-		const opener =
-			document.activeElement instanceof HTMLElement
-				? document.activeElement
-				: null;
-		cancelRef.current?.focus();
-		return () => {
-			if (opener?.isConnected) opener.focus();
-		};
-	}, [isOpen]);
-
-	if (!isOpen) return null;
-
-	return (
-		// Above every other overlay, the mobile compose sheet included: a
-		// confirmation is the decision blocking whatever is under it, and a drawer
-		// portalled to the body at the same level would cover it.
-		<div className="fixed inset-0 z-[60] flex items-center justify-center">
-			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
-			    dialog itself must stay in the accessibility tree, and an
-			    aria-hidden ancestor would take it out. */}
-			<div
-				className="absolute inset-0 bg-canvas/80 backdrop-blur-sm"
-				aria-hidden="true"
-				onClick={onCancel}
-			/>
-
-			{/* Dialog */}
-			<div
-				role="dialog"
-				aria-modal="true"
-				aria-label={title}
-				className={cn(
-					"relative z-10 w-full max-w-sm",
-					"bg-surface border border-line rounded-sm shadow-lg",
-					"p-6",
-				)}
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
-			>
-				<h2 className="text-lg font-semibold">{title}</h2>
-				{description && (
-					<p className="mt-2 text-sm text-fg-muted">{description}</p>
-				)}
-
-				<div className="mt-6 flex items-center justify-end gap-2">
-					<button
-						ref={cancelRef}
-						type="button"
-						onClick={onCancel}
-						className={cn(
-							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
-							"border border-line hover:bg-surface-raised",
-						)}
-					>
-						{cancelLabel}
-					</button>
-					<button
-						type="button"
-						onClick={onConfirm}
-						disabled={isBusy}
-						className={cn(
-							"min-h-11 inline-flex items-center justify-center px-4 rounded text-sm font-medium transition-colors",
-							destructive
-								? "bg-danger text-canvas hover:bg-danger/90"
-								: "bg-accent text-accent-fg hover:bg-accent-hover",
-							"disabled:opacity-50 disabled:cursor-not-allowed",
-						)}
-					>
-						{confirmLabel}
-					</button>
-				</div>
-			</div>
-		</div>
-	);
-};