@teardown/cli 2.0.64 → 2.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teardown/cli",
-	"version": "2.0.64",
+	"version": "2.0.65",
 	"private": false,
 	"type": "module",
 	"main": "./src/index.ts",
@@ -71,7 +71,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@teardown/tsconfig": "2.0.64",
+		"@teardown/tsconfig": "2.0.65",
 		"@types/bun": "1.3.5",
 		"@types/ejs": "^3.1.5",
 		"typescript": "5.9.3"

package/src/templates/generator.ts

@@ -181,6 +181,7 @@ export class TemplateGenerator {
 			"babel.config.js",
 			"metro.config.js",
 			"index.js",
+			"index.ts",
 			"react-native.config.js",
 			"Gemfile",
 		];

package/templates/ios/AppName/AppDelegate.swift

@@ -1,11 +1,13 @@
 import UIKit
 import React
 import React_RCTAppDelegate
+import ReactAppDependencyProvider
 
 @main
 class AppDelegate: RCTAppDelegate {
   override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
     self.moduleName = "<%= appName %>"
+    self.dependencyProvider = RCTAppDependencyProvider()
     self.initialProps = [:]
 
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)

package/templates/package.json

@@ -41,10 +41,10 @@
 		"@react-native-community/cli": "20.0.0",
 		"@react-native-community/cli-platform-android": "20.0.0",
 		"@react-native-community/cli-platform-ios": "20.0.0",
-		"@react-native/babel-preset": "0.78.2",
-		"@react-native/eslint-config": "0.78.2",
-		"@react-native/metro-config": "0.78.2",
-		"@react-native/typescript-config": "0.78.2",
+		"@react-native/babel-preset": "0.83.1",
+		"@react-native/eslint-config": "0.83.1",
+		"@react-native/metro-config": "0.83.1",
+		"@react-native/typescript-config": "0.83.1",
 		"@teardown/cli": "<%= cliVersion %>",
 		"@teardown/metro-config": "<%= cliVersion %>",
 		"@teardown/navigation-metro": "<%= cliVersion %>",
@@ -60,4 +60,4 @@
 	"engines": {
 		"node": ">=18"
 	}
-}
+}

package/templates/src/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import { DevClientProvider } from "@teardown/dev-client";
-import { AppRegistry } from "react-native";
 import { devClientConfig } from "../dev-client.config";
 import { App } from "./app";
 

package/templates/src/navigation/hooks.ts

@@ -0,0 +1,46 @@
+/**
+ * Navigation Hooks
+ *
+ * Properly initialized typed navigation hooks for use in screens.
+ * These wrap the @teardown/navigation factories with React Navigation's hooks.
+ */
+
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { createUseTypedNavigation, createUseTypedParams, createUseTypedRoute } from "@teardown/navigation/hooks";
+
+/**
+ * Type-safe navigation hook.
+ * Use this to navigate between screens with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const navigation = useTypedNavigation();
+ * navigation.navigate("/settings");
+ * navigation.navigate("/(tabs)/home");
+ * ```
+ */
+export const useTypedNavigation = createUseTypedNavigation(useNavigation);
+
+/**
+ * Type-safe route params hook.
+ * Use this to access route parameters with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const params = useTypedParams<"/users/:userId">();
+ * console.log(params.userId);
+ * ```
+ */
+export const useTypedParams = createUseTypedParams(useRoute);
+
+/**
+ * Type-safe route hook.
+ * Use this to access the current route with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const route = useTypedRoute<"/users/:userId">();
+ * console.log(route.name, route.params.userId);
+ * ```
+ */
+export const useTypedRoute = createUseTypedRoute(useRoute);

package/templates/src/navigation/index.ts

@@ -4,5 +4,6 @@
  * Exports navigation components and utilities.
  */
 
+export { useTypedNavigation, useTypedParams, useTypedRoute } from "./hooks";
 export { NavigationProvider } from "./navigation-provider";
 export { Router } from "./router";

package/templates/src/routes/(tabs)/home.tsx

@@ -4,20 +4,20 @@
  * The main landing screen of the app.
  */
 
