@nextsparkjs/mobile 0.1.0-beta.1

package/templates/app/login.tsx

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

package/templates/app.config.ts

@@ -0,0 +1,39 @@
+import { ExpoConfig, ConfigContext } from 'expo/config'
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: 'My App',
+  slug: 'my-app',
+  version: '1.0.0',
+  orientation: 'portrait',
+  icon: './assets/icon.png',
+  userInterfaceStyle: 'automatic',
+  splash: {
+    image: './assets/splash.png',
+    resizeMode: 'contain',
+    backgroundColor: '#ffffff',
+  },
+  assetBundlePatterns: ['**/*'],
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: 'com.mycompany.myapp',
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: './assets/adaptive-icon.png',
+      backgroundColor: '#ffffff',
+    },
+    package: 'com.mycompany.myapp',
+  },
+  web: {
+    favicon: './assets/favicon.png',
+  },
+  extra: {
+    // API URL - Configure for your environment
+    // Development: auto-detected from Expo dev server
+    // Production: set via EAS environment variables
+    apiUrl: process.env.EXPO_PUBLIC_API_URL,
+  },
+  plugins: ['expo-router', 'expo-secure-store'],
+  scheme: 'myapp',
+})

package/templates/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

package/templates/eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 7.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

package/templates/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: 'jest-expo',
+  testMatch: ['**/__tests__/**/*.test.ts?(x)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@nextsparkjs/.*)',
+  ],
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+};

package/templates/metro.config.js

@@ -0,0 +1,23 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+const path = require("path");
+
+const config = getDefaultConfig(__dirname);
+
+// Force @nextsparkjs/ui to use the native entry point for consistent styling
+// across web and native platforms (uses React Native primitives)
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName === "@nextsparkjs/ui") {
+    // Resolve to the native entry point in node_modules
+    const pkgPath = path.dirname(require.resolve("@nextsparkjs/ui/package.json"));
+    const nativeEntry = path.join(pkgPath, "dist", "index.native.js");
+    return {
+      filePath: nativeEntry,
+      type: "sourceFile",
+    };
+  }
+  // Fall back to default resolution
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+module.exports = withNativeWind(config, { input: "./src/styles/globals.css" });

package/templates/package.json.template

@@ -0,0 +1,52 @@
+{
+  "name": "@myproject/mobile",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@nextsparkjs/mobile": "^0.1.0",
+    "@nextsparkjs/ui": "^0.1.0-beta.1",
+    "@tanstack/react-query": "^5.62.0",
+    "expo": "^54.0.0",
+    "expo-constants": "~18.0.13",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.22",
+    "expo-secure-store": "~15.0.8",
+    "expo-status-bar": "~3.0.9",
+    "lucide-react-native": "^0.563.0",
+    "nativewind": "^4.2.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-web": "^0.21.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^19",
+    "jest": "^29.7.0",
+    "jest-expo": "^54.0.16",
+    "react-test-renderer": "19.1.0",
+    "typescript": "^5.3.0"
+  }
+}

package/templates/src/components/entities/customers/CustomerCard.tsx

@@ -0,0 +1,59 @@
+/**
+ * Customer Card Component
+ * Migrated to NativeWind + UI primitives
+ */
+
+import { View } from "react-native";
+import type { Customer } from "../../../entities/customers";
+import { Text, PressableCard, CardContent, Badge } from "../../ui";
+
+interface CustomerCardProps {
+  customer: Customer;
+  onPress: () => void;
+}
+
+export function CustomerCard({ customer, onPress }: CustomerCardProps) {
+  return (
+    <PressableCard className="mx-4 my-1.5" onPress={onPress}>
+      <CardContent>
+        {/* Header: Name + Account Badge */}
+        <View className="mb-3 flex-row items-center justify-between">
+          <Text weight="semibold" className="flex-1 text-base" numberOfLines={1}>
+            {customer.name}
+          </Text>
+          <Badge variant="secondary" className="ml-2">
+            #{customer.account}
+          </Badge>
+        </View>
+
+        {/* Details */}
+        <View className="gap-1.5">
+          <View className="flex-row">
+            <Text variant="muted" className="w-20 text-[13px]">
+              Oficina:
+            </Text>
+            <Text className="flex-1 text-[13px]">{customer.office}</Text>
+          </View>
+
+          {customer.phone && (
+            <View className="flex-row">
+              <Text variant="muted" className="w-20 text-[13px]">
+                Teléfono:
+              </Text>
+              <Text className="flex-1 text-[13px]">{customer.phone}</Text>
+            </View>
+          )}
+
+          {customer.salesRep && (
+            <View className="flex-row">
+              <Text variant="muted" className="w-20 text-[13px]">
+                Vendedor:
+              </Text>
+              <Text className="flex-1 text-[13px]">{customer.salesRep}</Text>
+            </View>
+          )}
+        </View>
+      </CardContent>
+    </PressableCard>
+  );
+}

