@teardown/cli 1.2.38 → 2.0.41

package/templates/src/navigation/router.tsx

@@ -0,0 +1,137 @@
+/**
+ * Router Component
+ *
+ * Renders the navigation structure based on the file-based routes.
+ * This creates a stack navigator with tabs nested inside.
+ */
+
+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";
+
+// Create navigators
+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
+ *
+ * Bottom tabs with Home, Explore, and Profile screens.
+ */
+function TabNavigator(): React.JSX.Element {
+	return (
+		<Tab.Navigator
+			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",
+				},
+			}}
+		>
+			<Tab.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",
+					},
+				}}
+			/>
+		</Stack.Navigator>
+	);
+}

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

@@ -0,0 +1,29 @@
+/**
+ * App Providers
+ *
+ * Composes all application providers.
+ * Add new providers here to wrap the entire app.
+ */
+
+import React from "react";
+import { NavigationProvider } from "@/navigation";
+
+interface AppProvidersProps {
+	children: React.ReactNode;
+}
+
+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>
+	);
+}

package/templates/src/providers/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Providers Barrel Export
+ */
+
+export { AppProviders } from "./app.provider";

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

@@ -0,0 +1,42 @@
+/**
+ * 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

@@ -0,0 +1,161 @@
+/**
+ * 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",
+	},
+});

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

@@ -0,0 +1,138 @@
+/**
+ * Home Screen
+ *
+ * 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 {
+	Text,
+	Button,
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	Badge,
+} from "@/components/ui";
+
+function HomeScreen(): React.JSX.Element {
+	const navigation = useTypedNavigation();
+
+	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 variant="h1" className="text-center">
+						Welcome to <%= appName %>
+					</Text>
+					<Text variant="lead" className="text-center">
+						Your React Native app with type-safe navigation
+					</Text>
+				</View>
+			</View>
+
+			{/* Quick Actions */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Quick Actions</CardTitle>
+					<CardDescription>Navigate through your app</CardDescription>
+				</CardHeader>
+				<CardContent className="gap-3">
+					<Button onPress={() => navigation.navigate("/settings")} fullWidth>
+						Open Settings
+					</Button>
+					<Button variant="secondary" onPress={() => navigation.navigate("/(tabs)/explore")} fullWidth>
+						Explore Content
+					</Button>
+				</CardContent>
+			</Card>
+
+			{/* Features */}
+			<View className="gap-4">
+				<Text variant="h3">Features</Text>
+				<FeatureCard
+					icon="🔒"
+					title="Type-Safe Navigation"
+					description="Routes are fully typed with TypeScript"
+					tags={["TypeScript", "Safe"]}
+				/>
+				<FeatureCard
+					icon="📁"
+					title="File-Based Routing"
+					description="Routes generated from file structure"
+					tags={["Auto", "Generated"]}
+				/>
+				<FeatureCard
+					icon="📱"
+					title="Tab Navigation"
+					description="Bottom tabs with Home, Explore, Profile"
+					tags={["Tabs", "Navigate"]}
+				/>
+			</View>
+
+			{/* Getting Started */}
+			<Card className="bg-primary/5 border-primary/20">
+				<CardContent className="py-4">
+					<Text variant="large">Getting Started</Text>
+					<Text variant="muted" className="mt-2">
+						1. Explore the tabs to see different screens{"\n"}
+						2. Open Settings to see stack navigation{"\n"}
+						3. Customize screens in src/routes/{"\n"}
+						4. Build your app!
+					</Text>
+				</CardContent>
+			</Card>
+		</ScrollView>
+	);
+}
+
+function FeatureCard({
+	icon,
+	title,
+	description,
+	tags,
+}: {
+	icon: string;
+	title: string;
+	description: string;
+	tags: string[];
+}): React.JSX.Element {
+	return (
+		<Card>
+			<CardHeader className="flex-row items-start gap-3 pb-2">
+				<View className="h-10 w-10 items-center justify-center rounded-lg bg-muted">
+					<Text className="text-xl">{icon}</Text>
+				</View>
+				<View className="flex-1">
+					<CardTitle className="text-base">{title}</CardTitle>
+					<CardDescription>{description}</CardDescription>
+				</View>
+			</CardHeader>
+			<CardContent>
+				<View className="flex-row flex-wrap gap-2">
+					{tags.map((tag) => (
+						<Badge key={tag} variant="secondary">
+							{tag}
+						</Badge>
+					))}
+				</View>
+			</CardContent>
+		</Card>
+	);
+}
+
+export default defineScreen({
+	component: HomeScreen,
+	options: {
+		title: "Home",
+		tabBarLabel: "Home",
+	},
+});

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

