create-stackr 0.2.0

package/templates/base/web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        presentation: 'modal',
+        animation: 'slide_from_bottom',
+      }}
+    >
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+    </Stack>
+  );
+}

package/templates/features/mobile/auth/app/(auth)/login.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useMemo } from 'react';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
+import { router, Stack } from 'expo-router';
+import { LoginForm } from '../../src/components/auth';
+import { IconSymbol } from '../../src/components/ui/IconSymbol';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAuth } from '../../src/hooks';
+
+export default function LoginScreen() {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const { isAuthenticated } = useAuth();
+
+  // Watch for auth state changes (handles both native and browser OAuth)
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace('/(tabs)');
+    }
+  }, [isAuthenticated]);
+
+  const handleLoginSuccess = () => {
+    // Navigate to the main app (for email/password login)
+    router.replace('/(tabs)');
+  };
+
+  const handleSwitchToRegister = () => {
+    router.push('/(auth)/register');
+  };
+
+  const handleBack = () => {
+    if (router.canGoBack()) {
+      router.back();
+    }
+  };
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <SafeAreaView style={styles.container}>
+        {/* Back Button */}
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={handleBack}
+          activeOpacity={0.7}
+        >
+          <IconSymbol
+            name="chevron.left"
+            size={24}
+            color={theme.colors.text}
+          />
+        </TouchableOpacity>
+
+        <View style={styles.content}>
+          <LoginForm
+            onSuccess={handleLoginSuccess}
+            onSwitchToRegister={handleSwitchToRegister}
+          />
+        </View>
+      </SafeAreaView>
+    </>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  backButton: {
+    position: 'absolute',
+    top: 60,
+    left: 16,
+    width: 44,
+    height: 44,
+    backgroundColor: theme.colors.backgroundSecondary,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    ...theme.shadows.small,
+  },
+  content: {
+    flex: 1,
+  },
+});

package/templates/features/mobile/auth/app/(auth)/register.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useMemo } from 'react';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
+import { router, Stack } from 'expo-router';
+import { RegisterForm } from '../../src/components/auth';
+import { IconSymbol } from '../../src/components/ui/IconSymbol';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+import { useAuth } from '../../src/hooks';
+
+export default function RegisterScreen() {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const { isAuthenticated } = useAuth();
+
+  // Watch for auth state changes (handles both native and browser OAuth)
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace('/(tabs)');
+    }
+  }, [isAuthenticated]);
+
+  const handleRegisterSuccess = () => {
+    // Navigate to the main app (for email/password registration)
+    router.replace('/(tabs)');
+  };
+
+  const handleSwitchToLogin = () => {
+    router.back();
+  };
+
+  const handleBack = () => {
+    if (router.canGoBack()) {
+      router.back();
+    }
+  };
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <SafeAreaView style={styles.container}>
+        {/* Back Button */}
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={handleBack}
+          activeOpacity={0.7}
+        >
+          <IconSymbol
+            name="chevron.left"
+            size={24}
+            color={theme.colors.text}
+          />
+        </TouchableOpacity>
+
+        <View style={styles.content}>
+          <RegisterForm
+            onSuccess={handleRegisterSuccess}
+            onSwitchToLogin={handleSwitchToLogin}
+          />
+        </View>
+      </SafeAreaView>
+    </>
+  );
+}
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  backButton: {
+    position: 'absolute',
+    top: 60,
+    left: 16,
+    width: 44,
+    height: 44,
+    backgroundColor: theme.colors.backgroundSecondary,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    ...theme.shadows.small,
+  },
+  content: {
+    flex: 1,
+  },
+});

package/templates/features/mobile/auth/components/auth/LoginForm.tsx.ejs