-import React from "react";
-import { View, ScrollView, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
+import type React from "react";
+import { Pressable, ScrollView, View } from "react-native";
 import {
-	Text,
+	Badge,
 	Button,
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
-	Badge,
+	Text,
 } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function HomeScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();

package/templates/src/routes/(tabs)/profile.tsx

@@ -4,19 +4,11 @@
  * User profile and account management screen.
  */
 
-import React from "react";
-import { View, ScrollView, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
-import {
-	Text,
-	Button,
-	Avatar,
-	Card,
-	CardContent,
-	Badge,
-	Separator,
-} from "@/components/ui";
+import type React from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Avatar, Badge, Button, Card, CardContent, Separator, Text } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function ProfileScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();
@@ -49,52 +41,32 @@ function ProfileScreen(): React.JSX.Element {
 
 			{/* Account Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">ACCOUNT</Text>
+				<Text variant="label" className="px-1">
+					ACCOUNT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
-						<MenuItem
-							icon="⚙️"
-							title="Settings"
-							onPress={() => navigation.navigate("/settings")}
-						/>
+						<MenuItem icon="⚙️" title="Settings" onPress={() => navigation.navigate("/settings")} />
 						<Separator />
-						<MenuItem
-							icon="🔒"
-							title="Privacy"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="🔒" title="Privacy" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="🔔"
-							title="Notifications"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="🔔" title="Notifications" onPress={() => {}} />
 					</CardContent>
 				</Card>
 			</View>
 
 			{/* Support Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">SUPPORT</Text>
+				<Text variant="label" className="px-1">
+					SUPPORT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
-						<MenuItem
-							icon="❓"
-							title="Help Center"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="❓" title="Help Center" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="💬"
-							title="Contact Us"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="💬" title="Contact Us" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="📝"
-							title="Send Feedback"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="📝" title="Send Feedback" onPress={() => {}} />
 					</CardContent>
 				</Card>
 			</View>
@@ -121,22 +93,13 @@ function StatItem({ label, value }: { label: string; value: string }): React.JSX
 	);
 }
 
-function MenuItem({
-	icon,
-	title,
-	onPress,
-}: {
-	icon: string;
-	title: string;
-	onPress: () => void;
-}): React.JSX.Element {
+function MenuItem({ icon, title, onPress }: { icon: string; title: string; onPress: () => void }): React.JSX.Element {
 	return (
-		<Pressable
-			className="flex-row items-center px-4 py-3 active:bg-muted/50"
-			onPress={onPress}
-		>
+		<Pressable className="flex-row items-center px-4 py-3 active:bg-muted/50" onPress={onPress}>
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text className="text-muted-foreground">›</Text>
 		</Pressable>
 	);

package/templates/src/routes/settings.tsx

@@ -5,19 +5,11 @@
  * This is a stack screen outside of the tab navigator.
  */
 
-import React from "react";
-import { View, ScrollView, Switch, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
-import {
-	Text,
-	Button,
-	Card,
-	CardHeader,
-	CardTitle,
-	CardContent,
-	Separator,
-} from "@/components/ui";
+import React from "react";
+import { Pressable, ScrollView, Switch, View } from "react-native";
+import { Button, Card, CardContent, CardHeader, CardTitle, Separator, Text } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function SettingsScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();
@@ -30,7 +22,9 @@ function SettingsScreen(): React.JSX.Element {
 		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
 			{/* Preferences Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">PREFERENCES</Text>
+				<Text variant="label" className="px-1">
+					PREFERENCES
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<SettingRow
@@ -70,7 +64,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* Storage Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">STORAGE</Text>
+				<Text variant="label" className="px-1">
+					STORAGE
+				</Text>
 				<Card>
 					<CardContent className="gap-4 py-4">
 						<View className="flex-row justify-between">
@@ -86,7 +82,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* About Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">ABOUT</Text>
+				<Text variant="label" className="px-1">
+					ABOUT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<InfoRow icon="📱" title="Version" value="1.0.0" />
@@ -100,7 +98,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* Legal Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">LEGAL</Text>
+				<Text variant="label" className="px-1">
+					LEGAL
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<LinkRow icon="📄" title="Terms of Service" />
@@ -150,35 +150,25 @@ function SettingRow({
 	);
 }
 
-function InfoRow({
-	icon,
-	title,
-	value,
-}: {
-	icon: string;
-	title: string;
-	value: string;
-}): React.JSX.Element {
+function InfoRow({ icon, title, value }: { icon: string; title: string; value: string }): React.JSX.Element {
 	return (
 		<View className="flex-row items-center px-4 py-3">
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text variant="muted">{value}</Text>
 		</View>
 	);
 }
 
-function LinkRow({
-	icon,
-	title,
-}: {
-	icon: string;
-	title: string;
-}): React.JSX.Element {
+function LinkRow({ icon, title }: { icon: string; title: string }): React.JSX.Element {
 	return (
 		<Pressable className="flex-row items-center px-4 py-3 active:bg-muted/50">
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text className="text-muted-foreground">›</Text>
 		</Pressable>
 	);