@remit/web-client 0.0.325 → 0.0.326

package/src/components/calendar/AgendaView.tsx

@@ -1,241 +0,0 @@
-import {
-	type AgendaScrollTarget,
-	buildCalendarDay,
-	type CalendarDay,
-	type CalendarSlotPick,
-	type Density,
-	freeStretchesOn,
-} from "@remit/ui";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AgendaStrip } from "@/components/calendar/AgendaStrip";
-import {
-	type AgendaRange,
-	calendarInstanceId,
-	datesInRange,
-	extendRangeEnd,
-	extendRangeStart,
-	freeStretchesByDate,
-	liftRangeCeiling,
-	liftRangeFloor,
-	rangeAround,
-	rangeAtCeiling,
-	rangeAtFloor,
-	rangeCovering,
-	readCalendarInstanceId,
-	useCalendarEventWeeks,
-	useCalendarFreeBusyWeeks,
-	useCalendarSelection,
-	useDrawnEvents,
-	weekKeyOf,
-	weekWindowsOver,
-} from "@/hooks/calendar";
-import { useDebouncedValue } from "@/hooks/useDebouncedValue";
-import { isoDate } from "@/lib/calendar-route";
-import {
-	useCalendarAddress,
-	useCalendarNavigation,
-	useOpenCalendarEvent,
-} from "@/routing";
-
-/**
- * The agenda, bound to the address.
- *
- * The strip is the same continuous run of time the grid draws, at a zoom that
- * does not spend pixels on empty hours. Two facts of the address drive it and
- * nothing else does: the day it opened on, which the strip lands on, and the
- * calendars ticked in the query, which narrow what it draws. Switching to the
- * week grid and back changes neither, which is what "the grid is a zoom level
- * you drop into and leave" means in practice.
- *
- * The days it holds are fetched a week at a time, on the grid's own cache keys.
- * That is what lets the range grow at all — a single read may not cover more
- * than a year, and one request that widened every time the reader reached an
- * end would eventually be refused and replace the strip with the refusal — and
- * it is what makes the two zooms share everything they have already read.
- *
- * It grows on the reader's scroll and on nothing else, a week at a time, and
- * only as far as a year either way. Past that it says so and offers the next
- * stretch: 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.
- *
- * Scrolling writes the day back to the address, debounced and by `replace`.
- * Debounced because a flick past a fortnight is one move rather than fourteen,
- * and `replace` because scrolling is not somewhere a reader went — Back belongs
- * to the screen they came from, not to the row they scrolled past. Growing the
- * range writes nothing: days arriving at an end is not the reader moving.
- */
-
-/** Long enough that a flick lands before the address moves. */
-export const ANCHOR_DEBOUNCE_MS = 400;
-
-export interface AgendaViewProps {
-	/** The device preference the whole calendar reads. */
-	density: Density;
-	/**
-	 * An empty slot the reader picked. The composer is seeded by the route, the
-	 * same way the grid's picks are, so a slot picked off a free band and one
-	 * dragged on the grid open the same form.
-	 */
-	onPickSlot: (pick: CalendarSlotPick) => void;
-}
-
-export function AgendaView({ density, onPickSlot }: AgendaViewProps) {
-	const { date, calendarIds } = useCalendarAddress();
-	const { openEvent, setAnchorDate, zoomToDay } = useCalendarNavigation();
-	const opened = useOpenCalendarEvent();
-
-	// One reading of the clock per mount. A strip that re-decided what "today"
-	// meant on every render would move the day it is anchored to under a reader
-	// who had not touched it.
-	const [clock] = useState(() => new Date());
-	const today = useMemo(() => isoDate(clock), [clock]);
-	const now = useMemo(() => clock.toISOString(), [clock]);
-
-	const [range, setRange] = useState<AgendaRange>(() => rangeAround(date));
-	const [scrollTarget, setScrollTarget] = useState<AgendaScrollTarget>();
-	const [visibleDate, setVisibleDate] = useState(date);
-	const jumps = useRef(0);
-	/*
-	 * The day this view last put in the address. A date arriving that matches it
-	 * is our own write coming back, and landing the strip on that would fight the
-	 * scroll that caused it.
-	 */
-	const written = useRef(date);
-
-	const land = useCallback((day: string) => {
-		written.current = day;
-		setVisibleDate(day);
-		setRange((previous) => rangeCovering(previous, day));
-		jumps.current += 1;
-		setScrollTarget({ date: day, token: jumps.current });
-	}, []);
-
-	useEffect(() => {
-		if (date === written.current) return;
-		land(date);
-	}, [date, land]);
-
-	const anchor = useDebouncedValue(visibleDate, ANCHOR_DEBOUNCE_MS);
-	useEffect(() => {
-		if (anchor === written.current) return;
-		written.current = anchor;
-		setAnchorDate(anchor);
-	}, [anchor, setAnchorDate]);
-
-	const dates = useMemo(() => datesInRange(range), [range]);
-	const windows = useMemo(() => weekWindowsOver(dates), [dates]);
-
-	const {
-		calendars,
-		timeZoneByCalendarId,
-		shown,
-		narrowed,
-		resolved,
-		isLoading: loadingCalendars,
-	} = useCalendarSelection(calendarIds);
-
-	const events = useCalendarEventWeeks(windows, narrowed, resolved);
-	const busy = useCalendarFreeBusyWeeks(windows);
-	const drawn = useDrawnEvents(events.instances, timeZoneByCalendarId, shown);
-
-	const days = useMemo(
-		() => dates.map((day) => buildCalendarDay(day, drawn, today)),
-		[dates, drawn, today],
-	);
-
-	/*
-	 * A day whose week has not answered yet, or whose calendars are not known.
-	 * It draws as a skeleton rather than as a day with nothing on it, because
-	 * those two pictures are otherwise the same one and only one of them is true.
-	 */
-	const loadingDates = useMemo(() => {
-		const pending = new Set<string>();
-		if (loadingCalendars || !resolved) return new Set(dates);
-		for (const day of dates) {
-			if (events.pendingWindows.has(weekKeyOf(day))) pending.add(day);
-		}
-		return pending;
-	}, [dates, events.pendingWindows, loadingCalendars, resolved]);
-
-	/*
-	 * Free time comes from the merged busy spans, which cover every calendar the
-	 * reader holds rather than the ones the strip is drawing. A week whose spans
-	 * have not landed falls back to the gaps between its own rows: calling an
-	 * afternoon clear on the strength of nothing at all is the one mistake this
-	 * view exists to avoid.
-	 */
-	const freeByDate = useMemo(
-		() => freeStretchesByDate(dates, busy.spans),
-		[dates, busy.spans],
-	);
-	const freeOn = useCallback(
-		(day: CalendarDay) =>
-			busy.pendingWindows.has(weekKeyOf(day.date))
-				? freeStretchesOn(day)
-				: (freeByDate.get(day.date) ?? freeStretchesOn(day)),
-		[freeByDate, busy.pendingWindows],
-	);
-
-	const goToDate = useCallback(
-		(day: string) => {
-			land(day);
-			setAnchorDate(day);
-		},
-		[land, setAnchorDate],
-	);
-
-	const selectEvent = useCallback(
-		(eventId: string) => {
-			const instance = readCalendarInstanceId(eventId);
-			openEvent(instance.calendarObjectId, instance.recurrenceId);
-		},
-		[openEvent],
-	);
-
-	const growStart = useCallback(() => setRange(extendRangeStart), []);
-	const growEnd = useCallback(() => setRange(extendRangeEnd), []);
-	const loadEarlier = useCallback(() => setRange(liftRangeFloor), []);
-	const loadLater = useCallback(() => setRange(liftRangeCeiling), []);
-
-	/** Whichever read was refused is the one a retry re-sends. */
-	const retry = useCallback(() => {
-		events.refetch();
-		busy.refetch();
-	}, [events.refetch, busy.refetch]);
-
-	return (
-		<AgendaStrip
-			days={days}
-			calendars={calendars}
-			density={density}
-			today={today}
-			anchorDate={date}
-			now={now}
-			selectedEventId={
-				opened
-					? calendarInstanceId(
-							opened.calendarObjectId,
-							opened.recurrenceId ?? "",
-						)
-					: ""
-			}
-			freeOn={freeOn}
-			loadingDates={loadingDates}
-			error={events.error ?? busy.error}
-			onRetry={retry}
-			scrollTarget={scrollTarget}
-			onSelectEvent={selectEvent}
-			onPickSlot={onPickSlot}
-			onZoomDay={zoomToDay}
-			onGoToDate={goToDate}
-			onReachStart={growStart}
-			onReachEnd={growEnd}
-			atStartCap={rangeAtFloor(range)}
-			atEndCap={rangeAtCeiling(range)}
-			onLoadEarlier={loadEarlier}
-			onLoadLater={loadLater}
-			onVisibleDayChange={setVisibleDate}
-		/>
-	);
-}

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

