@remit/ui 0.0.125 → 0.0.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.125",
+  "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/index.ts

@@ -240,6 +240,7 @@ export {
 	EventRepeatField,
 	EventTitleField,
 	EventWhenField,
+	endsBeforeStart,
 } from "./components/event-editor.js";
 export {
 	EventEditorPane,