package/templates/src/components/entities/customers/CustomerForm.tsx

@@ -0,0 +1,194 @@
+/**
+ * Customer Form Component for Create/Edit
+ * Migrated to NativeWind + UI primitives
+ */
+
+import { useState, useEffect } from "react";
+import { View, ScrollView } from "react-native";
+import { Alert } from "@nextsparkjs/mobile";
+import type {
+  Customer,
+  CreateCustomerInput,
+  UpdateCustomerInput,
+} from "../../../entities/customers";
+import { Text, Input, Button, Card } from "../../ui";
+
+type CustomerFormProps =
+  | {
+      mode: "create";
+      initialData?: undefined;
+      onSubmit: (data: CreateCustomerInput) => Promise<void>;
+      onDelete?: undefined;
+      isLoading?: boolean;
+    }
+  | {
+      mode: "edit";
+      initialData: Customer;
+      onSubmit: (data: UpdateCustomerInput) => Promise<void>;
+      onDelete: () => Promise<void>;
+      isLoading?: boolean;
+    };
+
+export function CustomerForm({
+  initialData,
+  onSubmit,
+  onDelete,
+  isLoading = false,
+  mode,
+}: CustomerFormProps) {
+  const [name, setName] = useState(initialData?.name || "");
+  const [account, setAccount] = useState(
+    initialData?.account?.toString() || ""
+  );
+  const [office, setOffice] = useState(initialData?.office || "");
+  const [phone, setPhone] = useState(initialData?.phone || "");
+  const [salesRep, setSalesRep] = useState(initialData?.salesRep || "");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (initialData) {
+      setName(initialData.name);
+      setAccount(initialData.account?.toString() || "");
+      setOffice(initialData.office);
+      setPhone(initialData.phone || "");
+      setSalesRep(initialData.salesRep || "");
+    }
+  }, [initialData]);
+
+  const handleSubmit = async () => {
+    setError(null);
+
+    // Validation
+    if (!name.trim()) {
+      setError("El nombre es requerido");
+      return;
+    }
+    if (!account.trim() || isNaN(Number(account))) {
+      setError("El número de cuenta es requerido");
+      return;
+    }
+    if (!office.trim()) {
+      setError("La oficina es requerida");
+      return;
+    }
+
+    const data = {
+      name: name.trim(),
+      account: Number(account),
+      office: office.trim(),
+      phone: phone.trim() || undefined,
+      salesRep: salesRep.trim() || undefined,
+    };
+
+    try {
+      await onSubmit(data as CreateCustomerInput & UpdateCustomerInput);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ocurrió un error");
+    }
+  };
+
+  const handleDelete = async () => {
+    const confirmed = await Alert.confirmDestructive(
+      "Eliminar Cliente",
+      "¿Estás seguro que deseas eliminar este cliente? Esta acción no se puede deshacer.",
+      "Eliminar"
+    );
+
+    if (confirmed) {
+      try {
+        await onDelete?.();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Error al eliminar");
+      }
+    }
+  };
+
+  return (
+    <ScrollView
+      className="flex-1 bg-secondary p-4"
+      keyboardShouldPersistTaps="handled"
+    >
+      {/* Error Display */}
+      {error && (
+        <Card className="mb-4 border-destructive bg-red-50">
+          <Text variant="error">{error}</Text>
+        </Card>
+      )}
+
+      {/* Name */}
+      <Input
+        label="Nombre"
+        required
+        value={name}
+        onChangeText={setName}
+        placeholder="Ingresa el nombre del cliente..."
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Account Number */}
+      <Input
+        label="Número de Cuenta"
+        required
+        value={account}
+        onChangeText={setAccount}
+        placeholder="Ingresa el número de cuenta..."
+        keyboardType="numeric"
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Office */}
+      <Input
+        label="Oficina"
+        required
+        value={office}
+        onChangeText={setOffice}
+        placeholder="Ingresa la ubicación de oficina..."
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Phone */}
+      <Input
+        label="Teléfono"
+        value={phone}
+        onChangeText={setPhone}
+        placeholder="Ingresa el número de teléfono..."
+        keyboardType="phone-pad"
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Sales Rep */}
+      <Input
+        label="Representante de Ventas"
+        value={salesRep}
+        onChangeText={setSalesRep}
+        placeholder="Ingresa el nombre del vendedor..."
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Submit Button */}
+      <Button onPress={handleSubmit} isLoading={isLoading} className="mt-2">
+        {mode === "create" ? "Crear Cliente" : "Guardar Cambios"}
+      </Button>
+
+      {/* Delete Button (edit mode only) */}
+      {mode === "edit" && (
+        <Button
+          variant="outline-destructive"
+          onPress={handleDelete}
+          disabled={isLoading}
+          className="mt-3"
+        >
+          Eliminar Cliente
+        </Button>
+      )}
+
+      {/* Spacer */}
+      <View className="h-10" />
+    </ScrollView>
+  );
+}

