@nextsparkjs/theme-productivity 0.1.0-beta.17 → 0.1.0-beta.170

package/entities/lists/api/docs.md

@@ -0,0 +1,143 @@
+# Lists API
+
+Manage columns within boards (To Do, In Progress, Done, etc.).
+
+## Overview
+
+The Lists API allows you to create, read, update, and delete list records. Lists are the columns within a board that organize cards in a Kanban workflow.
+
+## Authentication
+
+All endpoints require authentication via:
+- **Session cookie** (for browser-based requests)
+- **API Key** header (for server-to-server requests)
+
+## Endpoints
+
+### List Lists
+`GET /api/v1/lists`
+
+Returns a paginated list of lists.
+
+**Query Parameters:**
+- `limit` (number, optional): Maximum records to return. Default: 20
+- `offset` (number, optional): Number of records to skip. Default: 0
+- `boardId` (string, optional): Filter by parent board
+- `search` (string, optional): Search by name
+- `sortBy` (string, optional): Field to sort by. Default: position
+- `sortOrder` (string, optional): Sort direction (asc, desc)
+
+**Example Response:**
+```json
+{
+  "data": [
+    {
+      "id": "list_abc123",
+      "name": "To Do",
+      "position": 1,
+      "boardId": "board_xyz789",
+      "createdAt": "2024-01-15T10:30:00Z",
+      "updatedAt": "2024-01-15T10:30:00Z"
+    },
+    {
+      "id": "list_def456",
+      "name": "In Progress",
+      "position": 2,
+      "boardId": "board_xyz789",
+      "createdAt": "2024-01-15T10:30:00Z",
+      "updatedAt": "2024-01-15T10:30:00Z"
+    },
+    {
+      "id": "list_ghi789",
+      "name": "Done",
+      "position": 3,
+      "boardId": "board_xyz789",
+      "createdAt": "2024-01-15T10:30:00Z",
+      "updatedAt": "2024-01-15T10:30:00Z"
+    }
+  ],
+  "pagination": {
+    "total": 3,
+    "limit": 20,
+    "offset": 0
+  }
+}
+```
+
+### Get Single List
+`GET /api/v1/lists/[id]`
+
+Returns a single list by ID.
+
+### Create List
+`POST /api/v1/lists`
+
+Create a new list.
+
+**Request Body:**
+```json
+{
+  "name": "Review",
+  "boardId": "board_xyz789",
+  "position": 4
+}
+```
+
+### Update List
+`PATCH /api/v1/lists/[id]`
+
+Update an existing list. Supports partial updates.
+
+### Reorder Lists
+`PATCH /api/v1/lists/[id]`
+
+Update list position for drag & drop reordering.
+
+**Request Body:**
+```json
+{
+  "position": 2
+}
+```
+
+### Delete List
+`DELETE /api/v1/lists/[id]`
+
+Delete a list. This will also delete all cards within the list.
+
+## Fields
+
+| Field | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| name | text | Yes | - | List name |
+| position | number | No | 0 | Display order within board |
+| boardId | reference | Yes | - | Parent board ID |
+| createdAt | datetime | Auto | - | Creation timestamp |
+| updatedAt | datetime | Auto | - | Last update timestamp |
+
+## Features
+
+- **Searchable**: name
+- **Sortable**: name, position, createdAt
+- **Drag & Drop**: Update position for reordering
+- **Cascade Delete**: Deleting a list removes all its cards
+
+## Permissions
+
+- **Create/Update/Delete**: Owner, Admin, Member
+- **Delete**: Owner, Admin
+
+## Error Responses
+
+| Status | Description |
+|--------|-------------|
+| 400 | Bad Request - Invalid parameters |
+| 401 | Unauthorized - Missing or invalid auth |
+| 403 | Forbidden - Insufficient permissions |
+| 404 | Not Found - List or Board doesn't exist |
+| 422 | Validation Error - Invalid data |
+
+## Related APIs
+
+- **[Boards](/api/v1/boards)** - Parent boards
+- **[Cards](/api/v1/cards)** - Cards within lists

