@remit/web-client 0.0.325 → 0.0.327

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

@@ -1,200 +0,0 @@
-import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
-import { CalendarEventPane } from "./CalendarEventPane";
-
-/**
- * The calendar's reading pane, at the three states the routes below the view
- * can put it in: the event, one occurrence of a repeating one, and an address
- * naming an event the calendar does not have on screen.
- */
-const calendar: CalendarDescriptor = {
-	id: "cal_work",
-	accountId: "acct_work",
-	accountLabel: "Work",
-	name: "Northwind",
-	color: "cal-1",
-};
-
-const event: CalendarEventData = {
-	id: "evt_roadmap",
-	calendarId: calendar.id,
-	title: "Roadmap review",
-	start: "2026-06-10T10:00:00+02:00",
-	end: "2026-06-10T11:30:00+02:00",
-	allDay: false,
-	location: "Room Zuid",
-	notes: "Bring the staffing numbers.",
-	attendees: [
-		{
-			name: "Priya Natarajan",
-			email: "priya@northwind.example",
-			rsvp: "accepted",
-			role: "organizer",
-		},
-	],
-	myRsvp: "accepted",
-	threadId: "",
-	threadSubject: "",
-	timeZone: "Europe/Amsterdam",
-	zoneCertainty: "explicit",
-	recurrenceRule: "",
-	seriesId: "",
-	seriesException: false,
-	status: "confirmed",
-};
-
-const meta: Meta<typeof CalendarEventPane> = {
-	title: "Playground/Shipped/Calendar/Event pane",
-	component: CalendarEventPane,
-	parameters: { layout: "fullscreen" },
-	args: {
-		event,
-		calendar,
-		isOccurrence: false,
-		problem: "",
-		onEdit: () => {},
-		onDelete: () => {},
-		onClose: () => {},
-	},
-	render: (args) => (
-		<div className="h-dvh max-w-xl border-l border-line bg-canvas">
-			<CalendarEventPane {...args} />
-		</div>
-	),
-};
-export default meta;
-
-type Story = StoryObj<typeof CalendarEventPane>;
-
-export const Event: Story = {};
-
-/** The series is what the address names; the occurrence is the segment below. */
-export const Occurrence: Story = {
-	args: {
-		event: {
-			...event,
-			title: "Standup",
-			start: "2026-06-11T09:15:00+02:00",
-			end: "2026-06-11T09:30:00+02:00",
-			recurrenceRule: "Every weekday, 09:15",
-			seriesId: "ser_standup",
-		},
-		isOccurrence: true,
-	},
-};
-
-/**
- * An all-day event is a civil date, so the pane names that day on every
- * device — a reader west of UTC does not see it on the day before.
- */
-export const AllDay: Story = {
-	args: {
-		event: {
-			...event,
-			title: "Audit day",
-			start: "2026-06-12",
-			end: "2026-06-13",
-			allDay: true,
-		},
-	},
-};
-
-/** An old link, or a week the event is not in. Never a blank pane. */
-export const NotOnThisWeek: Story = {
-	args: { event: undefined, calendar: undefined },
-};
-
-/** Looking for the day an event the view does not hold falls on. */
-export const Finding: Story = {
-	args: { event: undefined, calendar: undefined, absence: { kind: "Finding" } },
-};
-
-/** The address names a resource none of the reader's calendars holds. */
-export const Deleted: Story = {
-	args: { event: undefined, calendar: undefined, absence: { kind: "Deleted" } },
-};
-
-/** A series that falls on no day in its first year or the coming one. */
-export const NoOccurrenceFound: Story = {
-	args: {
-		event: undefined,
-		calendar: undefined,
-		absence: { kind: "NoOccurrenceFound" },
-	},
-};
-
-/** The session ended during the look-up; the way back in is on the pane. */
-export const SignedOut: Story = {
-	args: {
-		event: undefined,
-		calendar: undefined,
-		absence: {
-			kind: "SignedOut",
-			signIn: (
-				<button
-					type="button"
-					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg"
-				>
-					Sign in again
-				</button>
-			),
-		},
-	},
-};
-
-/** The look-up failed, with the server's reason and a way to report it. */
-export const LookupFailed: Story = {
-	args: {
-		event: undefined,
-		calendar: undefined,
-		absence: {
-			kind: "Failed",
-			reason: "Internal server error (HTTP 500)",
-			reportHref: "https://github.com/remit-mail/reader/issues/new",
-		},
-	},
-};
-
-/**
- * The event was replaced somewhere else — over CalDAV, or in another tab —
- * between it being read and the write going out. Nothing was overwritten, and
- * the pane says so where the reader is looking rather than anywhere else.
- */
-export const ChangedElsewhere: Story = {
-	args: {
-		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 resource has not been read yet, so there is no version to write against.
- * The controls stay off until there is: a write with no etag is one that can
- * quietly overwrite somebody.
- */
-export const NotWritableYet: Story = {
-	args: { onEdit: undefined, onDelete: undefined },
-};
-
-/**
- * An event from a subscribed feed. The controls are gone because the feed
- * owns the event, and the note says so where they would have been.
- */
-export const FromSubscription: Story = {
-	args: {
-		onEdit: undefined,
-		onDelete: undefined,
-		readOnlyNote:
-			"Read-only: from calendar.google.com. Change it where the feed comes from.",
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByText(
-				"Read-only: from calendar.google.com. Change it where the feed comes from.",
-			),
-		).toBeVisible();
-		await expect(canvas.queryByRole("button", { name: "Edit" })).toBeNull();
-	},
-};

package/src/components/calendar/CalendarEventPane.tsx

@@ -1,167 +0,0 @@
-import type { CalendarDescriptor, CalendarEventData } from "@remit/ui";
-import { EventDetail } from "@remit/ui";
-import { AlertCircle, CalendarDays, Lock } from "lucide-react";
-import type { ReactNode } from "react";
-import { formatEventWhen } from "@/lib/calendar-format";
-
-export type CalendarEventAbsence =
-	| { kind: "NotInView" }
-	| { kind: "Finding" }
-	| { kind: "Deleted" }
-	| { kind: "NoOccurrenceFound" }
-	| { kind: "SignedOut"; signIn: ReactNode }
-	| { kind: "Failed"; reason: string; reportHref: string };
-
-const NOT_IN_VIEW: CalendarEventAbsence = { kind: "NotInView" };
-
-const LINK =
-	"rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring";
-
-function absenceText(absence: CalendarEventAbsence): {
-	title: string;
-	detail: string;
-} {
-	switch (absence.kind) {
-		case "Finding":
-			return {
-				title: "Finding the event",
-				detail: "Looking for the day it falls on.",
-			};
-		case "Deleted":
-			return {
-				title: "This event was deleted",
-				detail: "None of your calendars holds it any more.",
-			};
-		case "NoOccurrenceFound":
-			return {
-				title: "No occurrence in its first year or the coming year",
-				detail:
-					"Its repeat rule, or the days taken out of it, leave it no day in either.",
-			};
-		case "SignedOut":
-			return {
-				title: "Your session has ended",
-				detail: "Sign in again to open this event.",
-			};
-		case "Failed":
-			return {
-				title: "The event couldn't be looked up",
-				detail: absence.reason,
-			};
-		case "NotInView":
-			return {
-				title: "That event isn't on this week",
-				detail: "The address names an event the calendar doesn't have here.",
-			};
-	}
-}
-
-/**
- * The event the address has open.
- *
- * Presentational, like the workspace beside it: the route resolves the event
- * and turns closing, editing and deleting into things it does, so this renders
- * what it is handed and nothing else. Each control appears only when the route
- * gave it somewhere to go — a control that leads nowhere is worse than none.
- */
-export interface CalendarEventPaneProps {
-	/** Absent when the address names an event the calendar does not have. */
-	event: CalendarEventData | undefined;
-	calendar: CalendarDescriptor | undefined;
-	/** Whether the address names one occurrence rather than the series. */
-	isOccurrence: boolean;
-	absence?: CalendarEventAbsence;
-	/**
-	 * A write that did not happen, stated where the reader is looking. Empty
-	 * when the last one did.
-	 */
-	problem?: string;
-	/**
-	 * Why this event cannot be changed here, stated where Edit and Delete would
-	 * be. Empty for an event the reader can change.
-	 */
-	readOnlyNote?: string;
-	onEdit?: () => void;
-	onDelete?: () => void;
-	onClose: () => void;
-}
-
-export function CalendarEventPane({
-	event,
-	calendar,
-	isOccurrence,
-	absence = NOT_IN_VIEW,
-	problem = "",
-	readOnlyNote = "",
-	onEdit,
-	onDelete,
-	onClose,
-}: CalendarEventPaneProps) {
-	if (!event || !calendar) {
-		const { title, detail } = absenceText(absence);
-		const loud = absence.kind === "Failed" || absence.kind === "SignedOut";
-		return (
-			<div
-				role={loud ? "alert" : undefined}
-				className="flex h-full flex-col items-center justify-center gap-2 bg-surface p-8 text-center"
-			>
-				<CalendarDays className="size-8 text-fg-subtle" aria-hidden="true" />
-				<p className="text-sm font-medium text-fg">{title}</p>
-				<p className="max-w-xs break-words text-sm text-fg-muted">{detail}</p>
-				<div className="flex flex-wrap items-center justify-center gap-2">
-					{absence.kind === "SignedOut" && absence.signIn}
-					{absence.kind === "Failed" && (
-						<a
-							href={absence.reportHref}
-							target="_blank"
-							rel="noreferrer"
-							className={LINK}
-						>
-							Report an issue
-						</a>
-					)}
-					<button type="button" onClick={onClose} className={LINK}>
-						Back to the calendar
-					</button>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="flex h-full min-h-0 flex-col bg-surface">
-			{isOccurrence && (
-				<p className="shrink-0 border-b border-line bg-surface-sunken px-row-inset py-1.5 text-2xs uppercase tracking-wider text-fg-subtle">
-					One occurrence of a repeating event
-				</p>
-			)}
-			{readOnlyNote !== "" && (
-				<p className="flex shrink-0 items-start gap-2 border-b border-line bg-surface-sunken px-row-inset py-2 text-sm text-fg-muted">
-					<Lock className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
-					<span className="min-w-0 flex-1 break-words">{readOnlyNote}</span>
-				</p>
-			)}
-			{problem !== "" && (
-				<div
-					role="alert"
-					className="flex shrink-0 items-start gap-2 border-b border-danger/40 bg-danger-soft px-row-inset 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>
-			)}
-			<EventDetail
-				event={event}
-				calendar={calendar}
-				whenText={formatEventWhen(event)}
-				onEdit={onEdit}
-				onDelete={onDelete}
-				onClose={onClose}
-				className="min-h-0 flex-1"
-			/>
-		</div>
-	);
-}

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

@@ -1,177 +0,0 @@
-import {
-	type CalendarColorId,
-	type CalendarEventData,
-	type Density,
-	NavSidebar,
-} from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { expect, userEvent, within } from "storybook/test";
-import { CalendarShell, CalendarShellProvider } from "./CalendarShell";
-import { CalendarWorkspace } from "./CalendarWorkspace";
-
-/**
- * The chrome the calendar shares with mail, at the two widths that change what
- * the reader can reach.
- *
- * Above the boundary the nav is a pane and the calendar sits beside it. Below
- * it the nav is a slide-over, nothing opens a slide-over on its own, and the
- * calendar is the whole width of the app — so the way back to the mail has to be
- * a control the calendar itself carries. Losing it strands a reader inside their
- * diary with no route out, which is what these two stories hold the shell to.
- */
-
-const TIME_ZONE = "Europe/Amsterdam";
-const DATE = "2026-06-10";
-const NOW = `${DATE}T09:30:00+02:00`;
-const CALENDAR = "cal_work";
-
-const colorByCalendarId: Record<string, CalendarColorId> = {
-	[CALENDAR]: "cal-1",
-};
-
-const roadmap: CalendarEventData = {
-	id: "roadmap",
-	calendarId: CALENDAR,
-	title: "Roadmap review",
-	start: `${DATE}T10:00:00+02:00`,
-	end: `${DATE}T11:30:00+02:00`,
-	allDay: false,
-	location: "",
-	notes: "",
-	attendees: [],
-	myRsvp: "accepted",
-	threadId: "",
-	threadSubject: "",
-	timeZone: TIME_ZONE,
-	zoneCertainty: "explicit",
-	recurrenceRule: "",
-	seriesId: "",
-	seriesException: false,
-	status: "confirmed",
-};
-
-const nav = (
-	<NavSidebar
-		accounts={[
-			{
-				id: "acct_work",
-				label: "Work",
-				email: "work@example.invalid",
-				mailboxes: [
-					{ id: "mb_inbox", name: "Inbox", role: "inbox", unseen: 3 },
-					{ id: "mb_sent", name: "Sent", role: "sent" },
-				],
-			},
-		]}
-		selectedNavId="calendar"
-		calendarNav="shown"
-	/>
-);
-
-const reading = (
-	<div className="flex h-full items-center justify-center bg-surface text-sm text-fg-muted">
-		Nothing open.
-	</div>
-);
-
-/** The layout publishes the chrome; a story holds the slide-over's own state. */
-function Shell({
-	width,
-	isSinglePane,
-}: {
-	/** The shell measures its own box, so the story gives it one. */
-	width: number;
-	isSinglePane: boolean;
-}) {
-	const [navOpen, setNavOpen] = useState(false);
-	const [density, setDensity] = useState<Density>("comfortable");
-	return (
-		<div style={{ width }} className="bg-canvas">
-			<CalendarShellProvider
-				chrome={{
-					isSinglePane,
-					isLoading: false,
-					nav,
-					navOpen,
-					onOpenNav: () => setNavOpen(true),
-					onCloseNav: () => setNavOpen(false),
-				}}
-			>
-				<CalendarShell
-					hasOpenEvent={false}
-					reading={reading}
-					workspace={
-						<CalendarWorkspace
-							view="week"
-							date={DATE}
-							events={[roadmap]}
-							colorByCalendarId={colorByCalendarId}
-							agenda={null}
-							density={density}
-							selectedEventId=""
-							timeZone={TIME_ZONE}
-							now={NOW}
-							onChangeView={() => undefined}
-							onToday={() => undefined}
-							onStep={() => undefined}
-							dayHref={(day) => `#${day}`}
-							onZoomDay={() => undefined}
-							onChangeDensity={setDensity}
-							onSelectEvent={() => undefined}
-							onPickSlot={() => undefined}
-						/>
-					}
-				/>
-			</CalendarShellProvider>
-		</div>
-	);
-}
-
-const meta: Meta<typeof Shell> = {
-	title: "Playground/Shipped/Calendar/Shell",
-	component: Shell,
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj<typeof Shell>;
-
-/**
- * Below the boundary. The nav is a slide-over with nothing else to open it, so
- * the calendar's own header carries the control — and pressing it is the whole
- * of the way back to the mail.
- */
-export const NavAsSlideOver: Story = {
-	args: { width: 900, isSinglePane: true },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(canvas.queryByRole("button", { name: /Inbox/ })).toBeNull();
-
-		const folders = await canvas.findByRole("button", {
-			name: "Open folders",
-		});
-		await userEvent.click(folders);
-
-		await expect(
-			await canvas.findByRole("button", { name: /Inbox/ }),
-		).toBeVisible();
-	},
-};
-
-/**
- * Above it. The nav is a column of its own, so a second control that opened it
- * would be a button for something already on screen.
- */
-export const NavAsPane: Story = {
-	args: { width: 1440, isSinglePane: false },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByRole("button", { name: /Inbox/ }),
-		).toBeVisible();
-		await expect(
-			canvas.queryByRole("button", { name: "Open folders" }),
-		).toBeNull();
-	},
-};

