@remit/ui 0.0.113 → 0.0.115

package/src/components/calendar-toolbar.tsx

@@ -0,0 +1,178 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { type ReactNode, useId } from "react";
+import { cn } from "../lib/cn.js";
+import type { CalendarViewId } from "./calendar-types.js";
+
+export interface SegmentOption<T extends string> {
+	value: T;
+	label: string;
+	/** Shown instead of `label` where the control has to fit a thumb. */
+	shortLabel: string;
+}
+
+/**
+ * A flat choice, drawn the way the nav sidebar draws a picked mailbox: weight
+ * and hue mark what is on, and nothing is raised. The calendar's toolbar and the
+ * nav are the same act — choosing what the pane shows — so they look the same.
+ */
+export function segmentClassName(active: boolean): string {
+	return cn(
+		"flex cursor-pointer items-center justify-center rounded-md px-2 font-medium transition-colors",
+		"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+		active
+			? "bg-accent-2-soft text-accent-2"
+			: "text-fg-muted hover:bg-surface-sunken hover:text-fg",
+	);
+}
+
+export interface SegmentedProps<T extends string> {
+	options: SegmentOption<T>[];
+	value: T;
+	onChange: (value: T) => void;
+	/** Grows every segment to a 44px touch target. */
+	touch?: boolean;
+	ariaLabel: string;
+	className?: string;
+}
+
+function Segmented<T extends string>({
+	options,
+	value,
+	onChange,
+	touch,
+	ariaLabel,
+	className,
+}: SegmentedProps<T>) {
+	const group = useId();
+	return (
+		<fieldset className={cn("inline-flex items-center gap-0.5", className)}>
+			<legend className="sr-only">{ariaLabel}</legend>
+			{options.map((option) => (
+				<label
+					key={option.value}
+					className={cn(
+						segmentClassName(value === option.value),
+						touch ? "min-h-11 flex-1 text-sm" : "h-7 text-xs",
+					)}
+				>
+					<input
+						type="radio"
+						name={group}
+						value={option.value}
+						checked={value === option.value}
+						onChange={() => onChange(option.value)}
+						className="sr-only"
+					/>
+					{touch ? option.shortLabel : option.label}
+				</label>
+			))}
+		</fieldset>
+	);
+}
+
+const VIEW_OPTIONS: SegmentOption<CalendarViewId>[] = [
+	{ value: "year", label: "Year", shortLabel: "Y" },
+	{ value: "month", label: "Month", shortLabel: "M" },
+	{ value: "week", label: "Week", shortLabel: "W" },
+	{ value: "day", label: "Day", shortLabel: "D" },
+	{ value: "agenda", label: "Agenda", shortLabel: "List" },
+];
+
+export interface CalendarViewSwitchProps {
+	value: CalendarViewId;
+	onChange: (view: CalendarViewId) => void;
+	/** Restricts the ladder — a phone has no room for a year grid. */
+	views?: CalendarViewId[];
+	touch?: boolean;
+	className?: string;
+}
+
+/**
+ * The zoom ladder. Each step keeps the date in view, so moving between them is
+ * changing magnification rather than opening a different screen.
+ */
+export function CalendarViewSwitch({
+	value,
+	onChange,
+	views,
+	touch,
+	className,
+}: CalendarViewSwitchProps) {
+	const options = views
+		? VIEW_OPTIONS.filter((option) => views.includes(option.value))
+		: VIEW_OPTIONS;
+	return (
+		<Segmented
+			ariaLabel="Calendar view"
+			options={options}
+			value={value}
+			onChange={onChange}
+			touch={touch}
+			className={className}
+		/>
+	);
+}
+
+export interface CalendarDateNavProps {
+	/** The range on screen, already formatted. */
+	title: string;
+	onPrev: () => void;
+	onNext: () => void;
+	onToday: () => void;
+	/** Right-hand controls: the view switch, whatever else the view owns. */
+	children?: ReactNode;
+	touch?: boolean;
+}
+
+/**
+ * Back, forward, and Today. Today lands on the same target from every view and
+ * every distance away, so it is a way home rather than a jump whose result
+ * depends on where you were.
+ */
+export function CalendarDateNav({
+	title,
+	onPrev,
+	onNext,
+	onToday,
+	children,
+	touch,
+}: CalendarDateNavProps) {
+	const stepClass = cn(
+		"flex items-center justify-center rounded-md text-fg-muted outline-none transition-colors hover:bg-surface-sunken hover:text-fg focus-visible:ring-2 focus-visible:ring-ring",
+		touch ? "size-11" : "size-7",
+	);
+	return (
+		<div className="flex min-w-0 items-center gap-2">
+			<button
+				type="button"
+				onClick={onPrev}
+				aria-label="Previous"
+				className={stepClass}
+			>
+				<ChevronLeft className="size-4" />
+			</button>
+			<button
+				type="button"
+				onClick={onNext}
+				aria-label="Next"
+				className={stepClass}
+			>
+				<ChevronRight className="size-4" />
+			</button>
+			<button
+				type="button"
+				onClick={onToday}
+				className={cn(
+					"rounded-md border border-line px-2.5 font-medium text-fg outline-none transition-colors hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring",
+					touch ? "min-h-11 text-sm" : "h-7 text-xs",
+				)}
+			>
+				Today
+			</button>
+			<h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+				{title}
+			</h2>
+			{children}
+		</div>
+	);
+}

