create-stackr 0.2.0 → 0.3.0

package/templates/features/mobile/{tabs/app/(tabs)/index.tsx → auth/app/(public)/index.tsx.ejs}

@@ -1,69 +1,34 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo<% if (features.sessionManagement) { %>, useState<% } %> } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   SafeAreaView,
   ScrollView,
-  Modal,
+<% if (features.sessionManagement) { %>  Modal,
   Pressable,
-  Alert,
   KeyboardAvoidingView,
   Platform,
-} from 'react-native';
+<% } %>} from 'react-native';
 import { router } from 'expo-router';
-import Constants from 'expo-constants';
-import { LinearGradient } from 'expo-linear-gradient';
-import { useAuth } from '../../src/hooks';
-import { useSessionActions } from '../../src/store/deviceSession.store';
-import { Button, Input } from '../../src/components/ui';
-import { IconSymbol } from '../../src/components/ui/IconSymbol';
-import { formatDisplayName } from '../../src/utils/formatters';
-import { useAppTheme, AppTheme } from '@/context/ThemeContext';
-
-export default function HomeScreen() {
+<% if (features.sessionManagement) { %>import Constants from 'expo-constants';
+<% } %>import { LinearGradient } from 'expo-linear-gradient';
+import { Button } from '@/components/ui/button';
+<% if (features.sessionManagement) { %>import { Input } from '@/components/ui/input';
+<% } %>
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+<% if (features.sessionManagement) { %>import { useSessionActions } from '@/store/device-session-store';
+<% } %>
+
+export default function LandingScreen() {
   const theme = useAppTheme();
   const styles = useMemo(() => createStyles(theme), [theme]);
-
-  const { user, signOut, deleteAccount, isLoading, isAuthenticated } = useAuth();
-  const { deleteSession, initializeSession } = useSessionActions();
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deleteConfirmText, setDeleteConfirmText] = useState('');
-  const [isDeleting, setIsDeleting] = useState(false);
+<% if (features.sessionManagement) { %>  const { deleteSession, initializeSession } = useSessionActions();
   const [showDeleteSessionModal, setShowDeleteSessionModal] = useState(false);
   const [deleteSessionConfirmText, setDeleteSessionConfirmText] = useState('');
   const [isDeletingSession, setIsDeletingSession] = useState(false);
 
-  // Gradient colors based on theme
-  const gradientColors = theme.mode === 'dark'
-    ? [theme.colors.card, 'transparent'] as const
-    : ['#ffffff', '#f8fafc'] as const; // Subtle fade for light mode
-
-  const handleLogout = async () => {
-    const result = await signOut();
-    if (!result.success) {
-      Alert.alert('Error', 'Failed to sign out. Please try again.');
-    }
-  };
-
-  const handleDeleteAccount = async () => {
-    if (deleteConfirmText !== 'DELETE') {
-      return;
-    }
-
-    setIsDeleting(true);
-    const result = await deleteAccount();
-    setIsDeleting(false);
-
-    if (result.success) {
-      await signOut();
-      setShowDeleteModal(false);
-      setDeleteConfirmText('');
-    } else {
-      Alert.alert('Error', result.error || 'Failed to delete account. Please try again.');
-    }
-  };
-
   const handleDeleteSession = async () => {
     if (deleteSessionConfirmText !== 'DELETE') {
       return;
@@ -76,10 +41,10 @@ export default function HomeScreen() {
       setShowDeleteSessionModal(false);
       setDeleteSessionConfirmText('');
 
-      if (!onboardingEnabled) {
-        await initializeSession();
-      } else {
+      if (onboardingEnabled) {
         router.replace('/(onboarding)/page-1');
+      } else {
+        await initializeSession();
       }
     } catch (error) {
       console.error('Failed to delete/recreate session:', error);
@@ -89,8 +54,12 @@ export default function HomeScreen() {
       setIsDeletingSession(false);
     }
   };
+<% } %>
 
-  const isDeleteButtonEnabled = deleteConfirmText === 'DELETE' && !isDeleting;
+  // Gradient colors based on theme
+  const gradientColors = theme.mode === 'dark'
+    ? [theme.colors.card, 'transparent'] as const
+    : ['#ffffff', '#f8fafc'] as const;
 
   const features = [
     'Authentication system',
@@ -104,32 +73,24 @@ export default function HomeScreen() {
     <SafeAreaView style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.content}>
-          <Text style={styles.title}>Welcome to Your App!</Text>
-
-          {user && (
-            <LinearGradient
-              colors={gradientColors}
-              style={styles.userInfo}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 0, y: 1 }}
-            >
-              <Text style={styles.greeting}>
-                Hello, {formatDisplayName(user.name)}!
-              </Text>
-              <Text style={styles.email}>{user.email}</Text>
-              <Text style={styles.userId}>User ID: {user.id}</Text>
-            </LinearGradient>
-          )}
+          {/* Hero Section */}
+          <View style={styles.heroSection}>
+            <Text style={styles.title}>Welcome to Your App!</Text>
+            <Text style={styles.subtitle}>
+              Get started by creating an account or signing in
+            </Text>
+          </View>
 
+          {/* Features Section */}
           <LinearGradient
             colors={gradientColors}
             style={styles.section}
             start={{ x: 0, y: 0 }}
             end={{ x: 0, y: 1 }}
           >
-            <Text style={styles.sectionTitle}>Getting Started</Text>
+            <Text style={styles.sectionTitle}>What's Included</Text>
             <Text style={styles.sectionText}>
-              This is your main app screen. You can now start building your amazing features!
+              This app comes with everything you need to get started quickly.
             </Text>
 
             <View style={styles.featureList}>
@@ -148,124 +109,34 @@ export default function HomeScreen() {
             </View>
           </LinearGradient>
 
+          {/* CTA Section */}
           <View style={styles.actions}>
-            {isAuthenticated ? (
-              <>
-                <Button
-                  title="Logout"
-                  variant="outline"
-                  onPress={handleLogout}
-                  loading={isLoading}
-                  style={styles.logoutButton}
-                />
-
-                <Button
-                  title="Delete Account"
-                  variant="outline"
-                  onPress={() => setShowDeleteModal(true)}
-                  style={styles.deleteButton}
-                  textStyle={styles.deleteButtonText}
-                />
-              </>
-            ) : (
-              <>
-                <Button
-                  title="Sign In"
-                  variant="primary"
-                  onPress={() => router.push('/(auth)/login')}
-                  style={styles.signInButton}
-                />
-
-                <Button
-                  title="Create Account"
-                  variant="outline"
-                  onPress={() => router.push('/(auth)/register')}
-                  style={styles.createAccountButton}
-                />
-
-                <Button
-                  title="Delete Session"
-                  variant="outline"
-                  onPress={() => setShowDeleteSessionModal(true)}
-                  style={styles.deleteSessionButton}
-                  textStyle={styles.deleteSessionButtonText}
-                />
-              </>
-            )}
+            <Button
+              title="Sign In"
+              variant="primary"
+              onPress={() => router.push('/(auth)/login')}
+              style={styles.signInButton}
+            />
+
+            <Button
+              title="Create Account"
+              variant="outline"
+              onPress={() => router.push('/(auth)/register')}
+              style={styles.createAccountButton}
+            />
+<% if (features.sessionManagement) { %>
+            <Button
+              title="Delete Session"
+              variant="outline"
+              onPress={() => setShowDeleteSessionModal(true)}
+              style={styles.deleteSessionButton}
+              textStyle={styles.deleteSessionButtonText}
+            />
+<% } %>
           </View>
         </View>
       </ScrollView>
-
-      {/* Delete Account Confirmation Modal */}
-      <Modal
-        visible={showDeleteModal}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setShowDeleteModal(false)}
-        statusBarTranslucent
-      >
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.keyboardAvoidingModal}
-        >
-          <Pressable
-            style={styles.modalOverlay}
-            onPress={() => setShowDeleteModal(false)}
-          >
-            <Pressable
-              style={styles.modalContent}
-              onPress={(e) => e.stopPropagation()}
-            >
-              <Text style={styles.modalTitle}>Delete Account</Text>
-
-              <View style={styles.warningContainer}>
-                <Text style={styles.warningTitle}>Warning</Text>
-                <Text style={styles.warningText}>
-                  This action is permanent and cannot be undone. All your account data will be deleted immediately.
-                </Text>
-              </View>
-
-              <View style={styles.gdprNotice}>
-                <Text style={styles.gdprTitle}>Third-Party Data Notice</Text>
-                <Text style={styles.gdprText}>
-                  Please note that data stored by third-party services (RevenueCat, Adjust, Scate) may persist on their servers.
-                </Text>
-              </View>
-
-              <Input
-                label="Type DELETE to confirm"
-                value={deleteConfirmText}
-                onChangeText={setDeleteConfirmText}
-                placeholder="DELETE"
-                autoCapitalize="characters"
-                containerStyle={styles.confirmInput}
-              />
-
-              <View style={styles.modalActions}>
-                <Button
-                  title="Cancel"
-                  variant="outline"
-                  onPress={() => {
-                    setShowDeleteModal(false);
-                    setDeleteConfirmText('');
-                  }}
-                  style={styles.modalButton}
-                />
-
-                <Button
-                  title={isDeleting ? "Deleting..." : "Delete"}
-                  variant="primary"
-                  onPress={handleDeleteAccount}
-                  disabled={!isDeleteButtonEnabled}
-                  loading={isDeleting}
-                  style={StyleSheet.flatten([styles.modalButton, styles.deleteConfirmButton])}
-                />
-              </View>
-            </Pressable>
-          </Pressable>
-        </KeyboardAvoidingView>
-      </Modal>
-
+<% if (features.sessionManagement) { %>
       {/* Delete Session Confirmation Modal */}
       <Modal
         visible={showDeleteSessionModal}
@@ -328,6 +199,7 @@ export default function HomeScreen() {
           </Pressable>
         </KeyboardAvoidingView>
       </Modal>
+<% } %>
     </SafeAreaView>
   );
 }
@@ -347,45 +219,28 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
     padding: theme.spacing[5],
   },
 
