@remit/ui 0.0.113 → 0.0.115

package/src/components/event-editor.tsx

@@ -0,0 +1,480 @@
+import { ChevronDown, ChevronRight, Repeat } from "lucide-react";
+import { type ReactNode, useId } from "react";
+import { calendarColorClasses } from "../lib/calendar-color.js";
+import { cn } from "../lib/cn.js";
+import { NO_REPEAT, repeatChoices } from "../lib/recurrence.js";
+import { Button } from "./button.js";
+import type { CalendarDescriptor, EventDraft } from "./calendar-types.js";
+import { Input } from "./input.js";
+import { Select } from "./select.js";
+
+/**
+ * `compact` folds everything past the three core fields behind a disclosure,
+ * for a rail. `pane` has the room to show the whole event at once and labels
+ * every field.
+ */
+export type EventEditorLayout = "compact" | "pane";
+
+export interface EventFieldProps {
+	draft: EventDraft;
+	onChange: (draft: EventDraft) => void;
+	layout?: EventEditorLayout;
+	/** Grows the controls to a thumb target. */
+	touch?: boolean;
+}
+
+const NOTES_CLASS =
+	"w-full rounded-md border border-line bg-surface-sunken px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-subtle focus-visible:border-line-strong focus-visible:ring-2 focus-visible:ring-ring/30";
+
+const setField = <K extends keyof EventDraft>(
+	{ draft, onChange }: Pick<EventFieldProps, "draft" | "onChange">,
+	key: K,
+	value: EventDraft[K],
+) => onChange({ ...draft, [key]: value });
+
+/** A labelled field group, as the pane and the wizard steps lay fields out. */
+export function EventField({
+	label,
+	children,
+}: {
+	label: string;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex flex-col gap-2">
+			<span className="text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+				{label}
+			</span>
+			{children}
+		</div>
+	);
+}
+
+export function EventTitleField({
+	draft,
+	onChange,
+	layout = "compact",
+	touch,
+}: EventFieldProps) {
+	const roomy = layout === "pane";
+	return (
+		<Input
+			value={draft.title}
+			placeholder="Title"
+			aria-label="Title"
+			onChange={(e) => setField({ draft, onChange }, "title", e.target.value)}
+			className={cn(
+				roomy ? "text-lg font-medium" : "text-md font-medium",
+				roomy ? "h-11" : touch ? "min-h-11" : "",
+			)}
+		/>
+	);
+}
+
+export function EventWhenField({ draft, onChange, touch }: EventFieldProps) {
+	const fieldHeight = touch ? "min-h-11" : "";
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			<Input
+				type="date"
+				value={draft.date}
+				aria-label="Date"
+				onChange={(e) => setField({ draft, onChange }, "date", e.target.value)}
+				className={cn("w-40", fieldHeight)}
+			/>
+			{draft.allDay ? (
+				<span className="text-sm text-fg-muted">All day</span>
+			) : (
+				<>
+					<Input
+						type="time"
+						value={draft.startTime}
+						aria-label="Start time"
+						onChange={(e) =>
+							setField({ draft, onChange }, "startTime", e.target.value)
+						}
+						className={cn("w-28", fieldHeight)}
+					/>
+					<span className="text-sm text-fg-subtle">to</span>
+					<Input
+						type="time"
+						value={draft.endTime}
+						aria-label="End time"
+						onChange={(e) =>
+							setField({ draft, onChange }, "endTime", e.target.value)
+						}
+						className={cn("w-28", fieldHeight)}
+					/>
+				</>
+			)}
+			<label className="flex items-center gap-2 text-sm text-fg-muted">
+				<input
+					type="checkbox"
+					checked={draft.allDay}
+					onChange={(e) =>
+						setField({ draft, onChange }, "allDay", e.target.checked)
+					}
+					className="size-4 accent-current"
+				/>
+				All day
+			</label>
+		</div>
+	);
+}
+
+export function EventCalendarField({
+	draft,
+	onChange,
+	calendars,
+	touch,
+}: EventFieldProps & { calendars: CalendarDescriptor[] }) {
+	return (
+		<CalendarPicker
+			calendars={calendars}
+			value={draft.calendarId}
+			onChange={(id) => setField({ draft, onChange }, "calendarId", id)}
+			touch={touch}
+		/>
+	);
+}
+
+/**
+ * The rule belongs to the series, not to one morning of it. An edit scoped to a
+ * single instance reads the rule back instead of offering to change it.
+ */
+export function EventRepeatField({
+	draft,
+	onChange,
+	touch,
+	repeatEditable = true,
+	onCustom,
+}: EventFieldProps & {
+	repeatEditable?: boolean;
+	/** Absent leaves the picker to its derived choices. */
+	onCustom?: () => void;
+}) {
+	if (!repeatEditable)
+		return (
+			<p className="flex items-center gap-2 text-sm text-fg-muted">
+				<Repeat className="size-4 shrink-0 text-fg-subtle" aria-hidden />
+				{draft.repeat === NO_REPEAT ? "Does not repeat" : draft.repeat}
+			</p>
+		);
+	return (
+		<RepeatPicker
+			value={draft.repeat}
+			date={draft.date}
+			startTime={draft.startTime}
+			onChange={(next) => setField({ draft, onChange }, "repeat", next)}
+			onCustom={onCustom}
+			className={touch ? "min-h-11" : ""}
+		/>
+	);
+}
+
+export function EventLocationField({
+	draft,
+	onChange,
+	touch,
+}: EventFieldProps) {
+	return (
+		<Input
+			value={draft.location}
+			placeholder="Location"
+			aria-label="Location"
+			onChange={(e) =>
+				setField({ draft, onChange }, "location", e.target.value)
+			}
+			className={touch ? "min-h-11" : ""}
+		/>
+	);
+}
+
+export function EventGuestsField({ draft, onChange, touch }: EventFieldProps) {
+	return (
+		<Input
+			value={draft.guests}
+			placeholder="Guests, comma separated"
+			aria-label="Guests"
+			onChange={(e) => setField({ draft, onChange }, "guests", e.target.value)}
+			className={touch ? "min-h-11" : ""}
+		/>
+	);
+}
+
+export function EventNotesField({
+	draft,
+	onChange,
+	layout = "compact",
+}: EventFieldProps) {
+	return (
+		<textarea
+			value={draft.notes}
+			placeholder="Notes"
+			aria-label="Notes"
+			onChange={(e) => setField({ draft, onChange }, "notes", e.target.value)}
+			rows={layout === "pane" ? 6 : 3}
+			className={NOTES_CLASS}
+		/>
+	);
+}
+
+export interface EventEditorProps {
+	draft: EventDraft;
+	onChange: (draft: EventDraft) => void;
+	calendars: CalendarDescriptor[];
+	layout?: EventEditorLayout;
+	/** The folded section is open. The caller owns it so a story can start open. */
+	expanded?: boolean;
+	/** Absent means there is no fold: every field is on screen. */
+	onToggleExpanded?: () => void;
+	onSave: () => void;
+	onCancel: () => void;
+	onDelete?: () => void;
+	saveLabel?: string;
+	/** Sits above the fields — the quick-entry field, or a scope reminder. */
+	header?: ReactNode;
+	/**
+	 * The rule belongs to the series, not to one morning of it. An edit scoped to
+	 * a single instance reads the rule back instead of offering to change it.
+	 */
+	repeatEditable?: boolean;
+	/** Opens the custom-rule editor. Absent leaves the derived choices alone. */
+	onCustomRepeat?: () => void;
+	/** Grows the controls for a rail. */
+	touch?: boolean;
+	className?: string;
+}
+
+/**
+ * Three fields make an event: what, when, and which calendar. Everything else
+ * — where, who, notes, repeat — is real and reachable, folded away where the
+ * form is a rail and open where the form is a pane, because a fold buys room
+ * only where room is scarce.
+ */
+export function EventEditor({
+	draft,
+	onChange,
+	calendars,
+	layout = "compact",
+	expanded = false,
+	onToggleExpanded,
+	onSave,
+	onCancel,
+	onDelete,
+	saveLabel = "Add",
+	header,
+	repeatEditable = true,
+	onCustomRepeat,
+	touch,
+	className,
+}: EventEditorProps) {
+	const roomy = layout === "pane";
+	const common = { draft, onChange, layout, touch };
+
+	const title = <EventTitleField {...common} />;
+	const when = <EventWhenField {...common} />;
+	const calendarPicker = (
+		<EventCalendarField {...common} calendars={calendars} />
+	);
+	const repeat = (
+		<EventRepeatField
+			{...common}
+			repeatEditable={repeatEditable}
+			onCustom={onCustomRepeat}
+		/>
+	);
+	const location = <EventLocationField {...common} />;
+	const guests = <EventGuestsField {...common} />;
+	const notes = <EventNotesField {...common} />;
+
+	const actions = (
+		<div className={cn("flex items-center gap-2", roomy ? "pt-2" : "pt-1")}>
+			<Button
+				variant="primary"
+				size={touch || roomy ? "md" : "sm"}
+				onClick={onSave}
+				className={touch ? "min-h-11 flex-1" : ""}
+			>
+				{saveLabel}
+			</Button>
+			<Button
+				variant="ghost"
+				size={touch || roomy ? "md" : "sm"}
+				onClick={onCancel}
+				className={touch ? "min-h-11" : ""}
+			>
+				Cancel
+			</Button>
+			{onDelete && (
+				<Button
+					variant="ghost"
+					size={touch || roomy ? "md" : "sm"}
+					onClick={onDelete}
+					className={cn("ml-auto text-danger", touch && "min-h-11")}
+				>
+					Delete
+				</Button>
+			)}
+		</div>
+	);
+
+	if (roomy) {
+		return (
+			<div className={cn("flex flex-col gap-5", className)}>
+				{header}
+				<EventField label="Title">{title}</EventField>
+				<EventField label="When">{when}</EventField>
+				<EventField label="Calendar">{calendarPicker}</EventField>
+				<EventField label="Repeat">{repeat}</EventField>
+				<EventField label="Location">{location}</EventField>
+				<EventField label="Guests">{guests}</EventField>
+				<EventField label="Notes">{notes}</EventField>
+				{actions}
+			</div>
+		);
+	}
+
+	const folded = onToggleExpanded !== undefined && !expanded;
+
+	return (
+		<div className={cn("flex flex-col gap-3", className)}>
+			{header}
+
+			{title}
+			{when}
+			{calendarPicker}
+
+			{onToggleExpanded && (
+				<button
+					type="button"
+					onClick={onToggleExpanded}
+					aria-expanded={expanded}
+					className={cn(
+						"flex items-center gap-1 self-start rounded-sm text-xs font-medium text-fg-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-ring",
+						touch && "min-h-11",
+					)}
+				>
+					{expanded ? (
+						<ChevronDown className="size-3.5" />
+					) : (
+						<ChevronRight className="size-3.5" />
+					)}
+					{expanded ? "Fewer details" : "More details"}
+				</button>
+			)}
+
+			{!folded && (
+				<div className="flex flex-col gap-2 border-t border-line pt-3">
+					{location}
+					{guests}
+					{repeat}
+					{notes}
+				</div>
+			)}
+
+			{actions}
+		</div>
+	);
+}
+
+/** The value "Custom…" carries. No rule reads like this, so nothing collides. */
+const CUSTOM_OPTION = "__custom__";
+
+/**
+ * The rules a date can repeat by, plus whatever rule the event already carries.
+ * A rule read out of a mail or typed in a sentence is kept verbatim rather than
+ * snapped to the nearest offer — the picker never silently rewrites a rule.
+ */
+function RepeatPicker({
+	value,
+	date,
+	startTime,
+	onChange,
+	onCustom,
+	className,
+}: {
+	value: string;
+	date: string;
+	startTime: string;
+	onChange: (repeat: string) => void;
+	onCustom?: () => void;
+	className?: string;
+}) {
+	const offered = repeatChoices(date, startTime);
+	const choices =
+		value === NO_REPEAT || offered.includes(value)
+			? offered
+			: [value, ...offered];
+
+	return (
+		<Select
+			icon={<Repeat className="size-4" />}
+			aria-label="Repeat"
+			value={value}
+			onChange={(e) => {
+				if (e.target.value === CUSTOM_OPTION) {
+					onCustom?.();
+					return;
+				}
+				onChange(e.target.value);
+			}}
+			className={className}
+		>
+			<option value={NO_REPEAT}>Does not repeat</option>
+			{choices.map((choice) => (
+				<option key={choice} value={choice}>
+					{choice}
+				</option>
+			))}
+			{onCustom && <option value={CUSTOM_OPTION}>Custom…</option>}
+		</Select>
+	);
+}
+
+function CalendarPicker({
+	calendars,
+	value,
+	onChange,
+	touch,
+}: {
+	calendars: CalendarDescriptor[];
+	value: string;
+	onChange: (calendarId: string) => void;
+	touch?: boolean;
+}) {
+	const group = useId();
+	return (
+		<fieldset className="flex flex-wrap gap-1.5">
+			<legend className="sr-only">Calendar</legend>
+			{calendars.map((calendar) => {
+				const hue = calendarColorClasses(calendar.color);
+				const active = calendar.id === value;
+				return (
+					<label
+						key={calendar.id}
+						className={cn(
+							"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 text-xs transition-colors",
+							"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+							touch ? "min-h-11" : "h-7",
+							active
+								? cn(hue.soft, hue.text, hue.border)
+								: "border-line text-fg-muted hover:bg-surface-sunken",
+						)}
+					>
+						<input
+							type="radio"
+							name={group}
+							value={calendar.id}
+							checked={active}
+							onChange={() => onChange(calendar.id)}
+							className="sr-only"
+						/>
+						<span className={cn("size-2 rounded-full", hue.solid)} />
+						{calendar.name}
+					</label>
+				);
+			})}
+		</fieldset>
+	);
+}

