@remit/web-client 0.0.325 → 0.0.326

package/src/components/calendar/AgendaStrip.stories.tsx

@@ -1,291 +0,0 @@
-import {
-	buildCalendarDay,
-	type CalendarDescriptor,
-	type CalendarEventData,
-	type Density,
-	datesBetween,
-	freeStretchesOn,
-} from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { expect, within } from "storybook/test";
-import { freeStretchesByDate } from "@/hooks/calendar";
-import { AgendaStrip } from "./AgendaStrip";
-
-/**
- * The agenda at every state the shipping strip can be in.
- *
- * It is presentational — the days it holds and the day it is anchored to are
- * the address's, and `AgendaView` turns each move here into one — so a story
- * drives it with local state and gets the surface the app renders. What the
- * stories answer is what the markup cannot: whether a fortnight with two things
- * in it reads as a fortnight rather than as a bug, and whether "your Thursday
- * afternoon is clear" survives being said about a calendar that is switched off.
- */
-
-const TODAY = "2026-06-10";
-const OFFSET = "+02:00";
-const NOW = `${TODAY}T09:30:00${OFFSET}`;
-
-const WORK = "cal_work";
-const TEAM = "cal_team";
-const HOME = "cal_home";
-
-const calendars: CalendarDescriptor[] = [
-	{
-		id: WORK,
-		accountId: "acct_work",
-		accountLabel: "Work",
-		name: "Northwind",
-		color: "cal-1",
-	},
-	{
-		id: TEAM,
-		accountId: "acct_work",
-		accountLabel: "Work",
-		name: "Platform",
-		color: "cal-6",
-	},
-	{
-		id: HOME,
-		accountId: "acct_home",
-		accountLabel: "Personal",
-		name: "Home",
-		color: "cal-4",
-	},
-];
-
-const template: CalendarEventData = {
-	id: "",
-	calendarId: WORK,
-	title: "",
-	start: "",
-	end: "",
-	allDay: false,
-	location: "",
-	notes: "",
-	attendees: [],
-	myRsvp: "accepted",
-	threadId: "",
-	threadSubject: "",
-	timeZone: "Europe/Amsterdam",
-	zoneCertainty: "explicit",
-	recurrenceRule: "",
-	seriesId: "",
-	seriesException: false,
-	status: "confirmed",
-};
-
-const at = (
-	id: string,
-	title: string,
-	date: string,
-	from: string,
-	to: string,
-	over: Partial<CalendarEventData> = {},
-): CalendarEventData => ({
-	...template,
-	...over,
-	id,
-	title,
-	start: `${date}T${from}:00${OFFSET}`,
-	end: `${date}T${to}:00${OFFSET}`,
-});
-
-/**
- * A fortnight that is mostly empty, which is what a real fortnight looks like.
- * Two busy days, a pile-up on one of them, and a long quiet run in the middle:
- * the shape the strip exists to draw and a time grid spends five screens on.
- */
-const fortnight: CalendarEventData[] = [
-	at("standup", "Standup", TODAY, "09:15", "09:30", {
-		recurrenceRule: "Repeats",
-		seriesId: "ser_standup",
-	}),
-	at("roadmap", "Q3 roadmap review", TODAY, "10:00", "11:30", {
-		calendarId: TEAM,
-		location: "Kaap",
-	}),
-	at("incident", "Incident review", TODAY, "10:30", "12:00"),
-	at("dentist", "Dentist", "2026-06-11", "11:00", "12:00", {
-		calendarId: HOME,
-		location: "Kerkstraat 4",
-	}),
-	at("retro", "Retro", "2026-06-18", "16:00", "17:00", { calendarId: TEAM }),
-	at("climbing", "Climbing", "2026-06-20", "10:00", "12:00", {
-		calendarId: HOME,
-	}),
-];
-
-/**
- * One day with an hour free in it and nothing else: what Detail is for, and the
- * reading a phone gets when the reader is actually in a day.
- */
-const denseDay: CalendarEventData[] = [
-	at("s", "Standup", TODAY, "09:00", "09:15"),
-	at("d1", "Design review", TODAY, "09:30", "11:00", { calendarId: TEAM }),
-	at("d2", "Supplier call", TODAY, "11:00", "12:00", { location: "Meet" }),
-	at("d3", "One to one", TODAY, "13:30", "14:00", { location: "Room 2" }),
-	at("d4", "Hiring panel", TODAY, "14:00", "15:30", { calendarId: TEAM }),
-	at("d5", "Board prep", TODAY, "15:30", "17:00"),
-	at("d6", "School run", TODAY, "17:00", "18:00", { calendarId: HOME }),
-];
-
-const dates = datesBetween("2026-06-01", "2026-06-24");
-
-const pendingDates = (
-	loading: "none" | "all" | "week",
-): ReadonlySet<string> => {
-	if (loading === "all") return new Set(dates);
-	if (loading === "week")
-		return new Set(datesBetween("2026-06-15", "2026-06-21"));
-	return new Set();
-};
-
-/** The reader drives density; everything else is the address's in the app. */
-function Strip({
-	events,
-	initialDensity,
-	loading,
-	error,
-	busy,
-	atCap,
-}: {
-	events: CalendarEventData[];
-	initialDensity: Density;
-	/** Which days have not answered: "all", "none", or one week of them. */
-	loading: "none" | "all" | "week";
-	error?: unknown;
-	/** Busy time the strip is not drawing, as `/calendar-free-busy` returns it. */
-	busy: { start: string; end: string }[];
-	/** The run has grown as far as scrolling takes it, at one end or both. */
-	atCap?: boolean;
-}) {
-	const [density] = useState<Density>(initialDensity);
-	const [selected, setSelected] = useState("");
-	const days = dates.map((date) => buildCalendarDay(date, events, TODAY));
-	const measured = freeStretchesByDate(dates, busy);
-
-	return (
-		<AgendaStrip
-			days={days}
-			calendars={calendars}
-			density={density}
-			today={TODAY}
-			anchorDate={TODAY}
-			now={NOW}
-			selectedEventId={selected}
-			freeOn={(day) =>
-				busy.length === 0
-					? freeStretchesOn(day)
-					: (measured.get(day.date) ?? freeStretchesOn(day))
-			}
-			loadingDates={pendingDates(loading)}
-			error={error}
-			onRetry={() => undefined}
-			onSelectEvent={setSelected}
-			onPickSlot={() => undefined}
-			onZoomDay={() => undefined}
-			onGoToDate={() => undefined}
-			onReachStart={() => undefined}
-			onReachEnd={() => undefined}
-			atStartCap={atCap}
-			atEndCap={atCap}
-			onLoadEarlier={() => undefined}
-			onLoadLater={() => undefined}
-			onVisibleDayChange={() => undefined}
-		/>
-	);
-}
-
-const meta: Meta<typeof Strip> = {
-	title: "Playground/Shipped/Calendar/Agenda",
-	component: Strip,
-	parameters: { layout: "fullscreen" },
-	args: {
-		events: fortnight,
-		initialDensity: "comfortable",
-		loading: "none",
-		busy: [],
-	},
-	render: (args) => (
-		<div className="flex h-dvh flex-col bg-canvas">
-			<Strip {...args} />
-		</div>
-	),
-};
-export default meta;
-
-type Story = StoryObj<typeof Strip>;
-
-/** A fortnight: two busy days, a pile-up, and the quiet in between named. */
-export const PopulatedFortnight: Story = {};
-
-/**
- * Before any week has answered. Every day is a skeleton on the date it will
- * occupy, so nothing jumps when the answers land — and, crucially, this does
- * not read as a fortnight with nothing booked.
- */
-export const Loading: Story = { args: { loading: "all", events: [] } };
-
-/** One week still in flight, with the answered days around it drawn. */
-export const OneWeekStillLoading: Story = { args: { loading: "week" } };
-
-/**
- * Nothing booked for weeks. The claim this view makes is that one sentence is a
- * better answer to "am I free" than a fortnight of blank screens.
- */
-export const EmptyRunCollapsed: Story = { args: { events: [] } };
-
-/** One day, back to back, at the reading that spends a row on each. */
-export const DenseDay: Story = { args: { events: denseDay } };
-
-/** The same dense day at Glance, where a title still has to be readable. */
-export const DenseDayAtAGlance: Story = {
-	args: { events: denseDay, initialDensity: "compact" },
-};
-
-/**
- * The reader has unticked the calendar those meetings are on, so the strip
- * draws nothing on the 11th. They are booked all the same, and the free bands
- * come from the merged busy spans rather than from the rows on screen.
- */
-export const BusyOnACalendarNotDrawn: Story = {
-	args: {
-		events: [],
-		busy: [
-			{
-				start: `2026-06-11T09:00:00${OFFSET}`,
-				end: `2026-06-11T16:00:00${OFFSET}`,
-			},
-		],
-	},
-};
-
-/**
- * The run has grown as far as scrolling takes it, and stops there rather than
- * fetching its way across years nobody asked for. A sparse diary draws shorter
- * than the distance the strip fetches at, so an end measured off the content
- * alone is reached on the first layout pass and never stops being reached —
- * which is why the cap says so and hands the reader the next stretch instead.
- */
-export const AtTheCap: Story = {
-	args: { atCap: true },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByRole("button", { name: "Show earlier days" }),
-		).toBeVisible();
-		await expect(
-			canvas.getByRole("button", { name: "Show later days" }),
-		).toBeVisible();
-	},
-};
-
-/** A read that was refused. An empty strip would say the opposite of this. */
-export const CouldNotLoad: Story = {
-	args: {
-		events: [],
-		error: new Error("The window has to be shorter than a year."),
-	},
-};