@@ -1,151 +0,0 @@
-import type { CalendarDescriptor, EventDraft } from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { CalendarComposePane } from "./CalendarComposePane";
-
-/**
- * `/calendar/{view}/{date}/new`, and the same form reopened over an event being
- * edited.
- *
- * It holds no draft of its own, so a story drives it with local state and gets
- * the surface the app renders. What the stories are for is what the markup
- * cannot answer: whether a refusal reads as something to fix rather than as
- * something broken, and whether an edit scoped to one occurrence makes clear
- * that the rule is not up for changing.
- */
-const calendars: CalendarDescriptor[] = [
-	{
-		id: "cal_work",
-		accountId: "acct_work",
-		accountLabel: "Work",
-		name: "Northwind",
-		color: "cal-1",
-	},
-	{
-		id: "cal_home",
-		accountId: "acct_work",
-		accountLabel: "Work",
-		name: "Personal",
-		color: "cal-4",
-	},
-];
-
-const draft: EventDraft = {
-	title: "Roadmap review",
-	date: "2026-06-10",
-	startTime: "10:00",
-	endDate: "2026-06-10",
-	endTime: "11:30",
-	allDay: false,
-	calendarId: "cal_work",
-	location: "Room Zuid",
-	guests: "",
-	notes: "",
-	repeat: "",
-};
-
-const meta: Meta<typeof CalendarComposePane> = {
-	title: "Playground/Shipped/Calendar/Compose pane",
-	component: CalendarComposePane,
-	parameters: { layout: "fullscreen" },
-	args: {
-		title: "New event",
-		subtitle: "2026-06-10",
-		calendars,
-		draft,
-		problem: "",
-		saveLabel: "Add",
-		isSaving: false,
-		onSave: () => {},
-		onCancel: () => {},
-	},
-	render: function Render(args) {
-		const [current, setCurrent] = useState(args.draft);
-		return (
-			<div className="h-dvh max-w-2xl border-l border-line bg-canvas">
-				<CalendarComposePane {...args} draft={current} onChange={setCurrent} />
-			</div>
-		);
-	},
-};
-export default meta;
-
-type Story = StoryObj<typeof CalendarComposePane>;
-
-export const NewEvent: Story = {};
-
-/** A refusal says what was wrong and what to do, where the reader is looking. */
-export const Refused: Story = {
-	args: {
-		draft: { ...draft, title: "" },
-		problem: "Give the event a title before saving it.",
-	},
-};
-
-/** The write is out; the button says so rather than looking unpressed. */
-export const Saving: Story = { args: { isSaving: true } };
-
-/**
- * Editing one morning of a series. The rule belongs to the series, so it reads
- * back rather than offering itself for change.
- */
-export const EditingOneOccurrence: Story = {
-	args: {
-		title: "Edit event",
-		subtitle: "This occurrence only",
-		saveLabel: "Save",
-		repeatEditable: false,
-		draft: {
-			...draft,
-			title: "Standup",
-			startTime: "09:15",
-			endTime: "09:30",
-			repeat: "Every weekday, 09:15",
-		},
-	},
-};
-
-/** A night shift opens as one night, ending on the next day. */
-export const EditingOvernight: Story = {
-	args: {
-		title: "Edit event",
-		subtitle: "2026-06-10",
-		saveLabel: "Save",
-		draft: {
-			...draft,
-			title: "Night shift handover",
-			startTime: "22:00",
-			endDate: "2026-06-11",
-			endTime: "01:00",
-		},
-	},
-};
-
-/** The version on screen was replaced elsewhere. Nothing is overwritten. */
-export const Conflicted: Story = {
-	args: {
-		title: "Edit event",
-		saveLabel: "Save",
-		problem:
-			"This event changed somewhere else — over CalDAV, or in another tab. Nothing was saved. Close it and open it again to see the version that's stored now.",
-	},
-};
-
-/** The span on the form runs into something already booked, named before Save. */
-export const Clashing: Story = {
-	args: {
-		clashes: [
-			{
-				id: "evt_board",
-				label: "Board prep, Wed 10 June, 10:30 – 11:00",
-			},
-			{
-				id: "evt_vendor",
-				label: "Vendor call, Wed 10 June, 11:00 – 12:00",
-			},
-		],
-	},
-};
-
-/** Checked, and clear. Silence here would read as "not checked". */
-export const Clear: Story = { args: { clashes: [] } };