package/templates/src/components/entities/customers/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Customer entity components - barrel exports
+ */
+
+export { CustomerCard } from './CustomerCard'
+export { CustomerForm } from './CustomerForm'

package/templates/src/components/entities/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Entity components - barrel exports
+ */
+
+// Tasks
+export * from './tasks'
+
+// Customers
+export * from './customers'

package/templates/src/components/entities/tasks/TaskCard.tsx

@@ -0,0 +1,89 @@
+/**
+ * Task Card Component
+ * Migrated to NativeWind + UI primitives
+ */
+
+import { View } from "react-native";
+import type { Task } from "../../../entities/tasks";
+import { STATUS_LABELS, PRIORITY_LABELS } from "../../../entities/tasks";
+import {
+  Text,
+  PressableCard,
+  CardContent,
+  CardFooter,
+  Badge,
+} from "../../ui";
+
+interface TaskCardProps {
+  task: Task;
+  onPress: () => void;
+  onStatusChange?: (status: Task["status"]) => void;
+}
+
+export function TaskCard({ task, onPress }: TaskCardProps) {
+  const formatDate = (dateString?: string | null) => {
+    if (!dateString) return null;
+    const date = new Date(dateString);
+    return date.toLocaleDateString();
+  };
+
+  // Map status to badge variant
+  const getStatusVariant = (status: Task["status"]) => {
+    const map: Record<Task["status"], "todo" | "in-progress" | "review" | "done" | "blocked"> = {
+      todo: "todo",
+      "in-progress": "in-progress",
+      review: "review",
+      done: "done",
+      blocked: "blocked",
+    };
+    return map[status];
+  };
+
+  // Map priority to badge variant
+  const getPriorityVariant = (priority: Task["priority"]) => {
+    const map: Record<Task["priority"], "low" | "medium" | "high" | "urgent"> = {
+      low: "low",
+      medium: "medium",
+      high: "high",
+      urgent: "urgent",
+    };
+    return map[priority];
+  };
+
+  return (
+    <PressableCard className="mx-4 my-1.5" onPress={onPress}>
+      <CardContent className="gap-2">
+        {/* Title */}
+        <Text weight="semibold" className="text-base" numberOfLines={2}>
+          {task.title}
+        </Text>
+
+        {/* Description */}
+        {task.description && (
+          <Text variant="muted" className="text-sm leading-5" numberOfLines={2}>
+            {task.description}
+          </Text>
+        )}
+
+        {/* Badges */}
+        <View className="mt-1 flex-row flex-wrap gap-2">
+          <Badge variant={getStatusVariant(task.status)} showDot>
+            {STATUS_LABELS[task.status]}
+          </Badge>
+          <Badge variant={getPriorityVariant(task.priority)}>
+            {PRIORITY_LABELS[task.priority]}
+          </Badge>
+        </View>
+      </CardContent>
+
+      {/* Due Date */}
+      {task.dueDate && (
+        <CardFooter>
+          <Text variant="muted" className="text-xs">
+            Vence: {formatDate(task.dueDate)}
+          </Text>
+        </CardFooter>
+      )}
+    </PressableCard>
+  );
+}