@remit/ui 0.0.157 → 0.0.159

package/package.json

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

package/src/components/agenda-composer.tsx

@@ -136,6 +136,7 @@ export function AgendaComposer({
 					onCancel={onCancel}
 					saveLabel={saveLabel}
 					repeatEditable={repeatEditable}
+					guestsEditable
 					onCustomRepeat={onCustomRepeat}
 					touch={touch}
 					header={

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

@@ -124,3 +124,34 @@ describe("EventDetail", () => {
 		assert.match(html, /Recent mail · Priya Natarajan/);
 	});
 });
+
+/**
+ * A host that cannot write yet — the calendar before its API lands — passes
+ * neither action. A button that leads nowhere is worse than no button, so the
+ * header has to come back without them rather than with two that do nothing.
+ */
+describe("EventDetail with nowhere to write", () => {
+	const readOnly = renderToString(
+		createElement(EventDetail, {
+			event,
+			calendar,
+			whenText: "Wednesday 10 June · 10:00 – 11:30",
+			onClose: () => undefined,
+		}),
+	);
+
+	it("offers neither Edit nor Delete", () => {
+		assert.doesNotMatch(readOnly, />Edit</);
+		assert.doesNotMatch(readOnly, />Delete</);
+	});
+
+	it("still names the event, its calendar and when it is", () => {
+		assert.match(readOnly, /Q3 roadmap review/);
+		assert.match(readOnly, /Northwind/);
+		assert.match(readOnly, /10:00 – 11:30/);
+	});
+
+	it("keeps the way out of the pane", () => {
+		assert.match(readOnly, /aria-label="Close event"/);
+	});
+});

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

@@ -176,3 +176,20 @@ export const AmbiguousZone: Story = {
 		/>
 	),
 };
+
+/**
+ * The state the app itself renders while the calendar has no API to write
+ * through: the facts, the way back to the thread, and no control that would
+ * lead nowhere.
+ */
+export const NoActions: Story = {
+	render: () => (
+		<EventDetail
+			event={base}
+			calendar={calendar}
+			whenText="Wednesday 10 June · 10:00 – 11:30"
+			onClose={() => {}}
+			onOpenThread={() => {}}
+		/>
+	),
+};

package/src/components/event-detail.tsx