package/entities/lists/api/presets.ts

@@ -0,0 +1,81 @@
+/**
+ * API Presets for Lists Entity
+ */
+
+import { defineApiEndpoint } from '@nextsparkjs/core/types/api-presets'
+
+export default defineApiEndpoint({
+  summary: 'Manage kanban lists (columns) within boards',
+  presets: [
+    {
+      id: 'list-all',
+      title: 'List All Lists',
+      description: 'Get all lists with pagination',
+      method: 'GET',
+      params: {
+        limit: 50
+      },
+      tags: ['read', 'list']
+    },
+    {
+      id: 'list-by-board',
+      title: 'List by Board',
+      description: 'Get all lists for a specific board',
+      method: 'GET',
+      params: {
+        boardId: '{{boardId}}',
+        sortBy: 'position',
+        sortOrder: 'asc'
+      },
+      tags: ['read', 'filter']
+    },
+    {
+      id: 'create-list',
+      title: 'Create List',
+      description: 'Create a new list in a board',
+      method: 'POST',
+      payload: {
+        name: 'New List',
+        boardId: '{{boardId}}',
+        position: 0
+      },
+      tags: ['write', 'create']
+    },
+    {
+      id: 'rename-list',
+      title: 'Rename List',
+      description: 'Rename an existing list',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        name: '{{name}}'
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'reorder-list',
+      title: 'Reorder List',
+      description: 'Update list position within board',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        position: '{{position}}'
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'delete-list',
+      title: 'Delete List',
+      description: 'Delete a list and all its cards',
+      method: 'DELETE',
+      pathParams: {
+        id: '{{id}}'
+      },
+      tags: ['write', 'delete']
+    }
+  ]
+})

package/lib/selectors.ts

@@ -9,8 +9,7 @@
  * - Cypress tests (via tests/cypress/src/selectors.ts)
  */
 
-import { createSelectorHelpers } from '@nextsparkjs/core/lib/test/selector-factory'
-import { CORE_SELECTORS } from '@nextsparkjs/core/lib/test/core-selectors'
+import { createSelectorHelpers, CORE_SELECTORS } from '@nextsparkjs/core/selectors'
 
 // =============================================================================
 // BLOCK SELECTORS
@@ -202,5 +201,5 @@ export type ThemeSelectorsType = typeof THEME_SELECTORS
 export type BlockSelectorsType = typeof BLOCK_SELECTORS
 export type EntitySelectorsType = typeof ENTITY_SELECTORS
 export type KanbanSelectorsType = typeof KANBAN_SELECTORS
