@nextsparkjs/mobile 0.1.0-beta.1

package/templates/src/entities/tasks/mutations.ts

@@ -0,0 +1,108 @@
+/**
+ * TanStack Query mutations for Tasks
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { tasksApi } from './api'
+import { TASKS_QUERY_KEY } from './constants.internal'
+import type { Task, CreateTaskInput, UpdateTaskInput } from './types'
+import type { PaginatedResponse } from '@nextsparkjs/mobile'
+
+/**
+ * Hook to create a new task
+ */
+export function useCreateTask() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: CreateTaskInput) => tasksApi.create(data),
+    onSuccess: () => {
+      // Invalidate tasks list to refetch
+      queryClient.invalidateQueries({ queryKey: TASKS_QUERY_KEY })
+    },
+  })
+}
+
+/**
+ * Hook to update an existing task
+ */
+export function useUpdateTask() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateTaskInput }) =>
+      tasksApi.update(id, data),
+    onSuccess: (response) => {
+      // Update the specific task in cache
+      queryClient.setQueryData([...TASKS_QUERY_KEY, response.data.id], response)
+      // Invalidate list to refetch
+      queryClient.invalidateQueries({ queryKey: TASKS_QUERY_KEY })
+    },
+  })
+}
+
+/**
+ * Hook to delete a task
+ */
+export function useDeleteTask() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) => tasksApi.delete(id),
+    onSuccess: (_, deletedId) => {
+      // Remove from cache
+      queryClient.removeQueries({ queryKey: [...TASKS_QUERY_KEY, deletedId] })
+      // Invalidate list to refetch
+      queryClient.invalidateQueries({ queryKey: TASKS_QUERY_KEY })
+    },
+  })
+}
+
+/**
+ * Hook for optimistic task status update
+ */
+export function useUpdateTaskStatus() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id, status }: { id: string; status: Task['status'] }) =>
+      tasksApi.update(id, { status }),
+    onMutate: async ({ id, status }) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({ queryKey: TASKS_QUERY_KEY })
+
+      // Snapshot the previous value
+      const previousTasks = queryClient.getQueriesData<PaginatedResponse<Task>>({
+        queryKey: TASKS_QUERY_KEY,
+      })
+
+      // Optimistically update all task lists
+      queryClient.setQueriesData<PaginatedResponse<Task>>(
+        { queryKey: TASKS_QUERY_KEY },
+        (old) => {
+          if (!old) return old
+          return {
+            ...old,
+            data: old.data.map((task) =>
+              task.id === id ? { ...task, status } : task
+            ),
+          }
+        }
+      )
+
+      return { previousTasks }
+    },
+    onError: (_err, _variables, context) => {
+      // Rollback on error
+      if (context?.previousTasks) {
+        context.previousTasks.forEach(([queryKey, data]) => {
+          queryClient.setQueryData(queryKey, data)
+        })
+      }
+    },
+    onSettled: () => {
+      // Refetch after error or success
+      queryClient.invalidateQueries({ queryKey: TASKS_QUERY_KEY })
+    },
+  })
+}

package/templates/src/entities/tasks/queries.ts

@@ -0,0 +1,42 @@
+/**
+ * TanStack Query hooks for Tasks
+ */
+
+import { useQuery } from '@tanstack/react-query'
+import { tasksApi } from './api'
+import { TASKS_QUERY_KEY } from './constants.internal'
+
+export { TASKS_QUERY_KEY }
+
+interface UseTasksOptions {
+  page?: number
+  limit?: number
+  status?: string
+  priority?: string
+  search?: string
+  enabled?: boolean
+}
+
+/**
+ * Hook to fetch paginated tasks list
+ */
+export function useTasks(options: UseTasksOptions = {}) {
+  const { page = 1, limit = 20, status, priority, search, enabled = true } = options
+
+  return useQuery({
+    queryKey: [...TASKS_QUERY_KEY, { page, limit, status, priority, search }],
+    queryFn: () => tasksApi.list({ page, limit, status, priority, search }),
+    enabled,
+  })
+}
+
+/**
+ * Hook to fetch a single task by ID
+ */
+export function useTask(id: string | undefined) {
+  return useQuery({
+    queryKey: [...TASKS_QUERY_KEY, id],
+    queryFn: () => tasksApi.get(id!),
+    enabled: !!id,
+  })
+}

