@remit/ui 0.0.113 → 0.0.114

package/package.json

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

package/src/components/app-shell-slotted.render.test.ts

@@ -14,6 +14,10 @@ const render = (overrides: Partial<AppShellSlottedProps> = {}) =>
 		}),
 	);
 
+/** The percentage react-resizable-panels gave the list panel. */
+const listSize = (html: string) =>
+	html.match(/data-panel-id="list" data-panel-size="([\d.]+)"/)?.[1];
+
 describe("AppShellSlotted slot rendering", () => {
 	it("renders the list slot unconditionally", () => {
 		const html = render({ initialWidth: 800 });
@@ -80,6 +84,85 @@ describe("AppShellSlotted slot rendering", () => {
 		);
 	});
 
+	it("splits the list and reading panes 33/67 by default", () => {
+		assert.equal(
+			listSize(
+				render({
+					initialWidth: 1100,
+					reading: createElement(
+						"div",
+						{ "data-testid": "reading" },
+						"Reading",
+					),
+				}),
+			),
+			"33.0",
+			"the list keeps its standard third",
+		);
+	});
+
+	it("widens the list default at compact density", () => {
+		assert.equal(
+			listSize(
+				render({
+					initialWidth: 1100,
+					density: "compact",
+					reading: createElement(
+						"div",
+						{ "data-testid": "reading" },
+						"Reading",
+					),
+				}),
+			),
+			"43.0",
+			"denser rows read better with more room",
+		);
+	});
+
+	it("gives the list the larger share when the bias is on it", () => {
+		assert.equal(
+			listSize(
+				render({
+					initialWidth: 1100,
+					listBias: "list",
+					reading: createElement(
+						"div",
+						{ "data-testid": "reading" },
+						"Reading",
+					),
+				}),
+			),
+			"62.0",
+			"a list that is the work keeps the width",
+		);
+	});
+
+	it("gives the list the smaller share when the bias is on the detail", () => {
+		assert.equal(
+			listSize(
+				render({
+					initialWidth: 1100,
+					listBias: "detail",
+					reading: createElement(
+						"div",
+						{ "data-testid": "reading" },
+						"Reading",
+					),
+				}),
+			),
+			"26.0",
+			"a spine of a list gets a spine's width",
+		);
+	});
+
+	it("ignores the bias when there is no reading pane to split with", () => {
+		assert.equal(
+			listSize(render({ initialWidth: 1100, listBias: "list" })),
+			"100.0",
+			"one pane is the whole width at any bias",
+		);
+	});
+
 	it("renders the nav as a pane at/above 1024px (no folders trigger)", () => {
 		const html = render({ initialWidth: 1100 });
 		assert.match(html, /data-testid="nav"/, "nav is in the pane");

package/src/components/app-shell-slotted.tsx

@@ -54,6 +54,14 @@ export interface AppShellSlottedProps {
 	 * standard split. Only affects the two-pane (list + reading) default size.
 	 */
 	density?: "comfortable" | "compact";
+	/**
+	 * Which pane the two-pane split favours. "balanced" (default) is the mail
+	 * arrangement, where the list is an index and the reading pane is the work.
+	 * "list" is for a list pane that is itself the work — a calendar grid needs
+	 * the width a week of columns costs, and cannot give it up when a detail
+	 * opens. "detail" goes the other way for a list that is only a spine.
+	 */
+	listBias?: "list" | "balanced" | "detail";
 	/**
 	 * Header rendered only on narrow (< 1024px) widths — the mobile top bar.
 	 * The web-client injects the app-specific bar (hamburger / title / search).
@@ -123,6 +131,16 @@ export interface AppShellLayoutContext {
 
 const AppShellLayoutCtx = createContext<AppShellLayoutContext | null>(null);
 
+/** The list panel's share of the two-pane group, and how far it may be dragged. */
+function listShare(
+	bias: NonNullable<AppShellSlottedProps["listBias"]>,
+	density: NonNullable<AppShellSlottedProps["density"]>,
+): { size: number; max: number } {
+	if (bias === "list") return { size: 62, max: 78 };
+	if (bias === "detail") return { size: 26, max: 45 };
+	return { size: density === "compact" ? 43 : 33, max: 58 };
+}
+
 /**
  * Read the enclosing `AppShellSlotted`'s pane layout.
  * Returns null outside of an `AppShellSlotted` (tests / Storybook).
@@ -143,6 +161,7 @@ export function AppShellSlotted({
 	intelligenceOpen = true,
 	hasThread = true,
 	density = "comfortable",
+	listBias = "balanced",
 	header,
 	topBar,
 	overlay,
@@ -200,14 +219,23 @@ export function AppShellSlotted({
 
 	/* Sizes are percentages of the group they sit in. This group excludes the nav
 	   column, so they are shares of the remaining ~83%, not of the whole shell. */
+	const share = listShare(listBias, density);
 	const contentPanes = (
-		<ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+		<ResizablePanelGroup
+			direction="horizontal"
+			className="min-h-0 flex-1"
+			/* A group whose panels come and go under it throws "previous layout not
+			   found for panel index -1", and a panel already registered keeps the
+			   layout it was given rather than the default it is handed next. Keying
+			   on the set makes each arrangement its own group. */
+			key={showReadingPane ? "list-reading" : "list-only"}
+		>
 			<ResizablePanel
 				id="list"
 				order={1}
-				defaultSize={showReadingPane ? (density === "compact" ? 43 : 33) : 100}
+				defaultSize={showReadingPane ? share.size : 100}
 				minSize={22}
-				maxSize={showReadingPane ? 58 : 100}
+				maxSize={showReadingPane ? share.max : 100}
 				className="min-w-0"
 			>
 				{list}

package/src/components/attendee-row.render.test.ts

@@ -0,0 +1,73 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { AttendeeList, AttendeeRow, RsvpBadge } from "./attendee-row.js";
+import type { CalendarAttendee } from "./calendar-types.js";
+
+const attendees: CalendarAttendee[] = [
+	{
+		name: "Priya Natarajan",
+		email: "priya@northwind.example",
+		rsvp: "accepted",
+		role: "organizer",
+	},
+	{
+		name: "Dana Okafor",
+		email: "dana@northwind.example",
+		rsvp: "tentative",
+		role: "attendee",
+	},
+	{
+		name: "Sven Larsen",
+		email: "sven@northwind.example",
+		rsvp: "declined",
+		role: "attendee",
+	},
+];
+
+describe("RsvpBadge", () => {
+	it("says the reply in words, not colour alone", () => {
+		assert.match(
+			renderToString(createElement(RsvpBadge, { rsvp: "noReply" })),
+			/No reply/,
+		);
+		assert.match(
+			renderToString(createElement(RsvpBadge, { rsvp: "declined" })),
+			/Not coming/,
+		);
+	});
+});
+
+describe("AttendeeRow", () => {
+	it("names the organiser", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, { attendee: attendees[0] }),
+		);
+		assert.match(html, /Organiser/);
+		assert.match(html, /Priya Natarajan/);
+	});
+
+	it("leaves a plain attendee unlabelled", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, { attendee: attendees[1] }),
+		);
+		assert.doesNotMatch(html, /Organiser/);
+	});
+});
+
+describe("AttendeeList", () => {
+	it("tallies the replies above the list", () => {
+		const html = renderToString(createElement(AttendeeList, { attendees }));
+		assert.match(html, /3 guests/);
+		assert.match(html, /1 coming/);
+		assert.match(html, /1 not coming/);
+	});
+
+	it("renders nothing when nobody is invited", () => {
+		assert.equal(
+			renderToString(createElement(AttendeeList, { attendees: [] })),
+			"",
+		);
+	});
+});

package/src/components/attendee-row.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AttendeeList, RsvpBadge } from "./attendee-row.js";
+import type { CalendarAttendee } from "./calendar-types.js";
+
+/**
+ * Who is coming, and whether they said so. The reply is words and a mark, never
+ * a colour on its own.
+ */
+const meta: Meta = {
+	title: "Calendar/Attendees",
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const attendees: CalendarAttendee[] = [
+	{
+		name: "Priya Natarajan",
+		email: "priya@northwind.example",
+		rsvp: "accepted",
+		role: "organizer",
+	},
+	{
+		name: "Marcus Webb",
+		email: "marcus@northwind.example",
+		rsvp: "accepted",
+		role: "attendee",
+	},
+	{
+		name: "Dana Okafor",
+		email: "dana@northwind.example",
+		rsvp: "tentative",
+		role: "attendee",
+	},
+	{
+		name: "Aisha Khan",
+		email: "aisha@northwind.example",
+		rsvp: "noReply",
+		role: "attendee",
+	},
+	{
+		name: "Sven Larsen",
+		email: "sven@northwind.example",
+		rsvp: "declined",
+		role: "attendee",
+	},
+];
+
+/** A full guest list, with the tally read off it rather than stated twice. */
+export const List: Story = {
+	render: () => (
+		<div className="max-w-sm rounded-lg border border-line bg-surface p-3">
+			<AttendeeList attendees={attendees} />
+		</div>
+	),
+};
+
+export const EveryReply: Story = {
+	render: () => (
+		<div className="flex gap-4">
+			<RsvpBadge rsvp="accepted" />
+			<RsvpBadge rsvp="tentative" />
+			<RsvpBadge rsvp="declined" />
+			<RsvpBadge rsvp="noReply" />
+		</div>
+	),
+};

package/src/components/attendee-row.tsx

@@ -0,0 +1,96 @@
+import { Check, Clock, Minus, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Avatar } from "./avatar.js";
+import type { CalendarAttendee, RsvpState } from "./calendar-types.js";
+
+const rsvpLabels: Record<RsvpState, string> = {
+	accepted: "Coming",
+	tentative: "Maybe",
+	declined: "Not coming",
+	noReply: "No reply",
+};
+
+const rsvpTone: Record<RsvpState, string> = {
+	accepted: "text-positive",
+	tentative: "text-warning",
+	declined: "text-danger",
+	noReply: "text-fg-subtle",
+};
+
+const rsvpIcons: Record<RsvpState, typeof Check> = {
+	accepted: Check,
+	tentative: Clock,
+	declined: X,
+	noReply: Minus,
+};
+
+export interface RsvpBadgeProps {
+	rsvp: RsvpState;
+	className?: string;
+}
+
+/** The reply, in words and a mark — never colour alone. */
+export function RsvpBadge({ rsvp, className }: RsvpBadgeProps) {
+	const Icon = rsvpIcons[rsvp];
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1 text-2xs font-medium",
+				rsvpTone[rsvp],
+				className,
+			)}
+		>
+			<Icon className="size-3" />
+			{rsvpLabels[rsvp]}
+		</span>
+	);
+}
+
+export interface AttendeeRowProps {
+	attendee: CalendarAttendee;
+	className?: string;
+}
+
+export function AttendeeRow({ attendee, className }: AttendeeRowProps) {
+	return (
+		<div className={cn("flex min-h-9 items-center gap-2.5", className)}>
+			<Avatar name={attendee.name} email={attendee.email} size="sm" />
+			<span className="min-w-0 flex-1">
+				<span className="block truncate text-sm text-fg">{attendee.name}</span>
+				{attendee.role === "organizer" && (
+					<span className="block text-2xs text-fg-subtle">Organiser</span>
+				)}
+			</span>
+			<RsvpBadge rsvp={attendee.rsvp} />
+		</div>
+	);
+}
+
+export interface AttendeeListProps {
+	attendees: CalendarAttendee[];
+	className?: string;
+}
+
+/** The full guest list with a one-line tally above it. */
+export function AttendeeList({ attendees, className }: AttendeeListProps) {
+	if (attendees.length === 0) return null;
+	const tally = (["accepted", "tentative", "declined", "noReply"] as const)
+		.map((state) => ({
+			state,
+			count: attendees.filter((a) => a.rsvp === state).length,
+		}))
+		.filter((entry) => entry.count > 0)
+		.map((entry) => `${entry.count} ${rsvpLabels[entry.state].toLowerCase()}`)
+		.join(" · ");
+
+	return (
+		<div className={cn("flex flex-col", className)}>
+			<p className="pb-1 text-2xs uppercase tracking-wider text-fg-subtle">
+				{`${attendees.length} guests · ${tally}`}
+			</p>
+			{attendees.map((attendee) => (
+				<AttendeeRow key={attendee.email} attendee={attendee} />
+			))}
+		</div>
+	);
+}

