@remit/web-client 0.0.306 → 0.0.307

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.306",
+  "version": "0.0.307",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

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

@@ -1,13 +1,9 @@
 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,
-	instancesWithin,
-	STORY_DATE,
-} from "./calendar-story-fixtures";
+import { calendars, fortnight, STORY_DATE } from "./calendar-story-fixtures";
 import {
 	type CalendarServer,
 	CalendarStory,

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, within } from "storybook/test";
+import { instancesWithin } from "@/mocks/story-frame/calendar-window";
 import { useOpenCalendarEvent } from "@/routing";
 import {
 	calendars,
 	fortnight,
-	instancesWithin,
 	ROADMAP_OBJECT,
 	roadmapResource,
 	STANDUP_OBJECT,

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import {
+	calendars,
+	fortnight,
+	ROADMAP_OBJECT,
+	roadmapResource,
+	STANDUP_OBJECT,
+	STANDUP_RECURRENCE,
+	STORY_DATE,
+	STORY_WEEK,
+	standupResource,
+} from "./calendar-story-fixtures";
+
+const world = mailWorld({
+	calendars,
+	calendarEvents: fortnight,
+	calendarResources: [roadmapResource, standupResource],
+});
+const desktop = { viewport: { value: "desktop", isRotated: false } };
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const meta = {
+	title: "Playground/Shipped/Calendar/App",
+	component: AppStory,
+	args: { url: STORY_WEEK },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+	globals: desktop,
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = () => within(document.body);
+
+export const Week: Story = {
+	play: async () => {
+		await expect(
+			(await page().findAllByText("Roadmap review"))[0],
+		).toBeVisible();
+		await expect(
+			(await page().findAllByRole("link", { name: "Calendar" }))[0],
+		).toBeVisible();
+	},
+};
+
+export const Empty: Story = {
+	parameters: { msw: { handlers: mailHandlers(mailWorld()) } },
+	play: async () => {
+		await expect(
+			(await page().findAllByRole("link", { name: "Calendar" }))[0],
+		).toBeVisible();
+		await expect(page().queryByText("Roadmap review")).toBeNull();
+	},
+};
+
+export const OpenEvent: Story = {
+	args: { url: `${STORY_WEEK}/${ROADMAP_OBJECT}` },
+	play: async () => {
+		await expect(await page().findByText("Room Zuid")).toBeVisible();
+		await expect(
+			await page().findByRole("button", { name: "Edit" }),
+		).toBeVisible();
+	},
+};
+
+export const RecurrenceScope: Story = {
+	args: { url: `${STORY_WEEK}/${STANDUP_OBJECT}/${STANDUP_RECURRENCE}` },
+	play: async () => {
+		await userEvent.click(await page().findByRole("button", { name: "Edit" }));
+		await expect(
+			await page().findByText("What should the change apply to?"),
+		).toBeVisible();
+	},
+};
+
+export const NewEvent: Story = {
+	args: { url: `${STORY_WEEK}/new` },
+	play: async () => {
+		await expect(await page().findByLabelText("Date")).toHaveValue(STORY_DATE);
+		await expect(page().getByLabelText("Title")).toHaveValue("");
+		await expect(
+			await page().findByRole("radio", { name: "Northwind" }),
+		).toBeChecked();
+	},
+};
+
+export const PhoneNewEvent: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}/new` },
+	globals: phone,
+	play: async () => {
+		await expect(await page().findByLabelText("Date")).toHaveValue(STORY_DATE);
+		await expect(page().getByLabelText("Title")).toHaveValue("");
+	},
+};
+
+export const PhoneDay: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}` },
+	globals: phone,
+	play: async () => {
+		await expect(
+			(await page().findAllByText("Roadmap review"))[0],
+		).toBeVisible();
+	},
+};
+
+export const PhoneEvent: Story = {
+	args: { url: `/calendar/day/${STORY_DATE}/${ROADMAP_OBJECT}` },
+	globals: phone,
+	play: async () => {
+		await expect(await page().findByText("Room Zuid")).toBeVisible();
+	},
+};

package/src/components/calendar/calendar-story-fixtures.ts

