@nextsparkjs/mobile 0.1.0-beta.1

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

@@ -0,0 +1,231 @@
+/**
+ * Task 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 {
+  Task,
+  TaskStatus,
+  TaskPriority,
+  CreateTaskInput,
+  UpdateTaskInput,
+} from "../../../entities/tasks";
+import { STATUS_LABELS, PRIORITY_LABELS } from "../../../entities/tasks";
+import { Text, Input, Textarea, Button, PressableBadge, Card } from "../../ui";
+
+type TaskFormProps =
+  | {
+      mode: "create";
+      initialData?: undefined;
+      onSubmit: (data: CreateTaskInput) => Promise<void>;
+      onDelete?: undefined;
+      isLoading?: boolean;
+    }
+  | {
+      mode: "edit";
+      initialData: Task;
+      onSubmit: (data: UpdateTaskInput) => Promise<void>;
+      onDelete: () => Promise<void>;
+      isLoading?: boolean;
+    };
+
+const STATUS_OPTIONS: TaskStatus[] = [
+  "todo",
+  "in-progress",
+  "review",
+  "done",
+  "blocked",
+];
+const PRIORITY_OPTIONS: TaskPriority[] = ["low", "medium", "high", "urgent"];
+
+export function TaskForm({
+  initialData,
+  onSubmit,
+  onDelete,
+  isLoading = false,
+  mode,
+}: TaskFormProps) {
+  const [title, setTitle] = useState(initialData?.title || "");
+  const [description, setDescription] = useState(
+    initialData?.description || ""
+  );
+  const [status, setStatus] = useState<TaskStatus>(
+    initialData?.status || "todo"
+  );
+  const [priority, setPriority] = useState<TaskPriority>(
+    initialData?.priority || "medium"
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (initialData) {
+      setTitle(initialData.title);
+      setDescription(initialData.description || "");
+      setStatus(initialData.status);
+      setPriority(initialData.priority);
+    }
+  }, [initialData]);
+
+  const handleSubmit = async () => {
+    setError(null);
+
+    // Validation
+    if (!title.trim()) {
+      setError("El título es requerido");
+      return;
+    }
+
+    const data = {
+      title: title.trim(),
+      description: description.trim() || undefined,
+      status,
+      priority,
+    };
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await onSubmit(data as any);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ocurrió un error");
+    }
+  };
+
+  const handleDelete = async () => {
+    const confirmed = await Alert.confirmDestructive(
+      "Eliminar Tarea",
+      "¿Estás seguro que deseas eliminar esta tarea? Esta acción no se puede deshacer.",
+      "Eliminar"
+    );
+
+    if (confirmed) {
+      try {
+        await onDelete?.();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Error al eliminar");
+      }
+    }
+  };
+
+  // Map status to badge variant
+  const getStatusVariant = (s: TaskStatus) => {
+    const map: Record<TaskStatus, "todo" | "in-progress" | "review" | "done" | "blocked"> = {
+      todo: "todo",
+      "in-progress": "in-progress",
+      review: "review",
+      done: "done",
+      blocked: "blocked",
+    };
+    return map[s];
+  };
+
+  // Map priority to badge variant
+  const getPriorityVariant = (p: TaskPriority) => {
+    const map: Record<TaskPriority, "low" | "medium" | "high" | "urgent"> = {
+      low: "low",
+      medium: "medium",
+      high: "high",
+      urgent: "urgent",
+    };
+    return map[p];
+  };
+
+  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>
+      )}
+
+      {/* Title */}
+      <Input
+        label="Título"
+        required
+        value={title}
+        onChangeText={setTitle}
+        placeholder="Ingresa el título de la tarea..."
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Description */}
+      <Textarea
+        label="Descripción"
+        value={description}
+        onChangeText={setDescription}
+        placeholder="Describe la tarea..."
+        editable={!isLoading}
+        containerClassName="mb-5"
+      />
+
+      {/* Status */}
+      <View className="mb-5 gap-2">
+        <Text variant="label">Estado</Text>
+        <View className="flex-row flex-wrap gap-2">
+          {STATUS_OPTIONS.map((opt) => (
+            <PressableBadge
+              key={opt}
+              variant="outline"
+              selectedVariant={getStatusVariant(opt)}
+              selected={status === opt}
+              onPress={() => setStatus(opt)}
+              disabled={isLoading}
+            >
+              {STATUS_LABELS[opt]}
+            </PressableBadge>
+          ))}
+        </View>
+      </View>
+
+      {/* Priority */}
+      <View className="mb-5 gap-2">
+        <Text variant="label">Prioridad</Text>
+        <View className="flex-row flex-wrap gap-2">
+          {PRIORITY_OPTIONS.map((opt) => (
+            <PressableBadge
+              key={opt}
+              variant="outline"
+              selectedVariant={getPriorityVariant(opt)}
+              selected={priority === opt}
+              onPress={() => setPriority(opt)}
+              disabled={isLoading}
+            >
+              {PRIORITY_LABELS[opt]}
+            </PressableBadge>
+          ))}
+        </View>
+      </View>
+
+      {/* Submit Button */}
+      <Button
+        onPress={handleSubmit}
+        isLoading={isLoading}
+        className="mt-2"
+      >
+        {mode === "create" ? "Crear Tarea" : "Guardar Cambios"}
+      </Button>
+
+      {/* Delete Button (edit mode only) */}
+      {mode === "edit" && (
+        <Button
+          variant="outline-destructive"
+          onPress={handleDelete}
+          disabled={isLoading}
+          className="mt-3"
+        >
+          Eliminar Tarea
+        </Button>
+      )}
+
+      {/* Spacer */}
+      <View className="h-10" />
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Task entity components - barrel exports
+ */
+
+export { TaskCard } from './TaskCard'
+export { TaskForm } from './TaskForm'

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

