@teardown/cli 1.2.38 → 2.0.41

package/templates/src/routes/settings.tsx

@@ -0,0 +1,194 @@
+/**
+ * Settings Screen
+ *
+ * App settings and preferences screen.
+ * This is a stack screen outside of the tab navigator.
+ */
+
+import React from "react";
+import { View, ScrollView, Switch, Pressable } from "react-native";
+import { defineScreen } from "@teardown/navigation/primitives";
+import { useTypedNavigation } from "@teardown/navigation/hooks";
+import {
+	Text,
+	Button,
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+	Separator,
+} from "@/components/ui";
+
+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

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

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

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

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

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