feat(client): add json-render catalog and registry (#67)

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

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

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

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

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

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