Compare commits

..

3 Commits

Author SHA1 Message Date
bf94c6aff6 chore(client): remove dead code chain
Remove ThemedText, useThemeColor, useColorScheme hook,
Colors, and Fonts — none referenced by current screens.

Co-authored-by: Ona <no-reply@ona.com>
2026-03-13 00:19:42 +00:00
80be2b711b fix(client): render showcase as JSX component
Co-authored-by: Ona <no-reply@ona.com>
2026-03-12 22:36:43 +00:00
fc08f828f2 feat(client): add component library and simplify routing
Remove tab layout, explore page, modal, and unused template
components. Replace with single-page layout and a dev component
showcase with per-component detail pages.

- Add Button with label prop, leading/trailing icon support
- Add FeedCard, SerifText, SansSerifText, MonospaceText
- Add colocated *.showcase.tsx files for each component
- Use Stack navigator with themed headers

Co-authored-by: Ona <no-reply@ona.com>
2026-03-12 01:55:39 +00:00
30 changed files with 202 additions and 1006 deletions

View File

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

View File

@@ -1,313 +0,0 @@
import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
import { contextKey } from "@aelis/core"
import { describe, expect, test } from "bun:test"
import { Hono } from "hono"
import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
import { UserSessionManager } from "../session/index.ts"
import { registerFeedHttpHandlers } from "./http.ts"
interface FeedResponse {
items: Array<{
id: string
type: string
priority: number
timestamp: string
data: Record<string, unknown>
}>
errors: Array<{ sourceId: string; error: string }>
}
function createStubSource(
id: string,
items: FeedItem[] = [],
contextEntries: readonly ContextEntry[] | null = null,
): FeedSource {
return {
id,
async listActions(): Promise<Record<string, ActionDefinition>> {
return {}
},
async executeAction(): Promise<unknown> {
return undefined
},
async fetchContext(): Promise<readonly ContextEntry[] | null> {
return contextEntries
},
async fetchItems() {
return items
},
}
}
function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
const app = new Hono()
registerFeedHttpHandlers(app, {
sessionManager,
authSessionMiddleware: mockAuthSessionMiddleware(userId),
})
return app
}
describe("GET /api/feed", () => {
test("returns 401 without auth", async () => {
const manager = new UserSessionManager({ providers: [] })
const app = buildTestApp(manager)
const res = await app.request("/api/feed")
expect(res.status).toBe(401)
})
test("returns cached feed when available", async () => {
const items: FeedItem[] = [
{
id: "item-1",
type: "test",
priority: 0.8,
timestamp: new Date("2025-01-01T00:00:00.000Z"),
data: { value: 42 },
},
]
const manager = new UserSessionManager({
providers: [() => createStubSource("test", items)],
})
const app = buildTestApp(manager, "user-1")
// Prime the cache
const session = manager.getOrCreate("user-1")
await session.engine.refresh()
expect(session.engine.lastFeed()).not.toBeNull()
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(1)
expect(body.items[0]!.id).toBe("item-1")
expect(body.items[0]!.type).toBe("test")
expect(body.items[0]!.priority).toBe(0.8)
expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
expect(body.errors).toHaveLength(0)
})
test("forces refresh when no cached feed", async () => {
const items: FeedItem[] = [
{
id: "fresh-1",
type: "test",
priority: 0.5,
timestamp: new Date("2025-06-01T12:00:00.000Z"),
data: { fresh: true },
},
]
const manager = new UserSessionManager({
providers: [() => createStubSource("test", items)],
})
const app = buildTestApp(manager, "user-1")
// No prior refresh — lastFeed() returns null, handler should call refresh()
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(1)
expect(body.items[0]!.id).toBe("fresh-1")
expect(body.items[0]!.data.fresh).toBe(true)
expect(body.errors).toHaveLength(0)
})
test("serializes source errors as message strings", async () => {
const failingSource: FeedSource = {
id: "failing",
async listActions() {
return {}
},
async executeAction() {
return undefined
},
async fetchContext() {
return null
},
async fetchItems() {
throw new Error("connection timeout")
},
}
const manager = new UserSessionManager({ providers: [() => failingSource] })
const app = buildTestApp(manager, "user-1")
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(0)
expect(body.errors).toHaveLength(1)
expect(body.errors[0]!.sourceId).toBe("failing")
expect(body.errors[0]!.error).toBe("connection timeout")
})
})
describe("GET /api/context", () => {
const weatherKey = contextKey("aelis.weather", "weather")
const weatherData = { temperature: 20, condition: "Clear" }
const contextEntries: readonly ContextEntry[] = [[weatherKey, weatherData]]
// The mock auth middleware always injects this hardcoded user ID
const mockUserId = "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn"
function buildContextApp(userId?: string) {
const manager = new UserSessionManager({
providers: [() => createStubSource("weather", [], contextEntries)],
})
const app = buildTestApp(manager, userId)
const session = manager.getOrCreate(mockUserId)
return { app, session }
}
test("returns 401 without auth", async () => {
const manager = new UserSessionManager({ providers: [] })
const app = buildTestApp(manager)
const res = await app.request('/api/context?key=["aelis.weather","weather"]')
expect(res.status).toBe(401)
})
test("returns 400 when key param is missing", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request("/api/context")
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("key")
})
test("returns 400 when key is invalid JSON", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request("/api/context?key=notjson")
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("key")
})
test("returns 400 when key is not an array", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request('/api/context?key="string"')
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("key")
})
test("returns 400 when key contains invalid element types", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request("/api/context?key=[true,null,[1,2]]")
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("key")
})
test("returns 400 when key is an empty array", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request("/api/context?key=[]")
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("key")
})
test("returns 400 when match param is invalid", async () => {
const { app } = buildContextApp("user-1")
const res = await app.request('/api/context?key=["aelis.weather"]&match=invalid')
expect(res.status).toBe(400)
const body = (await res.json()) as { error: string }
expect(body.error).toContain("match")
})
test("returns exact match with match=exact", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["aelis.weather","weather"]&match=exact')
expect(res.status).toBe(200)
const body = (await res.json()) as { match: string; value: unknown }
expect(body.match).toBe("exact")
expect(body.value).toEqual(weatherData)
})
test("returns 404 with match=exact when only prefix would match", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["aelis.weather"]&match=exact')
expect(res.status).toBe(404)
})
test("returns prefix match with match=prefix", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["aelis.weather"]&match=prefix')
expect(res.status).toBe(200)
const body = (await res.json()) as {
match: string
entries: Array<{ key: unknown[]; value: unknown }>
}
expect(body.match).toBe("prefix")
expect(body.entries).toHaveLength(1)
expect(body.entries[0]!.key).toEqual(["aelis.weather", "weather"])
expect(body.entries[0]!.value).toEqual(weatherData)
})
test("default mode returns exact match when available", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["aelis.weather","weather"]')
expect(res.status).toBe(200)
const body = (await res.json()) as { match: string; value: unknown }
expect(body.match).toBe("exact")
expect(body.value).toEqual(weatherData)
})
test("default mode falls back to prefix when no exact match", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["aelis.weather"]')
expect(res.status).toBe(200)
const body = (await res.json()) as {
match: string
entries: Array<{ key: unknown[]; value: unknown }>
}
expect(body.match).toBe("prefix")
expect(body.entries).toHaveLength(1)
expect(body.entries[0]!.value).toEqual(weatherData)
})
test("returns 404 when neither exact nor prefix matches", async () => {
const { app, session } = buildContextApp("user-1")
await session.engine.refresh()
const res = await app.request('/api/context?key=["nonexistent"]')
expect(res.status).toBe(404)
const body = (await res.json()) as { error: string }
expect(body.error).toBe("Context key not found")
})
})