package/src/components/event-quick-entry.render.test.ts

@@ -0,0 +1,40 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { parseEventPhrase } from "../lib/event-phrase.js";
+import { EventQuickEntry } from "./event-quick-entry.js";
+
+const NOW = new Date(2026, 5, 10, 9, 30);
+
+const render = (phrase: string) =>
+	renderToString(
+		createElement(EventQuickEntry, {
+			value: phrase,
+			onChange: () => undefined,
+			parse: parseEventPhrase(phrase, NOW),
+			onCommit: () => undefined,
+		}),
+	);
+
+describe("EventQuickEntry", () => {
+	it("attributes each reading to the words it came from", () => {
+		const html = render("lunch with Jane friday 1pm");
+		assert.match(html, /lunch/);
+		assert.match(html, /friday 1pm/);
+		assert.match(html, /Jane/);
+	});
+
+	it("says what it assumed", () => {
+		assert.match(render("standup tomorrow 9:30"), /No length given/);
+	});
+
+	it("says what it could not settle", () => {
+		assert.match(render("design review monday"), /No time given/);
+	});
+
+	it("shows no reading before anything is typed", () => {
+		const html = render("");
+		assert.doesNotMatch(html, /WHEN|When<\/span>/);
+	});
+});

package/src/components/event-quick-entry.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { parseEventPhrase } from "../lib/event-phrase.js";
+import { EventQuickEntry } from "./event-quick-entry.js";
+
+/**
+ * Typing a sentence is the fastest way to make an event, and the machine's
+ * reading of that sentence is on screen while you type — each field next to the
+ * words it came from, with anything assumed or missing said out loud. The
+ * correction happens before the event exists.
+ */
+const meta: Meta<typeof EventQuickEntry> = {
+	title: "Calendar/Quick entry",
+	component: EventQuickEntry,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof EventQuickEntry>;
+
+/** Wednesday 10 June 2026 — the same fixed "now" as the mail fixtures. */
+const NOW = new Date(2026, 5, 10, 9, 30);
+
+function Live({ initial }: { initial: string }) {
+	const [phrase, setPhrase] = useState(initial);
+	return (
+		<div className="max-w-md">
+			<EventQuickEntry
+				value={phrase}
+				onChange={setPhrase}
+				parse={parseEventPhrase(phrase, NOW)}
+				onCommit={() => {}}
+			/>
+		</div>
+	);
+}
+
+/** Type into it. Every keystroke moves the reading below the field. */
+export const Typing: Story = {
+	render: () => <Live initial="lunch with Jane friday 1pm" />,
+};
+
+/** A length in the phrase is read; without one the reader says it picked an hour. */
+export const WithLength: Story = {
+	render: () => <Live initial="dentist next tuesday 15:00 for 45m" />,
+};
+
+/** No time in the sentence, so no time in the event — and it says so. */
+export const MissingTime: Story = {
+	render: () => <Live initial="design review monday" />,
+};
+
+/** Nothing typed yet: the reading stays out of the way until there is one. */
+export const Empty: Story = {
+	render: () => <Live initial="" />,
+};