feat(client): add Button.Icon subcomponent (#70)

Introduce Button.Icon to enforce consistent icon styling
(size, theme-aware color) instead of hardcoding Feather
props at each call site. Update showcase and json-render
registry to use it.

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

apps/aelis-client/src/components/ui/button.showcase.tsx

@@ -1,4 +1,3 @@
-import Feather from "@expo/vector-icons/Feather"
 import { View } from "react-native"
 import tw from "twrnc"
 
@@ -15,22 +14,22 @@ function ButtonShowcase() {
 				<Button
 					style={tw`self-start`}
 					label="Add item"
-					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="plus" />}
 				/>
 			</Section>
 			<Section title="Trailing icon">
 				<Button
 					style={tw`self-start`}
 					label="Next"
-					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="arrow-right" />}
 				/>
 			</Section>
 			<Section title="Both icons">
 				<Button
 					style={tw`self-start`}
 					label="Download"
-					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
-					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="download" />}
+					trailingIcon={<Button.Icon name="chevron-down" />}
 				/>
 			</Section>
 		</View>

apps/aelis-client/src/components/ui/button.tsx

@@ -1,8 +1,19 @@
+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
@@ -12,7 +23,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-200 font-medium`}>{label}</SansSerifText>
+	const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
 
 	return (
 		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
@@ -28,3 +39,5 @@ export function Button({ style, label, leadingIcon, trailingIcon, ...props }: Bu
 		</Pressable>
 	)
 }
+
+Button.Icon = ButtonIcon

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

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

bun.lock

@@ -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",
@@ -152,7 +152,6 @@
       "name": "@aelis/source-caldav",
       "version": "0.0.0",
       "dependencies": {
-        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "ical.js": "^2.1.0",
         "tsdav": "^2.1.7",
@@ -692,7 +691,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=="],
 

package.json

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

packages/aelis-source-caldav/package.json

@@ -9,7 +9,6 @@
 		"test:live": "bun run scripts/test-live.ts"
 	},
 	"dependencies": {
-		"@aelis/components": "workspace:*",
 		"@aelis/core": "workspace:*",
 		"ical.js": "^2.1.0",
 		"tsdav": "^2.1.7"

packages/aelis-source-caldav/src/index.ts

@@ -1,7 +1,6 @@
 export { CalDavCalendarKey, type CalendarContext } from "./calendar-context.ts"
 export { CalDavSource, type CalDavSourceOptions } from "./caldav-source.ts"
 export { parseICalEvents, type ICalTimeRange } from "./ical-parser.ts"
-export { renderCalDavFeedItem } from "./renderer.tsx"
 export {
 	AttendeeRole,
 	AttendeeStatus,

packages/aelis-source-caldav/src/renderer.tsx

@@ -1,74 +0,0 @@
-/** @jsxImportSource @nym.sh/jrx */
-
-import type { FeedItemRenderer } from "@aelis/core"
-
-import { FeedCard, SansSerifText, SerifText } from "@aelis/components"
-
-import type { CalDavEventData } from "./types.ts"
-
-import { CalDavEventStatus } from "./types.ts"
-
-function formatTime(date: Date): string {
-	const hours = date.getHours()
-	const minutes = date.getMinutes()
-	const period = hours >= 12 ? "PM" : "AM"
-	const h = hours % 12 || 12
-	const m = minutes.toString().padStart(2, "0")
-	return `${h}:${m} ${period}`
-}
-
-function formatTimeRange(data: CalDavEventData): string {
-	if (data.isAllDay) {
-		return "All day"
-	}
-	return `${formatTime(data.startDate)} – ${formatTime(data.endDate)}`
-}
-
-function formatStatus(status: CalDavEventData["status"]): string | null {
-	if (status === CalDavEventStatus.Cancelled) return "Cancelled"
-	if (status === CalDavEventStatus.Tentative) return "Tentative"
-	return null
-}
-
-export const renderCalDavFeedItem: FeedItemRenderer<"caldav-event", CalDavEventData> = (item) => {
-	const { data, slots } = item
-	const statusLabel = formatStatus(data.status)
-	const attendeeCount = data.attendees.length
-
-	return (
-		<FeedCard>
-			{statusLabel ? <SansSerifText content={statusLabel} style="text-xs uppercase" /> : null}
-
-			<SerifText content={data.title} style="text-lg" />
-
-			<SansSerifText content={formatTimeRange(data)} style="text-sm" />
-
-			{data.calendarName ? (
-				<SansSerifText content={data.calendarName} style="text-sm text-secondary" />
-			) : null}
-
-			{data.location ? (
-				<SansSerifText content={data.location} style="text-sm text-secondary" />
-			) : null}
-
-			{attendeeCount > 0 ? (
-				<SansSerifText
-					content={`${attendeeCount} attendee${attendeeCount === 1 ? "" : "s"}`}
-					style="text-sm text-secondary"
-				/>
-			) : null}
-
-			{slots?.insight?.content ? (
-				<SansSerifText content={slots.insight.content} style="text-sm" />
-			) : null}
-
-			{slots?.preparation?.content ? (
-				<SansSerifText content={slots.preparation.content} style="text-sm" />
-			) : null}
-
-			{slots?.crossSource?.content ? (
-				<SansSerifText content={slots.crossSource.content} style="text-sm" />
-			) : null}
-		</FeedCard>
-	)
-}

packages/aelis-source-caldav/tsconfig.json

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