@remit/ui 0.0.155 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "type": "module",
   "files": [
     "src"
@@ -9,7 +9,8 @@
     ".": "./src/index.ts",
     "./rich-text": "./src/rich-text.ts",
     "./spellcheck-worker": "./src/components/rich-text-spellcheck-worker-provider.ts",
-    "./tokens.css": "./src/tokens.css"
+    "./tokens.css": "./src/tokens.css",
+    "./calendar.css": "./src/calendar.css"
   },
   "scripts": {
     "test": "npm run test:typecheck && npm run test:run",
@@ -20,6 +21,7 @@
     "@fontsource-variable/geist": "^5",
     "@fontsource-variable/hanken-grotesk": "^5",
     "@fontsource-variable/inter": "^5",
+    "@fullcalendar/react": "^7.0.2",
     "@lexical/code-core": "0.49.0",
     "@lexical/html": "0.49.0",
     "@lexical/link": "0.49.0",
@@ -40,6 +42,7 @@
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
+    "temporal-polyfill": "^1.0.1",
     "tldts": "^7.4.9"
   },
   "peerDependencies": {

package/src/calendar.css

@@ -0,0 +1,4 @@
+/* The structural sheet `CalendarGrid`'s engine needs — positioning and nothing
+   else; it ships no theme. Every colour, border and size the grid draws comes
+   from tokens.css instead. An app that renders the grid imports this beside it. */
+@import "@fullcalendar/react/skeleton.css";

package/src/components/agenda-composer.render.test.ts

@@ -0,0 +1,196 @@
+/**
+ * Typing is the create path, so the field is never off screen and the reading
+ * of the sentence is shown back with the words each part came from. Where the
+ * sentence has two honest readings the reader is asked, and that question is a
+ * control rather than a note — both are asserted here.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	AgendaComposer,
+	type AgendaComposerProps,
+	AgendaPhraseField,
+	PhraseReading,
+} from "./agenda-composer.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	EventDraft,
+} from "./calendar-types.js";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "c1",
+	location: "",
+	guests: "Jane",
+	notes: "",
+	repeat: "",
+};
+
+const parse: AgendaParse = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	dateText: "friday",
+	startTime: "13:00",
+	startTimeText: "1pm",
+	endTime: "14:00",
+	durationMinutes: 60,
+	durationText: "",
+	attendees: ["Jane"],
+	attendeesText: "with Jane",
+	location: "",
+	locationText: "",
+	repeat: "",
+	repeatText: "",
+	assumptions: ["An hour, because the sentence never said."],
+	unresolved: [],
+	choices: [],
+};
+
+const ambiguous: AgendaParse = {
+	...parse,
+	unresolved: ["No place given."],
+	choices: [
+		{
+			id: "which_friday",
+			question: "Which Friday?",
+			source: "friday",
+			options: [
+				{ id: "this", label: "12 June", date: "2026-06-12", startTime: "" },
+				{ id: "next", label: "19 June", date: "2026-06-19", startTime: "" },
+			],
+			chosenId: "this",
+		},
+	],
+};
+
+const base: AgendaComposerProps = {
+	phrase: "lunch with Jane friday 1pm",
+	onPhraseChange: () => {},
+	parse,
+	picks: {},
+	onPick: () => {},
+	draft,
+	onDraftChange: () => {},
+	calendars,
+	expanded: false,
+	onToggleExpanded: () => {},
+	onSave: () => {},
+	onCancel: () => {},
+	open: true,
+	onOpen: () => {},
+};
+
+const render = (props: Partial<AgendaComposerProps> = {}) =>
+	renderToString(createElement(AgendaComposer, { ...base, ...props }));
+
+describe("AgendaPhraseField", () => {
+	it("names the field rather than leaving the placeholder to do it", () => {
+		const html = renderToString(
+			createElement(AgendaPhraseField, {
+				phrase: "",
+				onPhraseChange: () => {},
+				onOpen: () => {},
+				onCommit: () => {},
+			}),
+		);
+		assert.match(html, /aria-label="Describe the event"/);
+		assert.match(html, /placeholder="lunch with Jane friday 1pm"/);
+	});
+
+	it("grows the field where a finger has to hit it", () => {
+		const html = renderToString(
+			createElement(AgendaPhraseField, {
+				phrase: "",
+				onPhraseChange: () => {},
+				onOpen: () => {},
+				onCommit: () => {},
+				touch: true,
+			}),
+		);
+		assert.match(html, /min-h-11/);
+	});
+});
+
+describe("AgendaComposer", () => {
+	it("folds the form away until the reader opens it", () => {
+		assert.doesNotMatch(render({ open: false }), /Northwind/);
+		assert.match(render(), /Northwind/);
+	});
+
+	it("shows the reading back with the words each part came from", () => {
+		const html = render();
+		assert.match(html, /When/);
+		assert.match(html, /friday 1pm/);
+		assert.match(html, /Fri 12 Jun 13:00 – 14:00/);
+	});
+
+	it("keeps the reading off screen while there is nothing to read", () => {
+		const html = render({ phrase: "  " });
+		assert.doesNotMatch(html, /An hour, because the sentence never said./);
+		assert.doesNotMatch(html, /bg-accent-2-soft/);
+	});
+
+	it("says a date on its own when the sentence gave no clock", () => {
+		const html = renderToString(
+			createElement(PhraseReading, {
+				parse: { ...parse, startTime: "", startTimeText: "" },
+				picks: {},
+				onPick: () => {},
+			}),
+		);
+		assert.match(html, /Fri 12 Jun/);
+		assert.doesNotMatch(html, /13:00/);
+	});
+
+	it("asks about a reading it could not settle instead of choosing", () => {
+		const html = render({ parse: ambiguous });
+		assert.match(html, /Which Friday\?/);
+		assert.match(html, /12 June/);
+		assert.match(html, /19 June/);
+	});
+
+	it("says which reading is currently applied", () => {
+		const html = render({ parse: ambiguous });
+		assert.match(html, /aria-pressed="true"/);
+		assert.match(html, /aria-pressed="false"/);
+	});
+
+	it("lets an answer override the reading the parser chose", () => {
+		const html = renderToString(
+			createElement(PhraseReading, {
+				parse: ambiguous,
+				picks: { which_friday: "next" },
+				onPick: () => {},
+			}),
+		);
+		const chosen = html.indexOf('aria-pressed="true"');
+		assert.ok(chosen > html.indexOf("12 June"), "the second option is pressed");
+	});
+
+	it("separates what it assumed from what the sentence never said", () => {
+		assert.match(render(), /An hour, because the sentence never said\./);
+		assert.match(render({ parse: ambiguous }), /No place given\./);
+	});
+
+	it("names the guests the sentence carried", () => {
+		assert.match(render(), /with Jane/);
+	});
+});

package/src/components/agenda-composer.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { AgendaComposer, AgendaPhraseField } from "./agenda-composer.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	ChoicePicks,
+	EventDraft,
+} from "./calendar-types.js";
+
+/**
+ * Correcting the machine happens before the event exists. The sentence is read
+ * back with the words each part came from, and where it has two honest
+ * readings the composer asks rather than choosing.
+ */
+const meta: Meta<typeof AgendaComposer> = {
+	title: "Calendar/Agenda composer",
+	component: AgendaComposer,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="max-w-96">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof AgendaComposer>;
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "work",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "personal",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "work",
+	location: "",
+	guests: "Jane",
+	notes: "",
+	repeat: "",
+};
+
+const parse: AgendaParse = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	dateText: "friday",
+	startTime: "13:00",
+	startTimeText: "1pm",
+	endTime: "14:00",
+	durationMinutes: 60,
+	durationText: "",
+	attendees: ["Jane"],
+	attendeesText: "with Jane",
+	location: "",
+	locationText: "",
+	repeat: "",
+	repeatText: "",
+	assumptions: ["An hour long, because the sentence never said."],
+	unresolved: [],
+	choices: [],
+};
+
+const repeating: AgendaParse = {
+	...parse,
+	title: "Standup",
+	startTime: "09:30",
+	endTime: "09:45",
+	startTimeText: "9:30",
+	dateText: "every weekday",
+	repeat: "Every weekday",
+	repeatText: "every weekday",
+	attendees: [],
+	attendeesText: "",
+	assumptions: ["Fifteen minutes, because the sentence never said."],
+};
+
+const ambiguous: AgendaParse = {
+	...parse,
+	title: "Coffee with Marcus",
+	startTime: "08:00",
+	startTimeText: "at 8",
+	endTime: "09:00",
+	attendees: ["Marcus"],
+	attendeesText: "with Marcus",
+	unresolved: ["No place given."],
+	choices: [
+		{
+			id: "which_eight",
+			question: "Eight in the morning or eight at night?",
+			source: "at 8",
+			options: [
+				{ id: "am", label: "08:00", date: "", startTime: "08:00" },
+				{ id: "pm", label: "20:00", date: "", startTime: "20:00" },
+			],
+			chosenId: "am",
+		},
+	],
+};
+
+const base = {
+	onPhraseChange: () => {},
+	picks: {} as ChoicePicks,
+	onPick: () => {},
+	draft,
+	onDraftChange: () => {},
+	calendars,
+	expanded: false,
+	onToggleExpanded: () => {},
+	onSave: () => {},
+	onCancel: () => {},
+	onOpen: () => {},
+};
+
+/** The field on its own — where the composer starts every time. */
+export const FieldOnly: Story = {
+	render: () => (
+		<AgendaPhraseField
+			phrase=""
+			onPhraseChange={() => {}}
+			onOpen={() => {}}
+			onCommit={() => {}}
+		/>
+	),
+};
+
+/** A sentence that read cleanly, with the reading shown back above the form. */
+export const Read: Story = {
+	args: {
+		...base,
+		phrase: "lunch with Jane friday 1pm",
+		parse,
+		open: true,
+	},
+};
+
+/** A rule the sentence carried, named as a rule rather than as one morning. */
+export const Repeating: Story = {
+	args: {
+		...base,
+		phrase: "standup every weekday 9:30",
+		parse: repeating,
+		draft: { ...draft, title: "Standup", repeat: "Every weekday" },
+		open: true,
+	},
+};
+
+/** Two honest readings: the question is a control, and the answer is one tap. */
+export const Ambiguous: Story = {
+	args: {
+		...base,
+		phrase: "coffee with Marcus at 8",
+		parse: ambiguous,
+		draft: { ...draft, title: "Coffee with Marcus", startTime: "08:00" },
+		open: true,
+	},
+};
+
+/** Folded away until there is something to correct. */
+export const Folded: Story = {
+	args: {
+		...base,
+		phrase: "lunch with Jane friday 1pm",
+		parse,
+		open: false,
+	},
+};
+
+/** Grown for a phone, where the form is the whole screen. */
+export const Touch: Story = {
+	args: {
+		...base,
+		phrase: "coffee with Marcus at 8",
+		parse: ambiguous,
+		open: true,
+		touch: true,
+	},
+};
+
+/** Answering the question moves the reading; nothing is settled behind you. */
+export const Interactive: Story = {
+	render: () => {
+		const [picks, setPicks] = useState<ChoicePicks>({});
+		const [phrase, setPhrase] = useState("coffee with Marcus at 8");
+		const [open, setOpen] = useState(true);
+		const [expanded, setExpanded] = useState(false);
+		const [current, setCurrent] = useState(draft);
+		return (
+			<AgendaComposer
+				{...base}
+				phrase={phrase}
+				onPhraseChange={setPhrase}
+				parse={ambiguous}
+				picks={picks}
+				onPick={(choiceId, optionId) =>
+					setPicks((previous) => ({ ...previous, [choiceId]: optionId }))
+				}
+				draft={current}
+				onDraftChange={setCurrent}
+				expanded={expanded}
+				onToggleExpanded={() => setExpanded((value) => !value)}
+				open={open}
+				onOpen={() => setOpen(true)}
+			/>
+		);
+	},
+};