@remit/ui 0.0.113 → 0.0.115

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

@@ -0,0 +1,116 @@
+import { Globe, Mail, Repeat } from "lucide-react";
+import { calendarColorClasses } from "../lib/calendar-color.js";
+import { cn } from "../lib/cn.js";
+import type { Density } from "./app-shell-types.js";
+import type {
+	CalendarColorId,
+	RsvpState,
+	ZoneCertainty,
+} from "./calendar-types.js";
+
+export interface CalendarEventChipProps {
+	title: string;
+	/** Rendered ahead of the title; empty for an all-day entry. */
+	timeText: string;
+	color: CalendarColorId;
+	/**
+	 * `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";
+	density: Density;
+	rsvp: RsvpState;
+	status: "confirmed" | "tentative";
+	/** Carries the mail mark that says this event has a thread behind it. */
+	hasThread: boolean;
+	isRecurring: boolean;
+	zoneCertainty: ZoneCertainty;
+	selected: boolean;
+	onClick?: () => void;
+}
+
+/**
+ * One event, wherever an event is ours to render: the agenda, a day column of
+ * our own, a picker, the phone list. The calendar's hue is the only colour it
+ * 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.
+ */
+export function CalendarEventChip({
+	title,
+	timeText,
+	color,
+	layout,
+	density,
+	rsvp,
+	status,
+	hasThread,
+	isRecurring,
+	zoneCertainty,
+	selected,
+	onClick,
+}: CalendarEventChipProps) {
+	const hue = calendarColorClasses(color);
+	const isColumn = layout === "column";
+	const isCompact = density === "compact";
+	const declined = rsvp === "declined";
+	const provisional = rsvp === "tentative" || status === "tentative";
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			aria-pressed={selected}
+			className={cn(
+				"group flex w-full min-w-0 overflow-hidden text-left outline-none transition-colors",
+				"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
+				hue.soft,
+				hue.text,
+				isColumn
+					? "h-full flex-col rounded-sm border-l-2 px-1.5 py-0.5"
+					: "items-center gap-1.5 rounded-sm border-l-2 px-1.5 py-0.5",
+				hue.rail,
+				provisional && "border-y border-r border-dashed",
+				provisional && hue.border,
+				declined && "opacity-60",
+				selected && "ring-2 ring-ring",
+				isCompact ? "text-2xs" : "text-xs",
+			)}
+		>
+			<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>
+			{(hasThread || isRecurring || zoneCertainty === "ambiguous") && (
+				<span
+					className={cn(
+						"flex shrink-0 items-center gap-1",
+						isColumn ? "mt-0.5" : "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>
+			)}
+		</button>
+	);
+}

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

@@ -0,0 +1,77 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CalendarList } from "./calendar-list.js";
+import type { CalendarDescriptor } from "./calendar-types.js";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "c2",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "On-call",
+		color: "cal-4",
+	},
+	{
+		id: "c3",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+const render = (
+	visible: string[],
+	withAccountToggle = false,
+	closedAccountIds?: string[],
+) =>
+	renderToString(
+		createElement(CalendarList, {
+			calendars,
+			visible: new Set(visible),
+			onToggle: () => undefined,
+			...(withAccountToggle ? { onToggleAccount: () => undefined } : {}),
+			...(closedAccountIds ? { closedAccountIds } : {}),
+		}),
+	);
+
+describe("CalendarList", () => {
+	it("groups calendars under the account that owns them", () => {
+		const html = render(["c1"]);
+		assert.match(html, /Work/);
+		assert.match(html, /Personal/);
+		assert.match(html, /Northwind/);
+	});
+
+	it("fills the swatch of a visible calendar and outlines a hidden one", () => {
+		const html = render(["c1"]);
+		assert.match(html, /bg-cal-1/);
+		assert.match(html, /bg-transparent/);
+	});
+
+	it("offers an all-or-none control per account only when asked", () => {
+		assert.doesNotMatch(render(["c1"]), />None</);
+		assert.match(render(["c1", "c2"], true), />None</);
+	});
+
+	it("offers 'All' when an account is fully hidden", () => {
+		assert.match(render([], true), />All</);
+	});
+
+	it("folds an account's rows away behind its caret, keeping the heading", () => {
+		const html = render(["c1", "c2", "c3"], true, ["a1"]);
+		assert.match(html, /aria-expanded="false"/);
+		assert.match(html, /Work/);
+		assert.doesNotMatch(html, /Northwind/);
+		assert.match(html, /Family/);
+	});
+});

package/src/components/calendar-list.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { CalendarList } from "./calendar-list.js";
+import type { CalendarDescriptor } from "./calendar-types.js";
+
+/**
+ * The legend and the filter are the same control, and it never leaves the
+ * screen. Hiding it in a popover would mean reading a coloured grid with the
+ * key in another room.
+ */
+const meta: Meta<typeof CalendarList> = {
+	title: "Calendar/Calendar list",
+	component: CalendarList,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="max-w-60 rounded-lg border border-line bg-surface py-2">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarList>;
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "c2",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "On-call",
+		color: "cal-4",
+	},
+	{
+		id: "c3",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Personal",
+		color: "cal-2",
+	},
+	{
+		id: "c4",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+	{
+		id: "c5",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Travel",
+		color: "cal-6",
+	},
+	{
+		id: "c6",
+		accountId: "a3",
+		accountLabel: "Synthwave Forum",
+		name: "Synth meetups",
+		color: "cal-5",
+	},
+];
+
+/** Ticking a calendar off is a first-class move, so it takes one click. */
+export const Interactive: Story = {
+	render: () => {
+		const [visible, setVisible] = useState(
+			new Set(calendars.map((c) => c.id).filter((id) => id !== "c2")),
+		);
+		return (
+			<CalendarList
+				calendars={calendars}
+				visible={visible}
+				onToggle={(id) =>
+					setVisible((prev) => {
+						const next = new Set(prev);
+						if (!next.delete(id)) next.add(id);
+						return next;
+					})
+				}
+				onToggleAccount={(accountId, nextVisible) =>
+					setVisible((prev) => {
+						const next = new Set(prev);
+						for (const calendar of calendars) {
+							if (calendar.accountId !== accountId) continue;
+							if (nextVisible) next.add(calendar.id);
+							else next.delete(calendar.id);
+						}
+						return next;
+					})
+				}
+			/>
+		);
+	},
+};
+
+/**
+ * An account folded shut. Its calendars are still on the grid — the caret hides
+ * rows, the tick hides events, and the two are not the same thing.
+ */
+export const AccountFolded: Story = {
+	render: () => (
+		<CalendarList
+			calendars={calendars}
+			visible={new Set(calendars.map((c) => c.id))}
+			onToggle={() => {}}
+			onToggleAccount={() => {}}
+			closedAccountIds={["a2"]}
+		/>
+	),
+};
+
+/** Everything off: an unticked calendar keeps its swatch outline, so the key survives. */
+export const AllHidden: Story = {
+	render: () => (
+		<CalendarList
+			calendars={calendars}
+			visible={new Set()}
+			onToggle={() => {}}
+		/>
+	),
+};

package/src/components/calendar-list.tsx

@@ -0,0 +1,225 @@
+import { Check, ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { calendarColorClasses } from "../lib/calendar-color.js";
+import { cn } from "../lib/cn.js";
+import type { CalendarDescriptor } from "./calendar-types.js";
+
+export interface CalendarListProps {
+	calendars: CalendarDescriptor[];
+	/** Ids currently drawn on the grid. Anything absent is off. */
+	visible: ReadonlySet<string>;
+	onToggle: (calendarId: string) => void;
+	/** Ticks or clears a whole account in one go. */
+	onToggleAccount?: (accountId: string, nextVisible: boolean) => void;
+	/**
+	 * `list` is the column: grouped by account, one row each. `strip` is the same
+	 * control laid out as a scrolling row of chips, for a surface with no room
+	 * for a rail. The control stays on screen either way — it never becomes a
+	 * popover.
+	 */
+	layout?: "list" | "strip";
+	/** Grows every row to a thumb target. */
+	touch?: boolean;
+	/** Accounts folded shut on mount. The list owns the state from there. */
+	closedAccountIds?: string[];
+	className?: string;
+}
+
+interface AccountGroup {
+	accountId: string;
+	accountLabel: string;
+	calendars: CalendarDescriptor[];
+}
+
+function groupByAccount(calendars: CalendarDescriptor[]): AccountGroup[] {
+	const order: string[] = [];
+	const byAccount = new Map<string, AccountGroup>();
+	for (const calendar of calendars) {
+		let group = byAccount.get(calendar.accountId);
+		if (!group) {
+			group = {
+				accountId: calendar.accountId,
+				accountLabel: calendar.accountLabel,
+				calendars: [],
+			};
+			byAccount.set(calendar.accountId, group);
+			order.push(calendar.accountId);
+		}
+		group.calendars.push(calendar);
+	}
+	return order.map((id) => byAccount.get(id) as AccountGroup);
+}
+
+/**
+ * The legend and the filter in one control, and always on screen. A calendar's
+ * colour means nothing unless the thing that names the colour is visible at the
+ * same time as the grid, so this never collapses into a popover or a settings
+ * page — turning a calendar off is a first-class move, not a preference.
+ *
+ * An account folds shut behind its own caret, the way a mailbox account folds in
+ * the nav. Folding is not filtering: a closed account's calendars stay on the
+ * grid, and the tick that takes them off is the one under the caret.
+ */
+export function CalendarList({
+	calendars,
+	visible,
+	onToggle,
+	onToggleAccount,
+	layout = "list",
+	touch,
+	closedAccountIds,
+	className,
+}: CalendarListProps) {
+	const [closed, setClosed] = useState<ReadonlySet<string>>(
+		() => new Set(closedAccountIds ?? []),
+	);
+	const toggleOpen = (accountId: string) =>
+		setClosed((prev) => {
+			const next = new Set(prev);
+			if (!next.delete(accountId)) next.add(accountId);
+			return next;
+		});
+
+	if (layout === "strip") {
+		return (
+			<div
+				className={cn(
+					"flex items-center gap-1.5 overflow-x-auto px-row-inset",
+					className,
+				)}
+			>
+				{calendars.map((calendar) => {
+					const hue = calendarColorClasses(calendar.color);
+					const checked = visible.has(calendar.id);
+					return (
+						<label
+							key={calendar.id}
+							className={cn(
+								"inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 text-xs transition-colors",
+								"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+								touch ? "min-h-9" : "h-7",
+								checked
+									? cn(hue.soft, hue.text, hue.border)
+									: "border-line text-fg-subtle",
+							)}
+						>
+							<input
+								type="checkbox"
+								checked={checked}
+								onChange={() => onToggle(calendar.id)}
+								className="sr-only"
+							/>
+							<span
+								className={cn(
+									"size-2 rounded-full border",
+									hue.border,
+									checked ? hue.solid : "bg-transparent",
+								)}
+							/>
+							{calendar.name}
+						</label>
+					);
+				})}
+			</div>
+		);
+	}
+
+	return (
+		<div className={cn("flex flex-col gap-3", className)}>
+			{groupByAccount(calendars).map((group) => {
+				const allOn = group.calendars.every((c) => visible.has(c.id));
+				const open = !closed.has(group.accountId);
+				return (
+					<section key={group.accountId} className="flex flex-col">
+						<div className="flex items-center gap-2 px-row-inset pb-1">
+							<button
+								type="button"
+								onClick={() => toggleOpen(group.accountId)}
+								aria-expanded={open}
+								className={cn(
+									"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left text-2xs font-semibold uppercase tracking-wider text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:ring-2 focus-visible:ring-ring",
+									touch && "min-h-11",
+								)}
+							>
+								{open ? (
+									<ChevronDown className="size-3 shrink-0" />
+								) : (
+									<ChevronRight className="size-3 shrink-0" />
+								)}
+								<span className="truncate">{group.accountLabel}</span>
+							</button>
+							{onToggleAccount && (
+								<button
+									type="button"
+									onClick={() => onToggleAccount(group.accountId, !allOn)}
+									className="rounded-sm text-2xs text-fg-subtle outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+								>
+									{allOn ? "None" : "All"}
+								</button>
+							)}
+						</div>
+						{open &&
+							group.calendars.map((calendar) => (
+								<CalendarListRow
+									key={calendar.id}
+									calendar={calendar}
+									checked={visible.has(calendar.id)}
+									touch={touch}
+									onToggle={() => onToggle(calendar.id)}
+								/>
+							))}
+					</section>
+				);
+			})}
+		</div>
+	);
+}
+
+function CalendarListRow({
+	calendar,
+	checked,
+	touch,
+	onToggle,
+}: {
+	calendar: CalendarDescriptor;
+	checked: boolean;
+	touch?: boolean;
+	onToggle: () => void;
+}) {
+	const hue = calendarColorClasses(calendar.color);
+	return (
+		<label
+			className={cn(
+				"flex cursor-pointer items-center gap-2.5 rounded-sm px-row-inset hover:bg-surface-sunken",
+				touch ? "min-h-11" : "min-h-9",
+			)}
+		>
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={onToggle}
+				className="peer sr-only"
+			/>
+			<span
+				aria-hidden
+				className={cn(
+					"flex size-4 shrink-0 items-center justify-center rounded-xs border transition-colors",
+					"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-surface",
+					checked
+						? cn(hue.solid, hue.border)
+						: cn("bg-transparent", hue.border),
+				)}
+			>
+				{checked && <Check className="size-3 text-canvas" strokeWidth={3} />}
+			</span>
+			<span
+				className={cn(
+					"min-w-0 flex-1 truncate text-sm",
+					checked ? "text-fg" : "text-fg-subtle",
+				)}
+			>
+				{calendar.name}
+			</span>
+		</label>
+	);
+}

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

@@ -0,0 +1,69 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { CalendarDateNav, CalendarViewSwitch } from "./calendar-toolbar.js";
+
+describe("CalendarViewSwitch", () => {
+	it("offers the whole ladder by default", () => {
+		const html = renderToString(
+			createElement(CalendarViewSwitch, {
+				value: "week",
+				onChange: () => undefined,
+			}),
+		);
+		for (const label of ["Year", "Month", "Week", "Day", "Agenda"]) {
+			assert.match(html, new RegExp(label));
+		}
+	});
+
+	it("marks the current view", () => {
+		const html = renderToString(
+			createElement(CalendarViewSwitch, {
+				value: "day",
+				onChange: () => undefined,
+			}),
+		);
+		assert.match(html, /checked="" value="day"/);
+	});
+
+	it("narrows the ladder and shortens the labels for a thumb", () => {
+		const html = renderToString(
+			createElement(CalendarViewSwitch, {
+				value: "day",
+				onChange: () => undefined,
+				views: ["day", "agenda"],
+				touch: true,
+			}),
+		);
+		assert.doesNotMatch(html, /Year/);
+		assert.match(html, /min-h-11/);
+	});
+
+	it("marks the current view flat, without a raised surface", () => {
+		const html = renderToString(
+			createElement(CalendarViewSwitch, {
+				value: "week",
+				onChange: () => undefined,
+			}),
+		);
+		assert.match(html, /bg-accent-2-soft/);
+		assert.doesNotMatch(html, /shadow-sm/);
+	});
+});
+
+describe("CalendarDateNav", () => {
+	it("puts Today beside the range it returns to", () => {
+		const html = renderToString(
+			createElement(CalendarDateNav, {
+				title: "8 – 14 June 2026",
+				onPrev: () => undefined,
+				onNext: () => undefined,
+				onToday: () => undefined,
+			}),
+		);
+		assert.match(html, /Today/);
+		assert.match(html, /8 – 14 June 2026/);
+		assert.match(html, /aria-label="Previous"/);
+	});
+});

package/src/components/calendar-toolbar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { CalendarDateNav, CalendarViewSwitch } from "./calendar-toolbar.js";
+import type { CalendarViewId } from "./calendar-types.js";
+
+/**
+ * The controls that sit above every calendar surface: the zoom ladder and one
+ * way home. The ladder is flat — the step you are on is marked by weight and
+ * hue, the same way the nav marks the mailbox you are in.
+ */
+const meta: Meta = {
+	title: "Calendar/Toolbar",
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/** Year to day is one strip at four magnifications, not four screens. */
+export const ViewLadder: Story = {
+	render: () => {
+		const [view, setView] = useState<CalendarViewId>("week");
+		return (
+			<div className="flex flex-col gap-3">
+				<CalendarViewSwitch value={view} onChange={setView} />
+				<CalendarViewSwitch
+					value={view}
+					onChange={setView}
+					views={["day", "agenda"]}
+					touch
+				/>
+				<p className="text-xs text-fg-muted">Showing: {view}</p>
+			</div>
+		);
+	},
+};
+
+/** Today lands on the same target from every view and every distance. */
+export const DateNav: Story = {
+	render: () => {
+		const [view, setView] = useState<CalendarViewId>("week");
+		return (
+			<div className="rounded-lg border border-line bg-surface p-2">
+				<CalendarDateNav
+					title="8 – 14 June 2026"
+					onPrev={() => {}}
+					onNext={() => {}}
+					onToday={() => {}}
+				>
+					<CalendarViewSwitch value={view} onChange={setView} />
+				</CalendarDateNav>
+			</div>
+		);
+	},
+};