@remit/ui 0.0.124 → 0.0.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.124",
+  "version": "0.0.126",
   "type": "module",
   "files": [
     "src"

package/src/components/event-editor.render.test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { JSDOM } from "jsdom";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import type { CalendarDescriptor, EventDraft } from "./calendar-types.js";
@@ -49,6 +50,21 @@ const render = (props: Partial<Parameters<typeof EventEditor>[0]>) =>
 		}),
 	);
 
+/** The same render read as a document, so no assertion depends on attribute order. */
+const parse = (props: Partial<Parameters<typeof EventEditor>[0]>) =>
+	JSDOM.fragment(render(props));
+
+const field = (dom: DocumentFragment, label: string) =>
+	dom.querySelector<HTMLInputElement>(`input[aria-label="${label}"]`);
+
+const saveControl = (dom: DocumentFragment, label = "Add") =>
+	[...dom.querySelectorAll("button")].find(
+		(button) => button.textContent === label,
+	);
+
+const alertText = (dom: DocumentFragment) =>
+	dom.querySelector('[role="alert"]')?.textContent ?? "";
+
 describe("EventEditor", () => {
 	it("folds everything but title, when and calendar", () => {
 		const html = render({});
@@ -80,4 +96,39 @@ describe("EventEditor", () => {
 	it("names the save action the caller asked for", () => {
 		assert.match(render({ saveLabel: "Save changes" }), /Save changes/);
 	});
+
+	it("says so and holds the save when the end is before the start", () => {
+		const dom = parse({
+			draft: { ...draft, startTime: "23:00", endTime: "01:00" },
+		});
+		assert.match(alertText(dom), /Ends before it starts/);
+		assert.equal(saveControl(dom)?.disabled, true);
+		assert.equal(
+			field(dom, "Start time")?.getAttribute("aria-invalid"),
+			"true",
+		);
+		assert.equal(field(dom, "End time")?.getAttribute("aria-invalid"), "true");
+	});
+
+	it("keeps what was typed rather than swapping the two fields", () => {
+		const dom = parse({
+			draft: { ...draft, startTime: "23:00", endTime: "01:00" },
+		});
+		assert.equal(field(dom, "Start time")?.value, "23:00");
+		assert.equal(field(dom, "End time")?.value, "01:00");
+	});
+
+	it("lets a normal range save", () => {
+		const dom = parse({});
+		assert.equal(alertText(dom), "");
+		assert.equal(saveControl(dom)?.disabled, false);
+	});
+
+	it("has no range to reject once the entry is all day", () => {
+		const dom = parse({
+			draft: { ...draft, startTime: "23:00", endTime: "01:00", allDay: true },
+		});
+		assert.equal(alertText(dom), "");
+		assert.equal(saveControl(dom)?.disabled, false);
+	});
 });

package/src/components/event-editor.stories.tsx

@@ -53,8 +53,22 @@ const seed: EventDraft = {
 	repeat: "",
 };
 
-function Live({ startExpanded }: { startExpanded: boolean }) {
-	const [draft, setDraft] = useState(seed);
+/** 23:00 to 01:00, which one date cannot hold. */
+const backwards: EventDraft = {
+	...seed,
+	title: "Release window",
+	startTime: "23:00",
+	endTime: "01:00",
+};
+
+function Live({
+	startExpanded,
+	seed: initial = seed,
+}: {
+	startExpanded: boolean;
+	seed?: EventDraft;
+}) {
+	const [draft, setDraft] = useState(initial);
 	const [expanded, setExpanded] = useState(startExpanded);
 	return (
 		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
@@ -76,6 +90,22 @@ export const Folded: Story = { render: () => <Live startExpanded={false} /> };
 /** Everything the folded form was hiding. */
 export const Unfolded: Story = { render: () => <Live startExpanded /> };
 
+/**
+ * An end before the start is one date read backwards, not a night that runs
+ * over. The form keeps what was typed, names the problem under the fields and
+ * holds the save until it is fixed.
+ */
+export const EndBeforeStart: Story = {
+	render: () => <Live startExpanded={false} seed={backwards} />,
+};
+
+/** All day takes the clock fields away, so there is no range left to reject. */
+export const AllDay: Story = {
+	render: () => (
+		<Live startExpanded={false} seed={{ ...backwards, allDay: true }} />
+	),
+};
+
 /** The same form sized for a bottom sheet: every control a thumb target. */
 export const Touch: Story = {
 	render: () => {

package/src/components/event-editor.tsx

@@ -71,53 +71,90 @@ export function EventTitleField({
 	);
 }
 
+/**
+ * A draft carries one date, so an end before the start is not a night that runs
+ * over — it is a span the calendar reads backwards. The form says so and refuses
+ * to save it rather than swapping the two fields behind whoever typed them.
+ */
+export function endsBeforeStart(draft: EventDraft): boolean {
+	if (draft.allDay) return false;
+	if (draft.startTime === "" || draft.endTime === "") return false;
+	return draft.endTime < draft.startTime;
+}
+
 export function EventWhenField({ draft, onChange, touch }: EventFieldProps) {
 	const fieldHeight = touch ? "min-h-11" : "";
+	const backwards = endsBeforeStart(draft);
+	const messageId = useId();
 	return (
-		<div className="flex flex-wrap items-center gap-2">
-			<Input
-				type="date"
-				value={draft.date}
-				aria-label="Date"
-				onChange={(e) => setField({ draft, onChange }, "date", e.target.value)}
-				className={cn("w-40", fieldHeight)}
-			/>
-			{draft.allDay ? (
-				<span className="text-sm text-fg-muted">All day</span>
-			) : (
-				<>
-					<Input
-						type="time"
-						value={draft.startTime}
-						aria-label="Start time"
-						onChange={(e) =>
-							setField({ draft, onChange }, "startTime", e.target.value)
-						}
-						className={cn("w-28", fieldHeight)}
-					/>
-					<span className="text-sm text-fg-subtle">to</span>
-					<Input
-						type="time"
-						value={draft.endTime}
-						aria-label="End time"
+		<div className="flex flex-col gap-1.5">
+			<div className="flex flex-wrap items-center gap-2">
+				<Input
+					type="date"
+					value={draft.date}
+					aria-label="Date"
+					onChange={(e) =>
+						setField({ draft, onChange }, "date", e.target.value)
+					}
+					className={cn("w-40", fieldHeight)}
+				/>
+				{draft.allDay ? (
+					<span className="text-sm text-fg-muted">All day</span>
+				) : (
+					<>
+						<Input
+							type="time"
+							value={draft.startTime}
+							aria-label="Start time"
+							max={draft.endTime === "" ? undefined : draft.endTime}
+							aria-invalid={backwards}
+							aria-describedby={backwards ? messageId : undefined}
+							onChange={(e) =>
+								setField({ draft, onChange }, "startTime", e.target.value)
+							}
+							className={cn(
+								"w-28",
+								fieldHeight,
+								backwards && "border-danger/60",
+							)}
+						/>
+						<span className="text-sm text-fg-subtle">to</span>
+						<Input
+							type="time"
+							value={draft.endTime}
+							aria-label="End time"
+							min={draft.startTime === "" ? undefined : draft.startTime}
+							aria-invalid={backwards}
+							aria-describedby={backwards ? messageId : undefined}
+							onChange={(e) =>
+								setField({ draft, onChange }, "endTime", e.target.value)
+							}
+							className={cn(
+								"w-28",
+								fieldHeight,
+								backwards && "border-danger/60",
+							)}
+						/>
+					</>
+				)}
+				<label className="flex items-center gap-2 text-sm text-fg-muted">
+					<input
+						type="checkbox"
+						checked={draft.allDay}
 						onChange={(e) =>
-							setField({ draft, onChange }, "endTime", e.target.value)
+							setField({ draft, onChange }, "allDay", e.target.checked)
 						}
-						className={cn("w-28", fieldHeight)}
+						className="size-4 accent-current"
 					/>
-				</>
+					All day
+				</label>
+			</div>
+			{backwards && (
+				<p id={messageId} className="text-xs text-danger" role="alert">
+					Ends before it starts. Move the end past {draft.startTime}, or start
+					earlier.
+				</p>
 			)}
-			<label className="flex items-center gap-2 text-sm text-fg-muted">
-				<input
-					type="checkbox"
-					checked={draft.allDay}
-					onChange={(e) =>
-						setField({ draft, onChange }, "allDay", e.target.checked)
-					}
-					className="size-4 accent-current"
-				/>
-				All day
-			</label>
 		</div>
 	);
 }
@@ -294,6 +331,7 @@ export function EventEditor({
 				variant="primary"
 				size={touch || roomy ? "md" : "sm"}
 				onClick={onSave}
+				disabled={endsBeforeStart(draft)}
 				className={touch ? "min-h-11 flex-1" : ""}
 			>
 				{saveLabel}

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

@@ -7,6 +7,7 @@ import {
 	matchDoorsFor,
 	stepBlockedReason,
 	stepsFor,
+	wizardScopeFor,
 } from "../lib/wizard-steps.js";
 import {
 	type RuleClause,
@@ -413,6 +414,27 @@ describe("FolderStepBody", () => {
 		);
 		assert.match(text(html), /Tap a folder to open it/);
 	});
+
+	it("states the restriction the selection actually carries (#525)", () => {
+		// Told to pick a single account, a selection already inside one account has
+		// nothing to act on and the flow dead-ends here.
+		const spansFolders = renderToString(
+			createElement(FolderStepBody, {
+				...folderProps,
+				restriction: wizardScopeFor("acc-personal", "spansFolders").destination,
+			}),
+		);
+		assert.match(text(spansFolders), /within one folder/);
+		assert.doesNotMatch(text(spansFolders), /single account/);
+
+		const spansAccounts = renderToString(
+			createElement(FolderStepBody, {
+				...folderProps,
+				restriction: wizardScopeFor(undefined, "spansAccounts").destination,
+			}),
+		);
+		assert.match(text(spansAccounts), /single account/);
+	});
 });
 
 describe("RuleStepBody", () => {

package/src/components/selection-wizard.tsx

@@ -636,9 +636,10 @@ export interface FolderStepProps {
 	/** The account's hierarchy separator, which the tree nests on. */
 	delimiter?: string;
 	/**
-	 * Why there is no folder list to choose from — a selection spanning accounts
-	 * has no single account whose folders these could be (#477 5.5). Said here
-	 * rather than left as an empty picker.
+	 * Why no destination can be chosen — the selection spans more accounts, or
+	 * more folders, than a move can take (#477 5.5, #525). In the words of the
+	 * scope it actually spans, so the instruction is one the user can follow. Said
+	 * here rather than left as an empty picker.
 	 */
 	restriction?: string;
 }
@@ -692,9 +693,10 @@ export interface RuleStepProps {
 	onScopeChange: (scope: RuleScope) => void;
 	onUntilChange: (until: string) => void;
 	/**
-	 * Why the two persisting scopes cannot be reached from here — a selection
-	 * spanning accounts has no single account to create the rule for (#477 5.5).
-	 * They stay pressable and say this; the one-off scope is unaffected.
+	 * Why the two persisting scopes cannot be reached from here — the selection
+	 * spans more accounts, or more folders, than a rule can take (#477 5.5, #525),
+	 * in the words of the scope it actually spans. They stay pressable and say
+	 * this; the one-off scope is unaffected.
 	 */
 	restriction?: string;
 }

package/src/index.ts

@@ -240,6 +240,7 @@ export {
 	EventRepeatField,
 	EventTitleField,
 	EventWhenField,
+	endsBeforeStart,
 } from "./components/event-editor.js";
 export {
 	EventEditorPane,
@@ -989,6 +990,8 @@ export {
 	clauseWords,
 	crossAccountDestinationReason,
 	crossAccountRuleReason,
+	crossFolderDestinationReason,
+	crossFolderRuleReason,
 	ESCALATED_MATCH_HINT,
 	ESCALATED_REVIEW_WARNING,
 	ESCALATED_SCOPE_FALLBACK,
@@ -1006,6 +1009,7 @@ export {
 	type RunState,
 	runCopy,
 	type SampleEmptyReason,
+	type SelectionRestriction,
 	type StepId,
 	sampleEmptyCopy,
 	stepBlockedReason,
@@ -1018,4 +1022,6 @@ export {
 	verbCopy,
 	type WizardAnswers,
 	type WizardDraft,
+	type WizardScope,
+	wizardScopeFor,
 } from "./lib/wizard-steps.js";

package/src/lib/wizard-steps.test.ts

@@ -10,6 +10,8 @@ import {
 	clauseSentence,
 	clauseWords,
 	crossAccountMatchReason,
+	crossFolderDestinationReason,
+	crossFolderRuleReason,
 	ESCALATED_MATCH_HINT,
 	ESCALATED_REVIEW_WARNING,
 	escalatedMatchLabel,
@@ -32,6 +34,7 @@ import {
 	type Verb,
 	verbCopy,
 	type WizardDraft,
+	wizardScopeFor,
 } from "./wizard-steps.js";
 
 const VERBS: Verb[] = ["delete", "move", "junk", "markRead", "organize"];
@@ -858,3 +861,50 @@ describe("the match as words", () => {
 		);
 	});
 });
+
+/**
+ * A selection spanning folders of one account was told to pick a single account
+ * (#525) — an instruction a user holding one account's mail cannot follow, so
+ * the flow dead-ended on the folder step with nowhere to go.
+ */
+describe("the restriction a selection walks the wizard with", () => {
+	it("tells a selection spanning folders about folders, not accounts", () => {
+		const scope = wizardScopeFor("acc-personal", "spansFolders");
+		assert.equal(scope.destination, crossFolderDestinationReason);
+		assert.equal(scope.rule, crossFolderRuleReason);
+		assert.match(scope.destination ?? "", /within one folder/);
+		assert.doesNotMatch(scope.destination ?? "", /account/);
+		assert.doesNotMatch(scope.rule ?? "", /account/);
+	});
+
+	it("keeps the account a folder-spanning selection has", () => {
+		// The widened doors are counted through a preview that account answers, so
+		// there is nothing to withhold them for.
+		const scope = wizardScopeFor("acc-personal", "spansFolders");
+		assert.equal(scope.accountId, "acc-personal");
+		assert.deepEqual(
+			[...matchDoorsFor(scope.accountId)],
+			["selected", "similar", "properties"],
+		);
+	});
+
+	it("tells a selection spanning accounts about accounts", () => {
+		const scope = wizardScopeFor(undefined, "spansAccounts");
+		assert.equal(scope.accountId, undefined);
+		assert.match(scope.destination ?? "", /within one account/);
+		assert.match(scope.rule ?? "", /within one account/);
+		assert.deepEqual([...matchDoorsFor(scope.accountId)], ["selected"]);
+	});
+
+	it("restricts a selection with no account whatever it was handed", () => {
+		const scope = wizardScopeFor(undefined, undefined);
+		assert.match(scope.destination ?? "", /within one account/);
+		assert.match(scope.rule ?? "", /within one account/);
+	});
+
+	it("restricts nothing when one account and one folder answer for it", () => {
+		assert.deepEqual(wizardScopeFor("acc-personal", undefined), {
+			accountId: "acc-personal",
+		});
+	});
+});

package/src/lib/wizard-steps.ts

@@ -232,6 +232,74 @@ export const crossAccountDestinationReason =
 export const crossAccountMatchReason =
 	"Matching beyond the messages you picked only works within one account — clear the selection, or pick messages from a single account.";
 
+/**
+ * Why a selection spanning folders of one account cannot become a rule (#525).
+ * The account is settled and the source folder is not, so the restriction the
+ * wizard states is the folder one — telling a single-account selection to pick
+ * one account is an instruction it cannot follow.
+ */
+export const crossFolderRuleReason =
+	"A rule only works within one folder — clear the selection, or pick messages from a single folder.";
+
+/** The same restriction on the step that asks for a folder. */
+export const crossFolderDestinationReason =
+	"A destination only works within one folder — clear the selection, or pick messages from a single folder.";
+
+/**
+ * Which scope a selection spans more of than the wizard's folder-scoped steps
+ * can take. The surface that resolved the selection knows which one it is, so it
+ * hands the case over rather than a flag both cases collapse into.
+ */
+export type SelectionRestriction = "spansAccounts" | "spansFolders";
+
+const RESTRICTION_COPY: Record<
+	SelectionRestriction,
+	{ rule: string; destination: string }
+> = {
+	spansAccounts: {
+		rule: crossAccountRuleReason,
+		destination: crossAccountDestinationReason,
+	},
+	spansFolders: {
+		rule: crossFolderRuleReason,
+		destination: crossFolderDestinationReason,
+	},
+};
+
+/** What a restricted selection leaves the wizard's account-scoped steps to work with. */
+export interface WizardScope {
+	/**
+	 * The account a filter, a folder create and a widened door's preview all
+	 * belong to. Absent only when the selection has no single account — a
+	 * selection spanning folders of one account keeps it, so its widened doors
+	 * have something to count against.
+	 */
+	accountId?: string;
+	/** What the rule step states, when the selection cannot reach a saved scope. */
+	rule?: string;
+	/** What the folder step states, when the selection cannot reach a destination. */
+	destination?: string;
+}
+
+/**
+ * The scope a selection walks the wizard with. A selection with no single
+ * account is account-restricted whatever it was handed, since the account is
+ * what the filter, the folder create and the preview all hang off.
+ */
+export const wizardScopeFor = (
+	accountId: string | undefined,
+	restriction: SelectionRestriction | undefined,
+): WizardScope => {
+	const applied = accountId === undefined ? "spansAccounts" : restriction;
+	if (!applied) return { accountId };
+	const copy = RESTRICTION_COPY[applied];
+	return {
+		accountId: applied === "spansAccounts" ? undefined : accountId,
+		rule: copy.rule,
+		destination: copy.destination,
+	};
+};
+
 /**
  * The doors the match step offers. Withholding the two widened ones is what
  * keeps a selection spanning accounts off a review that waits on a count nobody