feat: add @aelis/components package with JRX definitions

JRX component wrappers for the aelis-client UI components,
enabling server-side feed item rendering via json-render.

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/package.json

@@ -18,7 +18,6 @@
 		"@expo-google-fonts/inter": "^0.4.2",
 		"@expo-google-fonts/source-serif-4": "^0.4.1",
 		"@expo/vector-icons": "^15.0.3",
-		"@json-render/react-native": "^0.13.0",
 		"@react-navigation/bottom-tabs": "^7.4.0",
 		"@react-navigation/elements": "^2.6.3",
 		"@react-navigation/native": "^7.1.8",
@@ -46,8 +45,7 @@
 		"react-native-svg": "15.12.1",
 		"react-native-web": "~0.21.0",
 		"react-native-worklets": "0.5.1",
-		"twrnc": "^4.16.0",
+		"twrnc": "^4.16.0"
-		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/react": "~19.1.0",

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" />}
+					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
-					trailingIcon={<Button.Icon name="chevron-down" />}
+					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/catalog.ts

@@ -1,68 +0,0 @@
-import { defineCatalog } from "@json-render/core"
-import { schema } from "@json-render/react-native/schema"
-import { z } from "zod"
-
-export const catalog = defineCatalog(schema, {
-	components: {
-		View: {
-			props: z.object({
-				style: z.string().nullable(),
-			}),
-			slots: ["default"],
-			description:
-				"Generic layout container. The style prop accepts a twrnc class string (e.g. 'flex-row gap-2 p-4 items-center').",
-			example: { style: "flex-row gap-2 p-4" },
-		},
-		Button: {
-			props: z.object({
-				label: z.string(),
-				leadingIcon: z.string().nullable(),
-				trailingIcon: z.string().nullable(),
-			}),
-			events: ["press"],
-			slots: [],
-			description:
-				"Pressable button with a label and optional Feather icons. Icon values are Feather icon names (e.g. 'plus', 'arrow-right'). Bind on.press to trigger an action.",
-			example: { label: "Add item", leadingIcon: "plus", trailingIcon: null },
-		},
-		FeedCard: {
-			props: z.object({
-				style: z.string().nullable(),
-			}),
-			slots: ["default"],
-			description: "Bordered card container for feed content. The style prop accepts a twrnc class string.",
-			example: { style: "p-4 gap-2" },
-		},
-		SansSerifText: {
-			props: z.object({
-				text: z.string(),
-				style: z.string().nullable(),
-			}),
-			slots: [],
-			description:
-				"Sans-serif text (Inter font). The style prop accepts a twrnc class string for size, weight, color, etc.",
-			example: { text: "Hello world", style: "text-base font-medium" },
-		},
-		SerifText: {
-			props: z.object({
-				text: z.string(),
-				style: z.string().nullable(),
-			}),
-			slots: [],
-			description:
-				"Serif text (Source Serif 4 font). The style prop accepts a twrnc class string for size, color, etc.",
-			example: { text: "Heading", style: "text-xl" },
-		},
-		MonospaceText: {
-			props: z.object({
-				text: z.string(),
-				style: z.string().nullable(),
-			}),
-			slots: [],
-			description:
-				"Monospace text (Menlo font). The style prop accepts a twrnc class string for size, color, etc.",
-			example: { text: "const x = 42", style: "text-sm" },
-		},
-	},
-	actions: {},
-})

apps/aelis-client/src/json-render/index.ts

@@ -1,2 +0,0 @@
-export { catalog } from "./catalog"
-export { registry } from "./registry"

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

@@ -1,39 +0,0 @@
-import { defineRegistry } from "@json-render/react-native"
-import { View } from "react-native"
-import tw from "twrnc"
-
-import { Button } from "@/components/ui/button"
-import { FeedCard } from "@/components/ui/feed-card"
-import { MonospaceText } from "@/components/ui/monospace-text"
-import { SansSerifText } from "@/components/ui/sans-serif-text"
-import { SerifText } from "@/components/ui/serif-text"
-
-import { catalog } from "./catalog"
-
-type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
-
-export const { registry } = defineRegistry(catalog, {
-	components: {
-		View: ({ props, children }) => <View style={props.style ? tw`${props.style}` : undefined}>{children}</View>,
-		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}
-				onPress={() => emit("press")}
-			/>
-		),
-		FeedCard: ({ props, children }) => (
-			<FeedCard style={props.style ? tw`${props.style}` : undefined}>{children}</FeedCard>
-		),
-		SansSerifText: ({ props }) => (
-			<SansSerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SansSerifText>
-		),
-		SerifText: ({ props }) => (
-			<SerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SerifText>
-		),
-		MonospaceText: ({ props }) => (
-			<MonospaceText style={props.style ? tw`${props.style}` : undefined}>{props.text}</MonospaceText>
-		),
-	},
-})

bun.lock