package/src/components/calendar/AgendaStrip.tsx

@@ -1,162 +0,0 @@
-import {
-	AgendaFlow,
-	type AgendaScrollTarget,
-	type CalendarDay,
-	type CalendarDescriptor,
-	type CalendarSlotPick,
-	type Density,
-	ErrorState,
-	NextUpCard,
-	readNextUp,
-} from "@remit/ui";
-import { useMemo } from "react";
-import type { FreeLookup } from "@/hooks/calendar";
-import { agendaDensityOf } from "@/lib/calendar-density";
-
-/**
- * The agenda, drawn.
- *
- * Presentational, like the rest of the calendar pane: it takes the days it was
- * given, says which one is under the header, and asks for more at either end.
- * What it never does is decide which days those are — the address owns that, and
- * `AgendaView` turns each answer here into one.
- *
- * "What is next" leads today rather than sitting in a rail of its own. It is
- * the question a strip is for, and putting it above today means the reader
- * lands on it and scrolls past it, instead of reading it in a column that is
- * still there when they are three weeks away.
- */
-
-export interface AgendaStripProps {
-	/** Contiguous and ascending. */
-	days: CalendarDay[];
-	calendars: readonly CalendarDescriptor[];
-	/** The device preference the whole calendar reads. */
-	density: Density;
-	today: string;
-	/** The day the address names; never collapsed into a run. */
-	anchorDate: string;
-	/** The instant "what is next" is measured from. */
-	now: string;
-	selectedEventId: string;
-	/** What is still open on a day, measured off merged busy time. */
-	freeOn: FreeLookup;
-	/**
-	 * Days whose week has not answered yet. They draw as skeletons: a day
-	 * nobody has heard back about and a day with nothing on it are otherwise
-	 * the same picture, and the strip would be claiming a free fortnight it has
-	 * no grounds for.
-	 */
-	loadingDates: ReadonlySet<string>;
-	/**
-	 * A refusal stated in place of the strip. A diary drawn empty because the
-	 * read failed is indistinguishable from a diary with nothing in it, which is
-	 * the one thing this must never look like.
-	 */
-	error?: unknown;
-	onRetry?: () => void;
-	scrollTarget?: AgendaScrollTarget;
-	onSelectEvent: (eventId: string) => void;
-	onPickSlot: (pick: CalendarSlotPick) => void;
-	/** Drops out of the list into the day grid. */
-	onZoomDay: (date: string) => void;
-	onGoToDate: (date: string) => void;
-	onReachStart: () => void;
-	onReachEnd: () => void;
-	/**
-	 * The run has grown as far as scrolling takes it. The strip says so at that
-	 * end and offers the next stretch, so a diary too sparse to fill the pane
-	 * cannot fetch its way across years nobody asked for.
-	 */
-	atStartCap?: boolean;
-	atEndCap?: boolean;
-	onLoadEarlier?: () => void;
-	onLoadLater?: () => void;
-	/** The day under the sticky header, which the address follows. */
-	onVisibleDayChange: (date: string) => void;
-}
-
-export function AgendaStrip({
-	days,
-	calendars,
-	density,
-	today,
-	anchorDate,
-	now,
-	selectedEventId,
-	freeOn,
-	loadingDates,
-	error,
-	onRetry,
-	scrollTarget,
-	onSelectEvent,
-	onPickSlot,
-	onZoomDay,
-	onGoToDate,
-	onReachStart,
-	onReachEnd,
-	atStartCap,
-	atEndCap,
-	onLoadEarlier,
-	onLoadLater,
-	onVisibleDayChange,
-}: AgendaStripProps) {
-	const nextUp = useMemo(() => readNextUp(days, now), [days, now]);
-	/*
-	 * "What is next" is an answer about days that have arrived. Drawn over a
-	 * today whose week is still out it reads "Nothing else booked", which is a
-	 * claim rather than a delay.
-	 */
-	const settledToday = !loadingDates.has(today);
-
-	if (error !== undefined && error !== null)
-		return (
-			<div className="flex h-full items-center justify-center bg-surface">
-				<ErrorState
-					title="Couldn't load these days"
-					error={error}
-					onRetry={onRetry}
-				/>
-			</div>
-		);
-
-	/* No spinner over the whole strip. Days already fetched stay put while their
-	   neighbours arrive, and a day still outstanding says so where it will be
-	   drawn — which is also what stops the rows jumping when it lands. */
-	return (
-		<AgendaFlow
-			days={days}
-			calendars={calendars}
-			density={agendaDensityOf(density)}
-			today={today}
-			focusDate={anchorDate}
-			selectedEventId={selectedEventId}
-			freeOn={freeOn}
-			loadingDates={loadingDates}
-			scrollTarget={scrollTarget}
-			onSelectEvent={onSelectEvent}
-			onPickSlot={onPickSlot}
-			onZoomDay={onZoomDay}
-			onReachStart={onReachStart}
-			onReachEnd={onReachEnd}
-			atStartCap={atStartCap}
-			atEndCap={atEndCap}
-			onLoadEarlier={onLoadEarlier}
-			onLoadLater={onLoadLater}
-			onVisibleDayChange={onVisibleDayChange}
-			todayLead={
-				settledToday ? (
-					<div className="border-b border-line bg-surface-sunken p-3">
-						<NextUpCard
-							nextUp={nextUp}
-							calendars={calendars}
-							today={today}
-							onSelectEvent={onSelectEvent}
-							onGoTo={onGoToDate}
-						/>
-					</div>
-				) : undefined
-			}
-		/>
-	);
-}

