@nextsparkjs/mobile 0.1.0-beta.147 → 0.1.0-beta.148

package/templates/app/(app)/tasks.tsx

@@ -1,164 +0,0 @@
-/**
- * Tasks List Screen
- */
-
-import { useCallback, useState } from 'react'
-import {
-  View,
-  Text,
-  FlatList,
-  RefreshControl,
-  StyleSheet,
-} from 'react-native'
-import { router } from 'expo-router'
-import { useTasks, type Task } from '@/src/entities/tasks'
-import { TaskCard } from '@/src/components/entities/tasks'
-import { Button } from '@/src/components/ui'
-import { Colors } from '@/src/constants/colors'
-
-export default function TasksScreen() {
-  const { data, isLoading, error, refetch } = useTasks()
-  const [refreshing, setRefreshing] = useState(false)
-
-  const onRefresh = useCallback(async () => {
-    setRefreshing(true)
-    try {
-      await refetch()
-    } finally {
-      setRefreshing(false)
-    }
-  }, [refetch])
-
-  const handleTaskPress = (task: Task) => {
-    router.push(`/(app)/task/${task.id}`)
-  }
-
-  const renderTask = ({ item }: { item: Task }) => (
-    <TaskCard task={item} onPress={() => handleTaskPress(item)} />
-  )
-
-  const renderEmpty = () => {
-    if (isLoading) return null
-
-    return (
-      <View style={styles.emptyContainer}>
-        <Text style={styles.emptyIcon}>☑</Text>
-        <Text style={styles.emptyTitle}>Sin tareas</Text>
-        <Text style={styles.emptyText}>
-          Toca el botón Crear para agregar tu primera tarea
-        </Text>
-      </View>
-    )
-  }
-
-  const renderError = () => (
-    <View style={styles.errorContainer}>
-      <Text style={styles.errorTitle}>Algo salió mal</Text>
-      <Text style={styles.errorText}>
-        {error instanceof Error ? error.message : 'Error al cargar tareas'}
-      </Text>
-      <Button onPress={() => refetch()}>
-        Reintentar
-      </Button>
-    </View>
-  )
-
-  return (
-    <View style={styles.container}>
-      {/* Page Header */}
-      <View style={styles.header}>
-        <Text style={styles.pageTitle}>Tareas</Text>
-        <Text style={styles.pageSubtitle}>
-          Gestiona y organiza tus tareas pendientes
-        </Text>
-      </View>
-
-      {/* Error State */}
-      {error && renderError()}
-
-      {/* Tasks List */}
-      {!error && (
-        <FlatList
-          data={data?.data || []}
-          renderItem={renderTask}
-          keyExtractor={(item) => item.id}
-          contentContainerStyle={styles.listContent}
-          refreshControl={
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={Colors.primary}
-            />
-          }
-          ListEmptyComponent={renderEmpty}
-          showsVerticalScrollIndicator={false}
-        />
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.backgroundSecondary,
-  },
-  header: {
-    padding: 20,
-    paddingBottom: 12,
-  },
-  pageTitle: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: Colors.foreground,
-    marginBottom: 4,
-  },
-  pageSubtitle: {
-    fontSize: 15,
-    color: Colors.foregroundSecondary,
-  },
-  listContent: {
-    paddingBottom: 12,
-    flexGrow: 1,
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-  },
-  emptyIcon: {
-    fontSize: 48,
-    marginBottom: 16,
-    opacity: 0.5,
-  },
-  emptyTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: Colors.foreground,
-    marginBottom: 8,
-  },
-  emptyText: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    textAlign: 'center',
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-  },
-  errorTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: Colors.destructive,
-    marginBottom: 8,
-  },
-  errorText: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-})

package/templates/app/_layout.tsx

@@ -1,54 +0,0 @@
-/**
- * Root Layout - Sets up providers
- */
-
-import "../src/styles/globals.css";
-
-import { Stack } from "expo-router";
-import { StatusBar } from "expo-status-bar";
-import { QueryProvider, AuthProvider } from "@nextsparkjs/mobile";
-import { ThemeProvider } from "@nextsparkjs/ui";
-
-/**
- * Custom colors demo - Override any color from ThemeColors
- * These match the web app's default design system.
- * Uncomment and modify to customize your app's theme.
- */
-const customColors = {
-  // Primary: Dark neutral (matches web)
-  primary: "#171717",
-  primaryForeground: "#fafafa",
-
-  // Secondary: Light gray
-  secondary: "#f5f5f5",
-  secondaryForeground: "#1a1a1a",
-
-  // Destructive: Red for errors/danger
-  destructive: "#ef4444",
-  destructiveForeground: "#FFFFFF",
-
-  // Success: Green for confirmations
-  success: "#22c55e",
-  successForeground: "#FFFFFF",
-};
-
-export default function RootLayout() {
-  return (
-    <QueryProvider>
-      <AuthProvider>
-        <ThemeProvider colors={customColors}>
-          <StatusBar style="auto" />
-          <Stack
-            screenOptions={{
-              headerShown: false,
-            }}
-          >
-            <Stack.Screen name="index" />
-            <Stack.Screen name="login" />
-            <Stack.Screen name="(app)" />
-          </Stack>
-        </ThemeProvider>
-      </AuthProvider>
-    </QueryProvider>
-  );
-}

