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>

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/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,43 +0,0 @@
-import Feather from "@expo/vector-icons/Feather"
-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"
-
-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: {
-		View: ({ props, children }) => <View style={props.style ? tw`${props.style}` : undefined}>{children}</View>,
-		Button: ({ props, emit }) => (
-			<Button
-				label={props.label}
-				leadingIcon={featherIcon(props.leadingIcon)}
-				trailingIcon={featherIcon(props.trailingIcon)}
-				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

@@ -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",
@@ -110,6 +108,14 @@
         "vite-tsconfig-paths": "^5.1.4",
       },
     },
+    "packages/aelis-components": {
+      "name": "@aelis/components",
+      "version": "0.0.0",
+      "peerDependencies": {
+        "@json-render/core": "*",
+        "@nym.sh/jrx": "*",
+      },
+    },
     "packages/aelis-core": {
       "name": "@aelis/core",
       "version": "0.0.0",
@@ -189,6 +195,8 @@
 
     "@aelis/backend": ["@aelis/backend@workspace:apps/aelis-backend"],
 
+    "@aelis/components": ["@aelis/components@workspace:packages/aelis-components"],
+
     "@aelis/core": ["@aelis/core@workspace:packages/aelis-core"],
 
     "@aelis/data-source-weatherkit": ["@aelis/data-source-weatherkit@workspace:packages/aelis-data-source-weatherkit"],
@@ -659,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=="],
@@ -3461,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=="],

packages/aelis-components/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@aelis/components",
+	"version": "0.0.0",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"scripts": {
+		"test": "bun test ./src"
+	},
+	"peerDependencies": {
+		"@json-render/core": "*",
+		"@nym.sh/jrx": "*"
+	}
+}

packages/aelis-components/src/button.ts

@@ -0,0 +1,15 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type ButtonProps = {
+	label: string
+	leadingIcon?: string
+	trailingIcon?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function Button(props: ButtonProps): JrxNode {
+	return jsx("Button", props)
+}

packages/aelis-components/src/components.test.tsx

@@ -0,0 +1,155 @@
+/** @jsxImportSource @nym.sh/jrx */
+
+import { render } from "@nym.sh/jrx"
+import { describe, expect, test } from "bun:test"
+
+import { Button } from "./button.ts"
+import { FeedCard } from "./feed-card.ts"
+import { MonospaceText } from "./monospace-text.ts"
+import { SansSerifText } from "./sans-serif-text.ts"
+import { SerifText } from "./serif-text.ts"
+
+describe("Button", () => {
+	test("renders with label", () => {
+		const spec = render(<Button label="Press me" />)
+
+		expect(spec.root).toStartWith("button-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("Button")
+		expect(root.props).toEqual({ label: "Press me" })
+	})
+
+	test("renders with icon props", () => {
+		const spec = render(<Button label="Add" leadingIcon="plus" trailingIcon="arrow-right" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("Button")
+		expect(root.props).toEqual({
+			label: "Add",
+			leadingIcon: "plus",
+			trailingIcon: "arrow-right",
+		})
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<Button label="Go" style="px-4 py-2" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("px-4 py-2")
+	})
+})
+
+describe("FeedCard", () => {
+	test("renders as container", () => {
+		const spec = render(<FeedCard />)
+
+		expect(spec.root).toStartWith("feedcard-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+	})
+
+	test("renders with a single child", () => {
+		const spec = render(
+			<FeedCard>
+				<SansSerifText content="Only child" />
+			</FeedCard>,
+		)
+
+		const root = spec.elements[spec.root]!
+		expect(root.children).toHaveLength(1)
+		const child = spec.elements[root.children![0]!]!
+		expect(child.type).toBe("SansSerifText")
+		expect(child.props).toEqual({ content: "Only child" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<FeedCard style="p-4 border rounded-lg" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("p-4 border rounded-lg")
+	})
+})
+
+describe("SansSerifText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<SansSerifText content="Hello" />)
+
+		expect(spec.root).toStartWith("sansseriftext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("SansSerifText")
+		expect(root.props).toEqual({ content: "Hello" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<SansSerifText content="Hello" style="text-sm text-stone-500" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-sm text-stone-500")
+	})
+})
+
+describe("SerifText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<SerifText content="Title" />)
+
+		expect(spec.root).toStartWith("seriftext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("SerifText")
+		expect(root.props).toEqual({ content: "Title" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<SerifText content="Title" style="text-xl" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-xl")
+	})
+})
+
+describe("MonospaceText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<MonospaceText content="code()" />)
+
+		expect(spec.root).toStartWith("monospacetext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("MonospaceText")
+		expect(root.props).toEqual({ content: "code()" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<MonospaceText content="code()" style="text-xs" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-xs")
+	})
+})
+
+describe("composite", () => {
+	test("FeedCard with nested children", () => {
+		const spec = render(
+			<FeedCard>
+				<SerifText content="Weather" />
+				<SansSerifText content="Sunny, 22C" />
+				<Button label="Details" />
+			</FeedCard>,
+		)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+		expect(root.children).toHaveLength(3)
+
+		const childKeys = root.children!
+		const child0 = spec.elements[childKeys[0]!]!
+		const child1 = spec.elements[childKeys[1]!]!
+		const child2 = spec.elements[childKeys[2]!]!
+
+		expect(child0.type).toBe("SerifText")
+		expect(child0.props).toEqual({ content: "Weather" })
+
+		expect(child1.type).toBe("SansSerifText")
+		expect(child1.props).toEqual({ content: "Sunny, 22C" })
+
+		expect(child2.type).toBe("Button")
+		expect(child2.props).toEqual({ label: "Details" })
+	})
+})

packages/aelis-components/src/feed-card.ts

@@ -0,0 +1,12 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type FeedCardProps = {
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function FeedCard(props: FeedCardProps): JrxNode {
+	return jsx("FeedCard", props)
+}

packages/aelis-components/src/index.ts

@@ -0,0 +1,14 @@
+export type { ButtonProps } from "./button.ts"
+export { Button } from "./button.ts"
+
+export type { FeedCardProps } from "./feed-card.ts"
+export { FeedCard } from "./feed-card.ts"
+
+export type { SansSerifTextProps } from "./sans-serif-text.ts"
+export { SansSerifText } from "./sans-serif-text.ts"
+
+export type { SerifTextProps } from "./serif-text.ts"
+export { SerifText } from "./serif-text.ts"
+
+export type { MonospaceTextProps } from "./monospace-text.ts"
+export { MonospaceText } from "./monospace-text.ts"

packages/aelis-components/src/monospace-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type MonospaceTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function MonospaceText(props: MonospaceTextProps): JrxNode {
+	return jsx("MonospaceText", props)
+}

packages/aelis-components/src/sans-serif-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type SansSerifTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function SansSerifText(props: SansSerifTextProps): JrxNode {
+	return jsx("SansSerifText", props)
+}

packages/aelis-components/src/serif-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type SerifTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function SerifText(props: SerifTextProps): JrxNode {
+	return jsx("SerifText", props)
+}

packages/aelis-components/tsconfig.json

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