package/templates/src/entities/tasks/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Task Entity Types
+ */
+
+// Task status options (matching backend - uses hyphens, not underscores)
+export type TaskStatus = 'todo' | 'in-progress' | 'review' | 'done' | 'blocked'
+
+// Task priority options
+export type TaskPriority = 'low' | 'medium' | 'high' | 'urgent'
+
+// Task entity
+export interface Task {
+  id: string
+  title: string
+  description?: string | null
+  projectId?: string | null
+  status: TaskStatus
+  priority: TaskPriority
+  dueDate?: string | null
+  assigneeId?: string | null
+  estimatedHours?: number | null
+  actualHours?: number | null
+  teamId: string
+  userId: string
+  createdAt: string
+  updatedAt: string
+}
+
+// Create task payload
+export interface CreateTaskInput {
+  title: string
+  description?: string
+  projectId?: string
+  status?: TaskStatus
+  priority?: TaskPriority
+  dueDate?: string
+  assigneeId?: string
+  estimatedHours?: number
+}
+
+// Update task payload
+export interface UpdateTaskInput {
+  title?: string
+  description?: string | null
+  projectId?: string | null
+  status?: TaskStatus
+  priority?: TaskPriority
+  dueDate?: string | null
+  assigneeId?: string | null
+  estimatedHours?: number | null
+  actualHours?: number | null
+}

package/templates/src/hooks/useCustomers.ts

@@ -0,0 +1,17 @@
+/**
+ * TanStack Query hooks for Customers CRUD
+ *
+ * @deprecated Import from '../entities/customers' instead
+ */
+
+export {
+  useCustomers,
+  useCustomer,
+  CUSTOMERS_QUERY_KEY,
+} from '../entities/customers/queries'
+
+export {
+  useCreateCustomer,
+  useUpdateCustomer,
+  useDeleteCustomer,
+} from '../entities/customers/mutations'

package/templates/src/hooks/useTasks.ts

@@ -0,0 +1,18 @@
+/**
+ * TanStack Query hooks for Tasks CRUD
+ *
+ * @deprecated Import from '../entities/tasks' instead
+ */
+
+export {
+  useTasks,
+  useTask,
+  TASKS_QUERY_KEY,
+} from '../entities/tasks/queries'
+
+export {
+  useCreateTask,
+  useUpdateTask,
+  useDeleteTask,
+  useUpdateTaskStatus,
+} from '../entities/tasks/mutations'

package/templates/src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Same pattern as shadcn/ui on web
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/src/styles/globals.css