package/src/components/calendar/CalendarShell.tsx

@@ -1,83 +0,0 @@
-import { AppShellSlotted } from "@remit/ui";
-import { createContext, type ReactNode, useContext } from "react";
-import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
-
-/**
- * The chrome the calendar shares with mail, published by the `/calendar` layout
- * and consumed by the view route that mounts the shell.
- *
- * It lives in a module reached only through the `@/` alias for the same reason
- * `lib/mail-context.ts` does: the generated route tree imports route files
- * relatively, so a context declared inside one would resolve to a second module
- * instance and hand the consumer an empty default.
- */
-export interface CalendarShellChrome {
-	/** Below the reading boundary the shell shows one pane, as mail's does. */
-	isSinglePane: boolean;
-	isLoading: boolean;
-	nav: ReactNode;
-	navOpen: boolean;
-	onOpenNav: () => void;
-	onCloseNav: () => void;
-}
-
-const CalendarShellCtx = createContext<CalendarShellChrome | null>(null);
-
-export const CalendarShellProvider = ({
-	chrome,
-	children,
-}: {
-	chrome: CalendarShellChrome;
-	children: ReactNode;
-}) => (
-	<CalendarShellCtx.Provider value={chrome}>
-		{children}
-	</CalendarShellCtx.Provider>
-);
-
-export interface CalendarShellProps {
-	/** The grid, or whatever the current zoom draws. */
-	workspace: ReactNode;
-	/** The open event, from the route below this one. */
-	reading: ReactNode;
-	/** Whether the address has an event or the composer open. */
-	hasOpenEvent: boolean;
-}
-
-/**
- * The shell the calendar mounts around its own panes.
- *
- * `listBias="list"` because the grid is the work rather than an index into it:
- * a week of columns costs width it cannot give back when a detail opens, which
- * is the opposite of the split a message list wants.
- *
- * Below the reading boundary there is one pane, so the open event replaces the
- * grid in it — the same swap mail makes, read off the address rather than
- * decided here.
- */
-export function CalendarShell({
-	workspace,
-	reading,
-	hasOpenEvent,
-}: CalendarShellProps) {
-	const chrome = useContext(CalendarShellCtx);
-	if (!chrome) return <AppShellSkeleton />;
-
-	const shared = {
-		nav: chrome.nav,
-		skeleton: <AppShellSkeleton />,
-		isLoading: chrome.isLoading,
-		navOpen: chrome.navOpen,
-		onOpenNav: chrome.onOpenNav,
-		onCloseNav: chrome.onCloseNav,
-		listBias: "list" as const,
-	};
-
-	if (chrome.isSinglePane) {
-		return (
-			<AppShellSlotted {...shared} list={hasOpenEvent ? reading : workspace} />
-		);
-	}
-
-	return <AppShellSlotted {...shared} list={workspace} reading={reading} />;
-}

