@remit/ui 0.0.155 → 0.0.157

package/src/components/agenda-composer.tsx

@@ -0,0 +1,283 @@
+/**
+ * Typing is the create path here, so the field is on screen at all times and
+ * the form is downstream of it.
+ *
+ * Every keystroke re-reads the sentence and writes the reading straight into
+ * the fields underneath, attributed to the words it came from. Where the
+ * sentence has two honest readings — which Friday, eight in the morning or
+ * eight at night — the reader asks instead of choosing, and the answer is one
+ * tap. Correcting the machine happens before the event exists.
+ */
+import { AlertTriangle, Info, Wand2 } from "lucide-react";
+import { formatShortDay } from "../lib/agenda-time.js";
+import { cn } from "../lib/cn.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	ChoicePicks,
+	EventDraft,
+} from "./calendar-types.js";
+import { EventEditor } from "./event-editor.js";
+
+export interface AgendaComposerProps {
+	phrase: string;
+	onPhraseChange: (phrase: string) => void;
+	parse: AgendaParse;
+	picks: ChoicePicks;
+	onPick: (choiceId: string, optionId: string) => void;
+	draft: EventDraft;
+	onDraftChange: (draft: EventDraft) => void;
+	calendars: CalendarDescriptor[];
+	expanded: boolean;
+	onToggleExpanded: () => void;
+	onSave: () => void;
+	onCancel: () => void;
+	saveLabel?: string;
+	/** The rule belongs to the series; an edit scoped to one instance reads it back. */
+	repeatEditable?: boolean;
+	/** Opens the custom-rule editor from the repeat picker. */
+	onCustomRepeat?: () => void;
+	/** The form is folded away until there is something to correct. */
+	open: boolean;
+	onOpen: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+export interface AgendaPhraseFieldProps {
+	phrase: string;
+	onPhraseChange: (phrase: string) => void;
+	/** Focus or a keystroke unfolds the form under the field. */
+	onOpen: () => void;
+	onCommit: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+export function AgendaPhraseField({
+	phrase,
+	onPhraseChange,
+	onOpen,
+	onCommit,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: AgendaPhraseFieldProps) {
+	return (
+		<div
+			className={cn(
+				"flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30",
+				touch ? "min-h-11" : "h-9",
+				className,
+			)}
+		>
+			<Wand2 className="size-4 shrink-0 text-fg-subtle" aria-hidden />
+			<input
+				value={phrase}
+				aria-label="Describe the event"
+				placeholder={placeholder}
+				onFocus={onOpen}
+				onChange={(event) => {
+					onOpen();
+					onPhraseChange(event.target.value);
+				}}
+				onKeyDown={(event) => {
+					if (event.key === "Enter") onCommit();
+				}}
+				className="min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle"
+			/>
+		</div>
+	);
+}
+
+export function AgendaComposer({
+	phrase,
+	onPhraseChange,
+	parse,
+	picks,
+	onPick,
+	draft,
+	onDraftChange,
+	calendars,
+	expanded,
+	onToggleExpanded,
+	onSave,
+	onCancel,
+	saveLabel = "Add",
+	repeatEditable,
+	onCustomRepeat,
+	open,
+	onOpen,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: AgendaComposerProps) {
+	return (
+		<div className={cn("flex flex-col gap-2", className)}>
+			<AgendaPhraseField
+				phrase={phrase}
+				onPhraseChange={onPhraseChange}
+				onOpen={onOpen}
+				onCommit={onSave}
+				placeholder={placeholder}
+				touch={touch}
+			/>
+
+			{open && (
+				<EventEditor
+					draft={draft}
+					onChange={onDraftChange}
+					calendars={calendars}
+					expanded={expanded}
+					onToggleExpanded={onToggleExpanded}
+					onSave={onSave}
+					onCancel={onCancel}
+					saveLabel={saveLabel}
+					repeatEditable={repeatEditable}
+					onCustomRepeat={onCustomRepeat}
+					touch={touch}
+					header={
+						phrase.trim() === "" ? undefined : (
+							<PhraseReading
+								parse={parse}
+								picks={picks}
+								onPick={onPick}
+								touch={touch}
+							/>
+						)
+					}
+				/>
+			)}
+		</div>
+	);
+}
+
+export function PhraseReading({
+	parse,
+	picks,
+	onPick,
+	touch,
+}: {
+	parse: AgendaParse;
+	picks: ChoicePicks;
+	onPick: (choiceId: string, optionId: string) => void;
+	touch?: boolean;
+}) {
+	const when =
+		parse.startTime === ""
+			? formatShortDay(parse.date)
+			: `${formatShortDay(parse.date)} ${parse.startTime} – ${parse.endTime}`;
+
+	return (
+		<div className="flex flex-col gap-1 rounded-md border border-line bg-surface px-2.5 py-2">
+			<Reading
+				label="What"
+				value={parse.title === "" ? "—" : parse.title}
+				source=""
+			/>
+			<Reading
+				label="When"
+				value={when}
+				source={[parse.dateText, parse.startTimeText]
+					.filter((part) => part !== "")
+					.join(" ")}
+			/>
+			{parse.repeat !== "" && (
+				<Reading
+					label="Repeat"
+					value={parse.repeat}
+					source={parse.repeatText}
+				/>
+			)}
+			{parse.attendees.length > 0 && (
+				<Reading
+					label="Who"
+					value={parse.attendees.join(", ")}
+					source={parse.attendeesText}
+				/>
+			)}
+			{parse.location !== "" && (
+				<Reading
+					label="Where"
+					value={parse.location}
+					source={parse.locationText}
+				/>
+			)}
+
+			{parse.choices.map((choice) => (
+				<div
+					key={choice.id}
+					className="mt-1 flex flex-wrap items-center gap-1.5 rounded-md border border-warning/50 bg-warning-soft/30 px-2 py-1.5"
+				>
+					<AlertTriangle className="size-3 shrink-0 text-warning" aria-hidden />
+					<span className="text-2xs text-warning">{choice.question}</span>
+					{choice.options.map((option) => {
+						const chosen = (picks[choice.id] ?? choice.chosenId) === option.id;
+						return (
+							<button
+								key={option.id}
+								type="button"
+								aria-pressed={chosen}
+								onClick={() => onPick(choice.id, option.id)}
+								className={cn(
+									"rounded-full border px-2 text-2xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+									touch ? "min-h-9" : "h-6",
+									chosen
+										? "border-warning bg-warning-soft font-medium text-warning"
+										: "border-line text-fg-muted hover:border-line-strong hover:text-fg",
+								)}
+							>
+								{option.label}
+							</button>
+						);
+					})}
+				</div>
+			))}
+
+			{parse.assumptions.map((note) => (
+				<p
+					key={note}
+					className="flex items-center gap-1.5 text-2xs text-fg-subtle"
+				>
+					<Info className="size-3 shrink-0" aria-hidden />
+					{note}
+				</p>
+			))}
+			{parse.unresolved.map((note) => (
+				<p
+					key={note}
+					className="flex items-center gap-1.5 text-2xs text-warning"
+				>
+					<AlertTriangle className="size-3 shrink-0" aria-hidden />
+					{note}
+				</p>
+			))}
+		</div>
+	);
+}
+
+function Reading({
+	label,
+	value,
+	source,
+}: {
+	label: string;
+	value: string;
+	source: string;
+}) {
+	return (
+		<div className="flex min-w-0 items-baseline gap-1.5">
+			<span className="w-12 shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+				{label}
+			</span>
+			<span className="truncate text-xs font-medium text-fg">{value}</span>
+			{source !== "" && (
+				<span className="shrink-0 rounded-xs bg-accent-2-soft px-1 text-2xs text-accent-2">
+					{source}
+				</span>
+			)}
+		</div>
+	);
+}

package/src/components/agenda-flow.render.test.ts

@@ -0,0 +1,217 @@
+/**
+ * The rules the strip makes on screen: what a day costs in rows, where free
+ * time is drawn, which days collapse into a sentence, and what a pile-up says
+ * about itself. Every one of them is a claim the design argues for, so it is
+ * asserted off the rendered markup rather than off the arithmetic underneath.
+ */
+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 { buildCalendarDay } from "../lib/agenda-time.js";
+import { AgendaFlow, type AgendaFlowProps } from "./agenda-flow.js";
+import type {
+	CalendarDescriptor,
+	CalendarEventData,
+} from "./calendar-types.js";
+
+const TODAY = "2026-06-10";
+const OFFSET = "+02:00";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-3",
+	},
+];
+
+function event(
+	id: string,
+	date: string,
+	from: string,
+	to: string,
+	extra: Partial<CalendarEventData> = {},
+): CalendarEventData {
+	return {
+		id,
+		calendarId: "c1",
+		title: id,
+		start: `${date}T${from}:00${OFFSET}`,
+		end: `${date}T${to}:00${OFFSET}`,
+		allDay: false,
+		location: "",
+		notes: "",
+		attendees: [],
+		myRsvp: "accepted",
+		threadId: "",
+		threadSubject: "",
+		timeZone: "Europe/Amsterdam",
+		zoneCertainty: "explicit",
+		recurrenceRule: "",
+		seriesId: "",
+		seriesException: false,
+		status: "confirmed",
+		...extra,
+	};
+}
+
+const roadmap = event("evt_roadmap", TODAY, "10:00", "11:30", {
+	title: "Q3 roadmap review",
+	location: "Kaap",
+	attendees: [
+		{
+			name: "Anna",
+			email: "anna@example.test",
+			rsvp: "accepted",
+			role: "organizer",
+		},
+	],
+});
+const incident = event("evt_incident", TODAY, "10:30", "12:00", {
+	title: "Incident review",
+});
+const banner: CalendarEventData = {
+	...event("evt_conference", "2026-06-11", "00:00", "00:00"),
+	title: "Devcon",
+	start: "2026-06-11",
+	end: "2026-06-12",
+	allDay: true,
+};
+
+const events = [roadmap, incident, banner];
+
+const dates = [
+	TODAY,
+	"2026-06-11",
+	"2026-06-12",
+	"2026-06-13",
+	"2026-06-14",
+	"2026-06-15",
+	"2026-06-16",
+];
+
+const days = dates.map((date) => buildCalendarDay(date, events, TODAY));
+
+const base: AgendaFlowProps = {
+	days,
+	calendars,
+	density: "pills",
+	today: TODAY,
+	focusDate: TODAY,
+	selectedEventId: "",
+	onSelectEvent: () => {},
+	onPickSlot: () => {},
+	onZoomDay: () => {},
+	onReachStart: () => {},
+	onReachEnd: () => {},
+	onVisibleDayChange: () => {},
+};
+
+/** React writes a marker between adjacent text nodes; a reader sees one sentence. */
+const words = (html: string) => html.replaceAll("<!-- -->", "");
+
+const render = (props: Partial<AgendaFlowProps> = {}) =>
+	renderToString(createElement(AgendaFlow, { ...base, ...props }));
+
+describe("AgendaFlow", () => {
+	it("draws the days in the order it was handed them", () => {
+		const html = render();
+		assert.ok(
+			html.indexOf("Q3 roadmap review") < html.indexOf("Devcon"),
+			"the 10th is drawn before the 11th",
+		);
+	});
+
+	it("names the free stretch the day still leaves open", () => {
+		const html = words(render());
+		assert.match(html, /10h free/);
+		assert.match(html, /12:00 – 22:00/);
+	});
+
+	it("says nothing is booked rather than drawing an empty day", () => {
+		assert.match(render(), /Free all day/);
+	});
+
+	it("collapses a run of empty days into one sentence", () => {
+		const html = words(render());
+		assert.match(html, /Fri 12 – Tue 16 Jun/);
+		assert.match(html, /5 days with nothing booked/);
+	});
+
+	it("keeps the day it was focused on out of a run", () => {
+		const html = words(
+			render({ focusDate: "2026-06-14", today: "2026-06-14" }),
+		);
+		assert.doesNotMatch(html, /5 days with nothing booked/);
+	});
+
+	it("names a pile-up and offers the grid for it", () => {
+		const html = words(render());
+		assert.match(html, /2 at once · 10:00 – 12:00/);
+		assert.match(html, /Open the grid/);
+	});
+
+	it("marks the day that is today", () => {
+		assert.match(render(), /Today/);
+		assert.match(render(), /Wednesday/);
+	});
+
+	it("counts the day rather than restating its rows", () => {
+		assert.match(render(), /2 events · 2h booked · 1 clash/);
+	});
+
+	it("carries the calendar's hue onto every event", () => {
+		assert.match(render(), /bg-cal-3-soft/);
+	});
+
+	it("falls back to one hue for a calendar it was told nothing about", () => {
+		assert.match(render({ calendars: [] }), /bg-cal-1-soft/);
+	});
+
+	it("draws a banner as an all-day line", () => {
+		assert.match(render(), /All day/);
+	});
+
+	it("says which event is selected rather than only colouring it", () => {
+		assert.match(
+			render({ selectedEventId: "evt_roadmap" }),
+			/aria-pressed="true"/,
+		);
+	});
+
+	it("shows where and who only at the detail reading", () => {
+		assert.doesNotMatch(render(), /Kaap/);
+		assert.match(words(render({ density: "detail" })), /Northwind · Kaap/);
+	});
+
+	it("gives every dot a name at the glance reading", () => {
+		const html = render({ density: "dots" });
+		assert.match(html, /aria-label="Q3 roadmap review"/);
+		assert.doesNotMatch(html, /2 at once/);
+	});
+
+	it("names what a glance day is worth in a few characters", () => {
+		const html = words(render({ density: "dots" }));
+		assert.match(html, /10h free/);
+		assert.match(html, /clear/);
+	});
+
+	it("gives every control a visible focus ring", () => {
+		assert.match(render(), /focus-visible:ring-ring/);
+	});
+
+	it("grows every hit target when the surface is touched", () => {
+		assert.match(render({ touch: true }), /min-h-12/);
+	});
+
+	it("renders whatever the owner leads today with", () => {
+		const html = render({
+			todayLead: createElement("p", null, "Next up in 30m"),
+		});
+		assert.match(html, /Next up in 30m/);
+	});
+});

package/src/components/agenda-flow.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { buildCalendarDay, datesBetween } from "../lib/agenda-time.js";
+import { AgendaFlow } from "./agenda-flow.js";
+import type {
+	CalendarDescriptor,
+	CalendarEventData,
+} from "./calendar-types.js";
+
+/**
+ * The strip spends its pixels on what is on the day rather than on the hours
+ * the day contains. Every story here is a day the argument has to survive: a
+ * pile-up, a day with nothing but a banner, and a week nobody booked.
+ */
+const meta: Meta<typeof AgendaFlow> = {
+	title: "Calendar/Agenda flow",
+	component: AgendaFlow,
+	parameters: { layout: "fullscreen" },
+	decorators: [
+		(Story) => (
+			<div className="flex h-[38rem] flex-col border border-line bg-surface">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof AgendaFlow>;
+
+const TODAY = "2026-06-10";
+const OFFSET = "+02:00";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "work",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "oncall",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "On-call",
+		color: "cal-4",
+	},
+	{
+		id: "personal",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+function event(
+	id: string,
+	title: string,
+	calendarId: string,
+	date: string,
+	from: string,
+	to: string,
+	extra: Partial<CalendarEventData> = {},
+): CalendarEventData {
+	return {
+		id,
+		calendarId,
+		title,
+		start: `${date}T${from}:00${OFFSET}`,
+		end: `${date}T${to}:00${OFFSET}`,
+		allDay: false,
+		location: "",
+		notes: "",
+		attendees: [],
+		myRsvp: "accepted",
+		threadId: "",
+		threadSubject: "",
+		timeZone: "Europe/Amsterdam",
+		zoneCertainty: "explicit",
+		recurrenceRule: "",
+		seriesId: "",
+		seriesException: false,
+		status: "confirmed",
+		...extra,
+	};
+}
+
+const events: CalendarEventData[] = [
+	event("evt_standup", "Standup", "work", TODAY, "09:00", "09:15", {
+		recurrenceRule: "Every weekday",
+	}),
+	event("evt_roadmap", "Q3 roadmap review", "work", TODAY, "10:00", "11:30", {
+		location: "Kaap",
+		threadId: "thr_roadmap",
+		attendees: [
+			{
+				name: "Anna Vos",
+				email: "anna@example.test",
+				rsvp: "accepted",
+				role: "organizer",
+			},
+			{
+				name: "Bram Peters",
+				email: "bram@example.test",
+				rsvp: "noReply",
+				role: "attendee",
+			},
+		],
+	}),
+	event("evt_incident", "Incident review", "oncall", TODAY, "10:30", "12:00"),
+	event("evt_1to1", "1:1 with Anna", "work", TODAY, "11:00", "11:20"),
+	event("evt_lunch", "Lunch with Jane", "personal", TODAY, "12:30", "13:30", {
+		location: "Toscanini",
+	}),
+	event("evt_retro", "Retro", "work", TODAY, "16:00", "17:00", {
+		status: "tentative",
+	}),
+	event("evt_dentist", "Dentist", "personal", "2026-06-11", "14:00", "14:45", {
+		myRsvp: "declined",
+	}),
+	event("evt_call", "Lisbon call", "work", "2026-06-11", "17:00", "18:00", {
+		zoneCertainty: "ambiguous",
+		timeZone: "",
+	}),
+	{
+		...event("evt_devcon", "Devcon", "work", "2026-06-12", "00:00", "00:00"),
+		start: "2026-06-12",
+		end: "2026-06-13",
+		allDay: true,
+	},
+	event("evt_offsite", "Offsite", "work", "2026-06-22", "09:00", "17:00"),
+];
+
+const days = datesBetween("2026-06-08", "2026-06-24").map((date) =>
+	buildCalendarDay(date, events, TODAY),
+);
+
+const base = {
+	days,
+	calendars,
+	today: TODAY,
+	focusDate: TODAY,
+	selectedEventId: "",
+	onSelectEvent: () => {},
+	onPickSlot: () => {},
+	onZoomDay: () => {},
+	onReachStart: () => {},
+	onReachEnd: () => {},
+	onVisibleDayChange: () => {},
+};
+
+/** The default reading: one row an event, free time drawn between them. */
+export const Rows: Story = {
+	args: { ...base, density: "pills" },
+};
+
+/** Where, who and which calendar, for a day you are actually working through. */
+export const Detail: Story = {
+	args: { ...base, density: "detail" },
+};
+
+/** A month at a glance: colour, load and one word a day. */
+export const Dots: Story = {
+	args: { ...base, density: "dots" },
+};
+
+/** A day with nothing on the clock says so instead of showing whitespace. */
+export const ClearDay: Story = {
+	args: { ...base, density: "pills", focusDate: "2026-06-13" },
+};
+
+/** Nine days nobody booked, as one sentence rather than nine screens. */
+export const EmptyRun: Story = {
+	args: { ...base, density: "pills", focusDate: "2026-06-18" },
+};
+
+/** The selection is a state of the row, not a colour laid over it. */
+export const Selected: Story = {
+	args: { ...base, density: "detail", selectedEventId: "evt_roadmap" },
+};
+
+/** Every hit target grows where a finger has to find it. */
+export const Touch: Story = {
+	args: { ...base, density: "pills", touch: true },
+};
+
+/** What is next, landed on with today and scrolled away with it. */
+export const WithTodayLead: Story = {
+	args: {
+		...base,
+		density: "pills",
+		todayLead: (
+			<p className="border-b border-line bg-surface-sunken px-row-inset py-2 text-xs text-fg-muted">
+				Next up · Q3 roadmap review in 30m
+			</p>
+		),
+	},
+};
+
+/** Selecting a row is the only thing the strip owns; the owner holds the rest. */
+export const Interactive: Story = {
+	render: () => {
+		const [selected, setSelected] = useState("");
+		return (
+			<AgendaFlow
+				{...base}
+				density="detail"
+				selectedEventId={selected}
+				onSelectEvent={setSelected}
+			/>
+		);
+	},
+};