@@ -0,0 +1,103 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * NextSpark Mobile Theme
+ * Converted from OKLCH to hex (React Native doesn't support OKLCH)
+ * Matching the black/white NextSpark default theme
+ */
+
+:root {
+  /* Base */
+  --background: #FFFFFF;
+  --foreground: #1a1a1a;
+
+  /* Card */
+  --card: #FFFFFF;
+  --card-foreground: #1a1a1a;
+
+  /* Primary (black) */
+  --primary: #171717;
+  --primary-foreground: #fafafa;
+
+  /* Secondary */
+  --secondary: #f5f5f5;
+  --secondary-foreground: #1a1a1a;
+
+  /* Muted */
+  --muted: #f5f5f5;
+  --muted-foreground: #737373;
+
+  /* Accent */
+  --accent: #f5f5f5;
+  --accent-foreground: #1a1a1a;
+
+  /* Destructive */
+  --destructive: #ef4444;
+  --destructive-foreground: #FFFFFF;
+
+  /* Success */
+  --success: #22c55e;
+  --success-foreground: #FFFFFF;
+
+  /* Border, Input, Ring */
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --ring: #a3a3a3;
+
+  /* Border Radius */
+  --radius: 10px;
+
+  /* Status Colors */
+  --status-todo: #6B7280;
+  --status-in-progress: #3B82F6;
+  --status-review: #F59E0B;
+  --status-done: #22c55e;
+  --status-blocked: #ef4444;
+
+  /* Priority Colors */
+  --priority-low: #6B7280;
+  --priority-medium: #3B82F6;
+  --priority-high: #F59E0B;
+  --priority-urgent: #ef4444;
+}
+
+.dark {
+  /* Base */
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+
+  /* Card */
+  --card: #171717;
+  --card-foreground: #fafafa;
+
+  /* Primary (white) */
+  --primary: #fafafa;
+  --primary-foreground: #171717;
+
+  /* Secondary */
+  --secondary: #262626;
+  --secondary-foreground: #fafafa;
+
+  /* Muted */
+  --muted: #262626;
+  --muted-foreground: #a3a3a3;
+
+  /* Accent */
+  --accent: #262626;
+  --accent-foreground: #fafafa;
+
+  /* Destructive */
+  --destructive: #dc2626;
+  --destructive-foreground: #FFFFFF;
+
+  /* Success */
+  --success: #16a34a;
+  --success-foreground: #FFFFFF;
+
+  /* Border, Input, Ring */
+  --border: #262626;
+  --input: #262626;
+  --ring: #d4d4d4;
+}

package/templates/src/types/index.ts

@@ -0,0 +1,45 @@
+/**
+ * Type definitions for the NextSpark Mobile App
+ *
+ * Re-exports all types from their canonical locations for backward compatibility.
+ */
+
+// Re-export API types from package
+export type { PaginatedResponse, SingleResponse } from '@nextsparkjs/mobile'
+export { ApiError } from '@nextsparkjs/mobile'
+
+// Re-export core types (auth, user, team) from package
+export type {
+  User,
+  Team,
+  AuthSession,
+  LoginResponse,
+  SessionResponse,
+  TeamsResponse,
+} from '@nextsparkjs/mobile'
+
+// Re-export entity types
+export type {
+  Task,
+  TaskStatus,
+  TaskPriority,
+  CreateTaskInput,
+  UpdateTaskInput,
+} from '../entities/tasks/types'
+
+export type {
+  Customer,
+  DayOption,
+  CreateCustomerInput,
+  UpdateCustomerInput,
+} from '../entities/customers/types'
+
+// Re-export entity constants
+export {
+  STATUS_LABELS,
+  PRIORITY_LABELS,
+  STATUS_COLORS,
+  PRIORITY_COLORS,
+} from '../entities/tasks/constants'
+
+export { DAY_LABELS } from '../entities/customers/constants'

package/templates/tailwind.config.js

@@ -0,0 +1,108 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // Include shared UI package for NativeWind to scan
+    "./node_modules/@nextsparkjs/ui/dist/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
+        },
+        success: {
+          DEFAULT: "var(--success)",
+          foreground: "var(--success-foreground)",
+        },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+        // Status colors
+        status: {
+          todo: "var(--status-todo)",
+          inProgress: "var(--status-in-progress)",
+          review: "var(--status-review)",
+          done: "var(--status-done)",
+          blocked: "var(--status-blocked)",
+        },
+        // Priority colors
+        priority: {
+          low: "var(--priority-low)",
+          medium: "var(--priority-medium)",
+          high: "var(--priority-high)",
+          urgent: "var(--priority-urgent)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+  // Safelist common utility classes for dynamic usage
+  safelist: [
+    // Container variants
+    "flex-row",
+    "items-center",
+    "justify-center",
+    "rounded-lg",
+    "font-semibold",
+    "active:opacity-80",
+    // Primary
+    "bg-primary",
+    "text-primary-foreground",
+    // Secondary
+    "bg-secondary",
+    "text-secondary-foreground",
+    // Outline
+    "border",
+    "border-input",
+    "bg-background",
+    "text-foreground",
+    // Ghost (no bg)
+    // Destructive
+    "bg-destructive",
+    "text-destructive-foreground",
+    // Sizes
+    "h-9",
+    "h-11",
+    "h-12",
+    "px-3",
+    "px-4",
+    "px-6",
+    "text-sm",
+    "text-base",
+    "text-lg",
+    // Avatar colors
+    "bg-amber-500",
+    "text-amber-500",
+  ],
+};

package/templates/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}