@teardown/cli 2.0.65 → 2.0.67

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

@@ -1,138 +0,0 @@
-/**
- * Home Screen
- *
- * The main landing screen of the app.
- */
-
-import { defineScreen } from "@teardown/navigation/primitives";
-import type React from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import {
-	Badge,
-	Button,
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-	Text,
-} from "@/components/ui";
-import { useTypedNavigation } from "@/navigation";
-
-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

@@ -1,114 +0,0 @@
-/**
- * Profile Screen
- *
- * User profile and account management screen.
- */
-
-import { defineScreen } from "@teardown/navigation/primitives";
-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();
-
-	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/settings.tsx

@@ -1,184 +0,0 @@
-/**
- * Settings Screen
- *
- * App settings and preferences screen.
- * This is a stack screen outside of the tab navigator.
- */
-
-import { defineScreen } from "@teardown/navigation/primitives";
-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();
-	const [notifications, setNotifications] = React.useState(true);
-	const [darkMode, setDarkMode] = React.useState(false);
-	const [analytics, setAnalytics] = React.useState(true);
-	const [biometrics, setBiometrics] = React.useState(false);
-
-	return (
-		<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>
-				<Card>
-					<CardContent className="p-0">
-						<SettingRow
-							icon="🔔"
-							title="Push Notifications"
-							description="Receive push notifications"
-							value={notifications}
-							onValueChange={setNotifications}
-						/>
-						<Separator />
-						<SettingRow
-							icon="🌙"
-							title="Dark Mode"
-							description="Use dark color theme"
-							value={darkMode}
-							onValueChange={setDarkMode}
-						/>
-						<Separator />
-						<SettingRow
-							icon="📊"
-							title="Analytics"
-							description="Help improve the app"
-							value={analytics}
-							onValueChange={setAnalytics}
-						/>
-						<Separator />
-						<SettingRow
-							icon="🔐"
-							title="Biometric Lock"
-							description="Require Face ID or Touch ID"
-							value={biometrics}
-							onValueChange={setBiometrics}
-						/>
-					</CardContent>
-				</Card>
-			</View>
-
-			{/* Storage Section */}
-			<View className="gap-2">
-				<Text variant="label" className="px-1">
-					STORAGE
-				</Text>
-				<Card>
-					<CardContent className="gap-4 py-4">
-						<View className="flex-row justify-between">
-							<Text>Cache Size</Text>
-							<Text variant="muted">24.5 MB</Text>
-						</View>
-						<Button variant="outline" size="sm">
-							Clear Cache
-						</Button>
-					</CardContent>
-				</Card>
-			</View>
-
-			{/* About Section */}
-			<View className="gap-2">
-				<Text variant="label" className="px-1">
-					ABOUT
-				</Text>
-				<Card>
-					<CardContent className="p-0">
-						<InfoRow icon="📱" title="Version" value="1.0.0" />
-						<Separator />
-						<InfoRow icon="🔨" title="Build" value="1" />
-						<Separator />
-						<InfoRow icon="⚛️" title="React Native" value="0.76.9" />
-					</CardContent>
-				</Card>
-			</View>
-
-			{/* Legal Section */}
-			<View className="gap-2">
-				<Text variant="label" className="px-1">
-					LEGAL
-				</Text>
-				<Card>
-					<CardContent className="p-0">
-						<LinkRow icon="📄" title="Terms of Service" />
-						<Separator />
-						<LinkRow icon="🔒" title="Privacy Policy" />
-						<Separator />
-						<LinkRow icon="📜" title="Licenses" />
-					</CardContent>
-				</Card>
-			</View>
-
-			{/* Back Button */}
-			<Button variant="secondary" onPress={() => navigation.goBack()} fullWidth>
-				Go Back
-			</Button>
-		</ScrollView>
-	);
-}
-
-function SettingRow({
-	icon,
-	title,
-	description,
-	value,
-	onValueChange,
-}: {
-	icon: string;
-	title: string;
-	description: string;
-	value: boolean;
-	onValueChange: (value: boolean) => void;
-}): React.JSX.Element {
-	return (
-		<View className="flex-row items-center px-4 py-3">
-			<Text className="text-xl mr-3">{icon}</Text>
-			<View className="flex-1 mr-4">
-				<Text variant="large">{title}</Text>
-				<Text variant="muted">{description}</Text>
-			</View>
-			<Switch
-				value={value}
-				onValueChange={onValueChange}
-				trackColor={{ false: "#d1d5db", true: "#bfdbfe" }}
-				thumbColor={value ? "#3b82f6" : "#f3f4f6"}
-			/>
-		</View>
-	);
-}
-
-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="muted">{value}</Text>
-		</View>
-	);
-}
-
-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 className="text-muted-foreground">›</Text>
-		</Pressable>
-	);
-}
-
-export default defineScreen({
-	component: SettingsScreen,
-	options: {
-		title: "Settings",
-		headerShown: true,
-		animation: "slide_from_right",
-	},
-});

package/templates/src/screens/auth/index.ts

