@nextsparkjs/mobile 0.1.0-beta.1

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

@@ -0,0 +1,403 @@
+/**
+ * MoreSheet Component - "Más Opciones" bottom sheet
+ * With team switching functionality
+ */
+
+import { useState } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Pressable,
+  ScrollView,
+} from 'react-native'
+import { Colors } from '../../constants/colors'
+import { useAuth } from '@nextsparkjs/mobile'
+import { Button } from '../ui'
+import type { Team } from '../../types'
+
+interface MoreSheetProps {
+  visible: boolean
+  onClose: () => void
+  onNavigate: (screen: string) => void
+  onLogout: () => void
+  onTeamChange?: () => void
+}
+
+interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  screen?: string
+}
+
+const MENU_ITEMS: MenuItem[] = [
+  { key: 'profile', label: 'Perfil', icon: '👤', screen: 'profile' },
+  { key: 'billing', label: 'Facturación', icon: '💳', screen: 'billing' },
+  { key: 'api-keys', label: 'Claves API', icon: '🔑', screen: 'api-keys' },
+  { key: 'settings', label: 'Ajustes', icon: '⚙', screen: 'settings' },
+]
+
+export function MoreSheet({
+  visible,
+  onClose,
+  onNavigate,
+  onLogout,
+  onTeamChange,
+}: MoreSheetProps) {
+  const { team, teams, selectTeam } = useAuth()
+  const [showTeamList, setShowTeamList] = useState(false)
+
+  const handleMenuItem = (item: MenuItem) => {
+    if (item.screen) {
+      onNavigate(item.screen)
+      onClose()
+    }
+  }
+
+  const handleTeamSelect = async (selectedTeam: Team) => {
+    if (selectedTeam.id !== team?.id) {
+      await selectTeam(selectedTeam)
+      setShowTeamList(false)
+      onClose()
+      // Callback to refresh data in the app
+      onTeamChange?.()
+    } else {
+      setShowTeamList(false)
+    }
+  }
+
+  const toggleTeamList = () => {
+    setShowTeamList(!showTeamList)
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <Pressable style={styles.sheet} onPress={(e) => e.stopPropagation()}>
+          {/* Handle bar */}
+          <View style={styles.handleBar} />
+
+          {/* Close button */}
+          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+            <Text style={styles.closeIcon}>✕</Text>
+          </TouchableOpacity>
+
+          {/* Header */}
+          <Text style={styles.title}>Más Opciones</Text>
+          <Text style={styles.subtitle}>
+            Accede a configuraciones y funciones adicionales
+          </Text>
+
+          <ScrollView showsVerticalScrollIndicator={false}>
+            {/* Menu Items */}
+            <View style={styles.menuSection}>
+              {MENU_ITEMS.map((item) => (
+                <TouchableOpacity
+                  key={item.key}
+                  style={styles.menuItem}
+                  onPress={() => handleMenuItem(item)}
+                  activeOpacity={0.7}
+                >
+                  <Text style={styles.menuIcon}>{item.icon}</Text>
+                  <Text style={styles.menuLabel}>{item.label}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {/* Team Section */}
+            {team && teams.length > 0 && (
+              <>
+                <View style={styles.divider} />
+
+                {/* Current Team - Clickable to toggle list */}
+                <TouchableOpacity
+                  style={styles.teamItem}
+                  onPress={toggleTeamList}
+                  activeOpacity={0.7}
+                >
+                  <View style={styles.teamAvatar}>
+                    <Text style={styles.teamAvatarText}>
+                      {team.name.substring(0, 2).toUpperCase()}
+                    </Text>
+                  </View>
+                  <View style={styles.teamInfo}>
+                    <Text style={styles.teamName}>{team.name}</Text>
+                    <View style={styles.teamRoleRow}>
+                      <Text style={styles.teamRoleIcon}>👥</Text>
+                      <Text style={styles.teamRoleText}>
+                        {teams.length > 1 ? `${teams.length} equipos disponibles` : 'Equipo'}
+                      </Text>
+                    </View>
+                  </View>
+                  <Text style={[styles.chevron, showTeamList && styles.chevronOpen]}>
+                    {showTeamList ? '⌄' : '⌃'}
+                  </Text>
+                </TouchableOpacity>
+
+                {/* Team List (expandable) */}
+                {showTeamList && teams.length > 1 && (
+                  <View style={styles.teamListContainer}>
+                    <Text style={styles.teamListTitle}>Cambiar de equipo</Text>
+                    {teams.map((t) => {
+                      const isCurrentTeam = t.id === team.id
+                      return (
+                        <TouchableOpacity
+                          key={t.id}
+                          style={[
+                            styles.teamListItem,
+                            isCurrentTeam && styles.teamListItemActive,
+                          ]}
+                          onPress={() => handleTeamSelect(t)}
+                          activeOpacity={0.7}
+                        >
+                          <View style={[
+                            styles.teamListAvatar,
+                            isCurrentTeam && styles.teamListAvatarActive,
+                          ]}>
+                            <Text style={[
+                              styles.teamListAvatarText,
+                              isCurrentTeam && styles.teamListAvatarTextActive,
+                            ]}>
+                              {t.name.substring(0, 2).toUpperCase()}
+                            </Text>
+                          </View>
+                          <View style={styles.teamListInfo}>
+                            <Text style={[
+                              styles.teamListName,
+                              isCurrentTeam && styles.teamListNameActive,
+                            ]}>
+                              {t.name}
+                            </Text>
+                            <Text style={styles.teamListRole}>
+                              {t.role}
+                            </Text>
+                          </View>
+                          {isCurrentTeam && (
+                            <Text style={styles.checkmark}>✓</Text>
+                          )}
+                        </TouchableOpacity>
+                      )
+                    })}
+                  </View>
+                )}
+              </>
+            )}
+
+            {/* Logout */}
+            <View style={styles.divider} />
+            <Button
+              variant="destructive"
+              onPress={onLogout}
+            >
+              Cerrar Sesión
+            </Button>
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingHorizontal: 24,
+    paddingBottom: 40,
+    paddingTop: 12,
+    maxHeight: '85%',
+  },
+  handleBar: {
+    width: 40,
+    height: 4,
+    backgroundColor: Colors.borderSecondary,
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  closeIcon: {
+    fontSize: 16,
+    color: Colors.foregroundSecondary,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: Colors.foreground,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: Colors.foregroundSecondary,
+    textAlign: 'center',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  menuSection: {
+    gap: 4,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    gap: 16,
+  },
+  menuIcon: {
+    fontSize: 20,
+    width: 28,
+    textAlign: 'center',
+  },
+  menuLabel: {
+    fontSize: 16,
+    color: Colors.foreground,
+    fontWeight: '400',
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Colors.border,
+    marginVertical: 16,
+  },
+  teamItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    gap: 12,
+  },
+  teamAvatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: Colors.backgroundTertiary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  teamAvatarText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: Colors.foregroundSecondary,
+  },
+  teamInfo: {
+    flex: 1,
+  },
+  teamName: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: Colors.foreground,
+  },
+  teamRoleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 2,
+  },
+  teamRoleIcon: {
+    fontSize: 12,
+  },
+  teamRoleText: {
+    fontSize: 12,
+    color: Colors.foregroundSecondary,
+  },
+  chevron: {
+    fontSize: 14,
+    color: Colors.foregroundSecondary,
+  },
+  chevronOpen: {
+    transform: [{ rotate: '180deg' }],
+  },
+  teamListContainer: {
+    marginTop: 12,
+    paddingLeft: 8,
+  },
+  teamListTitle: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: Colors.foregroundSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 12,
+  },
+  teamListItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 4,
+    borderRadius: 8,
+    gap: 12,
+  },
+  teamListItemActive: {
+    backgroundColor: Colors.backgroundTertiary,
+  },
+  teamListAvatar: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: Colors.backgroundSecondary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  teamListAvatarActive: {
+    backgroundColor: Colors.primary,
+    borderColor: Colors.primary,
+  },
+  teamListAvatarText: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: Colors.foregroundSecondary,
+  },
+  teamListAvatarTextActive: {
+    color: Colors.primaryForeground,
+  },
+  teamListInfo: {
+    flex: 1,
+  },
+  teamListName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.foreground,
+  },
+  teamListNameActive: {
+    fontWeight: '600',
+  },
+  teamListRole: {
+    fontSize: 12,
+    color: Colors.foregroundSecondary,
+    marginTop: 1,
+  },
+  checkmark: {
+    fontSize: 16,
+    color: Colors.success,
+    fontWeight: '600',
+  },
+})

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