@@ -6,7 +6,7 @@
       "name": "aelis",
       "devDependencies": {
         "@json-render/core": "^0.12.1",
-        "@nym.sh/jrx": "^0.2.0",
+        "@nym.sh/jrx": "^0.1.0",
         "@types/bun": "latest",
         "oxfmt": "^0.24.0",
         "oxlint": "^1.39.0",
@@ -42,7 +42,6 @@
         "@expo-google-fonts/inter": "^0.4.2",
         "@expo-google-fonts/source-serif-4": "^0.4.1",
         "@expo/vector-icons": "^15.0.3",
-        "@json-render/react-native": "^0.13.0",
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
@@ -71,7 +70,6 @@
         "react-native-web": "~0.21.0",
         "react-native-worklets": "0.5.1",
         "twrnc": "^4.16.0",
-        "zod": "^4.3.6",
       },
       "devDependencies": {
         "@types/react": "~19.1.0",
@@ -177,15 +175,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",
@@ -674,8 +667,6 @@
 
     "@json-render/core": ["@json-render/core@0.12.1", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-1tV/481GPHmIRd6lXfWcTaIslQusmDg5lzcSBzWLkSXjF9sjjyOQL090in7uHT4tOMWkdmlEJOW5H9C72PsUEQ=="],
 
-    "@json-render/react-native": ["@json-render/react-native@0.13.0", "", { "dependencies": { "@json-render/core": "0.13.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-native": ">=0.71.0", "zod": "^4.0.0" } }, "sha512-uUrK28xPb7LuyYsi9cTnvrnXnVBG0OwU5Up35aaXwcWMLrfqxJ7oWfF97HlDvZIckQtm0VEngAXhHMW97qBEkg=="],
-
     "@mjackson/node-fetch-server": ["@mjackson/node-fetch-server@0.2.0", "", {}, "sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng=="],
 
     "@mongodb-js/saslprep": ["@mongodb-js/saslprep@1.4.6", "", { "dependencies": { "sparse-bitfield": "^3.0.3" } }, "sha512-y+x3H1xBZd38n10NZF/rEBlvDOOMQ6LKUTHqr8R9VkJ+mmQOYtJFxIlkkK8fZrtOiL6VixbOBWMbZGBdal3Z1g=="],
@@ -696,7 +687,7 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
-    "@nym.sh/jrx": ["@nym.sh/jrx@0.2.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-jd7Z1Q6T21366MtSUnwCFiu6Yl1AdNc9s5m6HxeUg265P+0enZCiyyxOuHsFwvpUcSEs/2DVBsqfMptdca44lA=="],
+    "@nym.sh/jrx": ["@nym.sh/jrx@0.1.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-mu6fkAP/TI9FuP8A4WMCrcucpUtWF5xBTcETnrjOtvEED9i+7sQKuoOyhJeF6QaSuUkAA/8t3Xx3kYUjcAPFbw=="],
 
     "@oclif/core": ["@oclif/core@4.8.4", "", { "dependencies": { "ansi-escapes": "^4.3.2", "ansis": "^3.17.0", "clean-stack": "^3.0.1", "cli-spinners": "^2.9.2", "debug": "^4.4.3", "ejs": "^3.1.10", "get-package-type": "^0.1.0", "indent-string": "^4.0.0", "is-wsl": "^2.2.0", "lilconfig": "^3.1.3", "minimatch": "^10.2.4", "semver": "^7.7.3", "string-width": "^4.2.3", "supports-color": "^8", "tinyglobby": "^0.2.14", "widest-line": "^3.1.0", "wordwrap": "^1.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-UTAqwXJJyRvLBvosL+1uPZYSpr8lEHgUb/EVGbPXo5WZqUIBHfJ0sR2bkBEsrj00/ar4IegKxx4YK0wn2c8SQg=="],
 
@@ -3476,8 +3467,6 @@
 
     "@jest/transform/write-file-atomic": ["write-file-atomic@4.0.2", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" } }, "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg=="],
 
-    "@json-render/react-native/@json-render/core": ["@json-render/core@0.13.0", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-CXmCsc8BHDRq45ScVd+qgvjTbwZHPVpVD05WnTqgDxqfY3LGXu5vxaQRSwYoEodg/DGcZq/4HSj4ipVvrzy3qQ=="],
-
     "@mrleebo/prisma-ast/lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
 
     "@oclif/core/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],

package.json

@@ -15,7 +15,7 @@
 	},
 	"devDependencies": {
 		"@json-render/core": "^0.12.1",
-		"@nym.sh/jrx": "^0.2.0",
+		"@nym.sh/jrx": "^0.1.0",
 		"@types/bun": "latest",
 		"oxfmt": "^0.24.0",
 		"oxlint": "^1.39.0"

packages/aelis-core/src/feed.ts

@@ -79,12 +79,6 @@ export interface FeedItem<
 	slots?: Record<string, Slot>
 }
 
-/** Takes a FeedItem and returns a JRX node tree for rendering. */
-export type FeedItemRenderer<
-	TType extends string = string,
-	TData extends Record<string, unknown> = Record<string, unknown>,
-> = (item: FeedItem<TType, TData>) => JrxNode
-
 /** A FeedItem with a JRX UI tree attached for client-side rendering. */
 export interface RenderedFeedItem<
 	TType extends string = string,

packages/aelis-core/src/index.ts

@@ -7,7 +7,7 @@ export type { ActionDefinition } from "./action"
 export { UnknownActionError } from "./action"
 
 // Feed
-export type { FeedItem, FeedItemRenderer, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
+export type { FeedItem, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
 export { TimeRelevance } from "./feed"
 
 // Feed Source

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>
-	)
-}

packages/aelis-source-tfl/tsconfig.json

@@ -1,7 +0,0 @@
-{
-	"extends": "../../tsconfig.json",
-	"compilerOptions": {
-		"jsxImportSource": "@nym.sh/jrx"
-	},
-	"include": ["src"]
-}