package/src/components/calendar/CalendarComposePane.tsx

@@ -1,127 +0,0 @@
-import {
-	type CalendarClash,
-	CalendarClashStrip,
-	type CalendarDescriptor,
-	type EventDraft,
-	EventEditor,
-	EventEditorPane,
-} from "@remit/ui";
-import { AlertCircle, AlertTriangle } from "lucide-react";
-
-/**
- * Writing an event, and editing one.
- *
- * Presentational, like the pane it sits beside: it holds no draft of its own
- * and saves nothing. The route owns the draft and the write, so this renders
- * the same form whichever of the two the address named.
- *
- * Guests are left out because the calendar store has nowhere to put them yet,
- * which is the kit's default. A field that takes names and drops them is worse
- * than no field: the reader only finds out afterwards, from an event with
- * nobody on it.
- */
-export interface CalendarComposePaneProps {
-	/** What the pane is doing: "New event", "Edit event". */
-	title: string;
-	/** The one line of context the title cannot carry — which day, which series. */
-	subtitle?: string;
-	notice?: string;
-	calendars: CalendarDescriptor[];
-	draft: EventDraft;
-	onChange: (draft: EventDraft) => void;
-	/**
-	 * Why the last save did not happen, in the words the reader needs: what was
-	 * refused and what to do about it. Empty when nothing has been refused.
-	 */
-	problem: string;
-	saveLabel: string;
-	isSaving: boolean;
-	/**
-	 * The rule belongs to the series rather than to one morning of it, so an
-	 * edit scoped to a single occurrence reads it back instead of offering it.
-	 */
-	repeatEditable?: boolean;
-	/**
-	 * Whether the event can still be sent to a different calendar. Writing one
-	 * chooses; editing one cannot, because the collection a resource lives in is
-	 * part of its address and the patch has no field for it.
-	 */
-	calendarEditable?: boolean;
-	/**
-	 * What the span on the form runs into. Undefined while there is nothing to
-	 * check or the answer has not landed, which draws no strip at all.
-	 */
-	clashes?: CalendarClash[];
-	onSave: () => void;
-	onCancel: () => void;
-}
-
-export function CalendarComposePane({
-	title,
-	subtitle,
-	notice = "",
-	calendars,
-	draft,
-	onChange,
-	problem,
-	saveLabel,
-	isSaving,
-	repeatEditable = true,
-	calendarEditable = true,
-	clashes,
-	onSave,
-	onCancel,
-}: CalendarComposePaneProps) {
-	return (
-		<EventEditorPane title={title} subtitle={subtitle} onClose={onCancel}>
-			<EventEditor
-				draft={draft}
-				onChange={onChange}
-				calendars={calendars}
-				layout="pane"
-				repeatEditable={repeatEditable}
-				calendarEditable={calendarEditable}
-				saveLabel={isSaving ? "Saving…" : saveLabel}
-				onSave={onSave}
-				onCancel={onCancel}
-				header={
-					problem === "" &&
-					notice === "" &&
-					clashes === undefined ? undefined : (
-						<div className="space-y-2">
-							{notice !== "" && (
-								<p className="flex items-start gap-2 rounded-md border border-warning/40 bg-warning-soft px-3 py-2 text-sm text-fg">
-									<AlertTriangle
-										className="mt-0.5 size-4 shrink-0 text-warning"
-										aria-hidden="true"
-									/>
-									<span className="min-w-0 flex-1 break-words">{notice}</span>
-								</p>
-							)}
-							{problem !== "" && (
-								<div
-									role="alert"
-									className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm"
-								>
-									<AlertCircle
-										className="mt-0.5 size-4 shrink-0 text-danger"
-										aria-hidden="true"
-									/>
-									<p className="min-w-0 flex-1 break-words text-fg">
-										{problem}
-									</p>
-								</div>
-							)}
-							{clashes !== undefined && (
-								<CalendarClashStrip
-									clashes={clashes}
-									clearText="Nothing else is booked at this time."
-								/>
-							)}
-						</div>
-					)
-				}
-			/>
-		</EventEditorPane>
-	);
-}