@@ -0,0 +1,74 @@
+/**
+ * TopBar Component - NextSpark Mobile Style
+ * Shows user avatar, greeting, notifications, and theme toggle
+ * Migrated to NativeWind + UI primitives + Lucide icons
+ */
+
+import { View, Pressable } from "react-native";
+import { router } from "expo-router";
+import { Bell, Moon } from "lucide-react-native";
+import { useAuth } from "@nextsparkjs/mobile";
+import {
+  Text,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  getInitials,
+  Badge,
+} from "../ui";
+
+interface TopBarProps {
+  notificationCount?: number;
+}
+
+export function TopBar({ notificationCount = 0 }: TopBarProps) {
+  const { user } = useAuth();
+
+  // Get first name for greeting
+  const getFirstName = (name?: string | null) => {
+    if (!name) return "Usuario";
+    return name.split(" ")[0];
+  };
+
+  return (
+    <View className="flex-row items-center justify-between border-b border-border bg-background px-4 py-3">
+      {/* Left: Avatar + Greeting */}
+      <View className="flex-row items-center gap-3">
+        <Avatar style={{ backgroundColor: "#f59e0b" }}>
+          <AvatarImage src={user?.image} />
+          <AvatarFallback style={{ backgroundColor: "#f59e0b" }}>
+            {getInitials(user?.name)}
+          </AvatarFallback>
+        </Avatar>
+        <Text weight="medium" className="text-base">
+          Hola, {getFirstName(user?.name)}
+        </Text>
+      </View>
+
+      {/* Right: Notifications + Theme Toggle */}
+      <View className="flex-row items-center gap-2">
+        {/* Notification Bell */}
+        <Pressable
+          onPress={() => router.push("/(app)/notifications")}
+          className="relative h-10 w-10 items-center justify-center"
+        >
+          <Bell size={22} color="#171717" />
+          {notificationCount > 0 && (
+            <View className="absolute right-1 top-1">
+              <Badge variant="destructive" className="min-w-[18px] px-1 py-0.5">
+                <Text className="text-[10px] font-bold text-destructive-foreground">
+                  {notificationCount > 9 ? "9+" : notificationCount}
+                </Text>
+              </Badge>
+            </View>
+          )}
+        </Pressable>
+
+        {/* Theme Toggle (Moon Icon) */}
+        <Pressable className="h-10 w-10 items-center justify-center">
+          <Moon size={22} color="#171717" />
+        </Pressable>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Navigation components - barrel exports
+ */
+
+export { BottomTabBar, type TabKey } from './BottomTabBar'
+export { TopBar } from './TopBar'
+export { CreateSheet } from './CreateSheet'
+export { MoreSheet } from './MoreSheet'

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

@@ -0,0 +1,89 @@
+/**
+ * UI Components - Barrel Exports
+ * Re-export ALL from shared @nextsparkjs/ui package
+ */
+
+// Core primitives - Mobile specific (uses NativeWind locally)
+export { Text, type TextProps } from "./text";
+
+// Theme system
+export {
+  ThemeProvider,
+  useTheme,
+  defaultColors,
+  type ThemeProviderProps,
+  type ThemeColors,
+} from "@nextsparkjs/ui";
+
+// Re-exported from shared package for web/mobile compatibility
+export { Button, type ButtonProps, buttonVariants } from "@nextsparkjs/ui";
+export { Input, type InputProps } from "@nextsparkjs/ui";
+export { Textarea, type TextareaProps } from "@nextsparkjs/ui";
+
+// Display components
+export {
+  Badge,
+  PressableBadge,
+  type BadgeProps,
+  type PressableBadgeProps,
+  type BadgeVariant,
+} from "@nextsparkjs/ui";
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  getInitials,
+  type AvatarProps,
+  type AvatarImageProps,
+  type AvatarFallbackProps,
+  type AvatarSize,
+} from "@nextsparkjs/ui";
+export {
+  Card,
+  PressableCard,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  type CardProps,
+  type PressableCardProps,
+  type CardHeaderProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+  type CardFooterProps,
+} from "@nextsparkjs/ui";
+export { Separator, type SeparatorProps } from "@nextsparkjs/ui";
+export {
+  Skeleton,
+  SkeletonText,
+  SkeletonTitle,
+  SkeletonAvatar,
+  SkeletonCard,
+  type SkeletonProps,
+} from "@nextsparkjs/ui";
+
+// Form components
+export { Checkbox, type CheckboxProps } from "@nextsparkjs/ui";
+export { Switch, type SwitchProps } from "@nextsparkjs/ui";
+export { Select, type SelectProps, type SelectOption } from "@nextsparkjs/ui";
+export { Label, type LabelProps } from "@nextsparkjs/ui";
+
+// Overlay components
+export {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+  type DialogProps,
+  type DialogContentProps,
+  type DialogHeaderProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+  type DialogFooterProps,
+  type DialogCloseProps,
+} from "@nextsparkjs/ui";

package/templates/src/components/ui/text.tsx

@@ -0,0 +1,64 @@
+/**
+ * Text Component - Styled text with variants
+ * Following shadcn/ui patterns for React Native
+ */
+
+import { Text as RNText, type TextProps as RNTextProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/src/lib/utils";
+
+const textVariants = cva("text-foreground", {
+  variants: {
+    variant: {
+      default: "",
+      heading: "text-2xl font-bold",
+      subheading: "text-lg font-semibold",
+      body: "text-base",
+      small: "text-sm",
+      muted: "text-muted-foreground",
+      label: "text-sm font-semibold",
+      error: "text-destructive text-sm",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface TextProps
+  extends RNTextProps,
+    VariantProps<typeof textVariants> {
+  className?: string;
+}
+
+export function Text({
+  className,
+  variant,
+  size,
+  weight,
+  children,
+  ...props
+}: TextProps) {
+  return (
+    <RNText
+      className={cn(textVariants({ variant, size, weight }), className)}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}

package/templates/src/config/api.config.ts

@@ -0,0 +1,26 @@
+/**
+ * API Configuration
+ */
+
+import Constants from 'expo-constants'
+
+const API_URL =
+  Constants.expoConfig?.extra?.apiUrl ||
+  (Constants.expoConfig?.hostUri
+    ? `http://${Constants.expoConfig.hostUri.split(':')[0]}:5173`
+    : 'http://localhost:5173')
+
+export const API_CONFIG = {
+  baseUrl: API_URL,
+  endpoints: {
+    auth: '/api/auth',
+    tasks: '/api/v1/tasks',
+    customers: '/api/v1/customers',
+    teams: '/api/v1/teams',
+  },
+  defaults: {
+    limit: 20,
+    staleTime: 5 * 60 * 1000,  // 5 minutes
+    cacheTime: 10 * 60 * 1000, // 10 minutes
+  },
+}

package/templates/src/config/app.config.ts

@@ -0,0 +1,15 @@
+/**
+ * Mobile App Configuration
+ */
+
+export const APP_CONFIG = {
+  app: {
+    name: 'NextSpark Mobile',
+    version: '0.1.0',
+  },
+  features: {
+    tasks: { enabled: true },
+    customers: { enabled: true },
+  },
+  // TODO: Add more config as needed
+}