@@ -0,0 +1,6 @@
+/**
+ * Feature components - barrel exports
+ * Placeholder for future feature-specific components
+ */
+
+// TODO: Add feature components here as needed

package/templates/src/components/navigation/BottomTabBar.tsx

@@ -0,0 +1,80 @@
+/**
+ * BottomTabBar Component - NextSpark Mobile Style
+ * Inicio | Tareas | [Crear] | Clientes | Más
+ * Migrated to NativeWind + UI primitives + Lucide icons
+ */
+
+import { View, Pressable } from "react-native";
+import { Home, CheckSquare, Plus, Users, Menu, type LucideIcon } from "lucide-react-native";
+import { Text } from "../ui";
+
+export type TabKey = "home" | "tasks" | "create" | "customers" | "more";
+
+interface BottomTabBarProps {
+  activeTab: TabKey;
+  onTabPress: (tab: TabKey) => void;
+}
+
+interface TabItem {
+  key: TabKey;
+  label: string;
+  Icon: LucideIcon;
+}
+
+const TABS: TabItem[] = [
+  { key: "home", label: "Inicio", Icon: Home },
+  { key: "tasks", label: "Tareas", Icon: CheckSquare },
+  { key: "create", label: "Crear", Icon: Plus },
+  { key: "customers", label: "Clientes", Icon: Users },
+  { key: "more", label: "Más", Icon: Menu },
+];
+
+export function BottomTabBar({ activeTab, onTabPress }: BottomTabBarProps) {
+  return (
+    <View className="flex-row items-end justify-around border-t border-border bg-background pb-2 pt-2">
+      {TABS.map((tab) => {
+        const isActive = activeTab === tab.key;
+        const isCreate = tab.key === "create";
+        const IconComponent = tab.Icon;
+
+        if (isCreate) {
+          return (
+            <Pressable
+              key={tab.key}
+              className="-mt-6 flex-1 items-center"
+              onPress={() => onTabPress(tab.key)}
+            >
+              <View className="h-14 w-14 items-center justify-center rounded-full bg-primary shadow-lg">
+                <IconComponent size={28} color="#fafafa" strokeWidth={1.5} />
+              </View>
+              <Text className="mt-1 text-[11px] font-medium text-muted-foreground">
+                {tab.label}
+              </Text>
+            </Pressable>
+          );
+        }
+
+        return (
+          <Pressable
+            key={tab.key}
+            className="flex-1 items-center justify-center py-2"
+            onPress={() => onTabPress(tab.key)}
+          >
+            <IconComponent
+              size={24}
+              color={isActive ? "#171717" : "#737373"}
+              strokeWidth={isActive ? 2 : 1.5}
+            />
+            <Text
+              className={`mt-1 text-[11px] font-medium ${
+                isActive ? "text-foreground" : "text-muted-foreground"
+              }`}
+            >
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/templates/src/components/navigation/CreateSheet.tsx

@@ -0,0 +1,108 @@
+/**
+ * CreateSheet Component - "Crear" bottom sheet for quick entity creation
+ * Migrated to NativeWind + Lucide icons
+ */
+
+import { View, TouchableOpacity, Modal, Pressable } from "react-native";
+import { Users, CheckSquare, X, type LucideIcon } from "lucide-react-native";
+import { Text } from "../ui";
+
+interface CreateSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onCreateEntity: (entity: string) => void;
+}
+
+interface CreateOption {
+  key: string;
+  label: string;
+  description: string;
+  Icon: LucideIcon;
+}
+
+const CREATE_OPTIONS: CreateOption[] = [
+  {
+    key: "customer",
+    label: "customer",
+    description: "Crear nuevo customer",
+    Icon: Users,
+  },
+  {
+    key: "task",
+    label: "task",
+    description: "Crear nuevo task",
+    Icon: CheckSquare,
+  },
+];
+
+export function CreateSheet({
+  visible,
+  onClose,
+  onCreateEntity,
+}: CreateSheetProps) {
+  const handleCreate = (option: CreateOption) => {
+    onCreateEntity(option.key);
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable
+        className="flex-1 justify-end bg-black/50"
+        onPress={onClose}
+      >
+        <Pressable
+          className="rounded-t-[20px] bg-background px-6 pb-10 pt-3"
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Handle bar */}
+          <View className="mb-4 h-1 w-10 self-center rounded-full bg-border" />
+
+          {/* Close button */}
+          <TouchableOpacity
+            className="absolute right-5 top-5 h-8 w-8 items-center justify-center rounded-full border border-border"
+            onPress={onClose}
+          >
+            <X size={16} color="#737373" />
+          </TouchableOpacity>
+
+          {/* Header */}
+          <Text className="mt-2 text-center text-xl font-semibold">Crear</Text>
+          <Text className="mb-6 mt-2 text-center text-sm text-muted-foreground">
+            Crea un nuevo elemento
+          </Text>
+
+          {/* Options */}
+          <View className="gap-2">
+            {CREATE_OPTIONS.map((option) => {
+              const IconComponent = option.Icon;
+              return (
+                <TouchableOpacity
+                  key={option.key}
+                  className="flex-row items-center gap-4 py-4"
+                  onPress={() => handleCreate(option)}
+                  activeOpacity={0.7}
+                >
+                  <View className="w-8 items-center">
+                    <IconComponent size={24} color="#171717" />
+                  </View>
+                  <View className="flex-1">
+                    <Text className="text-base font-semibold">{option.label}</Text>
+                    <Text className="mt-0.5 text-sm text-muted-foreground">
+                      {option.description}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}