package/src/components/calendar/CalendarComposeSeed.tsx

@@ -1,35 +0,0 @@
-import type { CalendarSlotPick } from "@remit/ui";
-import { createContext, type ReactNode, useContext } from "react";
-
-/**
- * The slot a reader dragged out of the grid, handed to the composer the click
- * opened.
- *
- * It is not in the address on purpose. What a half-written event says is not a
- * fact about where the reader is, and a link to a composer pre-filled with
- * somebody else's Tuesday afternoon is not an address worth being able to send.
- * The composer opened without one starts on the day the calendar is showing.
- *
- * It lives in a module reached through the `@/` alias for the same reason
- * `CalendarShell`'s context does: the generated route tree imports route files
- * relatively, so a context declared inside one resolves to a second module
- * instance and hands the consumer an empty default.
- */
-const CalendarComposeSeedCtx = createContext<CalendarSlotPick | undefined>(
-	undefined,
-);
-
-export const CalendarComposeSeedProvider = ({
-	pick,
-	children,
-}: {
-	pick: CalendarSlotPick | undefined;
-	children?: ReactNode;
-}) => (
-	<CalendarComposeSeedCtx.Provider value={pick}>
-		{children}
-	</CalendarComposeSeedCtx.Provider>
-);
-
-export const useCalendarComposeSeed = (): CalendarSlotPick | undefined =>
-	useContext(CalendarComposeSeedCtx);