feat(caldav): add FeedItemRenderer

Implement renderCalDavFeedItem using JRX JSX to render
CalDAV events as FeedCard components. Bump @nym.sh/jrx
to 0.2.0 for null/undefined child support.

Co-authored-by: Ona <no-reply@ona.com>

.github/workflows/test.yml

@@ -21,4 +21,4 @@ jobs:
         run: bun install --frozen-lockfile
 
       - name: Run tests
-        run: bun run test
+        run: bun test

apps/aelis-client/src/components/ui/button.showcase.tsx

@@ -1,3 +1,4 @@
+import Feather from "@expo/vector-icons/Feather"
 import { View } from "react-native"
 import tw from "twrnc"
 
@@ -14,22 +15,22 @@ function ButtonShowcase() {
 				<Button
 					style={tw`self-start`}
 					label="Add item"
-					leadingIcon={<Button.Icon name="plus" />}
+					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
 				/>
 			</Section>
 			<Section title="Trailing icon">
 				<Button
 					style={tw`self-start`}
 					label="Next"
-					trailingIcon={<Button.Icon name="arrow-right" />}
+					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
 				/>
 			</Section>
 			<Section title="Both icons">
 				<Button
 					style={tw`self-start`}
 					label="Download"
-					leadingIcon={<Button.Icon name="download" />}
-					trailingIcon={<Button.Icon name="chevron-down" />}
+					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
+					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
 				/>
 			</Section>
 		</View>

apps/aelis-client/src/components/ui/button.tsx

@@ -1,19 +1,8 @@
-import Feather from "@expo/vector-icons/Feather"
 import { type PressableProps, Pressable, View } from "react-native"
 import tw from "twrnc"
 
 import { SansSerifText } from "./sans-serif-text"
 
-type FeatherIconName = React.ComponentProps<typeof Feather>["name"]
-
-type ButtonIconProps = {
-	name: FeatherIconName
-}
-
-function ButtonIcon({ name }: ButtonIconProps) {
-	return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
-}
-
 type ButtonProps = Omit<PressableProps, "children"> & {
 	label: string
 	leadingIcon?: React.ReactNode
@@ -23,7 +12,7 @@ type ButtonProps = Omit<PressableProps, "children"> & {
 export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
 	const hasIcons = leadingIcon != null || trailingIcon != null
 
-	const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
+	const textElement = <SansSerifText style={tw`text-stone-200 font-medium`}>{label}</SansSerifText>
 
 	return (
 		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
@@ -39,5 +28,3 @@ export function Button({ style, label, leadingIcon, trailingIcon, ...props }: Bu
 		</Pressable>
 	)
 }
-
-Button.Icon = ButtonIcon

apps/aelis-client/src/json-render/registry.tsx

@@ -1,3 +1,4 @@
+import Feather from "@expo/vector-icons/Feather"
 import { defineRegistry } from "@json-render/react-native"
 import { View } from "react-native"
 import tw from "twrnc"
@@ -10,7 +11,10 @@ import { SerifText } from "@/components/ui/serif-text"
 
 import { catalog } from "./catalog"
 
-type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
+function featherIcon(name: string | null | undefined) {
+	if (!name) return undefined
+	return <Feather name={name as React.ComponentProps<typeof Feather>["name"]} size={18} color="#e7e5e4" />
+}
 
 export const { registry } = defineRegistry(catalog, {
 	components: {
@@ -18,8 +22,8 @@ export const { registry } = defineRegistry(catalog, {
 		Button: ({ props, emit }) => (
 			<Button
 				label={props.label}
-				leadingIcon={props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined}
-				trailingIcon={props.trailingIcon ? <Button.Icon name={props.trailingIcon as ButtonIconName} /> : undefined}
+				leadingIcon={featherIcon(props.leadingIcon)}
+				trailingIcon={featherIcon(props.trailingIcon)}
 				onPress={() => emit("press")}
 			/>
 		),

bun.lock

@@ -152,6 +152,7 @@
       "name": "@aelis/source-caldav",
       "version": "0.0.0",
       "dependencies": {
+        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "ical.js": "^2.1.0",
         "tsdav": "^2.1.7",
@@ -177,15 +178,10 @@
       "name": "@aelis/source-tfl",
       "version": "0.0.0",
       "dependencies": {
-        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "@aelis/source-location": "workspace:*",
         "arktype": "^2.1.0",
       },
-      "peerDependencies": {
-        "@json-render/core": "*",
-        "@nym.sh/jrx": "*",
-      },
     },
     "packages/aelis-source-weatherkit": {
       "name": "@aelis/source-weatherkit",

packages/aelis-source-caldav/package.json

@@ -9,6 +9,7 @@
 		"test:live": "bun run scripts/test-live.ts"
 	},
 	"dependencies": {
+		"@aelis/components": "workspace:*",
 		"@aelis/core": "workspace:*",
 		"ical.js": "^2.1.0",
 		"tsdav": "^2.1.7"

packages/aelis-source-caldav/src/index.ts

@@ -1,6 +1,7 @@
 export { CalDavCalendarKey, type CalendarContext } from "./calendar-context.ts"
 export { CalDavSource, type CalDavSourceOptions } from "./caldav-source.ts"
 export { parseICalEvents, type ICalTimeRange } from "./ical-parser.ts"
+export { renderCalDavFeedItem } from "./renderer.tsx"
 export {
 	AttendeeRole,
 	AttendeeStatus,

packages/aelis-source-caldav/src/renderer.tsx

@@ -0,0 +1,74 @@
+/** @jsxImportSource @nym.sh/jrx */
+
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { FeedCard, SansSerifText, SerifText } from "@aelis/components"
+
+import type { CalDavEventData } from "./types.ts"
+
+import { CalDavEventStatus } from "./types.ts"
+
+function formatTime(date: Date): string {
+	const hours = date.getHours()
+	const minutes = date.getMinutes()
+	const period = hours >= 12 ? "PM" : "AM"
+	const h = hours % 12 || 12
+	const m = minutes.toString().padStart(2, "0")
+	return `${h}:${m} ${period}`
+}
+
+function formatTimeRange(data: CalDavEventData): string {
+	if (data.isAllDay) {
+		return "All day"
+	}
+	return `${formatTime(data.startDate)} – ${formatTime(data.endDate)}`
+}
+
+function formatStatus(status: CalDavEventData["status"]): string | null {
+	if (status === CalDavEventStatus.Cancelled) return "Cancelled"
+	if (status === CalDavEventStatus.Tentative) return "Tentative"
+	return null
+}
+
+export const renderCalDavFeedItem: FeedItemRenderer<"caldav-event", CalDavEventData> = (item) => {
+	const { data, slots } = item
+	const statusLabel = formatStatus(data.status)
+	const attendeeCount = data.attendees.length
+
+	return (
+		<FeedCard>
+			{statusLabel ? <SansSerifText content={statusLabel} style="text-xs uppercase" /> : null}
+
+			<SerifText content={data.title} style="text-lg" />
+
+			<SansSerifText content={formatTimeRange(data)} style="text-sm" />
+
+			{data.calendarName ? (
+				<SansSerifText content={data.calendarName} style="text-sm text-secondary" />
+			) : null}
+
+			{data.location ? (
+				<SansSerifText content={data.location} style="text-sm text-secondary" />
+			) : null}
+
+			{attendeeCount > 0 ? (
+				<SansSerifText
+					content={`${attendeeCount} attendee${attendeeCount === 1 ? "" : "s"}`}
+					style="text-sm text-secondary"
+				/>
+			) : null}
+
+			{slots?.insight?.content ? (
+				<SansSerifText content={slots.insight.content} style="text-sm" />
+			) : null}
+
+			{slots?.preparation?.content ? (
+				<SansSerifText content={slots.preparation.content} style="text-sm" />
+			) : null}
+
+			{slots?.crossSource?.content ? (
+				<SansSerifText content={slots.crossSource.content} style="text-sm" />
+			) : null}
+		</FeedCard>
+	)
+}

packages/aelis-source-tfl/package.json

@@ -10,12 +10,7 @@
 	},
 	"dependencies": {
 		"@aelis/core": "workspace:*",
-		"@aelis/components": "workspace:*",
 		"@aelis/source-location": "workspace:*",
 		"arktype": "^2.1.0"
-	},
-	"peerDependencies": {
-		"@json-render/core": "*",
-		"@nym.sh/jrx": "*"
 	}
 }

packages/aelis-source-tfl/src/index.ts

@@ -11,4 +11,3 @@ export {
 	type TflLineStatus,
 	type TflSourceOptions,
 } from "./types.ts"
-export { renderTflAlert } from "./renderer.tsx"

packages/aelis-source-tfl/src/renderer.test.tsx

@@ -1,103 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-import { render } from "@nym.sh/jrx"
-import { describe, expect, test } from "bun:test"
-
-import type { TflAlertFeedItem } from "./types.ts"
-
-import { renderTflAlert } from "./renderer.tsx"
-
-function makeItem(overrides: Partial<TflAlertFeedItem["data"]> = {}): TflAlertFeedItem {
-	return {
-		id: "tfl-alert-northern-minor-delays",
-		type: "tfl-alert",
-		timestamp: new Date("2026-01-15T12:00:00Z"),
-		data: {
-			line: "northern",
-			lineName: "Northern",
-			severity: "minor-delays",
-			description: "Minor delays due to signal failure",
-			closestStationDistance: null,
-			...overrides,
-		},
-	}
-}
-
-describe("renderTflAlert", () => {
-	test("renders a FeedCard with title and description", () => {
-		const node = renderTflAlert(makeItem())
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		expect(root.type).toBe("FeedCard")
-		expect(root.children!.length).toBeGreaterThanOrEqual(2)
-
-		const title = spec.elements[root.children![0]!]!
-		expect(title.type).toBe("SansSerifText")
-		expect(title.props.content).toBe("Northern · Minor delays")
-
-		const body = spec.elements[root.children![1]!]!
-		expect(body.type).toBe("SansSerifText")
-		expect(body.props.content).toBe("Minor delays due to signal failure")
-	})
-
-	test("shows nearest station distance when available", () => {
-		const node = renderTflAlert(makeItem({ closestStationDistance: 0.35 }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		expect(root.children).toHaveLength(3)
-
-		const caption = spec.elements[root.children![2]!]!
-		expect(caption.type).toBe("SansSerifText")
-		expect(caption.props.content).toBe("Nearest station: 350m away")
-	})
-
-	test("formats distance in km when >= 1km", () => {
-		const node = renderTflAlert(makeItem({ closestStationDistance: 2.456 }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		const caption = spec.elements[root.children![2]!]!
-		expect(caption.props.content).toBe("Nearest station: 2.5km away")
-	})
-
-	test("formats near-1km boundary as km not meters", () => {
-		const node = renderTflAlert(makeItem({ closestStationDistance: 0.9999 }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		const caption = spec.elements[root.children![2]!]!
-		expect(caption.props.content).toBe("Nearest station: 1.0km away")
-	})
-
-	test("omits station distance when null", () => {
-		const node = renderTflAlert(makeItem({ closestStationDistance: null }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		// Title + body only, no caption (empty fragment doesn't produce a child)
-		const children = root.children!.filter((key) => {
-			const el = spec.elements[key]
-			return el && el.type !== "Fragment"
-		})
-		expect(children).toHaveLength(2)
-	})
-
-	test("renders closure severity label", () => {
-		const node = renderTflAlert(makeItem({ severity: "closure", lineName: "Central" }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		const title = spec.elements[root.children![0]!]!
-		expect(title.props.content).toBe("Central · Closed")
-	})
-
-	test("renders major delays severity label", () => {
-		const node = renderTflAlert(makeItem({ severity: "major-delays", lineName: "Jubilee" }))
-		const spec = render(node)
-
-		const root = spec.elements[spec.root]!
-		const title = spec.elements[root.children![0]!]!
-		expect(title.props.content).toBe("Jubilee · Major delays")
-	})
-})

packages/aelis-source-tfl/src/renderer.tsx

@@ -1,40 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-import type { FeedItemRenderer } from "@aelis/core"
-
-import { FeedCard, SansSerifText } from "@aelis/components"
-
-import type { TflAlertData } from "./types.ts"
-
-import { TflAlertSeverity } from "./types.ts"
-
-const SEVERITY_LABEL: Record<TflAlertSeverity, string> = {
-	[TflAlertSeverity.Closure]: "Closed",
-	[TflAlertSeverity.MajorDelays]: "Major delays",
-	[TflAlertSeverity.MinorDelays]: "Minor delays",
-}
-
-function formatDistance(km: number): string {
-	const meters = Math.round(km * 1000)
-	if (meters < 1000) {
-		return `${meters}m away`
-	}
-	return `${(meters / 1000).toFixed(1)}km away`
-}
-
-export const renderTflAlert: FeedItemRenderer<"tfl-alert", TflAlertData> = (item) => {
-	const { lineName, severity, description, closestStationDistance } = item.data
-	const severityLabel = SEVERITY_LABEL[severity]
-
-	return (
-		<FeedCard>
-			<SansSerifText content={`${lineName} · ${severityLabel}`} style="text-base font-semibold" />
-			<SansSerifText content={description} style="text-sm" />
-			{closestStationDistance !== null ? (
-				<SansSerifText
-					content={`Nearest station: ${formatDistance(closestStationDistance)}`}
-					style="text-xs text-stone-500"
-				/>
-			) : null}
-		</FeedCard>
-	)
-}