@remit/ui 0.0.59 → 0.0.61

package/src/components/selection-sheet.render.test.ts

@@ -1,169 +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 { SelectionSheet, type SelectionSheetProps } from "./selection-sheet.js";
-
-const noop = () => {};
-
-const base: SelectionSheetProps = {
-	count: 3,
-	onCancel: noop,
-	onDelete: noop,
-};
-
-describe("SelectionSheet", () => {
-	it("teases collapsed with the count and the swipe hint", () => {
-		const html = renderToString(createElement(SelectionSheet, base));
-		assert.match(html, /3 messages selected/);
-		assert.match(html, /Swipe up for actions/);
-		assert.match(html, /role="slider"/);
-		// Collapsed: no cancel/mark-read in the header yet.
-		assert.doesNotMatch(html, /aria-label="Cancel selection"/);
-		// The clipped body is inert while collapsed, so its offscreen verbs stay
-		// out of the tab order and the a11y tree.
-		assert.match(html, /inert=""/);
-	});
-
-	it("expanded shows the quick actions, cancel, and the smart-flow rows", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				startExpanded: true,
-				onMarkRead: noop,
-				onJunk: noop,
-				onSelectSimilar: noop,
-				onSomethingElse: noop,
-				moveSlot: createElement("span", null, "move-here"),
-			}),
-		);
-		assert.match(html, /aria-label="Move selected messages to Trash"/);
-		assert.match(html, /aria-label="Move selected messages to Junk"/);
-		assert.match(html, /aria-label="Mark as read"/);
-		assert.match(html, /aria-label="Cancel selection"/);
-		assert.match(html, /move-here/);
-		assert.match(html, /Select similar messages/);
-		assert.match(html, /Something else/);
-		// Expanded: the body is live, not inert.
-		assert.doesNotMatch(html, /inert=""/);
-	});
-
-	it("names the loaded scope and renders the select-all control", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 47,
-				startExpanded: true,
-				selectAll: { checked: true, indeterminate: false, onChange: noop },
-			}),
-		);
-		assert.match(html, /All 47 loaded selected/);
-		assert.match(html, /aria-label="Select all"/);
-	});
-
-	it("counting replaces the quick actions with the status and a Stop", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 0,
-				mode: "counting",
-				statusLabel: "Counting… 1,900 so far",
-				notice: {
-					tone: "info",
-					text: "",
-					action: { label: "Stop", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /Counting… 1,900 so far/);
-		assert.match(html, /Stop/);
-		// No quick actions while counting.
-		assert.doesNotMatch(html, /aria-label="Move selected messages to Trash"/);
-	});
-
-	it("running shows a progress bar and no quick actions", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 3412,
-				mode: "running",
-				isBusy: true,
-				statusLabel: "Deleting 1,200 of 3,412…",
-				progress: { value: 1200, max: 3412 },
-			}),
-		);
-		assert.match(html, /Deleting 1,200 of 3,412…/);
-		assert.match(html, /role="progressbar"/);
-		assert.doesNotMatch(html, /Select similar messages/);
-	});
-
-	it("escalated keeps the verbs and a clear-selection notice", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 3412,
-				mode: "escalated",
-				startExpanded: true,
-				statusLabel: 'All 3,412 matching "npm" selected',
-				moveSlot: createElement("span", null, "move-here"),
-				notice: {
-					tone: "info",
-					text: "",
-					action: { label: "Clear selection", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /All 3,412 matching/);
-		assert.match(html, /aria-label="Move selected messages to Trash"/);
-		assert.match(html, /Clear selection/);
-		// Not a bounded selection, so no select-similar entry.
-		assert.doesNotMatch(html, /Select similar messages/);
-	});
-
-	/**
-	 * jsdom lays nothing out, so these assert the constraint itself rather than a
-	 * measured height: the sheet must not carry a fixed pixel ceiling (which sat
-	 * below its own content at 411×759 and clipped the last action), and its body
-	 * must scroll rather than clip whatever the ceiling does cut off (#405).
-	 */
-	it("caps the expanded height against the viewport, not a fixed pixel ceiling", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, { ...base, startExpanded: true }),
-		);
-		assert.match(html, /max-height:70dvh/);
-		assert.doesNotMatch(html, /max-height:min\(/);
-	});
-
-	it("scrolls the expanded actions instead of clipping them", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				startExpanded: true,
-				onSelectSimilar: noop,
-				onSomethingElse: noop,
-			}),
-		);
-		assert.match(html, /class="flex min-h-0 flex-1 flex-col overflow-y-auto /);
-		assert.doesNotMatch(
-			html,
-			/class="flex min-h-0 flex-1 flex-col overflow-hidden /,
-		);
-	});
-
-	it("renders a partial-failure notice with a Retry action", () => {
-		const html = renderToString(
-			createElement(SelectionSheet, {
-				...base,
-				count: 340,
-				startExpanded: true,
-				notice: {
-					tone: "danger",
-					text: "3,072 moved to Trash. 340 couldn't be deleted.",
-					action: { label: "Retry 340", onClick: noop },
-				},
-			}),
-		);
-		assert.match(html, /3,072 moved to Trash/);
-		assert.match(html, /Retry 340/);
-	});
-});

