@remit/ui 0.0.163 → 0.0.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "type": "module",
   "files": [
     "src"

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { CalendarList } from "./calendar-list.js";
 import type { CalendarDescriptor } from "./calendar-types.js";
 
@@ -127,4 +128,81 @@ export const AllHidden: Story = {
 			onToggle={() => {}}
 		/>
 	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		for (const box of canvas.getAllByRole("checkbox")) {
+			await expect(box).not.toBeChecked();
+		}
+		await expect(canvas.getByText("Travel")).toBeVisible();
+	},
+};
+
+/**
+ * One account with one calendar in it, which is what a new install looks like.
+ * The control is still the legend, so it stays on screen: a grid whose single
+ * colour is unexplained is no more readable than one with six.
+ */
+export const SingleCalendar: Story = {
+	render: () => {
+		const only = calendars.slice(0, 1);
+		const [visible, setVisible] = useState(new Set([only[0].id]));
+		return (
+			<CalendarList
+				calendars={only}
+				visible={visible}
+				onToggle={(id) =>
+					setVisible((prev) => {
+						const next = new Set(prev);
+						if (!next.delete(id)) next.add(id);
+						return next;
+					})
+				}
+			/>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const northwind = canvas.getByRole("checkbox", { name: "Northwind" });
+		await expect(northwind).toBeChecked();
+		await userEvent.click(canvas.getByText("Northwind"));
+		await expect(northwind).not.toBeChecked();
+	},
+};
+
+/**
+ * The same control on a surface with no room for a rail: a scrolling row of
+ * chips at thumb size. It is laid out differently and it is not a popover —
+ * turning a calendar off stays one press away from the grid.
+ */
+export const AsAStrip: Story = {
+	render: () => {
+		const [visible, setVisible] = useState(new Set(calendars.map((c) => c.id)));
+		return (
+			<CalendarList
+				calendars={calendars}
+				layout="strip"
+				touch
+				visible={visible}
+				onToggle={(id) =>
+					setVisible((prev) => {
+						const next = new Set(prev);
+						if (!next.delete(id)) next.add(id);
+						return next;
+					})
+				}
+			/>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getAllByRole("checkbox")).toHaveLength(
+			calendars.length,
+		);
+		const onCall = canvas.getByRole("checkbox", { name: "On-call" });
+		await userEvent.click(canvas.getByText("On-call"));
+		await expect(onCall).not.toBeChecked();
+		await expect(
+			canvas.getByRole("checkbox", { name: "Northwind" }),
+		).toBeChecked();
+	},
 };

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { CalendarDateNav, CalendarViewSwitch } from "./calendar-toolbar.js";
 import type { CalendarViewId } from "./calendar-types.js";
 
@@ -52,4 +53,76 @@ export const DateNav: Story = {
 			</div>
 		);
 	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		for (const name of ["Previous", "Next", "Today"]) {
+			await expect(canvas.getByRole("button", { name })).toBeVisible();
+		}
+		await userEvent.click(canvas.getByRole("radio", { name: "Day" }));
+		await expect(canvas.getByRole("radio", { name: "Day" })).toBeChecked();
+	},
+};
+
+/**
+ * The bar at a phone's width, where the whole ladder does not fit and a year
+ * grid would be unreadable anyway. Back, forward and Today stay: they are how
+ * the calendar is moved, and a toolbar that dropped them to make room would
+ * leave the reader stuck on whatever week they opened on.
+ */
+export const OnAPhone: Story = {
+	render: () => {
+		const [view, setView] = useState<CalendarViewId>("day");
+		return (
+			<div className="w-[390px] rounded-lg border border-line bg-surface p-2">
+				<CalendarDateNav
+					title="Wed 10 June 2026"
+					onPrev={() => {}}
+					onNext={() => {}}
+					onToday={() => {}}
+					touch
+				>
+					<CalendarViewSwitch
+						value={view}
+						onChange={setView}
+						views={["day", "agenda"]}
+						touch
+					/>
+				</CalendarDateNav>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		for (const name of ["Previous", "Next", "Today"]) {
+			await expect(canvas.getByRole("button", { name })).toBeVisible();
+		}
+		await expect(canvas.queryByRole("radio", { name: "Y" })).toBeNull();
+		await userEvent.click(canvas.getByRole("radio", { name: "List" }));
+		await expect(canvas.getByRole("radio", { name: "List" })).toBeChecked();
+	},
+};
+
+/**
+ * A range whose name is longer than the room it has. The title gives way, not
+ * the controls: it is the one thing on the bar that can be read off the grid
+ * underneath it.
+ */
+export const LongRangeTitle: Story = {
+	render: () => (
+		<div className="w-[420px] rounded-lg border border-line bg-surface p-2">
+			<CalendarDateNav
+				title="29 December 2025 – 4 January 2026, week 1"
+				onPrev={() => {}}
+				onNext={() => {}}
+				onToday={() => {}}
+			>
+				<CalendarViewSwitch value="week" onChange={() => {}} />
+			</CalendarDateNav>
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("radio", { name: "Week" })).toBeChecked();
+		await expect(canvas.getByRole("button", { name: "Today" })).toBeVisible();
+	},
 };