@remit/ui 0.0.158 → 0.0.159

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.158",
+  "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-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>