@teardown/cli 1.2.38 → 2.0.41

package/templates/src/screens/home.tsx

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

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

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

package/templates/src/screens/settings.tsx

@@ -0,0 +1,216 @@
+/**
+ * Settings Screen
+ *
+ * App settings and preferences.
+ */
+
+import React, { useState } from "react";
+import { View, ScrollView, Switch, Pressable } from "react-native";
+import { Text, Card, CardContent, Separator, Badge } from "@/components/ui";
+
+interface SettingsScreenProps {
+	onBack?: () => void;
+	version?: string;
+}
+
+export function SettingsScreen({
+	onBack,
+	version = "1.0.0",
+}: SettingsScreenProps): React.JSX.Element {
+	const [notifications, setNotifications] = useState(true);
+	const [darkMode, setDarkMode] = useState(false);
+	const [haptics, setHaptics] = useState(true);
+	const [analytics, setAnalytics] = useState(true);
+
+	return (
+		<ScrollView className="flex-1 bg-background">
+			{/* Header */}
+			<View className="flex-row items-center gap-4 px-6 py-4 border-b border-border">
+				<Pressable onPress={onBack} className="p-2 -ml-2">
+					<Text className="text-xl">←</Text>
+				</Pressable>
+				<Text variant="h3">Settings</Text>
+			</View>
+
+			<View className="p-6 gap-6">
+				{/* Preferences */}
+				<SettingsSection title="Preferences">
+					<ToggleRow
+						icon="🔔"
+						label="Push Notifications"
+						description="Receive push notifications"
+						value={notifications}
+						onValueChange={setNotifications}
+					/>
+					<Separator />
+					<ToggleRow
+						icon="🌙"
+						label="Dark Mode"
+						description="Use dark color theme"
+						value={darkMode}
+						onValueChange={setDarkMode}
+					/>
+					<Separator />
+					<ToggleRow
+						icon="📳"
+						label="Haptic Feedback"
+						description="Enable haptic feedback"
+						value={haptics}
+						onValueChange={setHaptics}
+					/>
+				</SettingsSection>
+
+				{/* Account */}
+				<SettingsSection title="Account">
+					<LinkRow icon="👤" label="Edit Profile" onPress={() => {}} />
+					<Separator />
+					<LinkRow icon="🔐" label="Change Password" onPress={() => {}} />
+					<Separator />
+					<LinkRow icon="📧" label="Email Preferences" onPress={() => {}} />
+					<Separator />
+					<LinkRow
+						icon="💳"
+						label="Subscription"
+						badge="PRO"
+						onPress={() => {}}
+					/>
+				</SettingsSection>
+
+				{/* Privacy */}
+				<SettingsSection title="Privacy & Data">
+					<ToggleRow
+						icon="📊"
+						label="Analytics"
+						description="Help improve the app"
+						value={analytics}
+						onValueChange={setAnalytics}
+					/>
+					<Separator />
+					<LinkRow icon="🛡️" label="Privacy Policy" onPress={() => {}} />
+					<Separator />
+					<LinkRow icon="📋" label="Terms of Service" onPress={() => {}} />
+					<Separator />
+					<LinkRow
+						icon="🗑️"
+						label="Delete Account"
+						destructive
+						onPress={() => {}}
+					/>
+				</SettingsSection>
+
+				{/* Support */}
+				<SettingsSection title="Support">
+					<LinkRow icon="❓" label="Help Center" onPress={() => {}} />
+					<Separator />
+					<LinkRow icon="💬" label="Contact Support" onPress={() => {}} />
+					<Separator />
+					<LinkRow icon="⭐" label="Rate the App" onPress={() => {}} />
+				</SettingsSection>
+
+				{/* About */}
+				<SettingsSection title="About">
+					<View className="flex-row items-center justify-between py-3">
+						<View className="flex-row items-center gap-3">
+							<Text className="text-lg">📱</Text>
+							<Text>Version</Text>
+						</View>
+						<Text variant="muted">{version}</Text>
+					</View>
+					<Separator />
+					<LinkRow icon="📜" label="Licenses" onPress={() => {}} />
+				</SettingsSection>
+
+				{/* Footer */}
+				<View className="items-center py-8">
+					<Text variant="muted">Made with ❤️ using Teardown CLI</Text>
+					<Text variant="muted" className="mt-1">
+						Powered by Uniwind + Tailwind CSS
+					</Text>
+				</View>
+			</View>
+		</ScrollView>
+	);
+}
+
+function SettingsSection({
+	title,
+	children,
+}: {
+	title: string;
+	children: React.ReactNode;
+}): React.JSX.Element {
+	return (
+		<View className="gap-2">
+			<Text variant="label" className="text-muted-foreground px-1">
+				{title}
+			</Text>
+			<Card>
+				<CardContent className="py-2">{children}</CardContent>
+			</Card>
+		</View>
+	);
+}
+
+function ToggleRow({
+	icon,
+	label,
+	description,
+	value,
+	onValueChange,
+}: {
+	icon: string;
+	label: string;
+	description?: string;
+	value: boolean;
+	onValueChange: (value: boolean) => void;
+}): React.JSX.Element {
+	return (
+		<View className="flex-row items-center justify-between py-3">
+			<View className="flex-row items-center gap-3 flex-1">
+				<Text className="text-lg">{icon}</Text>
+				<View className="flex-1">
+					<Text>{label}</Text>
+					{description && <Text variant="muted">{description}</Text>}
+				</View>
+			</View>
+			<Switch
+				value={value}
+				onValueChange={onValueChange}
+				trackColor={{ false: "#e2e8f0", true: "#3b82f6" }}
+				thumbColor="#ffffff"
+			/>
+		</View>
+	);
+}
+
+function LinkRow({
+	icon,
+	label,
+	badge,
+	destructive,
+	onPress,
+}: {
+	icon: string;
+	label: string;
+	badge?: string;
+	destructive?: boolean;
+	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 className={destructive ? "text-destructive" : ""}>{label}</Text>
+			</View>
+			<View className="flex-row items-center gap-2">
+				{badge && <Badge variant="default">{badge}</Badge>}
+				<Text className="text-muted-foreground">›</Text>
+			</View>
+		</Pressable>
+	);
+}
+
+export default SettingsScreen;