feat: add @aelis/components package with JRX definitions (#68)

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>

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