package/src/components/calendar-types.ts

@@ -0,0 +1,135 @@
+/**
+ * The shapes the calendar surfaces pass around. Presentational only: a
+ * component here takes one of these and renders it, and every mutation leaves
+ * through a callback. Nothing in this file knows where the data came from.
+ */
+
+/** One of the six per-calendar hues declared in `tokens.css`. */
+export type CalendarColorId =
+	| "cal-1"
+	| "cal-2"
+	| "cal-3"
+	| "cal-4"
+	| "cal-5"
+	| "cal-6";
+
+export const calendarColorIds: CalendarColorId[] = [
+	"cal-1",
+	"cal-2",
+	"cal-3",
+	"cal-4",
+	"cal-5",
+	"cal-6",
+];
+
+export type RsvpState = "accepted" | "tentative" | "declined" | "noReply";
+
+export interface CalendarAttendee {
+	name: string;
+	email: string;
+	rsvp: RsvpState;
+	/** The one attendee who owns the invitation, if any is known. */
+	role: "organizer" | "attendee";
+}
+
+export interface CalendarDescriptor {
+	id: string;
+	/** The mail account this calendar belongs to, so both nav trees line up. */
+	accountId: string;
+	accountLabel: string;
+	name: string;
+	color: CalendarColorId;
+}
+
+/**
+ * How much the source told us about the zone. `ambiguous` is a first-class
+ * state: a mail that said "3pm" and nothing else has no zone, and the UI says
+ * so rather than assuming the reader's.
+ */
+export type ZoneCertainty = "local" | "explicit" | "ambiguous";
+
+export interface CalendarEventData {
+	id: string;
+	calendarId: string;
+	title: string;
+	/** ISO 8601 with an explicit offset. */
+	start: string;
+	end: string;
+	allDay: boolean;
+	location: string;
+	notes: string;
+	attendees: CalendarAttendee[];
+	/**
+	 * The reader's own reply. Kept apart from `attendees`: how an event is drawn
+	 * turns on what you said, not on what somebody else said.
+	 */
+	myRsvp: RsvpState;
+	/** The thread this event came from; empty when it was typed by hand. */
+	threadId: string;
+	threadSubject: string;
+	/** IANA zone, or empty when the source never said. */
+	timeZone: string;
+	zoneCertainty: ZoneCertainty;
+	/** The rule in words — "Every weekday, 09:15". Empty when it does not repeat. */
+	recurrenceRule: string;
+	/** Groups every instance of one series under a single object. */
+	seriesId: string;
+	/**
+	 * This instance was moved or rewritten away from the rule and no longer
+	 * matches it. The series still owns it, so the next edit still asks scope.
+	 */
+	seriesException: boolean;
+	status: "confirmed" | "tentative";
+}
+
+/**
+ * A candidate read out of mail. It is deliberately not a `CalendarEventData`:
+ * nothing reaches the grid until a person confirms it, so a suggestion cannot
+ * be mistaken for an event by type, let alone by pixel.
+ */
+export interface EventSuggestion {
+	id: string;
+	title: string;
+	start: string;
+	end: string;
+	allDay: boolean;
+	location: string;
+	/** The mail it was read out of. Always present — there is no other source. */
+	threadId: string;
+	threadSubject: string;
+	sender: string;
+	/** 0–1. The component derives its own wording; the seam carries the value. */
+	confidence: number;
+	/** What the parse could not settle, empty when nothing. */
+	ambiguity: string;
+	suggestedCalendarId: string;
+	timeZone: string;
+	zoneCertainty: ZoneCertainty;
+}
+
+/** Which instances of a series an edit applies to, chosen before the edit. */
+export type RecurrenceScope = "this" | "following" | "all";
+
+/**
+ * The zoom levels of one continuous strip of time, widest first. They are not
+ * separate screens: changing one keeps the date you were looking at.
+ */
+export type CalendarViewId = "year" | "month" | "week" | "day" | "agenda";
+
+/** What the editor holds while an event is being written. */
+export interface EventDraft {
+	title: string;
+	/** `YYYY-MM-DD`. */
+	date: string;
+	/** `HH:MM`, empty when the entry is all day. */
+	startTime: string;
+	endTime: string;
+	allDay: boolean;
+	calendarId: string;
+	location: string;
+	/** Free text, one guest per comma — the prototype does not resolve them. */
+	guests: string;
+	notes: string;
+	/** Human-readable rule, empty for a one-off. */
+	repeat: string;
+}