@@ -1,6 +0,0 @@
-/**
- * Auth Screens Export
- */
-
-export { LoginScreen } from "./login";
-export { RegisterScreen } from "./register";

package/templates/src/screens/auth/login.tsx

@@ -1,165 +0,0 @@
-/**
- * Login Screen
- *
- * Email/password login with social auth options.
- */
-
-import React, { useState } from "react";
-import { View, ScrollView, Pressable, KeyboardAvoidingView, Platform } from "react-native";
-import {
-	Text,
-	Button,
-	Input,
-	Card,
-	CardHeader,
-	CardTitle,
-	CardDescription,
-	CardContent,
-	CardFooter,
-	Separator,
-} from "@/components/ui";
-
-interface LoginScreenProps {
-	onLogin?: (email: string, password: string) => void;
-	onForgotPassword?: () => void;
-	onRegister?: () => void;
-	onSocialLogin?: (provider: "google" | "apple" | "github") => void;
-	loading?: boolean;
-}
-
-export function LoginScreen({
-	onLogin,
-	onForgotPassword,
-	onRegister,
-	onSocialLogin,
-	loading = false,
-}: LoginScreenProps): React.JSX.Element {
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
-
-	const validate = (): boolean => {
-		const newErrors: { email?: string; password?: string } = {};
-
-		if (!email) {
-			newErrors.email = "Email is required";
-		} else if (!/\S+@\S+\.\S+/.test(email)) {
-			newErrors.email = "Please enter a valid email";
-		}
-
-		if (!password) {
-			newErrors.password = "Password is required";
-		} else if (password.length < 6) {
-			newErrors.password = "Password must be at least 6 characters";
-		}
-
-		setErrors(newErrors);
-		return Object.keys(newErrors).length === 0;
-	};
-
-	const handleLogin = () => {
-		if (validate()) {
-			onLogin?.(email, password);
-		}
-	};
-
-	return (
-		<KeyboardAvoidingView
-			behavior={Platform.OS === "ios" ? "padding" : "height"}
-			className="flex-1 bg-background"
-		>
-			<ScrollView
-				contentContainerClassName="flex-grow justify-center p-6"
-				keyboardShouldPersistTaps="handled"
-			>
-				<Card className="w-full max-w-md self-center">
-					<CardHeader className="items-center">
-						<View className="mb-4 h-16 w-16 items-center justify-center rounded-2xl bg-primary">
-							<Text className="text-2xl font-bold text-primary-foreground">T</Text>
-						</View>
-						<CardTitle>Welcome back</CardTitle>
-						<CardDescription>Sign in to your account to continue</CardDescription>
-					</CardHeader>
-
-					<CardContent className="gap-4">
-						{/* Social Login Buttons */}
-						<View className="gap-3">
-							<Button
-								variant="outline"
-								fullWidth
-								onPress={() => onSocialLogin?.("google")}
-							>
-								<View className="flex-row items-center gap-2">
-									<Text>🔵</Text>
-									<Text className="font-semibold text-foreground">Continue with Google</Text>
-								</View>
-							</Button>
-
-							<Button
-								variant="outline"
-								fullWidth
-								onPress={() => onSocialLogin?.("apple")}
-							>
-								<View className="flex-row items-center gap-2">
-									<Text></Text>
-									<Text className="font-semibold text-foreground">Continue with Apple</Text>
-								</View>
-							</Button>
-						</View>
-
-						{/* Divider */}
-						<View className="flex-row items-center gap-4 my-2">
-							<Separator className="flex-1" />
-							<Text variant="muted">or</Text>
-							<Separator className="flex-1" />
-						</View>
-
-						{/* Email/Password Form */}
-						<View className="gap-4">
-							<Input
-								label="Email"
-								placeholder="you@example.com"
-								value={email}
-								onChangeText={setEmail}
-								error={errors.email}
-								keyboardType="email-address"
-								autoCapitalize="none"
-								autoComplete="email"
-							/>
-
-							<View>
-								<Input
-									label="Password"
-									placeholder="Enter your password"
-									value={password}
-									onChangeText={setPassword}
-									error={errors.password}
-									secureTextEntry
-									autoComplete="password"
-								/>
-								<Pressable onPress={onForgotPassword} className="mt-2 self-end">
-									<Text className="text-sm text-primary">Forgot password?</Text>
-								</Pressable>
-							</View>
-						</View>
-					</CardContent>
-
-					<CardFooter className="flex-col gap-4">
-						<Button fullWidth loading={loading} onPress={handleLogin}>
-							Sign In
-						</Button>
-
-						<View className="flex-row items-center justify-center gap-1">
-							<Text variant="muted">Don't have an account?</Text>
-							<Pressable onPress={onRegister}>
-								<Text className="font-semibold text-primary">Sign up</Text>
-							</Pressable>
-						</View>
-					</CardFooter>
-				</Card>
-			</ScrollView>
-		</KeyboardAvoidingView>
-	);
-}
-
-export default LoginScreen;