+  heroSection: {
+    paddingVertical: theme.spacing[8],
+    alignItems: 'center',
+  },
+
   title: {
     fontSize: theme.typography.fontSize['3xl'],
     fontWeight: '800',
     color: theme.colors.text,
     textAlign: 'center',
-    marginBottom: theme.spacing[8],
+    marginBottom: theme.spacing[3],
     letterSpacing: -1,
   },
 
-  userInfo: {
-    // Removed solid background
-    borderRadius: theme.borderRadius.xl,
-    padding: theme.spacing[5],
-    marginBottom: theme.spacing[6],
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: theme.colors.borderLight,
-  },
-
-  greeting: {
+  subtitle: {
     fontSize: theme.typography.fontSize.lg,
-    fontWeight: '700',
-    color: theme.colors.text,
-    marginBottom: theme.spacing[2],
-  },
-
-  email: {
-    fontSize: theme.typography.fontSize.base,
     color: theme.colors.textSecondary,
-    marginBottom: theme.spacing[1],
-  },
-
-  userId: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.textMuted,
+    textAlign: 'center',
+    lineHeight: 28,
   },
 
   section: {
-    // Removed solid background
     borderRadius: theme.borderRadius.xl,
     padding: theme.spacing[6],
     marginBottom: theme.spacing[6],
@@ -437,29 +292,15 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
     paddingTop: theme.spacing[5],
   },
 
