@remit/ui 0.0.113 → 0.0.114

package/src/components/event-detail.tsx

@@ -0,0 +1,188 @@
+import {
+	Clock,
+	Globe,
+	Mail,
+	MapPin,
+	Pencil,
+	Repeat,
+	Trash2,
+	X,
+} from "lucide-react";
+import { calendarColorClasses } from "../lib/calendar-color.js";
+import { cn } from "../lib/cn.js";
+import { AttendeeList, RsvpBadge } from "./attendee-row.js";
+import { Button } from "./button.js";
+import type {
+	CalendarDescriptor,
+	CalendarEventData,
+} from "./calendar-types.js";
+
+export interface EventDetailProps {
+	event: CalendarEventData;
+	calendar: CalendarDescriptor;
+	/** Already formatted by the caller — the component owns no clock. */
+	whenText: string;
+	onEdit: () => void;
+	onDelete: () => void;
+	/** Absent when the event was never born from a mail. */
+	onOpenThread?: () => void;
+	/** Puts the pane back to whatever it shows with nothing selected. */
+	onClose?: () => void;
+	/**
+	 * `bare` drops the header and the scrolling frame, for a surface that already
+	 * carries both — a full-screen flow whose footer holds the same actions.
+	 */
+	chrome?: "header" | "bare";
+	className?: string;
+}
+
+function Line({
+	icon,
+	children,
+}: {
+	icon: React.ReactNode;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="flex items-start gap-2.5 py-1">
+			<span className="mt-0.5 shrink-0 text-fg-subtle">{icon}</span>
+			<div className="min-w-0 flex-1 text-sm text-fg">{children}</div>
+		</div>
+	);
+}
+
+/**
+ * One event, opened. The link back to the mail it came from is part of the
+ * event rather than a footnote: an event with a thread behind it is never a
+ * dead end, and the way back is one click from the detail you are reading.
+ */
+export function EventDetail({
+	event,
+	calendar,
+	whenText,
+	onEdit,
+	onDelete,
+	onOpenThread,
+	onClose,
+	chrome = "header",
+	className,
+}: EventDetailProps) {
+	const hue = calendarColorClasses(calendar.color);
+
+	const facts = (
+		<>
+			<h1 className="text-xl font-semibold text-fg">{event.title}</h1>
+
+			<div className="mt-3 flex flex-col border-b border-line pb-3">
+				<Line icon={<Clock className="size-4" />}>
+					<span className="flex flex-wrap items-center gap-2">
+						{whenText}
+						{event.attendees.length > 0 && <RsvpBadge rsvp={event.myRsvp} />}
+					</span>
+				</Line>
+				{event.zoneCertainty === "ambiguous" ? (
+					<Line icon={<Globe className="size-4 text-warning" />}>
+						<span className="text-warning">
+							The mail said a time but never a zone. Shown in your own; confirm
+							before you travel for it.
+						</span>
+					</Line>
+				) : (
+					event.timeZone !== "" && (
+						<Line icon={<Globe className="size-4" />}>{event.timeZone}</Line>
+					)
+				)}
+				{event.recurrenceRule !== "" && (
+					<Line icon={<Repeat className="size-4" />}>
+						<span className="flex flex-wrap items-center gap-2">
+							{event.recurrenceRule}
+							{event.seriesException && (
+								<span className="rounded-xs bg-warning-soft px-1.5 py-0.5 text-2xs text-warning">
+									Moved out of the series
+								</span>
+							)}
+						</span>
+					</Line>
+				)}
+				{event.location !== "" && (
+					<Line icon={<MapPin className="size-4" />}>{event.location}</Line>
+				)}
+			</div>
+
+			{event.threadId !== "" && onOpenThread && (
+				<button
+					type="button"
+					onClick={onOpenThread}
+					className="mt-3 flex w-full items-center gap-2.5 rounded-md border border-line bg-surface-sunken px-3 py-2 text-left outline-none hover:border-line-strong focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					<Mail className="size-4 shrink-0 text-accent-2" />
+					<span className="min-w-0 flex-1">
+						<span className="block text-2xs uppercase tracking-wider text-fg-subtle">
+							From this thread
+						</span>
+						<span className="block truncate text-sm text-fg">
+							{event.threadSubject}
+						</span>
+					</span>
+				</button>
+			)}
+
+			{event.attendees.length > 0 && (
+				<AttendeeList attendees={event.attendees} className="mt-3" />
+			)}
+
+			{event.notes !== "" && (
+				<p className="mt-3 whitespace-pre-wrap text-sm text-fg-muted">
+					{event.notes}
+				</p>
+			)}
+		</>
+	);
+
+	if (chrome === "bare")
+		return <div className={cn("flex flex-col", className)}>{facts}</div>;
+
+	return (
+		<article
+			className={cn("flex h-full w-full flex-col bg-surface", className)}
+		>
+			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
+				<span className={cn("size-2.5 shrink-0 rounded-full", hue.solid)} />
+				<span className="min-w-0 flex-1 truncate text-xs text-fg-muted">
+					{calendar.name} · {calendar.accountLabel}
+				</span>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Pencil className="size-3.5" />}
+					onClick={onEdit}
+				>
+					Edit
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Trash2 className="size-3.5" />}
+					onClick={onDelete}
+					className="text-danger"
+				>
+					Delete
+				</Button>
+				{onClose && (
+					<button
+						type="button"
+						aria-label="Close event"
+						onClick={onClose}
+						className="flex size-7 items-center justify-center rounded-md text-fg-subtle outline-none hover:bg-surface-sunken hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+					>
+						<X className="size-4" />
+					</button>
+				)}
+			</header>
+
+			<div className="min-h-0 flex-1 overflow-y-auto px-row-inset py-3">
+				{facts}
+			</div>
+		</article>
+	);
+}