@@ -0,0 +1,349 @@
+<% const hasOAuth = features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github; %>
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Alert,
+<% if (hasOAuth) { %>
+  TouchableOpacity,
+<% } %>
+} from 'react-native';
+import { Button, Input } from '../ui';
+import { useAuth } from '../../hooks';
+import { isValidEmail } from '../../utils/formatters';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface LoginFormProps {
+  onSuccess?: () => void;
+  onSwitchToRegister?: () => void;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({
+  onSuccess,
+  onSwitchToRegister,
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+
+  const {
+    signIn,
+    isLoading,
+    clearError,
+<% if (features.authentication.providers.google) { %>
+    signInWithGoogle,
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+    signInWithApple,
+<% } %>
+<% if (features.authentication.providers.github) { %>
+    signInWithGitHub,
+<% } %>
+  } = useAuth();
+
+  // Clear auth error on unmount
+  useEffect(() => {
+    return () => clearError();
+  }, [clearError]);
+
+  const validateForm = (): boolean => {
+    const newErrors: { email?: string; password?: string } = {};
+
+    if (!email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!isValidEmail(email.trim())) {
+      newErrors.email = 'Please enter a valid email';
+    }
+
+    if (!password.trim()) {
+      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 handleSubmit = async () => {
+    if (!validateForm()) return;
+
+    const result = await signIn({
+      email: email.trim().toLowerCase(),
+      password,
+    });
+
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      // Show server error via Alert
+      Alert.alert('Sign In Failed', result.error || 'Please check your credentials and try again.');
+    }
+  };
+<% if (features.authentication.providers.google) { %>
+
+  const handleGoogleSignIn = async () => {
+    const result = await signInWithGoogle();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    // via deep link callback. The parent screen watches isAuthenticated
+    // state and will navigate when the session is established.
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+
+  const handleAppleSignIn = async () => {
+    const result = await signInWithApple();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+<% if (features.authentication.providers.github) { %>
+
+  const handleGitHubSignIn = async () => {
+    const result = await signInWithGitHub();
+    // Don't call onSuccess here - browser OAuth completes asynchronously
+    if (result.error && result.error !== 'Sign in cancelled') {
+      Alert.alert('Sign In Failed', result.error);
+    }
+  };
+<% } %>
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.form}>
+          <Text style={styles.title}>Welcome Back</Text>
+          <Text style={styles.subtitle}>Sign in to your account</Text>
+
+          <Input
+            label="Email"
+            value={email}
+            onChangeText={(text) => {
+              setEmail(text);
+              if (errors.email) {
+                setErrors(prev => ({ ...prev, email: undefined }));
+              }
+            }}
+            placeholder="Enter your email"
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+            error={errors.email}
+            containerStyle={styles.inputContainer}
+          />
+
+          <Input
+            label="Password"
+            value={password}
+            onChangeText={(text) => {
+              setPassword(text);
+              if (errors.password) {
+                setErrors(prev => ({ ...prev, password: undefined }));
+              }
+            }}
+            placeholder="Enter your password"
+            secureTextEntry
+            showPasswordToggle
+            autoComplete="password"
+            error={errors.password}
+            containerStyle={styles.inputContainer}
+          />
+
+          <Button
+            title="Sign In"
+            onPress={handleSubmit}
+            loading={isLoading}
+            disabled={isLoading}
+            style={styles.submitButton}
+          />
+<% if (hasOAuth) { %>
+
+          {/* OAuth Divider */}
+          <View style={styles.dividerContainer}>
+            <View style={styles.dividerLine} />
+            <Text style={styles.dividerText}>or continue with</Text>
+            <View style={styles.dividerLine} />
+          </View>
+
+          {/* OAuth Buttons */}
+          <View style={styles.oauthContainer}>
+<% if (features.authentication.providers.google) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleGoogleSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>
+                <Text style={styles.googleIcon}>G</Text>{'  '}Google
+              </Text>
+            </TouchableOpacity>
+<% } %>
+<% if (features.authentication.providers.apple) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleAppleSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>Apple</Text>
+            </TouchableOpacity>
+<% } %>
+<% if (features.authentication.providers.github) { %>
+            <TouchableOpacity
+              style={styles.oauthButton}
+              onPress={handleGitHubSignIn}
+              disabled={isLoading}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.oauthButtonText}>GitHub</Text>
+            </TouchableOpacity>
+<% } %>
+          </View>
+<% } %>
+
+          {onSwitchToRegister && (
+            <View style={styles.switchContainer}>
+              <Text style={styles.switchText}>
+                Don't have an account?{' '}
+              </Text>
+              <Button
+                title="Sign Up"
+                variant="ghost"
+                onPress={onSwitchToRegister}
+                style={styles.switchButton}
+                textStyle={styles.switchButtonText}
+              />
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: theme.spacing[5],
+  },
+
+  form: {
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+
+  title: {
+    fontSize: theme.typography.fontSize['2xl'],
+    fontWeight: 'bold',
+    color: theme.colors.text,
+    textAlign: 'center',
+    marginBottom: theme.spacing[2],
+  },
+
+  subtitle: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+    textAlign: 'center',
+    marginBottom: theme.spacing[8],
+  },
+
+  inputContainer: {
+    marginBottom: theme.spacing[5],
+  },
+
+  submitButton: {
+    marginTop: theme.spacing[2],
+    marginBottom: theme.spacing[6],
+  },
+<% if (hasOAuth) { %>
+
+  // Divider
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: theme.spacing[6],
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: theme.colors.border,
+  },
+  dividerText: {
+    marginHorizontal: theme.spacing[4],
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.textSecondary,
+  },
+
+  // OAuth buttons - theme-aware (matches web app pattern)
+  oauthContainer: {
+    gap: theme.spacing[3],
+    marginBottom: theme.spacing[6],
+  },
+  oauthButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.border,
+  },
+  oauthButtonText: {
+    fontSize: theme.typography.fontSize.base,
+    fontWeight: '600',
+    color: theme.colors.text,
+  },
+  googleIcon: {
+    color: theme.colors.primary,
+    fontWeight: '700',
+    fontSize: 18,
+  },
+<% } %>
+
+  switchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  switchText: {
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.textSecondary,
+  },
+
+  switchButton: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    minHeight: 'auto' as unknown as number,
+  },
+
+  switchButtonText: {
+    fontSize: theme.typography.fontSize.base,
+  },
+});