package/src/components/calendar-event-chip.render.test.ts

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	CalendarEventChip,
+	type CalendarEventChipProps,
+} from "./calendar-event-chip.js";
+
+const base: CalendarEventChipProps = {
+	title: "Q3 roadmap review",
+	timeText: "10:00",
+	color: "cal-1",
+	layout: "row",
+	density: "comfortable",
+	rsvp: "accepted",
+	status: "confirmed",
+	hasThread: false,
+	isRecurring: false,
+	zoneCertainty: "local",
+	selected: false,
+};
+
+const render = (props: Partial<CalendarEventChipProps>) =>
+	renderToString(createElement(CalendarEventChip, { ...base, ...props }));
+
+describe("CalendarEventChip", () => {
+	it("carries the calendar's hue and nothing else coloured", () => {
+		const html = render({ color: "cal-3" });
+		assert.match(html, /bg-cal-3-soft/);
+		assert.match(html, /text-cal-3/);
+	});
+
+	it("renders the time ahead of the title", () => {
+		const html = render({});
+		assert.match(html, /10:00/);
+		assert.match(html, /Q3 roadmap review/);
+	});
+
+	it("omits the time for an all-day entry", () => {
+		const html = render({ timeText: "" });
+		assert.doesNotMatch(html, /tabular-nums/);
+	});
+
+	it("strikes a declined event rather than recolouring it", () => {
+		const html = render({ rsvp: "declined" });
+		assert.match(html, /line-through/);
+		assert.match(html, /bg-cal-1-soft/);
+	});
+
+	it("dashes the border of a tentative event", () => {
+		const html = render({ status: "tentative" });
+		assert.match(html, /border-dashed/);
+	});
+
+	it("marks an event that came from mail", () => {
+		assert.match(render({ hasThread: true }), /From mail/);
+	});
+
+	it("marks a repeating event", () => {
+		assert.match(render({ isRecurring: true }), /Repeats/);
+	});
+
+	it("flags a zone it could not determine", () => {
+		assert.match(render({ zoneCertainty: "ambiguous" }), /Unclear zone/);
+	});
+});