-  logoutButton: {
-    marginTop: theme.spacing[4],
-  },
-
-  deleteButton: {
-    marginTop: theme.spacing[3],
-    borderColor: theme.colors.error,
-  },
-
-  deleteButtonText: {
-    color: theme.colors.error,
-  },
-
   signInButton: {
-    marginTop: theme.spacing[4],
+    marginBottom: theme.spacing[3],
   },
 
   createAccountButton: {
-    marginTop: theme.spacing[3],
-  },
-
+<% if (features.sessionManagement) { %>    marginBottom: theme.spacing[3],
+<% } %>  },
+<% if (features.sessionManagement) { %>
   deleteSessionButton: {
-    marginTop: theme.spacing[3],
     borderColor: theme.colors.error,
   },
 
@@ -501,13 +342,13 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
   },
 
   warningContainer: {
-    backgroundColor: 'transparent', // No more solid gray block
+    backgroundColor: 'transparent',
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing[4],
     marginBottom: theme.spacing[5],
     borderWidth: 1,
-    borderColor: theme.colors.warning, // Outline instead
-    borderStyle: 'dashed', // Optional stylish touch
+    borderColor: theme.colors.warning,
+    borderStyle: 'dashed',
   },
 
   warningTitle: {
@@ -523,28 +364,6 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
     lineHeight: 20,
   },
 
-  gdprNotice: {
-    backgroundColor: 'transparent',
-    borderRadius: theme.borderRadius.lg,
-    padding: theme.spacing[4],
-    marginBottom: theme.spacing[5],
-    borderWidth: 1,
-    borderColor: theme.colors.info,
-  },
-
-  gdprTitle: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: '600',
-    color: theme.colors.info,
-    marginBottom: theme.spacing[2],
-  },
-
-  gdprText: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.textMuted,
-    lineHeight: 18,
-  },
-
   confirmInput: {
     marginBottom: theme.spacing[6],
   },
@@ -560,6 +379,6 @@ const createStyles = (theme: AppTheme) => StyleSheet.create({
 
   deleteConfirmButton: {
     backgroundColor: theme.colors.error,
-    borderWidth: 0, // Solid button
+    borderWidth: 0,
   },
-});
+<% } %>});

package/templates/features/mobile/auth/app/(tabs)/settings/_layout.tsx.ejs