View File

@@ -1,118 +0,0 @@
import type { Context, Hono } from "hono"
import { contextKey } from "@aelis/core"
import { createMiddleware } from "hono/factory"
import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
import type { UserSessionManager } from "../session/index.ts"
type Env = {
Variables: {
sessionManager: UserSessionManager
}
}
interface FeedHttpHandlersDeps {
sessionManager: UserSessionManager
authSessionMiddleware: AuthSessionMiddleware
}
export function registerFeedHttpHandlers(
app: Hono,
{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
) {
const inject = createMiddleware<Env>(async (c, next) => {
c.set("sessionManager", sessionManager)
await next()
})
app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
app.get("/api/context", inject, authSessionMiddleware, handleGetContext)
}
async function handleGetFeed(c: Context<Env>) {
const user = c.get("user")!
const sessionManager = c.get("sessionManager")
const session = sessionManager.getOrCreate(user.id)
const feed = await session.feed()
return c.json({
items: feed.items,
errors: feed.errors.map((e) => ({
sourceId: e.sourceId,
error: e.error.message,
})),
})
}
function handleGetContext(c: Context<Env>) {
const keyParam = c.req.query("key")
if (!keyParam) {
return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
}
let parsed: unknown
try {
parsed = JSON.parse(keyParam)
} catch {
return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
}
if (!Array.isArray(parsed) || parsed.length === 0 || !parsed.every(isContextKeyPart)) {
return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
}
const matchParam = c.req.query("match")
if (matchParam !== undefined && matchParam !== "exact" && matchParam !== "prefix") {
return c.json({ error: 'Invalid "match" parameter: must be "exact" or "prefix"' }, 400)
}
const user = c.get("user")!
const sessionManager = c.get("sessionManager")
const session = sessionManager.getOrCreate(user.id)
const context = session.engine.currentContext()
const key = contextKey(...parsed)
if (matchParam === "exact") {
const value = context.get(key)
if (value === undefined) {
return c.json({ error: "Context key not found" }, 404)
}
return c.json({ match: "exact", value })
}
if (matchParam === "prefix") {
const entries = context.find(key)
if (entries.length === 0) {
return c.json({ error: "Context key not found" }, 404)
}
return c.json({ match: "prefix", entries })
}
// Default: single find() covers both exact and prefix matches
const entries = context.find(key)
if (entries.length === 0) {
return c.json({ error: "Context key not found" }, 404)
}
// If exactly one result with the same key length, treat as exact match
if (entries.length === 1 && entries[0]!.key.length === parsed.length) {
return c.json({ match: "exact", value: entries[0]!.value })
}
return c.json({ match: "prefix", entries })
}
/** Validates that a value is a valid ContextKeyPart (string, number, or plain object of primitives). */
function isContextKeyPart(value: unknown): boolean {
if (typeof value === "string" || typeof value === "number") {
return true
}
if (typeof value === "object" && value !== null && !Array.isArray(value)) {
return Object.values(value).every(
(v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean",
)
}
return false
}

View File

@@ -0,0 +1,144 @@
import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
import { describe, expect, test } from "bun:test"
import { Hono } from "hono"
import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
import { UserSessionManager } from "../session/index.ts"
import { registerFeedHttpHandlers } from "./http.ts"
interface FeedResponse {
items: Array<{
id: string
type: string
priority: number
timestamp: string
data: Record<string, unknown>
}>
errors: Array<{ sourceId: string; error: string }>
}
function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
return {
id,
async listActions(): Promise<Record<string, ActionDefinition>> {
return {}
},
async executeAction(): Promise<unknown> {
return undefined
},
async fetchContext(): Promise<readonly ContextEntry[] | null> {
return null
},
async fetchItems() {
return items
},
}
}
function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
const app = new Hono()
registerFeedHttpHandlers(app, {
sessionManager,
authSessionMiddleware: mockAuthSessionMiddleware(userId),
})
return app
}
describe("GET /api/feed", () => {
test("returns 401 without auth", async () => {
const manager = new UserSessionManager({ providers: [] })
const app = buildTestApp(manager)
const res = await app.request("/api/feed")
expect(res.status).toBe(401)
})
test("returns cached feed when available", async () => {
const items: FeedItem[] = [
{
id: "item-1",
type: "test",
priority: 0.8,
timestamp: new Date("2025-01-01T00:00:00.000Z"),
data: { value: 42 },
},
]
const manager = new UserSessionManager({
providers: [() => createStubSource("test", items)],
})
const app = buildTestApp(manager, "user-1")
// Prime the cache
const session = manager.getOrCreate("user-1")
await session.engine.refresh()
expect(session.engine.lastFeed()).not.toBeNull()
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(1)
expect(body.items[0]!.id).toBe("item-1")
expect(body.items[0]!.type).toBe("test")
expect(body.items[0]!.priority).toBe(0.8)
expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
expect(body.errors).toHaveLength(0)
})
test("forces refresh when no cached feed", async () => {
const items: FeedItem[] = [
{
id: "fresh-1",
type: "test",
priority: 0.5,
timestamp: new Date("2025-06-01T12:00:00.000Z"),
data: { fresh: true },
},
]
const manager = new UserSessionManager({
providers: [() => createStubSource("test", items)],
})
const app = buildTestApp(manager, "user-1")
// No prior refresh — lastFeed() returns null, handler should call refresh()
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(1)
expect(body.items[0]!.id).toBe("fresh-1")
expect(body.items[0]!.data.fresh).toBe(true)
expect(body.errors).toHaveLength(0)
})
test("serializes source errors as message strings", async () => {
const failingSource: FeedSource = {
id: "failing",
async listActions() {
return {}
},
async executeAction() {
return undefined
},
async fetchContext() {
return null
},
async fetchItems() {
throw new Error("connection timeout")
},
}
const manager = new UserSessionManager({ providers: [() => failingSource] })
const app = buildTestApp(manager, "user-1")
const res = await app.request("/api/feed")
expect(res.status).toBe(200)
const body = (await res.json()) as FeedResponse
expect(body.items).toHaveLength(0)
expect(body.errors).toHaveLength(1)
expect(body.errors[0]!.sourceId).toBe("failing")
expect(body.errors[0]!.error).toBe("connection timeout")
})
})