@@ -23,8 +23,13 @@ export interface EventDetailProps {
 	calendar: CalendarDescriptor;
 	/** Already formatted by the caller — the component owns no clock. */
 	whenText: string;
-	onEdit: () => void;
-	onDelete: () => void;
+	/**
+	 * Absent where the surface cannot write yet. A control that leads nowhere is
+	 * worse than no control, so the header renders each one only when it has
+	 * somewhere to go.
+	 */
+	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. */
@@ -171,23 +176,27 @@ export function EventDetail({
 				<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>
+				{onEdit && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Pencil className="size-3.5" />}
+						onClick={onEdit}
+					>
+						Edit
+					</Button>
+				)}
+				{onDelete && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Trash2 className="size-3.5" />}
+						onClick={onDelete}
+						className="text-danger"
+					>
+						Delete
+					</Button>
+				)}
 				{onClose && (
 					<button
 						type="button"

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

@@ -78,11 +78,27 @@ describe("EventEditor", () => {
 	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("takes no guests until a surface says it can store them", () => {
+		assert.doesNotMatch(render({ expanded: true }), /aria-label="Guests"/);
+		assert.match(
+			render({ expanded: true, guestsEditable: true }),
+			/aria-label="Guests"/,
+		);
+	});
+
+	it("drops the calendar picker where the event cannot be moved", () => {
+		assert.match(render({}), /Northwind/);
+		assert.doesNotMatch(render({ calendarEditable: false }), /Northwind/);
+		assert.doesNotMatch(
+			render({ expanded: true, calendarEditable: false }),
+			/Northwind/,
+		);
+	});
+
 	it("drops the clock fields for an all-day entry", () => {
 		const html = render({ draft: { ...draft, allDay: true } });
 		assert.doesNotMatch(html, /aria-label="Start time"/);

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

@@ -64,9 +64,13 @@ const backwards: EventDraft = {
 function Live({
 	startExpanded,
 	seed: initial = seed,
+	guestsEditable,
+	calendarEditable,
 }: {
 	startExpanded: boolean;
 	seed?: EventDraft;
+	guestsEditable?: boolean;
+	calendarEditable?: boolean;
 }) {
 	const [draft, setDraft] = useState(initial);
 	const [expanded, setExpanded] = useState(startExpanded);
@@ -78,6 +82,8 @@ function Live({
 				calendars={calendars}
 				expanded={expanded}
 				onToggleExpanded={() => setExpanded((open) => !open)}
+				guestsEditable={guestsEditable}
+				calendarEditable={calendarEditable}
 				onSave={() => {}}
 				onCancel={() => {}}
 			/>
@@ -99,6 +105,24 @@ export const EndBeforeStart: Story = {
 	render: () => <Live startExpanded={false} seed={backwards} />,
 };
 
+/**
+ * Guests are opt-in. A store with nowhere to put them leaves the field out, so
+ * the default form has none: a box that takes names and drops them is worse
+ * than no box, because the reader only finds out later.
+ */
+export const WithGuests: Story = {
+	render: () => <Live startExpanded guestsEditable />,
+};
+
+/**
+ * Editing an event that already exists. The collection a resource lives in is
+ * part of its address, so the calendar is read-only here rather than a picker
+ * that changes nothing.
+ */
+export const WithoutTheCalendarPicker: Story = {
+	render: () => <Live startExpanded calendarEditable={false} />,
+};
+
 /** All day takes the clock fields away, so there is no range left to reject. */
 export const AllDay: Story = {
 	render: () => (

package/src/components/event-editor.tsx

@@ -276,6 +276,18 @@ export interface EventEditorProps {
 	 * a single instance reads the rule back instead of offering to change it.
 	 */
 	repeatEditable?: boolean;
+	/**
+	 * Whether guests can be written here. Off unless a surface says otherwise: a
+	 * box that takes names and drops them is worse than no box, because the
+	 * reader only finds out later, from an event with nobody on it.
+	 */
+	guestsEditable?: boolean;
+	/**
+	 * Whether the event can be moved to another calendar. An edit cannot: the
+	 * collection a resource lives in is part of its address, so a picker that
+	 * changes it and saves nothing is a control that lies.
+	 */
+	calendarEditable?: boolean;
 	/** Opens the custom-rule editor. Absent leaves the derived choices alone. */
 	onCustomRepeat?: () => void;
 	/** Grows the controls for a rail. */
@@ -302,6 +314,8 @@ export function EventEditor({
 	saveLabel = "Add",
 	header,
 	repeatEditable = true,
+	guestsEditable = false,
+	calendarEditable = true,
 	onCustomRepeat,
 	touch,
 	className,
@@ -363,10 +377,12 @@ export function EventEditor({
 				{header}
 				<EventField label="Title">{title}</EventField>
 				<EventField label="When">{when}</EventField>
-				<EventField label="Calendar">{calendarPicker}</EventField>
+				{calendarEditable && (
+					<EventField label="Calendar">{calendarPicker}</EventField>
+				)}
 				<EventField label="Repeat">{repeat}</EventField>
 				<EventField label="Location">{location}</EventField>
-				<EventField label="Guests">{guests}</EventField>
+				{guestsEditable && <EventField label="Guests">{guests}</EventField>}
 				<EventField label="Notes">{notes}</EventField>
 				{actions}
 			</div>
@@ -381,7 +397,7 @@ export function EventEditor({
 
 			{title}
 			{when}
-			{calendarPicker}
+			{calendarEditable && calendarPicker}
 
 			{onToggleExpanded && (
 				<button
@@ -405,7 +421,7 @@ export function EventEditor({
 			{!folded && (
 				<div className="flex flex-col gap-2 border-t border-line pt-3">
 					{location}
-					{guests}
+					{guestsEditable && guests}
 					{repeat}
 					{notes}
 				</div>

package/src/components/nav-sidebar.tsx

@@ -560,9 +560,9 @@ export interface NavSidebarProps
 	 */
 	linkComponent?: NavLinkComponent;
 	/**
-	 * Whether the calendar destination sits under the daily brief. It is
-	 * "hidden" until the app has a route behind it — the prototype turns it on,
-	 * the shipping nav does not offer an entry that leads nowhere.
+	 * Whether the calendar destination sits under the daily brief. Hidden by
+	 * default so a host with no calendar route behind it does not offer an entry
+	 * that leads nowhere.
 	 */
 	calendarNav?: "hidden" | "shown";
 	/** Every saved query, most recently saved first. See `SavedSearchesGroup`. */