@nextsparkjs/core 0.1.0-beta.1 → 0.1.0-beta.3

package/templates/contents/themes/starter/templates/(dashboard)/analytics/components/StatsCard.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import {
+  CheckSquare,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+  TrendingUp,
+  TrendingDown,
+  type LucideIcon,
+} from 'lucide-react'
+
+const iconMap: Record<string, LucideIcon> = {
+  CheckSquare,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+}
+
+interface StatsCardProps {
+  title: string
+  value: string
+  change: string
+  trend: 'up' | 'down'
+  icon: keyof typeof iconMap
+}
+
+export function StatsCard({ title, value, change, trend, icon }: StatsCardProps) {
+  const Icon = iconMap[icon] || CheckSquare
+  const TrendIcon = trend === 'up' ? TrendingUp : TrendingDown
+  const isPositive = trend === 'up'
+
+  return (
+    <Card data-cy="stats-card">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        <p className="text-xs text-muted-foreground">
+          <span
+            className={cn(
+              'inline-flex items-center gap-1',
+              isPositive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+            )}
+          >
+            <TrendIcon className="h-3 w-3" />
+            {change}
+          </span>{' '}
+          from last period
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/contents/themes/starter/templates/(dashboard)/analytics/components/TasksChart.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { Card, CardContent, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+// Sample data for the chart
+const weeklyData = [
+  { day: 'Mon', completed: 12, created: 8 },
+  { day: 'Tue', completed: 18, created: 14 },
+  { day: 'Wed', completed: 15, created: 12 },
+  { day: 'Thu', completed: 22, created: 16 },
+  { day: 'Fri', completed: 28, created: 20 },
+  { day: 'Sat', completed: 8, created: 4 },
+  { day: 'Sun', completed: 5, created: 2 },
+]
+
+// Calculate max value for scaling
+const maxValue = Math.max(...weeklyData.flatMap((d) => [d.completed, d.created]))
+
+export function TasksChart() {
+  const t = useTranslations('analytics')
+
+  return (
+    <Card data-cy="tasks-chart">
+      <CardHeader>
+        <CardTitle>{t('chart.title')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {/* Legend */}
+          <div className="flex items-center gap-4 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="h-3 w-3 rounded-full bg-primary" />
+              <span className="text-muted-foreground">{t('chart.completed')}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-3 w-3 rounded-full bg-muted-foreground/40" />
+              <span className="text-muted-foreground">{t('chart.created')}</span>
+            </div>
+          </div>
+
+          {/* Simple Bar Chart */}
+          <div className="flex items-end gap-2 h-[200px]">
+            {weeklyData.map((data) => (
+              <div key={data.day} className="flex-1 flex flex-col items-center gap-1">
+                <div className="flex items-end gap-0.5 h-[160px] w-full">
+                  {/* Completed bar */}
+                  <div
+                    className={cn(
+                      'flex-1 bg-primary rounded-t-sm transition-all duration-300',
+                      'hover:bg-primary/80'
+                    )}
+                    style={{ height: `${(data.completed / maxValue) * 100}%` }}
+                    title={`${t('chart.completed')}: ${data.completed}`}
+                  />
+                  {/* Created bar */}
+                  <div
+                    className={cn(
+                      'flex-1 bg-muted-foreground/40 rounded-t-sm transition-all duration-300',
+                      'hover:bg-muted-foreground/60'
+                    )}
+                    style={{ height: `${(data.created / maxValue) * 100}%` }}
+                    title={`${t('chart.created')}: ${data.created}`}
+                  />
+                </div>
+                <span className="text-xs text-muted-foreground">{data.day}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Chart note */}
+          <p className="text-xs text-muted-foreground text-center">
+            {t('chart.note')}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/contents/themes/starter/templates/(dashboard)/analytics/page.tsx

@@ -0,0 +1,45 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import { StatsCard } from './components/StatsCard'
+import { TasksChart } from './components/TasksChart'
+import { RecentActivity } from './components/RecentActivity'
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations('analytics')
+  return {
+    title: t('title'),
+    description: t('description'),
+  }
+}
+
+export default async function AnalyticsPage() {
+  const t = await getTranslations('analytics')
+
+  return (
+    <div className="space-y-6" data-cy="analytics-page">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
+        <p className="text-muted-foreground">{t('description')}</p>
+      </div>
+
+      {/* Stats Grid - 4 cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatsCard title={t('stats.totalTasks')} value="128" change="+12%" trend="up" icon="CheckSquare" />
+        <StatsCard title={t('stats.completedToday')} value="24" change="+8%" trend="up" icon="CheckCircle" />
+        <StatsCard title={t('stats.overdue')} value="3" change="-25%" trend="down" icon="AlertCircle" />
+        <StatsCard title={t('stats.avgCompletionTime')} value="2.4h" change="-10%" trend="down" icon="Clock" />
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+        <div className="col-span-4">
+          <TasksChart />
+        </div>
+        <div className="col-span-3">
+          <RecentActivity />
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/contents/themes/starter/templates/(public)/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+interface PublicLayoutProps {
+  children: ReactNode
+}
+
+export default function PublicLayout({ children }: PublicLayoutProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Add public header/nav here if needed */}
+      {children}
+      {/* Add public footer here if needed */}
+    </div>
+  )
+}

package/templates/contents/themes/starter/templates/(public)/page.tsx

@@ -0,0 +1,37 @@
+import { getTranslations } from 'next-intl/server'
+import Link from 'next/link'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+
+export default async function HomePage() {
+  const t = await getTranslations('home')
+
+  return (
+    <main className="flex min-h-screen flex-col" data-cy="home-page">
+      {/* Hero Section */}
+      <section className="flex flex-col items-center justify-center px-4 py-24 text-center">
+        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
+          {t('hero.title')}
+        </h1>
+        <p className="mt-6 text-lg text-muted-foreground max-w-2xl">
+          {t('hero.subtitle')}
+        </p>
+        <div className="mt-10">
+          <Button asChild size="lg">
+            <Link href="/dashboard">{t('hero.cta')}</Link>
+          </Button>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="px-4 py-24 bg-muted/50">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center">{t('features.title')}</h2>
+          <p className="mt-4 text-center text-muted-foreground">
+            {t('features.subtitle')}
+          </p>
+          {/* Feature cards would go here */}
+        </div>
+      </section>
+    </main>
+  )
+}

package/templates/contents/themes/starter/templates/(public)/support/page.tsx

@@ -0,0 +1,14 @@
+import { getTranslations } from 'next-intl/server'
+
+export default async function SupportPage() {
+  const t = await getTranslations('common')
+
+  return (
+    <main className="container py-12" data-cy="support-page">
+      <h1 className="text-3xl font-bold">Support</h1>
+      <p className="mt-4 text-muted-foreground">
+        Get help with the Starter theme.
+      </p>
+    </main>
+  )
+}

package/templates/contents/themes/starter/tests/cypress/e2e/tasks/TaskAPIController.js

@@ -0,0 +1,240 @@
+/**
+ * TaskAPIController - Controller for interacting with the Tasks API
+ * Encapsulates all CRUD operations for /api/v1/tasks endpoints
+ *
+ * Requires:
+ * - API Key with tasks:read, tasks:write scopes (or superadmin with *)
+ * - x-team-id header for team context
+ */
+const BaseAPIController = require('../../src/controllers/BaseAPIController')
+const entitiesConfig = require('../../fixtures/entities.json')
+
+const { slug } = entitiesConfig.entities.tasks
+
+class TaskAPIController extends BaseAPIController {
+  /**
+   * @param {string} baseUrl - Base URL for API requests
+   * @param {string|null} apiKey - API key for authentication
+   * @param {string|null} teamId - Team ID for x-team-id header
+   */
+  constructor(baseUrl = 'http://localhost:5173', apiKey = null, teamId = null) {
+    super(baseUrl, apiKey, teamId, { slug })
+  }
+
+  // ============================================================
+  // SEMANTIC ALIASES (for backward compatibility)
+  // ============================================================
+
+  /**
+   * GET /api/v1/tasks - Get list of tasks
+   * @param {Object} options - Query options
+   * @param {number} [options.page] - Page number
+   * @param {number} [options.limit] - Results per page
+   * @param {string} [options.status] - Filter by status (todo, in-progress, review, done, blocked)
+   * @param {string} [options.priority] - Filter by priority (low, medium, high, urgent)
+   * @param {string} [options.metas] - Metadata parameter ('all', 'key1,key2', etc.)
+   * @param {string} [options.search] - Search in title/description
+   * @param {Object} [options.headers] - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  getTasks(options = {}) {
+    return this.list(options)
+  }
+
+  /**
+   * GET /api/v1/tasks/{id} - Get specific task by ID
+   * @param {string} id - Task ID
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  getTaskById(id, options = {}) {
+    return this.getById(id, options)
+  }
+
+  /**
+   * POST /api/v1/tasks - Create new task
+   * @param {Object} taskData - Task data
+   * @param {string} taskData.title - Task title (required)
+   * @param {string} [taskData.description] - Task description
+   * @param {string} [taskData.status] - Status: todo, in-progress, review, done, blocked
+   * @param {string} [taskData.priority] - Priority: low, medium, high, urgent
+   * @param {string[]} [taskData.tags] - Array of tags
+   * @param {string} [taskData.dueDate] - Due date YYYY-MM-DD
+   * @param {number} [taskData.estimatedHours] - Estimated hours
+   * @param {Object} [taskData.metas] - Metadata object
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  createTask(taskData, options = {}) {
+    return this.create(taskData, options)
+  }
+
+  /**
+   * PATCH /api/v1/tasks/{id} - Update task
+   * @param {string} id - Task ID
+   * @param {Object} updateData - Data to update
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  updateTask(id, updateData, options = {}) {
+    return this.update(id, updateData, options)
+  }
+
+  /**
+   * DELETE /api/v1/tasks/{id} - Delete task
+   * @param {string} id - Task ID
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  deleteTask(id, options = {}) {
+    return this.delete(id, options)
+  }
+
+  // ============================================================
+  // DATA GENERATORS
+  // ============================================================
+
+  /**
+   * Generate random task data for testing
+   * @param {Object} overrides - Specific data to override
+   * @returns {Object} Generated task data
+   */
+  generateRandomData(overrides = {}) {
+    return this.generateRandomTaskData(overrides)
+  }
+
+  /**
+   * Generate random task data for testing
+   * @param {Object} overrides - Specific data to override
+   * @returns {Object} Generated task data
+   */
+  generateRandomTaskData(overrides = {}) {
+    const timestamp = Date.now()
+    const randomId = Math.random().toString(36).substring(2, 8)
+
+    return {
+      title: `Test Task ${randomId} - ${timestamp}`,
+      description: `Description for test task created at ${new Date().toISOString()}`,
+      status: 'todo',
+      priority: 'medium',
+      tags: [],
+      ...overrides
+    }
+  }
+
+  /**
+   * Create a test task and return its data
+   * @param {Object} taskData - Task data (optional)
+   * @returns {Cypress.Chainable} Promise resolving with created task data
+   */
+  createTestTask(taskData = {}) {
+    return this.createTestEntity(taskData)
+  }
+
+  /**
+   * Clean up a test task (delete it)
+   * @param {string} id - Task ID
+   * @returns {Cypress.Chainable} Delete response
+   */
+  cleanupTestTask(id) {
+    return this.cleanup(id)
+  }
+
+  // ============================================================
+  // ENTITY-SPECIFIC VALIDATORS
+  // ============================================================
+
+  /**
+   * Validate task object structure
+   * @param {Object} task - Task object
+   * @param {boolean} allowMetas - If metas property is allowed
+   */
+  validateTaskObject(task, allowMetas = false) {
+    // Base fields
+    this.validateBaseEntityFields(task)
+
+    // Required entity fields
+    expect(task).to.have.property('title')
+    expect(task.title).to.be.a('string')
+
+    // Optional fields with defaults
+    expect(task).to.have.property('status')
+    expect(task.status).to.be.oneOf(['todo', 'in-progress', 'review', 'done', 'blocked'])
+
+    expect(task).to.have.property('priority')
+    expect(task.priority).to.be.oneOf(['low', 'medium', 'high', 'urgent'])
+
+    expect(task).to.have.property('completed')
+    expect(task.completed).to.be.a('boolean')
+
+    expect(task).to.have.property('tags')
+    expect(task.tags).to.be.an('array')
+
+    // Optional fields that can be null
+    if (task.description !== null && task.description !== undefined) {
+      expect(task.description).to.be.a('string')
+    }
+
+    if (task.dueDate !== null && task.dueDate !== undefined) {
+      expect(task.dueDate).to.be.a('string')
+    }
+
+    if (task.estimatedHours !== null && task.estimatedHours !== undefined) {
+      // Note: NUMERIC type comes back as string from PostgreSQL
+      expect(typeof task.estimatedHours === 'number' || typeof task.estimatedHours === 'string').to.be.true
+    }
+
+    // Validate metas if present
+    if (allowMetas && task.hasOwnProperty('metas')) {
+      expect(task.metas).to.be.an('object')
+    }
+  }
+
+  // ============================================================
+  // METADATA HELPERS
+  // ============================================================
+
+  /**
+   * Generate sample metadata for testing
+   * @param {string} type - Type of metadata ('uiPreferences', 'notifications', 'tracking', 'customFields')
+   * @returns {Object} Sample metadata
+   */
+  generateSampleMetadata(type = 'uiPreferences') {
+    const sampleMetas = {
+      uiPreferences: {
+        colorLabel: 'blue',
+        showInKanban: true,
+        collapsed: false,
+        customIcon: 'star'
+      },
+      notifications: {
+        emailOnDue: true,
+        reminderDays: 3,
+        notifyAssignee: true,
+        channels: ['email', 'slack']
+      },
+      tracking: {
+        actualHours: 5.5,
+        startedAt: '2025-12-01T10:00:00Z',
+        completedAt: null,
+        progressPercent: 75
+      },
+      customFields: {
+        clientRef: 'PRJ-001',
+        department: 'Engineering',
+        billable: true,
+        hourlyRate: 150
+      }
+    }
+
+    return { [type]: sampleMetas[type] || sampleMetas.uiPreferences }
+  }
+}
+
+// Export class for use in tests
+module.exports = TaskAPIController
+
+// For global use in Cypress
+if (typeof window !== 'undefined') {
+  window.TaskAPIController = TaskAPIController
+}