@teardown/cli 2.0.66 → 2.0.68

package/templates/src/navigation/navigation-provider.tsx

@@ -4,8 +4,10 @@
  * Wraps the app with NavigationContainer and linking configuration.
  */
 
-import React from "react";
+import type { LinkingOptions } from "@react-navigation/native";
 import { NavigationContainer } from "@react-navigation/native";
+import type React from "react";
+import { defaultPrefixes, generatedLinkingConfig } from "@/.teardown/linking.generated";
 
 interface NavigationProviderProps {
 	children: React.ReactNode;
@@ -15,20 +17,9 @@ interface NavigationProviderProps {
  * Linking configuration for deep links.
  * Routes are automatically generated by @teardown/navigation-metro.
  */
-const linking = {
-	prefixes: ["<%= slug %>://"],
-	config: {
-		screens: {
-			"(tabs)": {
-				screens: {
-					home: "home",
-					explore: "explore",
-					profile: "profile",
-				},
-			},
-			settings: "settings",
-		},
-	},
+const linking: LinkingOptions<object> = {
+	prefixes: defaultPrefixes,
+	config: generatedLinkingConfig,
 };
 
 export function NavigationProvider({ children }: NavigationProviderProps): React.JSX.Element {

package/templates/src/navigation/router.tsx

@@ -2,62 +2,38 @@
  * Router Component
  *
  * Renders the navigation structure based on the file-based routes.
- * This creates a stack navigator with tabs nested inside.
+ * Uses a simple stack navigator with Home as the initial route.
  */
 
 import React from "react";
-import { View } from "react-native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Text } from "@/components/ui";
 
 // Import screen definitions
-import HomeScreen from "@/routes/(tabs)/home";
-import ExploreScreen from "@/routes/(tabs)/explore";
-import ProfileScreen from "@/routes/(tabs)/profile";
-import SettingsScreen from "@/routes/settings";
+import HomeScreen from "@/routes/home";
 
-// Create navigators
+// Create navigator
 const Stack = createNativeStackNavigator();
-const Tab = createBottomTabNavigator();
 
 // Theme colors using CSS variable-friendly values
 const theme = {
-	primary: "hsl(221, 83%, 53%)",
 	background: "hsl(0, 0%, 100%)",
 	foreground: "hsl(224, 71%, 4%)",
-	muted: "hsl(220, 14%, 96%)",
-	mutedForeground: "hsl(220, 9%, 46%)",
-	border: "hsl(220, 13%, 91%)",
 };
 
 /**
- * Tab Icon Component
- */
-function TabIcon({ icon, focused }: { icon: string; focused: boolean }): React.JSX.Element {
-	return (
-		<View className={`items-center justify-center ${focused ? "opacity-100" : "opacity-50"}`}>
-			<Text className="text-xl">{icon}</Text>
-		</View>
-	);
-}
-
-/**
- * Tab Navigator
+ * Root Router
  *
- * Bottom tabs with Home, Explore, and Profile screens.
+ * Stack navigator with Home as the initial route.
  */
-function TabNavigator(): React.JSX.Element {
+export function Router(): React.JSX.Element {
 	return (
-		<Tab.Navigator
+		<Stack.Navigator
+			initialRouteName="home"
 			screenOptions={{
 				headerShown: true,
-				tabBarActiveTintColor: theme.primary,
-				tabBarInactiveTintColor: theme.mutedForeground,
-				tabBarStyle: {
+				animation: "slide_from_right",
+				contentStyle: {
 					backgroundColor: theme.background,
-					borderTopColor: theme.border,
-					borderTopWidth: 1,
 				},
 				headerStyle: {
 					backgroundColor: theme.background,
@@ -68,69 +44,10 @@ function TabNavigator(): React.JSX.Element {
 				},
 			}}
 		>
-			<Tab.Screen
+			<Stack.Screen
 				name="home"
 				component={HomeScreen.component}
-				options={{
-					title: "Home",
-					tabBarLabel: "Home",
-					tabBarIcon: ({ focused }) => <TabIcon icon="🏠" focused={focused} />,
-				}}
-			/>
-			<Tab.Screen
-				name="explore"
-				component={ExploreScreen.component}
-				options={{
-					title: "Explore",
-					tabBarLabel: "Explore",
-					tabBarIcon: ({ focused }) => <TabIcon icon="🔍" focused={focused} />,
-				}}
-			/>
-			<Tab.Screen
-				name="profile"
-				component={ProfileScreen.component}
-				options={{
-					title: "Profile",
-					tabBarLabel: "Profile",
-					tabBarIcon: ({ focused }) => <TabIcon icon="👤" focused={focused} />,
-				}}
-			/>
-		</Tab.Navigator>
-	);
-}
-
-/**
- * Root Router
- *
- * Stack navigator with tabs as the initial route.
- */
-export function Router(): React.JSX.Element {
-	return (
-		<Stack.Navigator
-			initialRouteName="(tabs)"
-			screenOptions={{
-				headerShown: false,
-				animation: "slide_from_right",
-				contentStyle: {
-					backgroundColor: theme.background,
-				},
-			}}
-		>
-			<Stack.Screen name="(tabs)" component={TabNavigator} />
-			<Stack.Screen
-				name="settings"
-				component={SettingsScreen.component}
-				options={{
-					title: "Settings",
-					headerShown: true,
-					headerStyle: {
-						backgroundColor: theme.background,
-					},
-					headerTitleStyle: {
-						color: theme.foreground,
-						fontWeight: "600",
-					},
-				}}
+				options={HomeScreen.options}
 			/>
 		</Stack.Navigator>
 	);

package/templates/src/providers/app.provider.tsx

@@ -5,7 +5,9 @@
  * Add new providers here to wrap the entire app.
  */
 
-import React from "react";
+import { HeroUINativeProvider } from "heroui-native";
+import type React from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { NavigationProvider } from "@/navigation";
 
 interface AppProvidersProps {
@@ -14,16 +16,10 @@ interface AppProvidersProps {
 
 export function AppProviders({ children }: AppProvidersProps): React.JSX.Element {
 	return (
-		<NavigationProvider>
-			{/* Add additional providers here in order of dependency */}
-			{/* Example:
-			<ThemeProvider>
-				<AuthProvider>
-					{children}
-				</AuthProvider>
-			</ThemeProvider>
-			*/}
-			{children}
-		</NavigationProvider>
+		<GestureHandlerRootView style={{ flex: 1 }}>
+			<HeroUINativeProvider>
+				<NavigationProvider>{children}</NavigationProvider>
+			</HeroUINativeProvider>
+		</GestureHandlerRootView>
 	);
 }

package/templates/src/routes/_layout.tsx

@@ -1,16 +1,14 @@
 /**
  * Root Stack Layout
  *
- * Defines the root navigation structure using a stack navigator.
- * The tabs group is nested inside this stack, allowing for
- * full-screen modals and other stack-based navigation.
+ * Defines the root navigation structure using a simple stack navigator.
  */
 
 import { defineLayout } from "@teardown/navigation/primitives";
 
 export default defineLayout({
 	type: "stack",
-	initialRouteName: "(tabs)",
+	initialRouteName: "home",
 	screenOptions: {
 		headerShown: false,
 		animation: "slide_from_right",

package/templates/src/routes/home.tsx

@@ -0,0 +1,112 @@
+/**
+ * Home Screen
+ *
+ * The main landing screen of the app.
+ */
+
+import { defineScreen } from "@teardown/navigation/primitives";
+import type React from "react";
+import { ScrollView, Text, View } from "react-native";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { APP_NAME } from "@/core/constants";
+
+function HomeScreen(): React.JSX.Element {
+	return (
+		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
+			{/* Hero Section */}
+			<View className="items-center gap-4 py-8">
+				<View className="h-20 w-20 items-center justify-center rounded-2xl bg-primary">
+					<Text className="text-3xl font-bold text-primary-foreground">T</Text>
+				</View>
+				<View className="items-center gap-2">
+					<Text className="text-2xl font-bold text-foreground text-center">
+						Welcome to {APP_NAME}
+					</Text>
+					<Text className="text-base text-muted-foreground text-center">
+						Your React Native app is ready to go
+					</Text>
+				</View>
+			</View>
+
+			{/* Quick Actions */}
+			<Card>
+				<Card.Header>
+					<Text className="text-lg font-semibold text-foreground">Quick Actions</Text>
+				</Card.Header>
+				<Card.Body className="gap-3">
+					<Button onPress={() => console.log("Primary action")} fullWidth>
+						Get Started
+					</Button>
+					<Button variant="bordered" onPress={() => console.log("Secondary action")} fullWidth>
+						Learn More
+					</Button>
+				</Card.Body>
+			</Card>
+
+			{/* Features */}
+			<View className="gap-4">
+				<Text className="text-lg font-semibold text-foreground">Features</Text>
+				<FeatureCard
+					icon="🔒"
+					title="Type-Safe Navigation"
+					description="Routes are fully typed with TypeScript"
+				/>
+				<FeatureCard
+					icon="📁"
+					title="File-Based Routing"
+					description="Routes generated from file structure"
+				/>
+				<FeatureCard
+					icon="🎨"
+					title="HeroUI Components"
+					description="Beautiful pre-built UI components"
+				/>
+			</View>
+
+			{/* Getting Started */}
+			<Card className="bg-primary/5 border-primary/20">
+				<Card.Body className="py-4">
+					<Text className="text-base font-semibold text-foreground">Getting Started</Text>
+					<Text className="text-sm text-muted-foreground mt-2">
+						1. Explore the components in src/components/ui/{"\n"}
+						2. Add new routes in src/routes/{"\n"}
+						3. Customize the theme in global.css{"\n"}
+						4. Build your app!
+					</Text>
+				</Card.Body>
+			</Card>
+		</ScrollView>
+	);
+}
+
+function FeatureCard({
+	icon,
+	title,
+	description,
+}: {
+	icon: string;
+	title: string;
+	description: string;
+}): React.JSX.Element {
+	return (
+		<Card>
+			<Card.Body className="flex-row items-center gap-4">
+				<View className="h-12 w-12 items-center justify-center rounded-xl bg-muted">
+					<Text className="text-2xl">{icon}</Text>
+				</View>
+				<View className="flex-1">
+					<Text className="text-base font-medium text-foreground">{title}</Text>
+					<Text className="text-sm text-muted-foreground">{description}</Text>
+				</View>
+			</Card.Body>
+		</Card>
+	);
+}
+
+export default defineScreen({
+	component: HomeScreen,
+	options: {
+		title: "Home",
+	},
+});

package/templates/tsconfig.json

@@ -1,14 +1,12 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@teardown/navigation": ["./node_modules/@teardown/navigation/src/index.ts"],
-      "@teardown/navigation/*": ["./node_modules/@teardown/navigation/src/*/index.ts"]
-    }
-  },
-  "include": ["src/**/*", ".teardown/**/*"],
-  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
+	"extends": "@react-native/typescript-config/tsconfig.json",
+	"compilerOptions": {
+		"jsx": "react-native",
+		"strict": true,
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*", ".teardown/**/*"],
+	"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }

package/templates/src/components/ui/index.ts

@@ -1,100 +0,0 @@
-/**
- * UI Components Barrel Export (HeroUI Native)
- *
- * All components are wrappers around HeroUI Native components,
- * allowing for future customization and modifications.
- */
-
-// Accordion
-export { Accordion, AccordionItem, type AccordionProps, type AccordionItemProps } from "./accordion";
-
-// Avatar
-export { Avatar, type AvatarProps } from "./avatar";
-
-// Button
-export { Button, type ButtonProps } from "./button";
-
-// Card
-export {
-	Card,
-	CardHeader,
-	CardBody,
-	CardFooter,
-	type CardProps,
-	type CardHeaderProps,
-	type CardBodyProps,
-	type CardFooterProps,
-} from "./card";
-
-// Checkbox
-export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from "./checkbox";
-
-// Chip
-export { Chip, type ChipProps } from "./chip";
-
-// Dialog
-export {
-	Dialog,
-	DialogHeader,
-	DialogBody,
-	DialogFooter,
-	type DialogProps,
-	type DialogHeaderProps,
-	type DialogBodyProps,
-	type DialogFooterProps,
-} from "./dialog";
-
-// Divider
-export { Divider, type DividerProps } from "./divider";
-
-// Error View
-export { ErrorView, type ErrorViewProps } from "./error-view";
-
-// Form Field
-export { FormField, type FormFieldProps } from "./form-field";
-
-// Popover
-export { Popover, type PopoverProps } from "./popover";
-
-// Pressable Feedback
-export { PressableFeedback, type PressableFeedbackProps } from "./pressable-feedback";
-
-// Radio Group
-export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radio-group";
-
-// Scroll Shadow
-export { ScrollShadow, type ScrollShadowProps } from "./scroll-shadow";
-
-// Select
-export { Select, SelectItem, type SelectProps, type SelectItemProps } from "./select";
-
-// Skeleton
-export { Skeleton, type SkeletonProps } from "./skeleton";
-
-// Skeleton Group
-export { SkeletonGroup, type SkeletonGroupProps } from "./skeleton-group";
-
-// Spinner
-export { Spinner, type SpinnerProps } from "./spinner";
-
-// Surface
-export { Surface, type SurfaceProps } from "./surface";
-
-// Switch
-export { Switch, type SwitchProps } from "./switch";
-
-// Tabs
-export { Tabs, Tab, type TabsProps, type TabProps } from "./tabs";
-
-// Text Field
-export {
-	TextField,
-	type TextFieldProps,
-	type TextFieldLabelProps,
-	type TextFieldInputProps,
-	type TextFieldDescriptionProps,
-	type TextFieldErrorMessageProps,
-} from "./text-field";
-
-// Toast
-export { Toast, type ToastProps } from "./toast";

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

@@ -1,42 +0,0 @@
-/**
- * Tabs Layout
- *
- * Defines the bottom tab navigation with three screens:
- * - Home: Main dashboard/landing screen
- * - Explore: Discovery and search functionality
- * - Profile: User profile and settings access
- *
- * Theme colors are defined using HSL values that match the global.css theme.
- */
-
-import { defineLayout } from "@teardown/navigation/primitives";
-
-// Theme colors matching global.css
-const theme = {
-	primary: "hsl(221, 83%, 53%)",
-	background: "hsl(0, 0%, 100%)",
-	foreground: "hsl(224, 71%, 4%)",
-	mutedForeground: "hsl(220, 9%, 46%)",
-	border: "hsl(220, 13%, 91%)",
-};
-
-export default defineLayout({
-	type: "tabs",
-	screenOptions: {
-		headerShown: true,
-		tabBarActiveTintColor: theme.primary,
-		tabBarInactiveTintColor: theme.mutedForeground,
-		tabBarStyle: {
-			backgroundColor: theme.background,
-			borderTopColor: theme.border,
-			borderTopWidth: 1,
-		},
-		headerStyle: {
-			backgroundColor: theme.background,
-		},
-		headerTitleStyle: {
-			color: theme.foreground,
-			fontWeight: "600",
-		},
-	},
-});

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

@@ -1,161 +0,0 @@
-/**
- * Explore Screen
- *
- * Discovery and search functionality screen.
- */
-
-import React, { useState } from "react";
-import { View, ScrollView, Pressable } from "react-native";
-import { defineScreen } from "@teardown/navigation/primitives";
-import {
-	Text,
-	Input,
-	Card,
-	CardHeader,
-	CardTitle,
-	CardDescription,
-	CardContent,
-	Badge,
-} from "@/components/ui";
-
-interface Category {
-	id: string;
-	title: string;
-	description: string;
-	icon: string;
-	color: string;
-}
-
-const categories: Category[] = [
-	{
-		id: "1",
-		title: "Getting Started",
-		description: "Learn the basics of your new app",
-		icon: "🚀",
-		color: "bg-blue-500/10",
-	},
-	{
-		id: "2",
-		title: "Documentation",
-		description: "Read the full documentation",
-		icon: "📚",
-		color: "bg-green-500/10",
-	},
-	{
-		id: "3",
-		title: "Examples",
-		description: "Browse example implementations",
-		icon: "💡",
-		color: "bg-yellow-500/10",
-	},
-	{
-		id: "4",
-		title: "Community",
-		description: "Join the community discussions",
-		icon: "👥",
-		color: "bg-purple-500/10",
-	},
-	{
-		id: "5",
-		title: "Templates",
-		description: "Start with pre-built templates",
-		icon: "📋",
-		color: "bg-pink-500/10",
-	},
-	{
-		id: "6",
-		title: "Integrations",
-		description: "Connect with other services",
-		icon: "🔗",
-		color: "bg-orange-500/10",
-	},
-];
-
-function ExploreScreen(): React.JSX.Element {
-	const [searchQuery, setSearchQuery] = useState("");
-
-	const filteredCategories = categories.filter(
-		(cat) =>
-			cat.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-			cat.description.toLowerCase().includes(searchQuery.toLowerCase())
-	);
-
-	return (
-		<View className="flex-1 bg-background">
-			{/* Search Header */}
-			<View className="px-6 py-4 border-b border-border">
-				<Input
-					placeholder="Search categories..."
-					value={searchQuery}
-					onChangeText={setSearchQuery}
-				/>
-			</View>
-
-			<ScrollView className="flex-1" contentContainerClassName="p-6 gap-6">
-				{/* Section Header */}
-				<View className="gap-2">
-					<Text variant="h2">Explore</Text>
-					<Text variant="muted">Discover new content and features</Text>
-				</View>
-
-				{/* Popular Tags */}
-				<View className="gap-3">
-					<Text variant="label">POPULAR TAGS</Text>
-					<View className="flex-row flex-wrap gap-2">
-						<Badge variant="secondary">React Native</Badge>
-						<Badge variant="secondary">Navigation</Badge>
-						<Badge variant="secondary">TypeScript</Badge>
-						<Badge variant="secondary">Tailwind</Badge>
-						<Badge variant="outline">Animations</Badge>
-						<Badge variant="outline">State</Badge>
-					</View>
-				</View>
-
-				{/* Categories Grid */}
-				<View className="gap-4">
-					<Text variant="label">CATEGORIES</Text>
-					<View className="gap-3">
-						{filteredCategories.map((category) => (
-							<CategoryCard key={category.id} category={category} />
-						))}
-					</View>
-				</View>
-
-				{filteredCategories.length === 0 && (
-					<View className="items-center py-8">
-						<Text className="text-4xl mb-4">🔍</Text>
-						<Text variant="large">No results found</Text>
-						<Text variant="muted">Try a different search term</Text>
-					</View>
-				)}
-			</ScrollView>
-		</View>
-	);
-}
-
-function CategoryCard({ category }: { category: Category }): React.JSX.Element {
-	return (
-		<Pressable>
-			<Card>
-				<CardContent className="flex-row items-center gap-4 py-4">
-					<View className={`h-12 w-12 items-center justify-center rounded-xl ${category.color}`}>
-						<Text className="text-2xl">{category.icon}</Text>
-					</View>
-					<View className="flex-1">
-						<CardTitle className="text-base">{category.title}</CardTitle>
-						<CardDescription>{category.description}</CardDescription>
-					</View>
-					<Text className="text-muted-foreground">›</Text>
-				</CardContent>
-			</Card>
-		</Pressable>
-	);
-}
-
-export default defineScreen({
-	component: ExploreScreen,
-	options: {
-		title: "Explore",
-		tabBarLabel: "Explore",
-	},
-});