View File

@@ -0,0 +1,45 @@
import type { Context, Hono } from "hono"
import { createMiddleware } from "hono/factory"
import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
import type { UserSessionManager } from "../session/index.ts"
type Env = {
Variables: {
sessionManager: UserSessionManager
}
}
interface FeedHttpHandlersDeps {
sessionManager: UserSessionManager
authSessionMiddleware: AuthSessionMiddleware
}
export function registerFeedHttpHandlers(
app: Hono,
{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
) {
const inject = createMiddleware<Env>(async (c, next) => {
c.set("sessionManager", sessionManager)
await next()
})
app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
}
async function handleGetFeed(c: Context<Env>) {
const user = c.get("user")!
const sessionManager = c.get("sessionManager")
const session = sessionManager.getOrCreate(user.id)
const feed = await session.feed()
return c.json({
items: feed.items,
errors: feed.errors.map((e) => ({
sourceId: e.sourceId,
error: e.error.message,
})),
})
}

View File

@@ -5,7 +5,7 @@ import { registerAuthHandlers } from "./auth/http.ts"
import { mockAuthSessionMiddleware, requireSession } from "./auth/session-middleware.ts"
import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
import { createLlmClient } from "./enhancement/llm-client.ts"
import { registerFeedHttpHandlers } from "./engine/http.ts"
import { registerFeedHttpHandlers } from "./feed/http.ts"
import { registerLocationHttpHandlers } from "./location/http.ts"
import { UserSessionManager } from "./session/index.ts"
import { WeatherSourceProvider } from "./weather/provider.ts"

View File

@@ -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",
"zod": "^4.3.6"
"twrnc": "^4.16.0"
},
"devDependencies": {
"@types/react": "~19.1.0",

View File

@@ -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>

View File

@@ -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

View File

@@ -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: {},
})

View File

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

View File

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

View File

@@ -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",
@@ -110,14 +108,6 @@
"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",
@@ -177,15 +167,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",
@@ -202,8 +187,6 @@
"@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"],
@@ -674,8 +657,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 +677,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 +3457,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=="],

View File

@@ -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"

View File

@@ -1,14 +0,0 @@
{
"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": "*"
}
}

View File

@@ -1,15 +0,0 @@
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)
}

View File

@@ -1,155 +0,0 @@
/** @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" })
})
})

View File

@@ -1,12 +0,0 @@
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)
}

View File

@@ -1,14 +0,0 @@
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"

View File

@@ -1,13 +0,0 @@
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)
}

View File

@@ -1,13 +0,0 @@
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)
}

View File

@@ -1,13 +0,0 @@
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)
}

View File

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

View File

@@ -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,

View File

@@ -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

View File

@@ -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": "*"
}
}

View File

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

View File

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

View File

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

View File

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