@@ -0,0 +1,20 @@
+import { Stack } from 'expo-router';
+import { useAppTheme } from '@/context/theme-context';
+
+export default function SettingsLayout() {
+  const theme = useAppTheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.colors.background },
+        headerTintColor: theme.colors.text,
+        headerShadowVisible: false,
+        headerBackTitleVisible: false,
+      }}
+    >
+      <Stack.Screen name="index" options={{ headerShown: false, title: 'Settings' }} />
+      <Stack.Screen name="security" options={{ headerShown: false }} />
+    </Stack>
+  );
+}

package/templates/features/mobile/auth/app/(tabs)/settings/index.tsx.ejs

@@ -0,0 +1,137 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from '../../../src/hooks/auth';
+import { IconSymbol } from '../../../src/components/ui/icon-symbol';
+import { useAppTheme, AppTheme } from '@/context/theme-context';
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const { user } = useAuth();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.header}>
+          <Text style={styles.headerTitle}>Settings</Text>
+          <Text style={styles.headerSubtitle}>{user?.email}</Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Account</Text>
+
+          <TouchableOpacity
+            style={styles.settingsItem}
+            onPress={() => router.push('/account')}
+            activeOpacity={0.7}
+          >
+            <View style={styles.settingsItemLeft}>
+              <View style={[styles.iconContainer, { backgroundColor: theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)' }]}>
+                <IconSymbol name="person.fill" size={20} color={theme.colors.text} />
+              </View>
+              <View style={styles.settingsItemContent}>
+                <Text style={styles.settingsItemText}>Account Details</Text>
+                <Text style={styles.settingsItemSubtext}>Manage your profile information</Text>
+              </View>
+            </View>
+            <IconSymbol name="chevron.right" size={18} color={theme.colors.textMuted} />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={styles.settingsItem}
+            onPress={() => router.push('/(tabs)/settings/security')}
+            activeOpacity={0.7}
+          >
+            <View style={styles.settingsItemLeft}>
+              <View style={[styles.iconContainer, { backgroundColor: theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)' }]}>
+                <IconSymbol name="lock.shield.fill" size={20} color={theme.colors.text} />
+              </View>
+              <View style={styles.settingsItemContent}>
+                <Text style={styles.settingsItemText}>Security</Text>
+                <Text style={styles.settingsItemSubtext}>Two-factor authentication & more</Text>
+              </View>
+            </View>
+            <IconSymbol name="chevron.right" size={18} color={theme.colors.textMuted} />
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  scrollContent: {
+    paddingBottom: theme.spacing[8],
+  },
+  header: {
+    padding: theme.spacing[6],
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[6],
+  },
+  headerTitle: {
+    fontSize: 32,
+    fontWeight: '700',
+    color: theme.colors.text,
+    letterSpacing: -0.5,
+  },
+  headerSubtitle: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textSecondary,
+    marginTop: theme.spacing[1],
+  },
+  section: {
+    paddingHorizontal: theme.spacing[5],
+    marginBottom: theme.spacing[6],
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: theme.colors.textSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: theme.spacing[3],
+    marginLeft: theme.spacing[1],
+  },
+  settingsItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing[4],
+    backgroundColor: theme.colors.backgroundSecondary,
+    borderRadius: 16,
+    marginBottom: theme.spacing[3],
+    ...theme.shadows.small,
+  },
+  settingsItemLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  settingsItemContent: {
+    marginLeft: theme.spacing[3],
+    flex: 1,
+  },
+  settingsItemText: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: '500',
+    color: theme.colors.text,
+  },
+  settingsItemSubtext: {
+    fontSize: theme.typography.fontSize.xs,
+    color: theme.colors.textSecondary,
+    marginTop: 2,
+  },
+});

package/templates/features/mobile/auth/app/(tabs)/settings/security/_layout.tsx.ejs

@@ -0,0 +1,35 @@
+import { Stack, useRouter } from 'expo-router';
+import { TouchableOpacity } from 'react-native';
+import { useAppTheme } from '@/context/theme-context';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+
+export default function SecurityLayout() {
+  const theme = useAppTheme();
+  const router = useRouter();
+
+  const BackButton = () => (
+    <TouchableOpacity
+      onPress={() => router.back()}
+      style={{ marginRight: 16 }}
+    >
+      <IconSymbol name="chevron.left" size={24} color={theme.colors.text} />
+    </TouchableOpacity>
+  );
+
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.colors.background },
+        headerTintColor: theme.colors.text,
+        headerShadowVisible: false,
+        headerBackTitleVisible: false,
+        headerLeft: () => <BackButton />,
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: 'Security' }} />
+      <Stack.Screen name="two-factor-setup" options={{ title: 'Enable 2FA' }} />
+      <Stack.Screen name="two-factor-manage" options={{ title: 'Manage 2FA' }} />
+      <Stack.Screen name="set-password" options={{ title: 'Set Password' }} />
+    </Stack>
+  );
+}