package/src/components/calendar/AgendaView.stories.tsx

@@ -1,112 +0,0 @@
-import type { Density } from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-import { instancesWithin } from "@/mocks/story-frame/calendar-window";
-import { AgendaView } from "./AgendaView";
-import { calendars, fortnight, STORY_DATE } from "./calendar-story-fixtures";
-import {
-	type CalendarServer,
-	CalendarStory,
-	json,
-	never,
-} from "./calendar-story-server";
-
-/**
- * The agenda bound to the address, which is the only way it exists.
- *
- * It holds no days of its own: the run comes from the day the URL names, the
- * weeks are fetched one at a time as the reader scrolls, and every move it makes
- * leaves as a new address. So the states worth a story are the ones the reader
- * cannot tell apart by looking — a fortnight with two things in it, a fortnight
- * nobody has heard back about, and a fortnight the server refused. Drawn wrong,
- * the last two are the first one, and the reader plans a clear week they do not
- * have.
- */
-
-const AGENDA = `/calendar/agenda/${STORY_DATE}`;
-
-const answering = (events: (url: URL) => Response | Promise<Response>) =>
-	((request: Request) => {
-		const url = new URL(request.url);
-		if (url.pathname.endsWith("/calendars")) return json({ items: calendars });
-		if (url.pathname.endsWith("/calendar-events")) return events(url);
-		return json({ items: [] });
-	}) satisfies CalendarServer;
-
-function Agenda({
-	density,
-	server,
-}: {
-	density: Density;
-	server: CalendarServer;
-}) {
-	return (
-		<div className="flex h-dvh flex-col bg-canvas">
-			<CalendarStory
-				entry={AGENDA}
-				server={server}
-				pane={<AgendaView density={density} onPickSlot={() => undefined} />}
-			/>
-		</div>
-	);
-}
-
-const meta: Meta<typeof Agenda> = {
-	title: "Playground/Shipped/Calendar/Agenda view",
-	component: Agenda,
-	parameters: { layout: "fullscreen" },
-	args: {
-		density: "comfortable",
-		server: answering((url) =>
-			json({ items: instancesWithin(url, fortnight) }),
-		),
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof Agenda>;
-
-/** The weeks around the day the address names, drawn from what the server sent. */
-export const Populated: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Roadmap review")).toBeVisible();
-		await expect(canvas.getByText("Standup")).toBeVisible();
-	},
-};
-
-/**
- * The weeks are still out. Every day keeps the row it will occupy, so nothing
- * jumps when the answers land — and, which matters more, an unanswered day says
- * so rather than drawing as a day with nothing booked on it.
- */
-export const LoadingWeeks: Story = {
-	args: { server: answering(never) },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByTestId(`agenda-day-pending-${STORY_DATE}`),
-		).toBeVisible();
-		await expect(canvas.queryByText("Roadmap review")).toBeNull();
-	},
-};
-
-/**
- * The read was refused. This is the state an empty strip must never be confused
- * with: a fortnight drawn blank because the request failed reads as a fortnight
- * with nothing in it, and the reader gives the time away.
- */
-export const RefusedRead: Story = {
-	args: {
-		server: answering(() =>
-			json({ message: "The window has to be shorter than a year." }, 400),
-		),
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("Couldn't load these days"),
-		).toBeVisible();
-		await expect(canvas.queryByText("Roadmap review")).toBeNull();
-	},
-};