package/src/components/calendar/CalendarUnavailable.tsx

@@ -1,56 +0,0 @@
-import type { ReactNode } from "react";
-import type { CalendarsResult } from "@/hooks/calendar";
-import { NavLink } from "@/routing";
-
-/**
- * Whether there is a calendar an answer can write to. Declining and muting
- * write none, so only adding waits on this.
- */
-export type CalendarWriteGate = "ready" | "loading" | "failed" | "none";
-
-export function calendarWriteGate(
-	calendars: Pick<CalendarsResult, "defaultCalendarId" | "isLoading" | "error">,
-): CalendarWriteGate {
-	if (calendars.defaultCalendarId !== "") return "ready";
-	if (calendars.error !== null) return "failed";
-	if (calendars.isLoading) return "loading";
-	return "none";
-}
-
-/**
- * Why adding waits, with the way past it. Undefined when nothing stops it, so a
- * host can hand the answer straight to a card's `addBlocked`.
- */
-export function calendarUnavailable(
-	gate: CalendarWriteGate,
-	reportHref: string,
-): ReactNode | undefined {
-	if (gate === "ready") return undefined;
-	if (gate === "loading") return "Reading your calendars…";
-	if (gate === "failed")
-		return (
-			<>
-				Couldn't read your calendars, so there is nowhere to add this yet.
-				Reload to try again.{" "}
-				<a
-					href={reportHref}
-					target="_blank"
-					rel="noreferrer"
-					className="font-medium text-accent hover:underline"
-				>
-					Report an issue
-				</a>
-			</>
-		);
-	return (
-		<>
-			You have no calendar yet, so there is nowhere to add this.{" "}
-			<NavLink
-				to="/settings/calendars"
-				className="font-medium text-accent hover:underline"
-			>
-				Create a calendar
-			</NavLink>
-		</>
-	);
-}