package/src/components/selection-sheet.stories.tsx

@@ -1,179 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FolderInput } from "lucide-react";
-import { SelectionSheet } from "./selection-sheet.js";
-
-const meta: Meta<typeof SelectionSheet> = {
-	title: "Screens/Kit/SelectionSheet",
-	component: SelectionSheet,
-	parameters: { layout: "fullscreen" },
-	args: {
-		count: 3,
-		onCancel: () => undefined,
-		onDelete: () => undefined,
-		onMarkRead: () => undefined,
-		onJunk: () => undefined,
-		onSelectSimilar: () => undefined,
-		onSomethingElse: () => undefined,
-	},
-	decorators: [
-		(Story) => (
-			<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[720px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
-				{/* Inbox backdrop, so the peeking sheet reads against a list. */}
-				<div className="divide-y divide-line opacity-50">
-					{Array.from({ length: 11 }).map((_, i) => (
-						<div
-							// biome-ignore lint/suspicious/noArrayIndexKey: static skeleton rows
-							key={i}
-							className="flex items-start gap-3 px-row-inset py-2.5"
-						>
-							<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
-							<div className="min-w-0 flex-1 space-y-1">
-								<div className="h-2.5 w-1/3 rounded bg-surface-sunken" />
-								<div className="h-2 w-2/3 rounded bg-surface-sunken" />
-							</div>
-						</div>
-					))}
-				</div>
-				<Story />
-			</div>
-		),
-	],
-};
-export default meta;
-
-type Story = StoryObj<typeof SelectionSheet>;
-
-/** Stand-in for the caller's move-to-folder trigger (an icon button that opens
- *  a folder picker). The sheet only reserves the slot. */
-const MoveSlot = () => (
-	<button
-		type="button"
-		aria-label="Move selected messages"
-		className="inline-flex size-11 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-	>
-		<FolderInput className="size-4" />
-	</button>
-);
-
-/** Collapsed — the slim ~56px teaser that rises at 2+ selected. */
-export const Teaser: Story = {
-	args: { moveSlot: <MoveSlot /> },
-};
-
-/** Expanded — quick actions (Delete / Move / Junk) plus the select-similar and
- *  "Something else" entries. */
-export const Expanded: Story = {
-	args: { startExpanded: true, moveSlot: <MoveSlot /> },
-};
-
-/**
- * The same expanded sheet on the shortest phone viewport a real device reports
- * (411×759 — Android Chrome with its address bar and system nav showing). This
- * is the tallest the content ever gets: select-all, all three quick actions and
- * both smart-flow rows. A fixed height ceiling cut "Something else" off here
- * with no way to reach it (#405); the sheet now takes the height its content
- * needs, and scrolls only when the viewport genuinely can't hold it.
- */
-export const ExpandedShortViewport: Story = {
-	globals: { viewport: { value: "mobileShort" } },
-	args: {
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		selectAll: {
-			checked: false,
-			indeterminate: true,
-			onChange: () => undefined,
-		},
-	},
-};
-
-/** While a search result set pages to its total: the count isn't known, the
- *  quick actions are replaced by the running total and an explicit Stop. */
-export const Counting: Story = {
-	args: {
-		count: 0,
-		mode: "counting",
-		startExpanded: true,
-		statusLabel: "Counting… 1,900 so far",
-		selectAll: {
-			checked: true,
-			indeterminate: false,
-			onChange: () => undefined,
-		},
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Stop", onClick: () => undefined },
-		},
-	},
-};
-
-/** A bulk delete in progress — a running total and a determinate progress bar,
- *  the delete busy, no quick actions to act mid-run. */
-export const RunningProgress: Story = {
-	args: {
-		count: 3412,
-		mode: "running",
-		startExpanded: true,
-		isBusy: true,
-		statusLabel: "Deleting 1,200 of 3,412…",
-		progress: { value: 1200, max: 3412 },
-	},
-};
-
-/**
- * Every loaded row checked and the search has more matches: the sheet offers to
- * escalate the selection to the whole result set.
- */
-export const EscalationAvailable: Story = {
-	args: {
-		count: 47,
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		selectAll: {
-			checked: true,
-			indeterminate: false,
-			onChange: () => undefined,
-		},
-		notice: {
-			tone: "info",
-			text: "",
-			action: {
-				label: 'Select all matching "npm"',
-				onClick: () => undefined,
-			},
-		},
-	},
-};
-
-/** Selection escalated to the search predicate: the count names the query's
- *  total, every verb still acts, and the notice offers a way back. */
-export const Escalated: Story = {
-	args: {
-		count: 3412,
-		mode: "escalated",
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		statusLabel: 'All 3,412 matching "npm" selected',
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Clear selection", onClick: () => undefined },
-		},
-	},
-};
-
-/** After a bulk delete with some batches failed: the count reflects only what
- *  is still selected — the failures — and Retry names how many. */
-export const PartialFailure: Story = {
-	args: {
-		count: 340,
-		startExpanded: true,
-		moveSlot: <MoveSlot />,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved to Trash. 340 couldn't be deleted.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};

package/src/components/selection-sheet.test.ts

@@ -1,88 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { resolveSheetSnap } from "./selection-sheet.js";
-
-const base = {
-	expandedHeight: 320,
-	teaserHeight: 56,
-	flickVelocity: 0.5,
-};
-
-describe("resolveSheetSnap", () => {
-	it("flicks up expand regardless of how far the drag travelled", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: false, delta: -4, velocity: -1.2 }),
-			true,
-		);
-	});
-
-	it("flicks down collapse regardless of how far the drag travelled", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 4, velocity: 1.2 }),
-			false,
-		);
-	});
-
-	it("a slow upward drag past the midpoint expands from the teaser", () => {
-		// midpoint = (320 - 56) / 2 = 132; -140 crosses it going up.
-		assert.equal(
-			resolveSheetSnap({
-				...base,
-				expanded: false,
-				delta: -140,
-				velocity: 0.1,
-			}),
-			true,
-		);
-	});
-
-	it("a slow upward drag short of the midpoint settles back to the teaser", () => {
-		assert.equal(
-			resolveSheetSnap({
-				...base,
-				expanded: false,
-				delta: -100,
-				velocity: 0.1,
-			}),
-			false,
-		);
-	});
-
-	it("a slow downward drag past the midpoint collapses from expanded", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 140, velocity: 0.1 }),
-			false,
-		);
-	});
-
-	it("a slow downward drag short of the midpoint stays expanded", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 100, velocity: 0.1 }),
-			true,
-		);
-	});
-
-	it("a barely-moved release keeps the current snap state", () => {
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: true, delta: 0, velocity: 0 }),
-			true,
-		);
-		assert.equal(
-			resolveSheetSnap({ ...base, expanded: false, delta: 0, velocity: 0 }),
-			false,
-		);
-	});
-
-	it("defaults the flick threshold when omitted", () => {
-		assert.equal(
-			resolveSheetSnap({
-				expanded: false,
-				delta: -4,
-				velocity: -1,
-				expandedHeight: 320,
-				teaserHeight: 56,
-			}),
-			true,
-		);
-	});
-});