@remit/ui 0.0.162 → 0.0.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.162",
+  "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();
+	},
 };

package/src/components/wizard.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { AtSign, Inbox, Server } from "lucide-react";
 import { useState } from "react";
+import { Button } from "./button.js";
 import type { ServerSecurity } from "./security-select.js";
-import { ConnectorTile, ServerFields } from "./wizard.js";
+import { ConnectorTile, ServerFields, WizardShell } from "./wizard.js";
 
 const meta: Meta = {
 	title: "Components/Wizard",
@@ -101,3 +102,53 @@ export const ServerFieldsPhone: Story = {
 	globals: { viewport: { value: "mobile" } },
 	render: () => <ServerFieldsDemo />,
 };
+
+const longStepRows = Array.from(
+	{ length: 60 },
+	(_, index) => `Row ${index + 1} of a report nobody sized the box for`,
+);
+
+function LongStep() {
+	return (
+		<WizardShell
+			steps={["File", "Review", "Credentials", "Folders"]}
+			activeStep={1}
+			title="What this file will change"
+			subtitle="A step whose content runs well past the bottom of the screen."
+			footer={
+				<>
+					<Button variant="ghost">Back</Button>
+					<Button variant="primary">Continue</Button>
+				</>
+			}
+		>
+			<ul className="divide-y divide-line">
+				{longStepRows.map((row) => (
+					<li key={row} className="py-2 text-sm text-fg">
+						{row}
+					</li>
+				))}
+			</ul>
+		</WizardShell>
+	);
+}
+
+/**
+ * A step taller than the viewport, on the 1512×827 laptop the config import
+ * wizard was found unusable on (#1021). The rows scroll inside the card; the
+ * title and the Continue button stay on screen.
+ */
+export const ShellLongStepShortViewport: Story = {
+	name: "WizardShell — long step, short viewport",
+	parameters: { layout: "fullscreen" },
+	globals: { viewport: { value: "laptopShort" } },
+	render: () => <LongStep />,
+};
+
+/** The same step on a phone with the address bar and system nav showing. */
+export const ShellLongStepPhoneShort: Story = {
+	name: "WizardShell — long step, short phone",
+	parameters: { layout: "fullscreen" },
+	globals: { viewport: { value: "mobileShort" } },
+	render: () => <LongStep />,
+};

package/src/components/wizard.tsx

@@ -76,25 +76,40 @@ export function WizardShell({
 	hideSteps,
 }: WizardShellProps) {
 	return (
-		// First-run is a focal moment: the wizard column is horizontally
-		// centered with its top edge anchored ~30% down the viewport
-		// (optical center) on larger screens. On phone the top padding is
-		// minimal so taller steps (connector picker, servers) don't push the
-		// CTA bar below the fold — the shell scrolls if content overflows.
-		<div className="flex min-h-dvh w-full flex-col items-center overflow-y-auto bg-canvas pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(2rem,env(safe-area-inset-left,0px))] pr-[max(2rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] font-sans text-fg sm:pt-[30vh]">
+		// The shell is exactly the viewport, never more: the step's own content
+		// is what scrolls, and the title and the footer actions are pinned
+		// either side of it. A dry-run report or a list of accounts can run to
+		// any length and the primary action stays where the reader can press it
+		// (#1021).
+		//
+		// First-run is still a focal moment, so on larger screens the column
+		// sits with its top edge about 30% down the viewport (optical centre).
+		// That offset is a flex spacer rather than top padding because padding
+		// cannot yield: the spacer collapses first and the card only gives up
+		// height once the offset is gone.
+		<div className="flex h-dvh w-full flex-col items-center overflow-hidden bg-canvas pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(2rem,env(safe-area-inset-left,0px))] pr-[max(2rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] font-sans text-fg">
+			<div className="hidden shrink-[9999] basis-[30vh] sm:block" />
 			{!hideSteps && (
-				<div className="mb-5 w-full max-w-xl">
+				<div className="mb-5 w-full max-w-xl shrink-0">
 					<StepRail steps={steps} activeStep={activeStep} />
 				</div>
 			)}
-			<Card raised className="w-full max-w-xl">
-				<div className="px-5 pt-5">
+			<Card raised className="flex w-full min-h-0 max-w-xl flex-col">
+				<div className="shrink-0 px-5 pt-5">
 					<h1 className="text-xl font-semibold text-fg">{title}</h1>
 					{subtitle && <p className="mt-1 text-sm text-fg-muted">{subtitle}</p>}
 				</div>
-				<div className="px-5 py-5">{children}</div>
+				<div
+					data-testid="wizard-body"
+					className="min-h-0 overflow-y-auto px-5 py-5"
+				>
+					{children}
+				</div>
 				{footer && (
-					<div className="flex items-center justify-between gap-3 border-t border-line px-5 py-3">
+					<div
+						data-testid="wizard-footer"
+						className="flex shrink-0 items-center justify-between gap-3 border-t border-line px-5 py-3"
+					>
 						{footer}
 					</div>
 				)}