package/templates/app/index.tsx

@@ -1,35 +0,0 @@
-/**
- * Entry point - Redirects based on auth state
- */
-
-import { useEffect } from 'react'
-import { View, ActivityIndicator, StyleSheet } from 'react-native'
-import { Redirect } from 'expo-router'
-import { useAuth } from '@nextsparkjs/mobile'
-
-export default function Index() {
-  const { isAuthenticated, isLoading } = useAuth()
-
-  if (isLoading) {
-    return (
-      <View style={styles.container}>
-        <ActivityIndicator size="large" color="#3B82F6" />
-      </View>
-    )
-  }
-
-  if (isAuthenticated) {
-    return <Redirect href="/(app)" />
-  }
-
-  return <Redirect href="/login" />
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F9FAFB',
-  },
-})

package/templates/app/login.tsx

@@ -1,179 +0,0 @@
-/**
- * Login Screen
- */
-
-import { useState } from 'react'
-import {
-  View,
-  Text,
-  TextInput,
-  StyleSheet,
-  KeyboardAvoidingView,
-  Platform,
-} from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { router } from 'expo-router'
-import { useAuth } from '@nextsparkjs/mobile'
-import { Colors } from '@/src/constants/colors'
-import { Button } from '@/src/components/ui'
-
-export default function LoginScreen() {
-  const { login, isLoading } = useAuth()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-
-  const handleLogin = async () => {
-    setError(null)
-
-    if (!email.trim() || !password.trim()) {
-      setError('Por favor ingresa tu email y contraseña')
-      return
-    }
-
-    try {
-      await login(email.trim(), password)
-      router.replace('/(app)')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Error al iniciar sesión. Por favor intenta de nuevo.')
-    }
-  }
-
-  return (
-    <SafeAreaView style={styles.safeArea}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}
-      >
-        <View style={styles.content}>
-          {/* Header */}
-          <View style={styles.header}>
-            <Text style={styles.logo}>NextSpark</Text>
-            <Text style={styles.subtitle}>Inicia sesión en tu cuenta</Text>
-          </View>
-
-          {/* Error */}
-          {error && (
-            <View style={styles.errorContainer}>
-              <Text style={styles.errorText}>{error}</Text>
-            </View>
-          )}
-
-          {/* Form */}
-          <View style={styles.form}>
-            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Email</Text>
-              <TextInput
-                style={styles.input}
-                value={email}
-                onChangeText={setEmail}
-                placeholder="Ingresa tu email"
-                placeholderTextColor={Colors.foregroundMuted}
-                keyboardType="email-address"
-                autoCapitalize="none"
-                autoCorrect={false}
-                editable={!isLoading}
-              />
-            </View>
-
-            <View style={styles.inputContainer}>
-              <Text style={styles.label}>Contraseña</Text>
-              <TextInput
-                style={styles.input}
-                value={password}
-                onChangeText={setPassword}
-                placeholder="Ingresa tu contraseña"
-                placeholderTextColor={Colors.foregroundMuted}
-                secureTextEntry
-                editable={!isLoading}
-              />
-            </View>
-
-            <Button
-              onPress={handleLogin}
-              isLoading={isLoading}
-              style={{ marginTop: 8 }}
-            >
-              Iniciar Sesión
-            </Button>
-          </View>
-
-          {/* Dev Hint */}
-          <View style={styles.hint}>
-            <Text style={styles.hintText}>
-              Dev: carlos.mendoza@nextspark.dev / Test1234
-            </Text>
-          </View>
-        </View>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  )
-}
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: Colors.backgroundSecondary,
-  },
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: 24,
-  },
-  header: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  logo: {
-    fontSize: 32,
-    fontWeight: '700',
-    color: Colors.foreground,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: Colors.foregroundSecondary,
-    marginTop: 8,
-  },
-  errorContainer: {
-    backgroundColor: '#FEE2E2',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  errorText: {
-    color: Colors.destructive,
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  form: {
-    gap: 16,
-  },
-  inputContainer: {
-    gap: 6,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: Colors.foreground,
-  },
-  input: {
-    backgroundColor: Colors.card,
-    borderWidth: 1,
-    borderColor: Colors.border,
-    borderRadius: 8,
-    padding: 14,
-    fontSize: 16,
-    color: Colors.foreground,
-  },
-  hint: {
-    marginTop: 24,
-    alignItems: 'center',
-  },
-  hintText: {
-    fontSize: 12,
-    color: Colors.foregroundMuted,
-  },
-})