package/src/components/event-editor-pane.tsx

@@ -0,0 +1,54 @@
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface EventEditorPaneProps {
+	/** What the pane is doing: "New event", "Edit event". */
+	title: string;
+	/** The one line of context the title cannot carry — which day, which series. */
+	subtitle?: string;
+	onClose: () => void;
+	children: ReactNode;
+	className?: string;
+}
+
+/**
+ * Writing an event happens in the pane the event is read in, at the width that
+ * pane has. A form floating over the grid has to stay small enough not to bury
+ * it, which is how the fields got crushed; the pane is already where the reader
+ * looks after clicking something, it grows with the window, and it can be
+ * dragged wider when the form is the work.
+ */
+export function EventEditorPane({
+	title,
+	subtitle,
+	onClose,
+	children,
+	className,
+}: EventEditorPaneProps) {
+	return (
+		<section
+			className={cn("flex h-full w-full flex-col bg-surface", className)}
+		>
+			<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
+				<h2 className="shrink-0 text-xs font-medium text-fg">{title}</h2>
+				{subtitle !== undefined && subtitle !== "" && (
+					<span className="min-w-0 flex-1 truncate text-xs text-fg-muted">
+						{subtitle}
+					</span>
+				)}
+				<button
+					type="button"
+					aria-label="Close editor"
+					onClick={onClose}
+					className="ml-auto flex size-7 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none hover:bg-surface-sunken hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					<X className="size-4" />
+				</button>
+			</header>
+			<div className="min-h-0 flex-1 overflow-y-auto px-row-inset py-5">
+				<div className="mx-auto w-full max-w-2xl">{children}</div>
+			</div>
+		</section>
+	);
+}

package/src/components/event-editor.render.test.ts

@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { CalendarDescriptor, EventDraft } from "./calendar-types.js";
+import { EventEditor } from "./event-editor.js";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "c2",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Coffee",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "c1",
+	location: "",
+	guests: "",
+	notes: "",
+	repeat: "",
+};
+
+const render = (props: Partial<Parameters<typeof EventEditor>[0]>) =>
+	renderToString(
+		createElement(EventEditor, {
+			draft,
+			onChange: () => undefined,
+			calendars,
+			expanded: false,
+			onToggleExpanded: () => undefined,
+			onSave: () => undefined,
+			onCancel: () => undefined,
+			...props,
+		}),
+	);
+
+describe("EventEditor", () => {
+	it("folds everything but title, when and calendar", () => {
+		const html = render({});
+		assert.match(html, /aria-label="Title"/);
+		assert.match(html, /aria-label="Start time"/);
+		assert.match(html, /Northwind/);
+		assert.doesNotMatch(html, /aria-label="Location"/);
+		assert.match(html, /More details/);
+	});
+
+	it("reveals the rest on request", () => {
+		const html = render({ expanded: true });
+		assert.match(html, /aria-label="Location"/);
+		assert.match(html, /aria-label="Guests"/);
+		assert.match(html, /aria-label="Repeat"/);
+		assert.match(html, /Fewer details/);
+	});
+
+	it("drops the clock fields for an all-day entry", () => {
+		const html = render({ draft: { ...draft, allDay: true } });
+		assert.doesNotMatch(html, /aria-label="Start time"/);
+	});
+
+	it("offers Delete only when editing something that exists", () => {
+		assert.doesNotMatch(render({}), /Delete/);
+		assert.match(render({ onDelete: () => undefined }), /Delete/);
+	});
+
+	it("names the save action the caller asked for", () => {
+		assert.match(render({ saveLabel: "Save changes" }), /Save changes/);
+	});
+});

package/src/components/event-editor.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import type { CalendarDescriptor, EventDraft } from "./calendar-types.js";
+import { EventEditor } from "./event-editor.js";
+
+/**
+ * Three fields make an event. Location, guests, notes and repeat are real and
+ * one click away, but they do not charge the common case for their existence.
+ */
+const meta: Meta<typeof EventEditor> = {
+	title: "Calendar/Event editor",
+	component: EventEditor,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof EventEditor>;
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "c3",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Personal",
+		color: "cal-2",
+	},
+	{
+		id: "c4",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+const seed: EventDraft = {
+	title: "",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "c1",
+	location: "",
+	guests: "",
+	notes: "",
+	repeat: "",
+};
+
+function Live({ startExpanded }: { startExpanded: boolean }) {
+	const [draft, setDraft] = useState(seed);
+	const [expanded, setExpanded] = useState(startExpanded);
+	return (
+		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
+			<EventEditor
+				draft={draft}
+				onChange={setDraft}
+				calendars={calendars}
+				expanded={expanded}
+				onToggleExpanded={() => setExpanded((open) => !open)}
+				onSave={() => {}}
+				onCancel={() => {}}
+			/>
+		</div>
+	);
+}
+
+export const Folded: Story = { render: () => <Live startExpanded={false} /> };
+
+/** Everything the folded form was hiding. */
+export const Unfolded: Story = { render: () => <Live startExpanded /> };
+
+/** The same form sized for a bottom sheet: every control a thumb target. */
+export const Touch: Story = {
+	render: () => {
+		const [draft, setDraft] = useState(seed);
+		const [expanded, setExpanded] = useState(false);
+		return (
+			<div className="max-w-[390px] rounded-lg border border-line bg-surface-raised p-4">
+				<EventEditor
+					draft={draft}
+					onChange={setDraft}
+					calendars={calendars}
+					expanded={expanded}
+					onToggleExpanded={() => setExpanded((open) => !open)}
+					onSave={() => {}}
+					onCancel={() => {}}
+					touch
+				/>
+			</div>
+		);
+	},
+};