@nextsparkjs/mobile 0.1.0-beta.1

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

@@ -0,0 +1,241 @@
+/**
+ * Settings Screen
+ */
+
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet, Switch } from 'react-native'
+import { useState } from 'react'
+import { router } from 'expo-router'
+import { Colors } from '@/src/constants/colors'
+
+interface SettingItem {
+  key: string
+  label: string
+  description?: string
+  icon: string
+  type: 'navigation' | 'toggle'
+  screen?: string
+}
+
+const SETTINGS_SECTIONS = [
+  {
+    title: 'Cuenta',
+    items: [
+      {
+        key: 'profile',
+        label: 'Información Personal',
+        description: 'Nombre, email, idioma',
+        icon: '👤',
+        type: 'navigation' as const,
+        screen: 'profile',
+      },
+      {
+        key: 'security',
+        label: 'Seguridad',
+        description: 'Contraseña, autenticación',
+        icon: '🔒',
+        type: 'navigation' as const,
+      },
+    ],
+  },
+  {
+    title: 'Preferencias',
+    items: [
+      {
+        key: 'notifications',
+        label: 'Notificaciones',
+        icon: '🔔',
+        type: 'toggle' as const,
+      },
+      {
+        key: 'darkMode',
+        label: 'Modo Oscuro',
+        icon: '🌙',
+        type: 'toggle' as const,
+      },
+    ],
+  },
+  {
+    title: 'Soporte',
+    items: [
+      {
+        key: 'help',
+        label: 'Centro de Ayuda',
+        icon: '❓',
+        type: 'navigation' as const,
+      },
+      {
+        key: 'feedback',
+        label: 'Enviar Comentarios',
+        icon: '💬',
+        type: 'navigation' as const,
+      },
+    ],
+  },
+]
+
+export default function SettingsScreen() {
+  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>({
+    notifications: true,
+    darkMode: false,
+  })
+
+  const handleToggle = (key: string) => {
+    setToggleStates((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  const handleNavigation = (item: SettingItem) => {
+    if (item.screen) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      router.push(`/(app)/${item.screen}` as any)
+    }
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Page Header */}
+      <View style={styles.header}>
+        <Text style={styles.pageTitle}>Ajustes</Text>
+        <Text style={styles.pageSubtitle}>
+          Configura tu cuenta y preferencias
+        </Text>
+      </View>
+
+      {/* Settings Sections */}
+      {SETTINGS_SECTIONS.map((section) => (
+        <View key={section.title} style={styles.section}>
+          <Text style={styles.sectionTitle}>{section.title}</Text>
+          <View style={styles.sectionContent}>
+            {section.items.map((item, index) => (
+              <TouchableOpacity
+                key={item.key}
+                style={[
+                  styles.settingItem,
+                  index < section.items.length - 1 && styles.settingItemBorder,
+                ]}
+                onPress={() =>
+                  item.type === 'navigation'
+                    ? handleNavigation(item)
+                    : handleToggle(item.key)
+                }
+                activeOpacity={0.7}
+              >
+                <Text style={styles.settingIcon}>{item.icon}</Text>
+                <View style={styles.settingInfo}>
+                  <Text style={styles.settingLabel}>{item.label}</Text>
+                  {'description' in item && item.description && (
+                    <Text style={styles.settingDescription}>
+                      {item.description}
+                    </Text>
+                  )}
+                </View>
+                {item.type === 'navigation' ? (
+                  <Text style={styles.chevron}>›</Text>
+                ) : (
+                  <Switch
+                    value={toggleStates[item.key]}
+                    onValueChange={() => handleToggle(item.key)}
+                    trackColor={{
+                      false: Colors.border,
+                      true: Colors.primary,
+                    }}
+                    thumbColor={Colors.background}
+                  />
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      ))}
+
+      {/* App Version */}
+      <View style={styles.footer}>
+        <Text style={styles.versionText}>NextSpark Mobile v1.0.0</Text>
+      </View>
+
+      <View style={styles.spacer} />
+    </ScrollView>
+  )
+}
+
+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,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: Colors.foregroundSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginHorizontal: 20,
+    marginBottom: 8,
+  },
+  sectionContent: {
+    backgroundColor: Colors.card,
+    marginHorizontal: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  settingItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+  },
+  settingItemBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.border,
+  },
+  settingIcon: {
+    fontSize: 20,
+    width: 32,
+  },
+  settingInfo: {
+    flex: 1,
+  },
+  settingLabel: {
+    fontSize: 16,
+    color: Colors.foreground,
+    fontWeight: '400',
+  },
+  settingDescription: {
+    fontSize: 13,
+    color: Colors.foregroundSecondary,
+    marginTop: 2,
+  },
+  chevron: {
+    fontSize: 24,
+    color: Colors.foregroundMuted,
+    fontWeight: '300',
+  },
+  footer: {
+    alignItems: 'center',
+    paddingVertical: 20,
+  },
+  versionText: {
+    fontSize: 13,
+    color: Colors.foregroundMuted,
+  },
+  spacer: {
+    height: 40,
+  },
+})

package/templates/app/(app)/task/[id].tsx

@@ -0,0 +1,70 @@
+/**
+ * Edit Task Screen
+ */
+
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
+import { useLocalSearchParams, router } from 'expo-router'
+import { TaskForm } from '@/src/components/entities/tasks'
+import { useTask, useUpdateTask, useDeleteTask, type UpdateTaskInput } from '@/src/entities/tasks'
+
+export default function EditTaskScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>()
+  const { data, isLoading, error } = useTask(id)
+  const updateTask = useUpdateTask()
+  const deleteTask = useDeleteTask()
+
+  const handleSubmit = async (formData: UpdateTaskInput) => {
+    if (!id) return
+    await updateTask.mutateAsync({ id, data: formData })
+    router.back()
+  }
+
+  const handleDelete = async () => {
+    if (!id) return
+    await deleteTask.mutateAsync(id)
+    router.back()
+  }
+
+  if (isLoading) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="large" color="#3B82F6" />
+      </View>
+    )
+  }
+
+  if (error || !data) {
+    return (
+      <View style={styles.centerContainer}>
+        <Text style={styles.errorText}>
+          {error instanceof Error ? error.message : 'Task not found'}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <TaskForm
+      mode="edit"
+      initialData={data.data}
+      onSubmit={handleSubmit}
+      onDelete={handleDelete}
+      isLoading={updateTask.isPending || deleteTask.isPending}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F9FAFB',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#DC2626',
+    textAlign: 'center',
+    paddingHorizontal: 32,
+  },
+})

package/templates/app/(app)/task/create.tsx

@@ -0,0 +1,24 @@
+/**
+ * Create Task Screen
+ */
+
+import { router } from 'expo-router'
+import { TaskForm } from '@/src/components/entities/tasks'
+import { useCreateTask, type CreateTaskInput } from '@/src/entities/tasks'
+
+export default function CreateTaskScreen() {
+  const createTask = useCreateTask()
+
+  const handleSubmit = async (data: CreateTaskInput) => {
+    await createTask.mutateAsync(data)
+    router.back()
+  }
+
+  return (
+    <TaskForm
+      mode="create"
+      onSubmit={handleSubmit}
+      isLoading={createTask.isPending}
+    />
+  )
+}

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * 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',
+  },
+})