@teardown/cli 2.0.66 → 2.0.67

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

@@ -1,203 +0,0 @@
-/**
- * Register Screen
- *
- * Account registration with email/password.
- */
-
-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 RegisterScreenProps {
-	onRegister?: (name: string, email: string, password: string) => void;
-	onLogin?: () => void;
-	onSocialLogin?: (provider: "google" | "apple" | "github") => void;
-	loading?: boolean;
-}
-
-export function RegisterScreen({
-	onRegister,
-	onLogin,
-	onSocialLogin,
-	loading = false,
-}: RegisterScreenProps): React.JSX.Element {
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
-	const [errors, setErrors] = useState<{
-		name?: string;
-		email?: string;
-		password?: string;
-		confirmPassword?: string;
-	}>({});
-
-	const validate = (): boolean => {
-		const newErrors: typeof errors = {};
-
-		if (!name.trim()) {
-			newErrors.name = "Name is required";
-		}
-
-		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 < 8) {
-			newErrors.password = "Password must be at least 8 characters";
-		}
-
-		if (!confirmPassword) {
-			newErrors.confirmPassword = "Please confirm your password";
-		} else if (password !== confirmPassword) {
-			newErrors.confirmPassword = "Passwords do not match";
-		}
-
-		setErrors(newErrors);
-		return Object.keys(newErrors).length === 0;
-	};
-
-	const handleRegister = () => {
-		if (validate()) {
-			onRegister?.(name, 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>Create an account</CardTitle>
-						<CardDescription>Enter your details to get started</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>
-
-						{/* Registration Form */}
-						<View className="gap-4">
-							<Input
-								label="Full Name"
-								placeholder="John Doe"
-								value={name}
-								onChangeText={setName}
-								error={errors.name}
-								autoCapitalize="words"
-								autoComplete="name"
-							/>
-
-							<Input
-								label="Email"
-								placeholder="you@example.com"
-								value={email}
-								onChangeText={setEmail}
-								error={errors.email}
-								keyboardType="email-address"
-								autoCapitalize="none"
-								autoComplete="email"
-							/>
-
-							<Input
-								label="Password"
-								placeholder="Create a password"
-								value={password}
-								onChangeText={setPassword}
-								error={errors.password}
-								hint="Must be at least 8 characters"
-								secureTextEntry
-								autoComplete="new-password"
-							/>
-
-							<Input
-								label="Confirm Password"
-								placeholder="Confirm your password"
-								value={confirmPassword}
-								onChangeText={setConfirmPassword}
-								error={errors.confirmPassword}
-								secureTextEntry
-								autoComplete="new-password"
-							/>
-						</View>
-
-						{/* Terms */}
-						<Text variant="muted" className="text-center">
-							By creating an account, you agree to our{" "}
-							<Text className="text-primary">Terms of Service</Text> and{" "}
-							<Text className="text-primary">Privacy Policy</Text>
-						</Text>
-					</CardContent>
-
-					<CardFooter className="flex-col gap-4">
-						<Button fullWidth loading={loading} onPress={handleRegister}>
-							Create Account
-						</Button>
-
-						<View className="flex-row items-center justify-center gap-1">
-							<Text variant="muted">Already have an account?</Text>
-							<Pressable onPress={onLogin}>
-								<Text className="font-semibold text-primary">Sign in</Text>
-							</Pressable>
-						</View>
-					</CardFooter>
-				</Card>
-			</ScrollView>
-		</KeyboardAvoidingView>
-	);
-}
-
-export default RegisterScreen;

package/templates/src/screens/home.tsx

@@ -1,204 +0,0 @@
-/**
- * Home Screen
- *
- * Main dashboard/home screen with content feed.
- */
-
-import React from "react";
-import { View, ScrollView, Pressable, RefreshControl } from "react-native";
-import {
-	Text,
-	Avatar,
-	Card,
-	CardHeader,
-	CardContent,
-	CardFooter,
-	Badge,
-	Skeleton,
-	SkeletonCircle,
-} from "@/components/ui";
-
-interface Post {
-	id: string;
-	author: {
-		name: string;
-		avatar?: string;
-		isVerified?: boolean;
-	};
-	content: string;
-	timestamp: string;
-	likes: number;
-	comments: number;
-	isLiked?: boolean;
-}
-
-interface HomeScreenProps {
-	posts?: Post[];
-	loading?: boolean;
-	refreshing?: boolean;
-	onRefresh?: () => void;
-	onPostPress?: (post: Post) => void;
-	onProfilePress?: () => void;
-	onNotificationsPress?: () => void;
-}
-
-const mockPosts: Post[] = [
-	{
-		id: "1",
-		author: { name: "Jane Smith", isVerified: true },
-		content:
-			"Just shipped a new feature using Uniwind! The Tailwind CSS integration for React Native is a game-changer. Build UIs so much faster now!",
-		timestamp: "2h ago",
-		likes: 42,
-		comments: 8,
-		isLiked: true,
-	},
-	{
-		id: "2",
-		author: { name: "Alex Johnson" },
-		content:
-			"Working on something exciting with Teardown CLI. The developer experience is incredible - fast builds, great templates, and now with Uniwind support!",
-		timestamp: "4h ago",
-		likes: 28,
-		comments: 5,
-	},
-	{
-		id: "3",
-		author: { name: "Sam Wilson", isVerified: true },
-		content:
-			"Pro tip: Use the prebuilt components from the template as a starting point. They're fully customizable and follow best practices.",
-		timestamp: "6h ago",
-		likes: 156,
-		comments: 23,
-	},
-];
-
-export function HomeScreen({
-	posts = mockPosts,
-	loading = false,
-	refreshing = false,
-	onRefresh,
-	onPostPress,
-	onProfilePress,
-	onNotificationsPress,
-}: HomeScreenProps): React.JSX.Element {
-	return (
-		<View className="flex-1 bg-background">
-			{/* Header */}
-			<View className="flex-row items-center justify-between px-6 py-4 border-b border-border">
-				<Pressable onPress={onProfilePress}>
-					<Avatar fallback="U" size="sm" />
-				</Pressable>
-				<Text variant="h4">Home</Text>
-				<Pressable onPress={onNotificationsPress} className="relative">
-					<Text className="text-xl">🔔</Text>
-					<View className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-destructive" />
-				</Pressable>
-			</View>
-
-			{/* Content */}
-			<ScrollView
-				className="flex-1"
-				contentContainerClassName="p-4 gap-4"
-				refreshControl={
-					<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-				}
-			>
-				{loading ? (
-					// Loading skeleton
-					<>
-						<PostSkeleton />
-						<PostSkeleton />
-						<PostSkeleton />
-					</>
-				) : (
-					// Posts
-					posts.map((post) => (
-						<PostCard
-							key={post.id}
-							post={post}
-							onPress={() => onPostPress?.(post)}
-						/>
-					))
-				)}
-			</ScrollView>
-		</View>
-	);
-}
-
-function PostCard({
-	post,
-	onPress,
-}: {
-	post: Post;
-	onPress?: () => void;
-}): React.JSX.Element {
-	return (
-		<Pressable onPress={onPress}>
-			<Card>
-				<CardHeader className="flex-row items-center gap-3 pb-2">
-					<Avatar fallback={post.author.name} size="md" />
-					<View className="flex-1">
-						<View className="flex-row items-center gap-2">
-							<Text variant="large">{post.author.name}</Text>
-							{post.author.isVerified && (
-								<Badge variant="default" className="h-5">
-									<Text className="text-xs text-primary-foreground">✓</Text>
-								</Badge>
-							)}
-						</View>
-						<Text variant="muted">{post.timestamp}</Text>
-					</View>
-				</CardHeader>
-
-				<CardContent>
-					<Text>{post.content}</Text>
-				</CardContent>
-
-				<CardFooter className="gap-6 pt-2">
-					<Pressable className="flex-row items-center gap-2">
-						<Text className={post.isLiked ? "text-destructive" : ""}>
-							{post.isLiked ? "❤️" : "🤍"}
-						</Text>
-						<Text variant="muted">{post.likes}</Text>
-					</Pressable>
-
-					<Pressable className="flex-row items-center gap-2">
-						<Text>💬</Text>
-						<Text variant="muted">{post.comments}</Text>
-					</Pressable>
-
-					<Pressable className="flex-row items-center gap-2">
-						<Text>📤</Text>
-					</Pressable>
-				</CardFooter>
-			</Card>
-		</Pressable>
-	);
-}
-
-function PostSkeleton(): React.JSX.Element {
-	return (
-		<Card>
-			<CardHeader className="flex-row items-center gap-3 pb-2">
-				<SkeletonCircle size={40} />
-				<View className="flex-1 gap-2">
-					<Skeleton className="h-4 w-32" />
-					<Skeleton className="h-3 w-20" />
-				</View>
-			</CardHeader>
-			<CardContent className="gap-2">
-				<Skeleton className="h-4 w-full" />
-				<Skeleton className="h-4 w-full" />
-				<Skeleton className="h-4 w-3/4" />
-			</CardContent>
-			<CardFooter className="gap-6 pt-2">
-				<Skeleton className="h-4 w-12" />
-				<Skeleton className="h-4 w-12" />
-				<Skeleton className="h-4 w-8" />
-			</CardFooter>
-		</Card>
-	);
-}
-
-export default HomeScreen;

package/templates/src/screens/index.ts

@@ -1,17 +0,0 @@
-/**
- * Screens Barrel Export
- *
- * Pre-built screens using Uniwind components.
- * Use these as starting points for your app.
- */
-
-// Onboarding
-export { WelcomeScreen } from "./welcome";
-
-// Authentication
-export { LoginScreen, RegisterScreen } from "./auth";
-
-// Main App
-export { HomeScreen } from "./home";
-export { ProfileScreen } from "./profile";
-export { SettingsScreen } from "./settings";

package/templates/src/screens/profile.tsx

@@ -1,210 +0,0 @@
-/**
- * Profile Screen
- *
- * User profile display with edit capabilities.
- */
-
-import React from "react";
-import { View, ScrollView, Pressable } from "react-native";
-import {
-	Text,
-	Button,
-	Avatar,
-	Card,
-	CardContent,
-	Badge,
-	Separator,
-} from "@/components/ui";
-
-interface ProfileScreenProps {
-	user?: {
-		name: string;
-		email: string;
-		avatar?: string;
-		bio?: string;
-		location?: string;
-		joinedDate?: string;
-		isPro?: boolean;
-	};
-	stats?: {
-		posts: number;
-		followers: number;
-		following: number;
-	};
-	onEditProfile?: () => void;
-	onSettings?: () => void;
-	onLogout?: () => void;
-}
-
-export function ProfileScreen({
-	user = {
-		name: "John Doe",
-		email: "john@example.com",
-		bio: "Building amazing apps with React Native and Tailwind CSS",
-		location: "San Francisco, CA",
-		joinedDate: "January 2024",
-		isPro: true,
-	},
-	stats = {
-		posts: 42,
-		followers: 1234,
-		following: 567,
-	},
-	onEditProfile,
-	onSettings,
-	onLogout,
-}: ProfileScreenProps): React.JSX.Element {
-	return (
-		<ScrollView className="flex-1 bg-background">
-			{/* Header */}
-			<View className="bg-primary/5 pb-6 pt-4">
-				<View className="flex-row items-center justify-between px-6">
-					<Text variant="h3">Profile</Text>
-					<Pressable onPress={onSettings} className="p-2">
-						<Text className="text-xl">⚙️</Text>
-					</Pressable>
-				</View>
-
-				{/* Profile Info */}
-				<View className="items-center mt-6 px-6">
-					<Avatar
-						fallback={user.name}
-						size="xl"
-						className="border-4 border-background"
-					/>
-					<View className="items-center mt-4 gap-1">
-						<View className="flex-row items-center gap-2">
-							<Text variant="h3">{user.name}</Text>
-							{user.isPro && <Badge variant="default">PRO</Badge>}
-						</View>
-						<Text variant="muted">{user.email}</Text>
-					</View>
-				</View>
-
-				{/* Stats */}
-				<View className="flex-row justify-center gap-8 mt-6">
-					<StatItem label="Posts" value={stats.posts} />
-					<StatItem label="Followers" value={stats.followers} />
-					<StatItem label="Following" value={stats.following} />
-				</View>
-
-				{/* Actions */}
-				<View className="flex-row gap-3 mt-6 px-6">
-					<Button variant="outline" className="flex-1" onPress={onEditProfile}>
-						Edit Profile
-					</Button>
-					<Button variant="outline" size="icon">
-						<Text>📤</Text>
-					</Button>
-				</View>
-			</View>
-
-			{/* Content */}
-			<View className="p-6 gap-4">
-				{/* Bio Card */}
-				<Card>
-					<CardContent className="gap-4 py-4">
-						<View className="flex-row items-center gap-2">
-							<Text>📝</Text>
-							<Text variant="label">About</Text>
-						</View>
-						<Text>{user.bio}</Text>
-					</CardContent>
-				</Card>
-
-				{/* Details Card */}
-				<Card>
-					<CardContent className="gap-4 py-4">
-						<View className="flex-row items-center gap-2">
-							<Text>ℹ️</Text>
-							<Text variant="label">Details</Text>
-						</View>
-
-						<View className="gap-3">
-							<DetailRow icon="📍" label="Location" value={user.location || "Not set"} />
-							<Separator />
-							<DetailRow icon="📅" label="Joined" value={user.joinedDate || "Unknown"} />
-						</View>
-					</CardContent>
-				</Card>
-
-				{/* Quick Actions */}
-				<Card>
-					<CardContent className="gap-1 py-2">
-						<ActionRow icon="🔔" label="Notifications" onPress={() => {}} />
-						<Separator />
-						<ActionRow icon="🔒" label="Privacy & Security" onPress={() => {}} />
-						<Separator />
-						<ActionRow icon="❓" label="Help & Support" onPress={() => {}} />
-					</CardContent>
-				</Card>
-
-				{/* Logout */}
-				<Button variant="destructive" fullWidth onPress={onLogout}>
-					Sign Out
-				</Button>
-			</View>
-		</ScrollView>
-	);
-}
-
-function StatItem({ label, value }: { label: string; value: number }): React.JSX.Element {
-	const formatNumber = (num: number): string => {
-		if (num >= 1000) {
-			return `${(num / 1000).toFixed(1)}k`;
-		}
-		return num.toString();
-	};
-
-	return (
-		<View className="items-center">
-			<Text variant="h3">{formatNumber(value)}</Text>
-			<Text variant="muted">{label}</Text>
-		</View>
-	);
-}
-
-function DetailRow({
-	icon,
-	label,
-	value,
-}: {
-	icon: string;
-	label: string;
-	value: string;
-}): React.JSX.Element {
-	return (
-		<View className="flex-row items-center justify-between">
-			<View className="flex-row items-center gap-2">
-				<Text>{icon}</Text>
-				<Text variant="muted">{label}</Text>
-			</View>
-			<Text>{value}</Text>
-		</View>
-	);
-}
-
-function ActionRow({
-	icon,
-	label,
-	onPress,
-}: {
-	icon: string;
-	label: string;
-	onPress: () => void;
-}): React.JSX.Element {
-	return (
-		<Pressable
-			className="flex-row items-center justify-between py-3 active:bg-muted rounded-lg px-2 -mx-2"
-			onPress={onPress}
-		>
-			<View className="flex-row items-center gap-3">
-				<Text className="text-lg">{icon}</Text>
-				<Text>{label}</Text>
-			</View>
-			<Text className="text-muted-foreground">›</Text>
-		</Pressable>
-	);
-}
-
-export default ProfileScreen;