@@ -116,23 +116,3 @@ export const standupResource = {
 		"END:VCALENDAR",
 	].join("\r\n"),
 } as RemitImapCalendarEventResponse;
-
-/**
- * The occurrences inside the window a request asked for.
- *
- * The panes read a week at a time and hold several weeks at once, so a server
- * that answered every window with the same list would draw each day's events
- * once per window it appears in.
- */
-export const instancesWithin = (
-	url: URL,
-	instances: readonly RemitImapCalendarEventInstance[],
-): RemitImapCalendarEventInstance[] => {
-	const from = Date.parse(url.searchParams.get("from") ?? "");
-	const to = Date.parse(url.searchParams.get("to") ?? "");
-	if (Number.isNaN(from) || Number.isNaN(to)) return [...instances];
-	return instances.filter((instance) => {
-		const start = Date.parse(instance.start);
-		return start >= from && start < to;
-	});
-};

package/src/components/mail/DraftsView.tsx

@@ -32,6 +32,7 @@ import {
 	ComfortableRowTextContent,
 	cn,
 	comfortableRowClass,
+	PaneHeader,
 	type ThreadRowData,
 	type ThreadSection,
 } from "@remit/ui";
@@ -194,18 +195,13 @@ export function DraftsView({
 
 	return (
 		<section className="flex h-full w-full flex-col bg-surface">
-			{/* List datum bar */}
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					{title}
-				</h1>
+			<PaneHeader title={title} leading={<NavMenuButton />}>
 				{(unreadCount ?? 0) > 0 && (
 					<span className="shrink-0 text-2xs text-fg-subtle tabular-nums">
 						{unreadCount} unread
 					</span>
 				)}
-			</header>
+			</PaneHeader>
 
 			{/* Scrollable body */}
 			<div className="flex-1 overflow-y-auto">

package/src/components/mail/OutboxPane.tsx

@@ -26,6 +26,7 @@ import {
 	cn,
 	LIST_ROW_SELECTOR,
 	OutboxRow,
+	PaneHeader,
 	ReadingPaneEmpty,
 	useRovingFocus,
 } from "@remit/ui";
@@ -458,18 +459,7 @@ function OutboxList() {
 
 	return (
 		<div className="h-full flex flex-col bg-canvas">
-			{/* List datum bar (40px, the shared `--spacing-pane-header`): keeps
-			    the bottom hairline on the same y as the mailbox view so the grid
-			    line stays continuous across nav → outbox (no staircase, #422). */}
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					Outbox
-				</h1>
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{messages.length} {messages.length === 1 ? "message" : "messages"}
-				</span>
-			</header>
+			<OutboxListHeader count={messages.length} />
 			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow
@@ -484,6 +474,16 @@ function OutboxList() {
 	);
 }
 
+function OutboxListHeader({ count }: { count: number }) {
+	return (
+		<PaneHeader title="Outbox" leading={<NavMenuButton />}>
+			<span className="shrink-0 text-2xs text-fg-subtle">
+				{count} {count === 1 ? "message" : "messages"}
+			</span>
+		</PaneHeader>
+	);
+}
+
 /**
  * Outbox reading pane. Mount in the `reading` slot of `AppShellSlotted`.
  * Only rendered ≥ 1024px.
@@ -496,7 +496,7 @@ function OutboxReading() {
 			{/* Detail datum bar (40px): outbox has no message-action toolbar,
 			    but the datum bar must be present so its bottom hairline lines
 			    up with the list pane's, keeping the grid continuous (#422). */}
-			<header className="flex h-pane-header shrink-0 items-center border-b border-line px-3" />
+			<PaneHeader />
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{selectedMessage ? (
 					<OutboxMessageDetail message={selectedMessage} />
@@ -556,15 +556,7 @@ function OutboxPhone() {
 
 	return (
 		<div className="h-full flex flex-col bg-canvas">
-			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
-				<NavMenuButton />
-				<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-					Outbox
-				</h1>
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{messages.length} {messages.length === 1 ? "message" : "messages"}
-				</span>
-			</header>
+			<OutboxListHeader count={messages.length} />
 			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow

package/src/mocks/story-frame/calendar-window.ts

@@ -0,0 +1,21 @@
+import type { RemitImapCalendarEventInstance } from "@remit/api-http-client/types.gen.ts";
+
+/**
+ * The occurrences inside the window a request asked for.
+ *
+ * The panes read a week at a time and hold several weeks at once, so a server
+ * that answered every window with the same list would draw each day's events
+ * once per window it appears in.
+ */
+export const instancesWithin = (
+	url: URL,
+	instances: readonly RemitImapCalendarEventInstance[],
+): RemitImapCalendarEventInstance[] => {
+	const from = Date.parse(url.searchParams.get("from") ?? "");
+	const to = Date.parse(url.searchParams.get("to") ?? "");
+	if (Number.isNaN(from) || Number.isNaN(to)) return [...instances];
+	return instances.filter((instance) => {
+		const start = Date.parse(instance.start);
+		return start >= from && start < to;
+	});
+};

package/src/mocks/story-frame/mail-handlers.ts

@@ -2,6 +2,7 @@ import type {
 	AccountDetailOperationsUpdateAccountResponse,
 	AddressDetailOperationsUpdateAddressResponse,
 	AddressOperationsSearchAddressesResponse,
+	CalendarEventDetailOperationsGetCalendarEventResponse,
 	CalendarEventOperationsListCalendarEventsResponse,
 	CalendarOperationsListCalendarsResponse,
 	CalendarSuggestionOperationsListCalendarSuggestionsResponse,
@@ -35,6 +36,7 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import { type HttpHandler, HttpResponse, http } from "msw";
 import { makeConfig } from "@/test-support/fixtures";
+import { instancesWithin } from "./calendar-window";
 import type { MailWorld } from "./mail-world";
 
 const API = "/api";
@@ -487,13 +489,29 @@ export const mailHandlers = (
 			return new HttpResponse(null, { status: 204 });
 		}),
 		http.get(`${API}/calendars`, () =>
-			HttpResponse.json<CalendarOperationsListCalendarsResponse>({ items: [] }),
+			HttpResponse.json<CalendarOperationsListCalendarsResponse>({
+				items: world.calendars,
+			}),
 		),
-		http.get(`${API}/calendar-events`, () =>
+		http.get(`${API}/calendar-events`, ({ request }) =>
 			HttpResponse.json<CalendarEventOperationsListCalendarEventsResponse>({
-				items: [],
+				items: instancesWithin(new URL(request.url), world.calendarEvents),
 			}),
 		),
+		http.get(`${API}/calendar-events/:calendarObjectId`, ({ params }) => {
+			const resource = world.calendarResources.find(
+				(candidate) =>
+					candidate.calendarObjectId === String(params.calendarObjectId),
+			);
+			if (!resource)
+				return HttpResponse.json(
+					{ status: 404, message: "Calendar event not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<CalendarEventDetailOperationsGetCalendarEventResponse>(
+				resource,
+			);
+		}),
 		http.get(`${API}/calendar-suggestions`, () =>
 			HttpResponse.json<CalendarSuggestionOperationsListCalendarSuggestionsResponse>(
 				{ items: [] },

package/src/mocks/story-frame/mail-world.ts

@@ -1,6 +1,9 @@
 import type {
 	RemitImapAccountResponse,
 	RemitImapAddressResponse,
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarEventResponse,
+	RemitImapCalendarResponse,
 	RemitImapCanonicalMailboxRole,
 	RemitImapMailboxResponse,
 	RemitImapMessageCategory,
@@ -27,6 +30,9 @@ export interface MailWorld {
 	addresses: RemitImapAddressResponse[];
 	systemUpdate: RemitImapSystemUpdateResponse;
 	bodies: Record<string, string>;
+	calendars: RemitImapCalendarResponse[];
+	calendarEvents: RemitImapCalendarEventInstance[];
+	calendarResources: RemitImapCalendarEventResponse[];
 }
 
 export const MINUTE = 60_000;
@@ -429,5 +435,8 @@ export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 		run: null,
 	},
 	bodies: {},
+	calendars: [],
+	calendarEvents: [],
+	calendarResources: [],
 	...overrides,
 });