package/src/components/calendar-event-chip.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CalendarEventChip } from "./calendar-event-chip.js";
+import { calendarColorIds } from "./calendar-types.js";
+
+/**
+ * The event as it appears wherever the event's element is ours: an agenda, a
+ * picker, a day column we draw ourselves. Colour says which calendar; shape and
+ * mark say everything else, so an event never depends on hue alone to be read.
+ *
+ * Option A's grid is FullCalendar, which renders the element itself and accepts
+ * only a class string and the content inside it, so that one surface restates
+ * this shell rather than mounting the component. The two are held to the same
+ * values — hue, the dashed box for a provisional event, the dimming for a
+ * declined one, the mark size. What the grid cannot take from here is the
+ * element: no `aria-pressed`, no focus ring of ours, and a column too short for
+ * the second line this chip puts its marks on.
+ */
+const meta: Meta<typeof CalendarEventChip> = {
+	title: "Calendar/Event chip",
+	component: CalendarEventChip,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof CalendarEventChip>;
+
+const base = {
+	title: "Q3 roadmap review",
+	timeText: "10:00",
+	color: "cal-1",
+	layout: "row",
+	density: "comfortable",
+	rsvp: "accepted",
+	status: "confirmed",
+	hasThread: false,
+	isRecurring: false,
+	zoneCertainty: "local",
+	selected: false,
+} as const;
+
+/** The six calendar hues side by side, which is the only test that matters. */
+export const EveryCalendarColour: Story = {
+	render: () => (
+		<div className="flex max-w-sm flex-col gap-1">
+			{calendarColorIds.map((color, index) => (
+				<CalendarEventChip
+					key={color}
+					{...base}
+					color={color}
+					title={`Calendar ${index + 1}`}
+				/>
+			))}
+		</div>
+	),
+};
+
+/** Every state the chip carries, in the order it degrades. */
+export const States: Story = {
+	render: () => (
+		<div className="flex max-w-sm flex-col gap-1">
+			<CalendarEventChip {...base} />
+			<CalendarEventChip {...base} title="Staff screen" status="tentative" />
+			<CalendarEventChip {...base} title="Vendor call" rsvp="declined" />
+			<CalendarEventChip
+				{...base}
+				title="Standup"
+				isRecurring
+				hasThread={false}
+			/>
+			<CalendarEventChip {...base} title="Incident review" hasThread />
+			<CalendarEventChip
+				{...base}
+				title="Offsite dinner"
+				timeText="19:00"
+				zoneCertainty="ambiguous"
+			/>
+			<CalendarEventChip {...base} title="Demo" selected />
+		</div>
+	),
+};
+
+/** In a time grid the chip fills its slot; the rail keeps the hue readable. */
+export const ColumnLayout: Story = {
+	render: () => (
+		<div className="flex h-40 gap-1">
+			<CalendarEventChip {...base} layout="column" color="cal-1" />
+			<CalendarEventChip
+				{...base}
+				layout="column"
+				color="cal-3"
+				title="Design crit"
+				timeText="10:15"
+			/>
+			<CalendarEventChip
+				{...base}
+				layout="column"
+				color="cal-4"
+				title="Vendor call"
+				timeText="10:45"
+				rsvp="declined"
+			/>
+		</div>
+	),
+};
+
+/** Tighter density drops the chip to the smallest size that still reads. */
+export const Compact: Story = {
+	render: () => (
+		<div className="flex max-w-sm flex-col gap-0.5">
+			<CalendarEventChip {...base} density="compact" />
+			<CalendarEventChip
+				{...base}
+				density="compact"
+				color="cal-2"
+				title="Lunch walk"
+				timeText="12:30"
+				hasThread
+			/>
+			<CalendarEventChip
+				{...base}
+				density="compact"
+				color="cal-5"
+				title="Modular jam"
+				timeText="20:00"
+			/>
+		</div>
+	),
+};