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

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

@@ -1,254 +0,0 @@
-/**
- * Profile Screen - User information and settings
- */
-
-import { View, Text, TextInput, ScrollView, StyleSheet } from 'react-native'
-import { useAuth } from '@nextsparkjs/mobile'
-import { Colors } from '@/src/constants/colors'
-
-export default function ProfileScreen() {
-  const { user } = useAuth()
-
-  // Split name into first and last name
-  const nameParts = user?.name?.split(' ') || ['', '']
-  const firstName = nameParts[0] || ''
-  const lastName = nameParts.slice(1).join(' ') || ''
-
-  return (
-    <ScrollView style={styles.container}>
-      {/* Page Header */}
-      <View style={styles.header}>
-        <Text style={styles.pageTitle}>Información Personal</Text>
-        <Text style={styles.pageSubtitle}>
-          Gestiona tu información personal y preferencias básicas de tu cuenta.
-        </Text>
-      </View>
-
-      {/* Personal Data Card */}
-      <View style={styles.card}>
-        <View style={styles.cardHeader}>
-          <Text style={styles.cardIcon}>👤</Text>
-          <View>
-            <Text style={styles.cardTitle}>Datos Personales</Text>
-            <Text style={styles.cardSubtitle}>
-              Actualiza tu nombre, país, zona horaria e idioma preferido
-            </Text>
-          </View>
-        </View>
-
-        {/* Name Field */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Nombre</Text>
-          <TextInput
-            style={styles.input}
-            value={firstName}
-            editable={false}
-            placeholder="Tu nombre"
-            placeholderTextColor={Colors.foregroundMuted}
-          />
-        </View>
-
-        {/* Last Name Field */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Apellido</Text>
-          <TextInput
-            style={styles.input}
-            value={lastName}
-            editable={false}
-            placeholder="Tu apellido"
-            placeholderTextColor={Colors.foregroundMuted}
-          />
-        </View>
-
-        {/* Email Field */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Email</Text>
-          <View style={styles.emailInputWrapper}>
-            <Text style={styles.emailIcon}>✉</Text>
-            <TextInput
-              style={[styles.input, styles.emailInput]}
-              value={user?.email || ''}
-              editable={false}
-              placeholder="Tu email"
-              placeholderTextColor={Colors.foregroundMuted}
-            />
-          </View>
-          <Text style={styles.hint}>No se puede cambiar</Text>
-        </View>
-
-        {/* Auth Method */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Método de Autenticación</Text>
-          <View style={styles.readOnlyRow}>
-            <Text style={styles.readOnlyIcon}>✉</Text>
-            <Text style={styles.readOnlyText}>Email</Text>
-          </View>
-        </View>
-
-        {/* Verification Status */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Estado de Verificación</Text>
-          <View style={styles.readOnlyRow}>
-            <Text style={styles.verifiedIcon}>✓</Text>
-            <Text style={styles.verifiedText}>Verificado</Text>
-          </View>
-        </View>
-
-        {/* Language */}
-        <View style={styles.field}>
-          <Text style={styles.label}>Idioma</Text>
-          <View style={styles.selectWrapper}>
-            <Text style={styles.selectIcon}>文</Text>
-            <Text style={styles.selectText}>Español</Text>
-            <Text style={styles.selectChevron}>⌄</Text>
-          </View>
-        </View>
-      </View>
-
-      <View style={styles.spacer} />
-    </ScrollView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.backgroundSecondary,
-  },
-  header: {
-    padding: 20,
-  },
-  pageTitle: {
-    fontSize: 28,
-    fontWeight: '700',
-    color: Colors.foreground,
-    marginBottom: 8,
-  },
-  pageSubtitle: {
-    fontSize: 15,
-    color: Colors.foregroundSecondary,
-    lineHeight: 22,
-  },
-  card: {
-    backgroundColor: Colors.card,
-    marginHorizontal: 16,
-    borderRadius: 12,
-    padding: 20,
-    borderWidth: 1,
-    borderColor: Colors.border,
-  },
-  cardHeader: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: 12,
-    marginBottom: 24,
-  },
-  cardIcon: {
-    fontSize: 20,
-    marginTop: 2,
-  },
-  cardTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: Colors.foreground,
-  },
-  cardSubtitle: {
-    fontSize: 14,
-    color: Colors.foregroundSecondary,
-    marginTop: 4,
-    lineHeight: 20,
-  },
-  field: {
-    marginBottom: 20,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: Colors.foreground,
-    marginBottom: 8,
-  },
-  input: {
-    backgroundColor: Colors.backgroundSecondary,
-    borderWidth: 1,
-    borderColor: Colors.border,
-    borderRadius: 8,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    fontSize: 15,
-    color: Colors.foreground,
-  },
-  emailInputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: Colors.backgroundSecondary,
-    borderWidth: 1,
-    borderColor: Colors.border,
-    borderRadius: 8,
-    paddingHorizontal: 14,
-  },
-  emailIcon: {
-    fontSize: 16,
-    color: Colors.foregroundMuted,
-    marginRight: 10,
-  },
-  emailInput: {
-    flex: 1,
-    borderWidth: 0,
-    paddingHorizontal: 0,
-    backgroundColor: 'transparent',
-  },
-  hint: {
-    fontSize: 12,
-    color: Colors.foregroundMuted,
-    marginTop: 6,
-  },
-  readOnlyRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  readOnlyIcon: {
-    fontSize: 16,
-    color: Colors.foregroundSecondary,
-  },
-  readOnlyText: {
-    fontSize: 15,
-    color: Colors.foreground,
-  },
-  verifiedIcon: {
-    fontSize: 16,
-    color: Colors.success,
-  },
-  verifiedText: {
-    fontSize: 15,
-    color: Colors.success,
-    fontWeight: '500',
-  },
-  selectWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: Colors.backgroundSecondary,
-    borderWidth: 1,
-    borderColor: Colors.border,
-    borderRadius: 8,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-  },
-  selectIcon: {
-    fontSize: 16,
-    color: Colors.foregroundSecondary,
-    marginRight: 10,
-  },
-  selectText: {
-    flex: 1,
-    fontSize: 15,
-    color: Colors.foreground,
-  },
-  selectChevron: {
-    fontSize: 16,
-    color: Colors.foregroundSecondary,
-  },
-  spacer: {
-    height: 40,
-  },
-})

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

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

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

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