-export type { Replacements } from '@nextsparkjs/core/lib/test/selector-factory'
+export type { Replacements } from '@nextsparkjs/core/selectors'
 export { CORE_SELECTORS }

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@nextsparkjs/theme-productivity",
-  "version": "0.1.0-beta.17",
+  "version": "0.1.0-beta.170",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
   "requiredPlugins": [],
   "dependencies": {},
   "peerDependencies": {
+    "@nextsparkjs/core": "*",
+    "@nextsparkjs/testing": "*",
     "lucide-react": "^0.539.0",
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "zod": "^4.0.0",
-    "@nextsparkjs/core": "0.1.0-beta.17"
+    "zod": "^4.0.0"
   },
   "nextspark": {
     "type": "theme",

package/styles/globals.css

@@ -3,10 +3,40 @@
  *
  * Clean, modern design focused on productivity.
  * Blue-tinted palette with clear visual hierarchy.
+ *
+ * ÚNICA FUENTE DE VERDAD para estilos del theme.
+ * Editar este archivo para customizar el design system.
  */
 
+/* =============================================
+   IMPORTS
+   ============================================= */
+@import "tailwindcss";
+
+/* =============================================
+   TAILWIND v4 DARK MODE CONFIGURATION
+
+   Por defecto Tailwind v4 usa @media (prefers-color-scheme: dark)
+   para las variantes dark:. Esto causa problemas porque:
+   - next-themes usa la clase .dark en el HTML
+   - El sistema operativo puede tener dark mode aunque la app use light
+
+   Esta configuración hace que Tailwind use el selector de clase .dark
+   en lugar de la media query, sincronizándose con next-themes.
+   ============================================= */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "@tailwindcss/container-queries";
+@import "@nextsparkjs/core/styles/ui.css";
+@import "@nextsparkjs/core/styles/utilities.css";
+@import "@nextsparkjs/core/styles/docs.css";
+@source "../../../**/*.{js,ts,jsx,tsx}";
+/* Core package: monorepo (short path) + npm projects (long path) */
+@source "../node_modules/@nextsparkjs/core/dist/**/*.js";
+@source "../../../../node_modules/@nextsparkjs/core/dist/**/*.js";
+
 /* ============================================================================
-   Base Theme Variables - Blue Color Scheme
+   PRODUCTIVITY THEME - LIGHT MODE
    ============================================================================ */
 
 :root {
@@ -249,7 +279,13 @@
    Base Styles
    ============================================================================ */
 
+* {
+  border-color: var(--border);
+}
+
 body {
+  background-color: var(--background);
+  color: var(--foreground);
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 

package/tests/cypress/e2e/ui/boards/boards-owner.cy.ts

@@ -0,0 +1,349 @@
+/// <reference types="cypress" />
+
+/**
+ * Boards CRUD - Owner Role (Full Access)
+ *
+ * Tests for the productivity theme boards using the Entity Testing Convention.
+ * All selectors follow the pattern: {slug}-{component}-{detail}
+ *
+ * @see test/cypress/src/classes/themes/productivity/components/BoardsPOM.ts
+ */
+
+import { BoardsPOM } from '../../../src/components/BoardsPOM'
+import { loginAsProductivityOwner } from '../../../src/session-helpers'
+
+describe('Boards CRUD - Owner Role (Full Access)', () => {
+  beforeEach(() => {
+    loginAsProductivityOwner()
+    BoardsPOM.visitList()
+    BoardsPOM.waitForListLoad()
+  })
+
+  describe('CREATE - Owner can create boards', () => {
+    it('OWNER_BOARDS_CREATE_001: should create new board with required fields', () => {
+      const timestamp = Date.now()
+      const name = `Test Board ${timestamp}`
+      const description = `Test description for board ${timestamp}`
+
+      // Click create button
+      BoardsPOM.clickCreate()
+
+      // Validate form is visible
+      BoardsPOM.waitForFormLoad()
+      BoardsPOM.validateFormVisible()
+
+      // Fill required board fields
+      BoardsPOM.fillBoardForm({
+        name,
+        description,
+      })
+
+      // Submit form
+      BoardsPOM.submitForm()
+
+      // Should redirect to the new board's kanban view
+      cy.url().should('match', /\/dashboard\/boards\/[a-z0-9_-]+$/)
+
+      cy.log('✅ Owner created board successfully')
+    })
+
+    it('OWNER_BOARDS_CREATE_002: should create board with color', () => {
+      const timestamp = Date.now()
+      const name = `Colored Board ${timestamp}`
+
+      // Click create button
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+
+      // Fill fields with color selection
+      BoardsPOM.fillBoardForm({
+        name,
+        color: 'purple',
+      })
+
+      // Submit form
+      BoardsPOM.submitForm()
+
+      // Should redirect to board
+      cy.url().should('match', /\/dashboard\/boards\/[a-z0-9_-]+$/)
+
+      cy.log('✅ Owner created board with color successfully')
+    })
+
+    it('OWNER_BOARDS_CREATE_003: should validate required fields', () => {
+      // Click create button
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+
+      // Try to submit without filling required fields
+      BoardsPOM.submitForm()
+
+      // Form should still be visible (validation failed)
+      BoardsPOM.validateFormVisible()
+
+      cy.log('✅ Form validation working correctly')
+    })
+
+    it('OWNER_BOARDS_CREATE_004: should cancel board creation', () => {
+      const timestamp = Date.now()
+      const name = `Cancelled Board ${timestamp}`
+
+      // Click create button
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+
+      // Fill some fields
+      BoardsPOM.fillName(name)
+
+      // Cancel form
+      BoardsPOM.cancelForm()
+
+      // Should return to list
+      BoardsPOM.assertOnListPage()
+
+      // Board should not exist
+      BoardsPOM.assertBoardNotInList(name)
+
+      cy.log('✅ Board creation cancelled successfully')
+    })
+  })
+
+  describe('READ - Owner can view boards', () => {
+    it('OWNER_BOARDS_READ_001: should view boards list page', () => {
+      // Validate list page is visible
+      BoardsPOM.validateListPageVisible()
+
+      cy.log('✅ Owner can view boards list')
+    })
+
+    it('OWNER_BOARDS_READ_002: should see create button', () => {
+      // Create button should be visible for owner
+      cy.get(BoardsPOM.selectors.createBtn).should('be.visible')
+
+      cy.log('✅ Create button is visible for owner')
+    })
+
+    it('OWNER_BOARDS_READ_003: should click on board to open it', () => {
+      // Check if there are boards
+      cy.get('body').then(($body) => {
+        const boardCards = $body.find('[data-cy^="boards-card-"]')
+        if (boardCards.length > 0) {
+          // Click on first board card
+          cy.get('[data-cy^="boards-card-"]').first().find('a').first().click()
+
+          // Should navigate to board view
+          cy.url().should('match', /\/dashboard\/boards\/[a-z0-9_-]+$/)
+
+          cy.log('✅ Owner can open board')
+        } else {
+          cy.log('⚠️ No boards available to click')
+        }
+      })
+    })
+  })
+
+  describe('UPDATE - Owner can update boards', () => {
+    let testBoardId: string
+
+    beforeEach(() => {
+      // Create a board for update tests
+      const timestamp = Date.now()
+      const name = `Update Test ${timestamp}`
+
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+      BoardsPOM.fillName(name)
+      BoardsPOM.submitForm()
+
+      // Get board ID from URL
+      cy.url().then((url) => {
+        const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+        if (match) {
+          testBoardId = match[1]
+        }
+      })
+    })
+
+    it('OWNER_BOARDS_UPDATE_001: should edit board name', () => {
+      const updatedName = `Updated Board ${Date.now()}`
+
+      // Visit edit page
+      cy.url().then((url) => {
+        const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+        if (match) {
+          const boardId = match[1]
+          BoardsPOM.visitEdit(boardId)
+          BoardsPOM.waitForFormLoad()
+
+          // Update name
+          BoardsPOM.fillName(updatedName)
+
+          // Submit form
+          BoardsPOM.submitForm()
+
+          // Should redirect to board
+          cy.url().should('include', `/dashboard/boards/${boardId}`)
+
+          cy.log('✅ Owner updated board name successfully')
+        }
+      })
+    })
+
+    it('OWNER_BOARDS_UPDATE_002: should update board description', () => {
+      const updatedDescription = `Updated description ${Date.now()}`
+
+      cy.url().then((url) => {
+        const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+        if (match) {
+          const boardId = match[1]
+          BoardsPOM.visitEdit(boardId)
+          BoardsPOM.waitForFormLoad()
+
+          // Update description
+          BoardsPOM.fillDescription(updatedDescription)
+
+          // Submit form
+          BoardsPOM.submitForm()
+
+          // Should redirect to board
+          cy.url().should('include', `/dashboard/boards/${boardId}`)
+
+          cy.log('✅ Owner updated board description successfully')
+        }
+      })
+    })
+  })
+
+  describe('DELETE - Owner can delete boards', () => {
+    it('OWNER_BOARDS_DELETE_001: should delete board from edit page', () => {
+      // Create a board to delete
+      const timestamp = Date.now()
+      const name = `Delete Test ${timestamp}`
+
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+      BoardsPOM.fillName(name)
+      BoardsPOM.submitForm()
+
+      // Get board ID and go to edit page
+      cy.url().then((url) => {
+        const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+        if (match) {
+          const boardId = match[1]
+          BoardsPOM.visitEdit(boardId)
+          BoardsPOM.waitForFormLoad()
+
+          // Confirm deletion
+          BoardsPOM.confirmDelete()
+
+          // Click delete button
+          BoardsPOM.deleteFromEdit()
+
+          // Should redirect to list
+          BoardsPOM.waitForListLoad()
+          BoardsPOM.assertOnListPage()
+
+          // Board should not exist
+          BoardsPOM.assertBoardNotInList(name)
+
+          cy.log('✅ Owner deleted board successfully')
+        }
+      })
+    })
+
+    it('OWNER_BOARDS_DELETE_002: should delete board from list page menu', () => {
+      // Create a board to delete
+      const timestamp = Date.now()
+      const name = `Delete Menu Test ${timestamp}`
+
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+      BoardsPOM.fillName(name)
+      BoardsPOM.submitForm()
+
+      // Go back to list
+      BoardsPOM.visitList()
+      BoardsPOM.waitForListLoad()
+
+      // Find the board and open its menu
+      cy.get('body').then(($body) => {
+        // Find the board card containing our name
+        cy.contains('[data-cy^="boards-card-"]', name).then(($card) => {
+          // Extract ID from data-cy attribute
+          const dataCy = $card.attr('data-cy')
+          if (dataCy) {
+            const boardId = dataCy.replace('boards-card-', '')
+
+            // Confirm deletion
+            BoardsPOM.confirmDelete()
+
+            // Click delete from menu
+            BoardsPOM.clickCardDelete(boardId)
+
+            // Board should no longer exist
+            cy.contains('[data-cy^="boards-card-"]', name).should('not.exist')
+
+            cy.log('✅ Owner deleted board from list menu')
+          }
+        })
+      })
+    })
+  })
+
+  describe('INTEGRATION - Complete board lifecycle', () => {
+    it('OWNER_BOARDS_LIFECYCLE_001: should perform full CRUD lifecycle', () => {
+      const timestamp = Date.now()
+      const name = `Lifecycle Board ${timestamp}`
+      const description = `Lifecycle test description ${timestamp}`
+      const updatedName = `Updated Lifecycle ${timestamp}`
+
+      // CREATE
+      cy.log('🔄 Step 1: Create board')
+      BoardsPOM.clickCreate()
+      BoardsPOM.waitForFormLoad()
+      BoardsPOM.fillBoardForm({ name, description })
+      BoardsPOM.submitForm()
+
+      // Get board ID
+      cy.url().then((url) => {
+        const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+        expect(match).to.not.be.null
+
+        if (match) {
+          const boardId = match[1]
+
+          // READ
+          cy.log('🔄 Step 2: Verify board was created')
+          BoardsPOM.visitList()
+          BoardsPOM.waitForListLoad()
+          BoardsPOM.assertBoardInList(name)
+
+          // UPDATE
+          cy.log('🔄 Step 3: Update board')
+          BoardsPOM.visitEdit(boardId)
+          BoardsPOM.waitForFormLoad()
+          BoardsPOM.fillName(updatedName)
+          BoardsPOM.submitForm()
+
+          // Verify update
+          BoardsPOM.visitList()
+          BoardsPOM.waitForListLoad()
+          BoardsPOM.assertBoardInList(updatedName)
+
+          // DELETE
+          cy.log('🔄 Step 4: Delete board')
+          BoardsPOM.visitEdit(boardId)
+          BoardsPOM.waitForFormLoad()
+          BoardsPOM.confirmDelete()
+          BoardsPOM.deleteFromEdit()
+
+          // Verify deletion
+          BoardsPOM.waitForListLoad()
+          BoardsPOM.assertBoardNotInList(updatedName)
+
+          cy.log('✅ Full board lifecycle completed successfully')
+        }
+      })
+    })
+  })
+})