feat(core): add FeedItemRenderer type

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

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" />}
-					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>

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/registry.tsx

@@ -1,3 +1,4 @@
+import Feather from "@expo/vector-icons/Feather"
 import { defineRegistry } from "@json-render/react-native"
 import { View } from "react-native"
 import tw from "twrnc"
@@ -10,7 +11,10 @@ import { SerifText } from "@/components/ui/serif-text"
 
 import { catalog } from "./catalog"
 
-type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
+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: {
@@ -18,8 +22,8 @@ export const { registry } = defineRegistry(catalog, {
 		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}
+				leadingIcon={featherIcon(props.leadingIcon)}
+				trailingIcon={featherIcon(props.trailingIcon)}
 				onPress={() => emit("press")}
 			/>
 		),