@@ -0,0 +1,151 @@
+/**
+ * Profile Screen
+ *
+ * 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";
+
+function ProfileScreen(): React.JSX.Element {
+	const navigation = useTypedNavigation();
+
+	return (
+		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
+			{/* Profile Header */}
+			<View className="items-center gap-4 py-4">
+				<Avatar fallback="U" size="xl" />
+				<View className="items-center gap-1">
+					<Text variant="h2">User</Text>
+					<Text variant="muted">user@example.com</Text>
+				</View>
+				<View className="flex-row gap-2">
+					<Badge variant="secondary">Free Plan</Badge>
+					<Badge variant="outline">Member since 2024</Badge>
+				</View>
+			</View>
+
+			{/* Stats */}
+			<Card>
+				<CardContent className="flex-row justify-around py-4">
+					<StatItem label="Projects" value="12" />
+					<Separator orientation="vertical" />
+					<StatItem label="Tasks" value="48" />
+					<Separator orientation="vertical" />
+					<StatItem label="Completed" value="36" />
+				</CardContent>
+			</Card>
+
+			{/* Account Section */}
+			<View className="gap-2">
+				<Text variant="label" className="px-1">ACCOUNT</Text>
+				<Card>
+					<CardContent className="p-0">
+						<MenuItem
+							icon="⚙️"
+							title="Settings"
+							onPress={() => navigation.navigate("/settings")}
+						/>
+						<Separator />
+						<MenuItem
+							icon="🔒"
+							title="Privacy"
+							onPress={() => {}}
+						/>
+						<Separator />
+						<MenuItem
+							icon="🔔"
+							title="Notifications"
+							onPress={() => {}}
+						/>
+					</CardContent>
+				</Card>
+			</View>
+
+			{/* Support Section */}
+			<View className="gap-2">
+				<Text variant="label" className="px-1">SUPPORT</Text>
+				<Card>
+					<CardContent className="p-0">
+						<MenuItem
+							icon="❓"
+							title="Help Center"
+							onPress={() => {}}
+						/>
+						<Separator />
+						<MenuItem
+							icon="💬"
+							title="Contact Us"
+							onPress={() => {}}
+						/>
+						<Separator />
+						<MenuItem
+							icon="📝"
+							title="Send Feedback"
+							onPress={() => {}}
+						/>
+					</CardContent>
+				</Card>
+			</View>
+
+			{/* Sign Out */}
+			<Button variant="destructive" onPress={() => {}} fullWidth>
+				Sign Out
+			</Button>
+
+			{/* App Info */}
+			<View className="items-center pt-4">
+				<Text variant="muted">Version 1.0.0</Text>
+			</View>
+		</ScrollView>
+	);
+}
+
+function StatItem({ label, value }: { label: string; value: string }): React.JSX.Element {
+	return (
+		<View className="items-center px-4">
+			<Text variant="h3">{value}</Text>
+			<Text variant="muted">{label}</Text>
+		</View>
+	);
+}
+
+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}
+		>
+			<Text className="text-xl mr-3">{icon}</Text>
+			<Text variant="large" className="flex-1">{title}</Text>
+			<Text className="text-muted-foreground">›</Text>
+		</Pressable>
+	);
+}
+
+export default defineScreen({
+	component: ProfileScreen,
+	options: {
+		title: "Profile",
+		tabBarLabel: "Profile",
+	},
+});

package/templates/src/routes/_layout.tsx

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+import { defineLayout } from "@teardown/navigation/primitives";
+
+export default defineLayout({
+	type: "stack",
+	initialRouteName: "(tabs)",
+	screenOptions: {
+		headerShown: false,
+		animation: "slide_from_right",
+	},
+});