package/src/components/custom-recurrence.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+	type CustomRecurrence,
+	defaultCustomRecurrence,
+	defaultEndDate,
+	formatCustomRecurrence,
+} from "../lib/recurrence.js";
+import { CustomRecurrenceEditor } from "./custom-recurrence.js";
+
+const DATE = "2026-06-09";
+const START = "09:15";
+
+/**
+ * The rule the derived choices cannot express. Every part of it is a control —
+ * how often, which days, when it stops — and what comes out is the same
+ * sentence the picker reads back. Nobody types an RRULE and nobody is shown
+ * one; the line under each story is what the event would carry.
+ */
+const meta: Meta<typeof CustomRecurrenceEditor> = {
+	title: "Calendar/Custom recurrence",
+	component: CustomRecurrenceEditor,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof CustomRecurrenceEditor>;
+
+function Editor({ seed, touch }: { seed: CustomRecurrence; touch?: boolean }) {
+	const [rule, setRule] = useState(seed);
+	return (
+		<div className="flex max-w-sm flex-col gap-4 rounded-lg border border-line bg-surface p-5">
+			<h3 className="text-lg font-semibold text-fg">Custom recurrence</h3>
+			<CustomRecurrenceEditor
+				value={rule}
+				onChange={setRule}
+				date={DATE}
+				suggestedEndDate={defaultEndDate(DATE)}
+				touch={touch}
+			/>
+			<p className="border-t border-line pt-3 text-sm text-fg-muted">
+				{formatCustomRecurrence(rule, DATE, START)}
+			</p>
+		</div>
+	);
+}
+
+/** What it opens as: every week, on the day the event already sits on. */
+export const Weekly: Story = {
+	render: () => <Editor seed={defaultCustomRecurrence(DATE)} />,
+};
+
+/**
+ * Two days a week, fortnightly, until October. None of that is expressible as
+ * a choice derived from a date, which is the whole reason this exists.
+ */
+export const EveryOtherWeekUntilOctober: Story = {
+	name: "Every other week, until October",
+	render: () => (
+		<Editor
+			seed={{
+				interval: 2,
+				unit: "week",
+				weekdays: [1, 4],
+				monthlyMode: "dayOfMonth",
+				ends: { kind: "onDate", date: "2026-10-03" },
+			}}
+		/>
+	),
+};
+
+/**
+ * A monthly rule means two different things about the same date — the ninth,
+ * or the second Tuesday — and which one is meant is never derivable. So it is
+ * asked rather than assumed.
+ */
+export const MonthlyReadTwoWays: Story = {
+	name: "Monthly, read two ways",
+	render: () => (
+		<Editor
+			seed={{
+				...defaultCustomRecurrence(DATE),
+				unit: "month",
+				monthlyMode: "weekdayOfMonth",
+			}}
+		/>
+	),
+};
+
+/** An ending counted rather than dated: thirteen times and then it stops. */
+export const EndsAfterCount: Story = {
+	name: "Ends after a count",
+	render: () => (
+		<Editor
+			seed={{
+				...defaultCustomRecurrence(DATE),
+				ends: { kind: "afterCount", count: 13 },
+			}}
+		/>
+	),
+};
+
+/** The same controls at thumb size, as the phone step renders them. */
+export const Touch: Story = {
+	render: () => <Editor seed={defaultCustomRecurrence(DATE)} touch />,
+};