@remit/ui 0.0.156 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.156",
+  "version": "0.0.157",
   "type": "module",
   "files": [
     "src"
@@ -9,7 +9,8 @@
     ".": "./src/index.ts",
     "./rich-text": "./src/rich-text.ts",
     "./spellcheck-worker": "./src/components/rich-text-spellcheck-worker-provider.ts",
-    "./tokens.css": "./src/tokens.css"
+    "./tokens.css": "./src/tokens.css",
+    "./calendar.css": "./src/calendar.css"
   },
   "scripts": {
     "test": "npm run test:typecheck && npm run test:run",
@@ -20,6 +21,7 @@
     "@fontsource-variable/geist": "^5",
     "@fontsource-variable/hanken-grotesk": "^5",
     "@fontsource-variable/inter": "^5",
+    "@fullcalendar/react": "^7.0.2",
     "@lexical/code-core": "0.49.0",
     "@lexical/html": "0.49.0",
     "@lexical/link": "0.49.0",

package/src/calendar.css

@@ -0,0 +1,4 @@
+/* The structural sheet `CalendarGrid`'s engine needs — positioning and nothing
+   else; it ships no theme. Every colour, border and size the grid draws comes
+   from tokens.css instead. An app that renders the grid imports this beside it. */
+@import "@fullcalendar/react/skeleton.css";

package/src/components/calendar-event-chip-content.tsx

@@ -0,0 +1,102 @@
+import { Globe, Mail, Repeat } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import type { RsvpState, ZoneCertainty } from "./calendar-types.js";
+
+export interface CalendarEventChipContentProps {
+	title: string;
+	/** Rendered ahead of the title; empty for an all-day entry. */
+	timeText: string;
+	/**
+	 * `row` is the horizontal pill of the all-day band and the month grid.
+	 * `column` is the block that fills its slot in a time grid.
+	 */
+	layout: "row" | "column";
+	rsvp: RsvpState;
+	/** Carries the mail mark that says this event has a thread behind it. */
+	hasThread: boolean;
+	isRecurring: boolean;
+	zoneCertainty: ZoneCertainty;
+	/** Rendered at the far end of the title line — a length, a count. */
+	trailing?: ReactNode;
+	/** A second line under the title: where it is, who is coming, whose calendar. */
+	detail?: ReactNode;
+}
+
+/**
+ * What is written inside one event: the time, the title, the marks, and
+ * whatever the surface adds beside them. Every surface that draws an event
+ * draws this — `CalendarEventChip` inside its own button, `CalendarGrid` inside
+ * the element its engine built — so an event reads the same wherever it lands.
+ */
+export function CalendarEventChipContent({
+	title,
+	timeText,
+	layout,
+	rsvp,
+	hasThread,
+	isRecurring,
+	zoneCertainty,
+	trailing,
+	detail,
+}: CalendarEventChipContentProps) {
+	const isColumn = layout === "column";
+	const zoneAmbiguous = zoneCertainty === "ambiguous";
+	const stacked = !isColumn && detail !== undefined;
+
+	const head = (
+		<span
+			className={cn(
+				"flex min-w-0 items-center gap-1",
+				isColumn && "w-full",
+				rsvp === "declined" && "line-through",
+			)}
+		>
+			{timeText !== "" && (
+				<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
+			)}
+			<span className="truncate font-medium">{title}</span>
+		</span>
+	);
+
+	const marks = (isRecurring || hasThread || zoneAmbiguous) && (
+		<span
+			className={cn(
+				"flex shrink-0 items-center gap-1",
+				isColumn && "mt-0.5",
+				!isColumn && trailing === undefined && "ml-auto",
+			)}
+		>
+			{isRecurring && <Repeat className="size-2.5" aria-label="Repeats" />}
+			{hasThread && <Mail className="size-2.5" aria-label="From mail" />}
+			{zoneAmbiguous && (
+				<Globe className="size-2.5 text-warning" aria-label="Unclear zone" />
+			)}
+		</span>
+	);
+
+	const tail = trailing !== undefined && (
+		<span className={cn("shrink-0 opacity-80", !isColumn && "ml-auto")}>
+			{trailing}
+		</span>
+	);
+
+	return (
+		<>
+			{stacked ? (
+				<span className="flex min-w-0 items-center gap-1.5">
+					{head}
+					{marks}
+					{tail}
+				</span>
+			) : (
+				<>
+					{head}
+					{marks}
+					{tail}
+				</>
+			)}
+			{detail}
+		</>
+	);
+}

package/src/components/calendar-event-chip.stories.tsx

@@ -7,13 +7,11 @@ import { calendarColorIds } from "./calendar-types.js";
  * picker, a day column we draw ourselves. Colour says which calendar; shape and
  * mark say everything else, so an event never depends on hue alone to be read.
  *
- * Option A's grid is FullCalendar, which renders the element itself and accepts
- * only a class string and the content inside it, so that one surface restates
- * this shell rather than mounting the component. The two are held to the same
- * values — hue, the dashed box for a provisional event, the dimming for a
- * declined one, the mark size. What the grid cannot take from here is the
- * element: no `aria-pressed`, no focus ring of ours, and a column too short for
- * the second line this chip puts its marks on.
+ * `CalendarGrid` renders the element itself and accepts only a class string and
+ * the content inside it, so that one surface does not mount this component. It
+ * is still the same chip: both draw the box from `calendarEventBodyClasses` and
+ * what is written in it from `CalendarEventChipContent`. What the grid cannot
+ * take from here is the element — no `aria-pressed`, no leading slot.
  */
 const meta: Meta<typeof CalendarEventChip> = {
 	title: "Calendar/Event chip",

package/src/components/calendar-event-chip.tsx

@@ -1,8 +1,8 @@
-import { Globe, Mail, Repeat } from "lucide-react";
 import type { ReactNode } from "react";
-import { calendarColorClasses } from "../lib/calendar-color.js";
+import { calendarEventBodyClasses } from "../lib/calendar-event-shell.js";
 import { cn } from "../lib/cn.js";
 import type { Density } from "./app-shell-types.js";
+import { CalendarEventChipContent } from "./calendar-event-chip-content.js";
 import type {
 	CalendarColorId,
 	RsvpState,
@@ -46,11 +46,11 @@ export interface CalendarEventChipProps {
  * carries; the RSVP and the zone ride on shape and mark instead, so a declined
  * event in a green calendar still reads as green and as declined.
  *
- * A FullCalendar grid is the one surface that does not use it — the library
- * renders the event's element itself and takes only a class string and the
- * content inside, so `calendar-grid.tsx` restates this shell there. Every value
- * that can be shared is the same on both sides; what cannot cross is the
- * element itself, and with it `aria-pressed` and the focus ring.
+ * `CalendarGrid` is the one surface that does not render this component — its
+ * engine builds the event's element itself. It draws the same event out of the
+ * same two pieces: `calendarEventBodyClasses` for the box and
+ * `CalendarEventChipContent` for what is written in it. What cannot cross is
+ * the element, and with it `aria-pressed` and the leading slot.
  */
 export function CalendarEventChip({
 	title,
@@ -69,82 +69,7 @@ export function CalendarEventChip({
 	trailing,
 	detail,
 }: CalendarEventChipProps) {
-	const hue = calendarColorClasses(color);
 	const isColumn = layout === "column";
-	const isCompact = density === "compact";
-	const declined = rsvp === "declined";
-	const provisional = rsvp === "tentative" || status === "tentative";
-	const stacked = isColumn || detail !== undefined;
-
-	const head = (
-		<span
-			className={cn(
-				"flex min-w-0 items-center gap-1",
-				isColumn && "w-full",
-				declined && "line-through",
-			)}
-		>
-			{timeText !== "" && (
-				<span className="shrink-0 tabular-nums opacity-80">{timeText}</span>
-			)}
-			<span className="truncate font-medium">{title}</span>
-		</span>
-	);
-
-	const marks = (hasThread || isRecurring || zoneCertainty === "ambiguous") && (
-		<span
-			className={cn(
-				"flex shrink-0 items-center gap-1",
-				isColumn && "mt-0.5",
-				!isColumn && trailing === undefined && "ml-auto",
-			)}
-		>
-			{isRecurring && <Repeat className="size-2.5" aria-label="Repeats" />}
-			{hasThread && <Mail className="size-2.5" aria-label="From mail" />}
-			{zoneCertainty === "ambiguous" && (
-				<Globe className="size-2.5 text-warning" aria-label="Unclear zone" />
-			)}
-		</span>
-	);
-
-	const tail = trailing !== undefined && (
-		<span className={cn("shrink-0 opacity-80", !isColumn && "ml-auto")}>
-			{trailing}
-		</span>
-	);
-
-	const body = (
-		<span
-			className={cn(
-				"flex min-w-0 flex-1 overflow-hidden rounded-sm border-l-2 px-1.5 py-0.5",
-				hue.soft,
-				hue.text,
-				hue.rail,
-				isColumn && "h-full",
-				stacked ? "flex-col" : "items-center gap-1.5",
-				provisional && "border-y border-r border-dashed",
-				provisional && hue.border,
-				declined && "opacity-60",
-				selected && "ring-2 ring-ring",
-				isCompact ? "text-2xs" : "text-xs",
-			)}
-		>
-			{isColumn || detail === undefined ? (
-				<>
-					{head}
-					{marks}
-					{tail}
-				</>
-			) : (
-				<span className="flex min-w-0 items-center gap-1.5">
-					{head}
-					{marks}
-					{tail}
-				</span>
-			)}
-			{detail}
-		</span>
-	);
 
 	return (
 		<button
@@ -159,7 +84,33 @@ export function CalendarEventChip({
 			)}
 		>
 			{leading}
-			{body}
+			<span
+				className={cn(
+					calendarEventBodyClasses({
+						color,
+						layout,
+						density,
+						rsvp,
+						status,
+						selected,
+						stacked: detail !== undefined,
+					}),
+					"flex-1",
+					isColumn && "h-full",
+				)}
+			>
+				<CalendarEventChipContent
+					title={title}
+					timeText={timeText}
+					layout={layout}
+					rsvp={rsvp}
+					hasThread={hasThread}
+					isRecurring={isRecurring}
+					zoneCertainty={zoneCertainty}
+					trailing={trailing}
+					detail={detail}
+				/>
+			</span>
 		</button>
 	);
 }

package/src/components/calendar-grid.render.test.ts

@@ -0,0 +1,309 @@
+/**
+ * The rules the grid owns, read off the markup it produces: which day an event
+ * lands on, which band it lands in, which day is today, and what a week with
+ * nothing in it says. The engine's pixel geometry — how far along a column an
+ * overlap sits — is measured in a browser and belongs to a story, not here.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CalendarGrid, type CalendarGridProps } from "./calendar-grid.js";
+import type { CalendarEventData } from "./calendar-types.js";
+
+const TIME_ZONE = "Europe/Amsterdam";
+const TODAY = "2026-06-10";
+const TOMORROW = "2026-06-11";
+const NOW = `${TODAY}T09:30:00+02:00`;
+
+const WORK = "cal_work";
+const HOME = "cal_home";
+
+const template: CalendarEventData = {
+	id: "",
+	calendarId: WORK,
+	title: "",
+	start: "",
+	end: "",
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: TIME_ZONE,
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+};
+
+const anEvent = (over: Partial<CalendarEventData>): CalendarEventData => ({
+	...template,
+	...over,
+});
+
+const roadmap = anEvent({
+	id: "roadmap",
+	title: "Roadmap review",
+	start: `${TODAY}T10:00:00+02:00`,
+	end: `${TODAY}T11:00:00+02:00`,
+});
+
+const dentist = anEvent({
+	id: "dentist",
+	calendarId: HOME,
+	title: "Dentist",
+	start: `${TODAY}T10:30:00+02:00`,
+	end: `${TODAY}T11:30:00+02:00`,
+});
+
+const handover = anEvent({
+	id: "handover",
+	title: "Handover",
+	start: `${TOMORROW}T09:00:00+02:00`,
+	end: `${TOMORROW}T09:30:00+02:00`,
+});
+
+const conference = anEvent({
+	id: "conference",
+	title: "Conference",
+	allDay: true,
+	start: TOMORROW,
+	end: "2026-06-12",
+});
+
+const base: CalendarGridProps = {
+	view: "week",
+	date: TODAY,
+	events: [],
+	colorByCalendarId: { [WORK]: "cal-3", [HOME]: "cal-5" },
+	density: "comfortable",
+	selectedEventId: "",
+	timeZone: TIME_ZONE,
+	now: NOW,
+	onSelectEvent: () => undefined,
+	onPickSlot: () => undefined,
+	onRangeChange: () => undefined,
+};
+
+interface Chip {
+	title: string;
+	time: string;
+	/** The day column the chip was drawn in. */
+	date: string;
+	/** A block filling its slot, as opposed to the all-day band's pill. */
+	timed: boolean;
+	tabbable: boolean;
+	classes: string[];
+}
+
+/**
+ * The engine schedules browser timers while it renders. Nothing mounts here, so
+ * nothing ever clears them and the suite would sit on a live event loop after
+ * its last assertion. Take them back: a timer with no calendar left to tick for
+ * is not work.
+ */
+function grid(over: Partial<CalendarGridProps> = {}): HTMLElement {
+	const scheduled: ReturnType<typeof setTimeout>[] = [];
+	const native = globalThis.setTimeout;
+	globalThis.setTimeout = ((...args: Parameters<typeof setTimeout>) => {
+		const handle = native(...args);
+		scheduled.push(handle);
+		return handle;
+	}) as typeof globalThis.setTimeout;
+	const root = document.createElement("div");
+	try {
+		root.innerHTML = renderToString(
+			createElement(CalendarGrid, { ...base, ...over }),
+		);
+	} finally {
+		globalThis.setTimeout = native;
+		for (const handle of scheduled) clearTimeout(handle);
+	}
+	return root;
+}
+
+function chips(root: HTMLElement): Chip[] {
+	return Array.from(root.querySelectorAll<HTMLElement>("[role=button]"))
+		.filter((el) => el.querySelector(".font-medium") !== null)
+		.map((el) => ({
+			title: el.querySelector(".font-medium")?.textContent ?? "",
+			time: el.querySelector(".tabular-nums")?.textContent ?? "",
+			date: el.closest<HTMLElement>("[data-date]")?.dataset.date ?? "",
+			timed: !el.classList.contains("my-px"),
+			tabbable: el.getAttribute("tabindex") === "0",
+			classes: Array.from(el.classList),
+		}));
+}
+
+function chip(root: HTMLElement, title: string): Chip {
+	const found = chips(root).find((candidate) => candidate.title === title);
+	assert.ok(found, `no chip drawn for ${title}`);
+	return found;
+}
+
+describe("CalendarGrid placement", () => {
+	it("draws a timed event in its own day's column, at its own start", () => {
+		const drawn = chip(grid({ events: [roadmap, handover] }), "Roadmap review");
+		assert.equal(drawn.date, TODAY);
+		assert.equal(drawn.time, "10:00");
+		assert.equal(drawn.timed, true);
+	});
+
+	it("sorts each event onto its own day rather than the range's first", () => {
+		const root = grid({ events: [roadmap, handover] });
+		assert.equal(chip(root, "Handover").date, TOMORROW);
+		assert.equal(chip(root, "Handover").time, "09:00");
+	});
+
+	it("names the start only, so a column is never a range of digits", () => {
+		assert.equal(
+			chip(grid({ events: [roadmap] }), "Roadmap review").time,
+			"10:00",
+		);
+	});
+
+	it("keeps both sides of an overlap in the day, each in its own hue", () => {
+		const root = grid({ events: [roadmap, dentist] });
+		const drawn = chips(root);
+		assert.equal(drawn.length, 2);
+		assert.ok(drawn.every((one) => one.date === TODAY));
+		assert.ok(chip(root, "Roadmap review").classes.includes("bg-cal-3-soft"));
+		assert.ok(chip(root, "Dentist").classes.includes("bg-cal-5-soft"));
+	});
+
+	it("falls back to the first hue for a calendar nobody coloured", () => {
+		const root = grid({ events: [roadmap], colorByCalendarId: {} });
+		assert.ok(chip(root, "Roadmap review").classes.includes("bg-cal-1-soft"));
+	});
+});
+
+describe("CalendarGrid all-day band", () => {
+	it("gives the week a band of its own, named", () => {
+		assert.match(grid().innerHTML, /All day/);
+	});
+
+	it("draws an all-day event as a pill in the band, not a block in a slot", () => {
+		const drawn = chip(grid({ events: [conference] }), "Conference");
+		assert.equal(drawn.timed, false);
+		assert.equal(drawn.date, TOMORROW);
+	});
+
+	it("gives an all-day event no clock, because it has none", () => {
+		assert.equal(chip(grid({ events: [conference] }), "Conference").time, "");
+	});
+});
+
+describe("CalendarGrid today", () => {
+	it("marks the day the clock says, and only that day", () => {
+		const root = grid();
+		assert.ok(
+			root.querySelector(`[data-date="${TODAY}"][aria-current="date"]`),
+		);
+		assert.equal(
+			root.querySelector(`[data-date="${TOMORROW}"][aria-current="date"]`),
+			null,
+		);
+	});
+
+	it("tints today's lane with the accent rather than a colour of its own", () => {
+		const lane = grid().querySelector<HTMLElement>(
+			`[data-date="${TODAY}"][aria-current="date"]`,
+		);
+		assert.ok(lane);
+		assert.ok(
+			Array.from(
+				grid().querySelectorAll<HTMLElement>(`[data-date="${TODAY}"]`),
+			).some((cell) => cell.classList.contains("bg-accent-soft/40")),
+		);
+	});
+
+	it("moves the marker with the clock it was handed", () => {
+		const root = grid({ now: `${TOMORROW}T09:30:00+02:00` });
+		assert.ok(
+			root.querySelector(`[data-date="${TOMORROW}"][aria-current="date"]`),
+		);
+		assert.equal(
+			root.querySelector(`[data-date="${TODAY}"][aria-current="date"]`),
+			null,
+		);
+	});
+});
+
+describe("CalendarGrid empty", () => {
+	it("still draws the week when nothing is booked in it", () => {
+		const root = grid({ events: [] });
+		assert.equal(chips(root).length, 0);
+		assert.ok(root.querySelector(`[data-date="${TODAY}"]`));
+	});
+
+	it("says so in the agenda, where an empty list is otherwise a blank pane", () => {
+		const status = grid({ view: "agenda", events: [] }).querySelector(
+			"[role=status]",
+		);
+		assert.equal(status?.textContent, "Nothing scheduled");
+	});
+});
+
+describe("CalendarGrid selection and state", () => {
+	it("rings the selected event and leaves the rest alone", () => {
+		const root = grid({
+			events: [roadmap, dentist],
+			selectedEventId: "dentist",
+		});
+		assert.ok(chip(root, "Dentist").classes.includes("ring-2"));
+		assert.ok(!chip(root, "Roadmap review").classes.includes("ring-2"));
+	});
+
+	it("dims a declined event and strikes its title, the way the chip does", () => {
+		const root = grid({
+			events: [anEvent({ ...roadmap, myRsvp: "declined" })],
+		});
+		assert.ok(chip(root, "Roadmap review").classes.includes("opacity-60"));
+		assert.match(root.innerHTML, /line-through/);
+	});
+
+	it("dashes a tentative event rather than recolouring it", () => {
+		const root = grid({
+			events: [anEvent({ ...roadmap, status: "tentative" })],
+		});
+		const drawn = chip(root, "Roadmap review");
+		assert.ok(drawn.classes.includes("border-dashed"));
+		assert.ok(drawn.classes.includes("bg-cal-3-soft"));
+	});
+
+	it("marks an event that came out of mail", () => {
+		const root = grid({ events: [anEvent({ ...roadmap, threadId: "th_1" })] });
+		assert.match(root.innerHTML, /From mail/);
+	});
+
+	it("flags an event whose zone the source never settled", () => {
+		const root = grid({
+			events: [anEvent({ ...roadmap, zoneCertainty: "ambiguous" })],
+		});
+		assert.match(root.innerHTML, /Unclear zone/);
+	});
+});
+
+describe("CalendarGrid reach", () => {
+	it("puts every event in the tab order and answers Enter on it", () => {
+		const drawn = chips(grid({ events: [roadmap, dentist, conference] }));
+		assert.equal(drawn.length, 3);
+		assert.ok(drawn.every((one) => one.tabbable));
+	});
+});
+
+describe("CalendarGrid density", () => {
+	it("drops the time off a chip once the slots are halved", () => {
+		const drawn = chip(
+			grid({ events: [roadmap], density: "compact" }),
+			"Roadmap review",
+		);
+		assert.equal(drawn.time, "");
+		assert.equal(drawn.title, "Roadmap review");
+	});
+});