@nextsparkjs/core 0.1.0-beta.188 → 0.1.0-beta.189

package/templates/contents/themes/starter/blocks/text-content/component.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sanitizeBlockHtml } from '@nextsparkjs/core/lib/blocks/sanitize-html'
+import type { TextContentBlockProps } from './schema'
+
+/**
+ * Text Content Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content (rich-text), cta
+ * - Design: backgroundColor, maxWidth, alignment
+ * - Advanced: className, id
+ *
+ * Note: `content` is the main rich-text body of this block
+ */
+export function TextContentBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Text-content-specific design
+  maxWidth = 'lg',
+  alignment = 'left',
+  // Base advanced props
+  className,
+  id,
+}: TextContentBlockProps) {
+  const maxWidthClasses: Record<string, string> = {
+    sm: 'max-w-2xl',
+    md: 'max-w-3xl',
+    lg: 'max-w-4xl',
+    xl: 'max-w-5xl',
+    full: 'max-w-none',
+  }
+
+  const alignmentClasses: Record<string, string> = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right ml-auto',
+  }
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 @md:py-24',
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy="block-text-content">
+      <div className="container mx-auto">
+        {/* Optional Section Title */}
+        {title && (
+          <div className={cn(
+            'mb-8',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}>
+            <h2 className="text-3xl font-bold @md:text-4xl">
+              {title}
+            </h2>
+          </div>
+        )}
+
+        {/* Rich Text Content */}
+        <div
+          className={cn(
+            'prose prose-lg dark:prose-invert',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}
+          dangerouslySetInnerHTML={{ __html: sanitizeBlockHtml(content) }}
+        />
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className={cn(
+            'mt-8',
+            maxWidthClasses[maxWidth],
+            alignmentClasses[alignment]
+          )}>
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+// The generated block registry imports this as the module's default.
+export default TextContentBlock

package/templates/contents/themes/starter/blocks/text-content/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'text-content',
+  name: 'Text Content',
+  description: 'Rich text content block for paragraphs, lists, and formatted text',
+  category: 'content',
+  icon: 'FileText',
+  thumbnail: '/theme/blocks/text-content/thumbnail.png',
+  scope: ['pages']
+}

package/templates/contents/themes/starter/blocks/text-content/fields.ts

@@ -0,0 +1,88 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Text Content Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, cta (from base) + content (rich-text, replaces base content)
+ * - Design: backgroundColor (from base) + maxWidth, alignment
+ * - Advanced: className, id (from base)
+ *
+ * Note: The `content` field is overridden with a rich-text version
+ */
+
+// Filter out base content field (we'll replace it with rich-text version)
+const baseContentFieldsWithoutContent = baseContentFields.filter(
+  (field) => field.name !== 'content'
+)
+
+// Text-content-specific content fields (rich-text content)
+const textContentFields: FieldDefinition[] = [
+  {
+    name: 'content',
+    label: 'Content',
+    type: 'rich-text',
+    tab: 'content',
+    required: true,
+    placeholder: 'Enter your content here...',
+    helpText: 'Rich text content with formatting support',
+  },
+]
+
+// Text-content-specific design fields
+const textDesignFields: FieldDefinition[] = [
+  {
+    name: 'maxWidth',
+    label: 'Maximum Width',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'lg',
+    helpText: 'Maximum content width',
+    options: [
+      { label: 'Small (640px)', value: 'sm' },
+      { label: 'Medium (768px)', value: 'md' },
+      { label: 'Large (1024px)', value: 'lg' },
+      { label: 'Extra Large (1280px)', value: 'xl' },
+      { label: 'Full Width', value: 'full' },
+    ],
+  },
+  {
+    name: 'alignment',
+    label: 'Text Alignment',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'left',
+    helpText: 'Text alignment within the content area',
+    options: [
+      { label: 'Left', value: 'left' },
+      { label: 'Center', value: 'center' },
+      { label: 'Right', value: 'right' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields (without content) + rich-text content
+  ...baseContentFieldsWithoutContent,
+  ...textContentFields,
+
+  // Design tab: base fields + text-specific
+  ...baseDesignFields,
+  ...textDesignFields,
+
+  // Advanced tab: base fields only
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/templates/contents/themes/starter/blocks/text-content/index.ts

@@ -0,0 +1,6 @@
+export { config } from './config'
+export { schema } from './schema'
+export { fields } from './fields'
+export { TextContentBlock as Component } from './component'
+
+export type { TextContentBlockProps } from './schema'

package/templates/contents/themes/starter/blocks/text-content/schema.ts

@@ -0,0 +1,30 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Text Content Block Schema
+ *
+ * Extends base schema with:
+ * - content: Rich text/HTML content (overrides base content with required)
+ * - maxWidth: Content width constraint
+ * - alignment: Text alignment
+ *
+ * Note: Uses base schema title, cta, backgroundColor, className, id
+ * The `content` field is overridden to be required and serves as rich-text body
+ */
+export const textContentSpecificSchema = z.object({
+  // Content: rich text body (overrides base optional content)
+  content: z.string().min(1, 'Content is required'),
+
+  // Design: layout options
+  maxWidth: z.enum(['sm', 'md', 'lg', 'xl', 'full']).default('lg'),
+  alignment: z.enum(['left', 'center', 'right']).default('left'),
+})
+
+/**
+ * Complete Text Content Block Schema
+ * Note: textContentSpecificSchema.content overrides baseBlockSchema.content
+ */
+export const schema = baseBlockSchema.extend(textContentSpecificSchema.shape)
+
+export type TextContentBlockProps = z.infer<typeof schema>

package/templates/contents/themes/starter/config/app.config.ts

@@ -134,6 +134,14 @@ export const APP_CONFIG_OVERRIDES = {
     //   expiresIn: 60 * 60 * 24 * 90, // 90 days
     //   updateAge: 60 * 60 * 24 * 7,  // renew weekly
     // },
+
+    /**
+     * Email OTP code lifetime (seconds) and length (digits) — defaults: 300
+     * (5 minutes) / 6. Drives the `emailOTP` plugin, the login form's
+     * countdown, and the OTP email's "expires in" notice together, so they
+     * can't drift apart:
+     */
+    // otp: { expiresIn: 60 * 10, otpLength: 6 },
     /**
      * Whether Better Auth automatically sends the verification email on signup.
      *

package/templates/contents/themes/starter/entities/tasks/tasks.config.ts

@@ -38,6 +38,13 @@ export const taskEntityConfig: EntityConfig = {
     dashboard: {
       showInMenu: true,
       showInTopbar: true,
+      // `filterable` below turns the feature on; this says what to filter by.
+      // Without it the list renders no filter controls at all, which is what
+      // the UAT specs (and the cypress entities fixture) already expect.
+      filters: [
+        { field: 'status', type: 'multiSelect' },
+        { field: 'priority', type: 'multiSelect' },
+      ],
     },
     public: {
       hasArchivePage: false,

package/templates/contents/themes/starter/tests/cypress/e2e/_utils/devtools/access.cy.ts

@@ -6,6 +6,7 @@ import {
   loginAsDefaultDeveloper,
   loginAsDefaultSuperadmin,
   loginAsDefaultMember,
+  hasSeededTeamRoleUser,
   CORE_USERS
 } from '../../../src/session-helpers'
 
@@ -145,7 +146,14 @@ describe('DevTools - Access Control', {
     })
   })
 
-  describe('ACCESS-007: Member is BLOCKED from /devtools', { tags: '@smoke' }, () => {
+  // Needs a user with a plain team role, which the starter does not seed — it
+  // creates superadmin and developer only. ACCESS-006 above already covers a
+  // non-developer being blocked, using a user that does exist, so skipping this
+  // leaves no path untested. A theme that seeds team members sets MEMBER_EMAIL
+  // and it runs.
+  const memberSuite = hasSeededTeamRoleUser('MEMBER') ? describe : describe.skip
+
+  memberSuite('ACCESS-007: Member is BLOCKED from /devtools', { tags: '@smoke' }, () => {
     it('should redirect member to /dashboard when attempting to access /devtools', { tags: '@smoke' }, () => {
       allure.severity('critical')
 

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

@@ -6,8 +6,8 @@
  * - 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 BaseAPIController = require('../../../../src/controllers/BaseAPIController')
+const entitiesConfig = require('../../../../fixtures/entities.json')
 
 const { slug } = entitiesConfig.entities.tasks
 

package/templates/contents/themes/starter/tests/cypress/e2e/uat/entities/tasks/tasks-crud.cy.ts

@@ -38,24 +38,13 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
   })
 
   afterEach(() => {
-    // Cleanup: Delete any tasks created during tests
-    if (createdTaskIds.length > 0) {
-      cy.window().then((win) => {
-        const teamId = win.localStorage.getItem('activeTeamId')
-        createdTaskIds.forEach((id) => {
-          cy.request({
-            method: 'DELETE',
-            url: `/api/v1/tasks/${id}`,
-            headers: {
-              'Content-Type': 'application/json',
-              'x-team-id': teamId || ''
-            },
-            failOnStatusCode: false
-          })
-        })
-        createdTaskIds = []
-      })
-    }
+    // Through the command rather than a request built here: it resolves the
+    // team the API requires even before a dashboard visit has put it in
+    // localStorage. Sending an empty `x-team-id` gets a 400 that nothing
+    // reports, and the tasks survive into the next test, where a count of rows
+    // then measures the leftovers instead of what that test created.
+    createdTaskIds.forEach((id) => cy.deleteTask(id))
+    createdTaskIds = []
   })
 
   // ============================================================
@@ -75,7 +64,9 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
       tasks.fillTaskForm(taskData)
       tasks.submitForm()
 
-      // Should redirect to list and show new task
+      // Saving lands on the detail page, so reaching the list is a separate
+      // visit. What this test is about is the task existing and showing there.
+      tasks.visitList()
       tasks.waitForList()
       tasks.assertTaskInList(taskData.title)
     })
@@ -93,6 +84,7 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
       tasks.fillTaskForm(taskData)
       tasks.submitForm()
 
+      tasks.visitList()
       tasks.waitForList()
       tasks.assertTaskInList(taskData.title)
     })
@@ -141,6 +133,9 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
 
     it('should navigate to task detail page', () => {
       cy.then(() => {
+        tasks.visitList()
+        tasks.waitForList()
+
         tasks.clickRow(testTaskId)
         tasks.waitForDetail()
 
@@ -195,7 +190,10 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
         tasks.fillTextField('title', newTitle)
         tasks.submitForm()
 
+        tasks.waitForDetail()
+
         // Verify update
+        tasks.visitList()
         tasks.waitForList()
         tasks.assertTaskInList(newTitle)
         tasks.assertTaskNotInList(originalTitle)
@@ -211,6 +209,9 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
         tasks.selectOption('status', 'done')
         tasks.submitForm()
 
+        tasks.waitForDetail()
+
+        tasks.visitList()
         tasks.waitForList()
         // Task should now show as done
         tasks.assertTaskInList(originalTitle)
@@ -226,6 +227,9 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
         tasks.selectOption('priority', 'urgent')
         tasks.submitForm()
 
+        tasks.waitForDetail()
+
+        tasks.visitList()
         tasks.waitForList()
         tasks.assertTaskInList(originalTitle)
       })
@@ -312,47 +316,49 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
         })
       })
 
-      // Refresh list to see new tasks
-      cy.reload()
+      // The list, not a reload: `cy.reload()` keeps the current URL, so a filter
+      // the previous test left in the query string is still applied here.
+      tasks.visitList()
       tasks.waitForList()
     })
 
     it('should filter tasks by status', () => {
-      // Filter by "todo" status
       tasks.filterByStatus('todo')
 
-      // Wait for filter to apply
-      cy.wait(500)
+      // The filter travels in the URL, and waiting on that is what settles the
+      // list: asserting row by row while the table is still refetching detaches
+      // the very rows being checked.
+      cy.url().should('include', 'status=todo')
+      cy.get(tasks.selectors.rowGeneric).should('have.length.greaterThan', 0)
 
-      // Should show only todo tasks
+      // A row shows the option's label, never the stored value.
       cy.get(tasks.selectors.rowGeneric).each(($row) => {
-        cy.wrap($row).should('contain.text', 'todo')
+        cy.wrap($row).should('contain.text', 'To Do')
       })
     })
 
     it('should filter tasks by priority', () => {
-      // Filter by "high" priority
       tasks.filterByPriority('high')
 
-      // Wait for filter to apply
-      cy.wait(500)
+      cy.url().should('include', 'priority=high')
+      cy.get(tasks.selectors.rowGeneric).should('have.length.greaterThan', 0)
 
-      // Should show only high priority tasks
       cy.get(tasks.selectors.rowGeneric).each(($row) => {
-        cy.wrap($row).should('contain.text', 'high')
+        cy.wrap($row).should('contain.text', 'High')
       })
     })
 
     it('should clear filters', () => {
-      // Apply filter
       tasks.filterByStatus('todo')
-      cy.wait(500)
+      // The filter travels in the URL, and waiting on that is what settles the
+      // list — a fixed wait counts rows mid-refetch and sees a partial table.
+      cy.url().should('include', 'status=todo')
 
-      // Clear filter
       tasks.clearStatusFilter()
-      cy.wait(500)
+      cy.url().should('not.include', 'status=')
 
-      // Should show all tasks again
+      // The three the beforeEach created: the starter seeds no tasks, so any
+      // higher number would be counting on a previous run's leftovers.
       cy.get(tasks.selectors.rowGeneric).should('have.length.at.least', 3)
     })
   })
@@ -388,8 +394,9 @@ describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
         }
       })
 
-      // Refresh list
-      cy.reload()
+      // The list, not a reload: a search or filter left in the query string by
+      // the previous test would still be applied.
+      tasks.visitList()
       tasks.waitForList()
     })
 

package/templates/contents/themes/starter/tests/cypress/fixtures/entities.json

@@ -15,6 +15,22 @@
         "status",
         "priority"
       ]
+    },
+    "pages": {
+      "slug": "pages",
+      "singular": "page",
+      "plural": "Pages",
+      "tableName": "pages",
+      "fields": [
+        "title",
+        "slug",
+        "status",
+        "locale"
+      ],
+      "filters": [
+        "status"
+      ],
+      "source": "theme"
     }
   },
   "tasks": {

package/templates/contents/themes/starter/tests/cypress/src/components/DevKeyringPOM.ts

@@ -118,7 +118,9 @@ export class DevKeyringPOM extends BasePOM {
     this.submitLogin()
 
     // 3. Wait for login to complete
-    cy.url().should('include', '/dashboard', { timeout: 10000 })
+    // No explicit timeout: an inline one wins over the run's configuration, so a
+    // slow dev server could not be waited out with `--config defaultCommandTimeout`.
+    cy.url().should('include', '/dashboard')
 
     return this
   }

package/templates/contents/themes/starter/tests/cypress/src/core/BlockEditorBasePOM.ts

@@ -58,9 +58,9 @@ export abstract class BlockEditorBasePOM extends BasePOM {
     return {
       // Editor main
       container: cySelector('blockEditor.container'),
-      titleInput: cySelector('blockEditor.titleInput'),
-      slugInput: cySelector('blockEditor.slugInput'),
-      saveButton: cySelector('blockEditor.saveButton'),
+      titleInput: cySelector('blockEditor.header.titleInput'),
+      slugInput: cySelector('blockEditor.header.slugInput'),
+      saveButton: cySelector('blockEditor.header.saveButton'),
       statusBadge: cySelector('blockEditor.statusBadge'),
       leftSidebarToggle: cySelector('blockEditor.leftSidebarToggle'),
       viewModeToggle: cySelector('blockEditor.viewModeToggle'),

package/templates/contents/themes/starter/tests/cypress/src/entities/PagesPOM.ts

@@ -0,0 +1,137 @@
+/**
+ * PagesPOM - Page Object Model for Pages entity (List operations)
+ *
+ * Extends DashboardEntityPOM for list page operations.
+ * For editing pages with the block editor, use PageBuilderPOM from features/.
+ *
+ * @example
+ * // List operations
+ * PagesPOM.create()
+ *   .visitList()
+ *   .waitForList()
+ *   .search('About Us')
+ *   .selectFilter('status', 'published')
+ *
+ * // For editing pages, use PageBuilderPOM
+ * import { PageBuilderPOM } from '../features/PageBuilderPOM'
+ * PageBuilderPOM.create().visitEdit(pageId).setTitle('New Title').save()
+ */
+
+import { DashboardEntityPOM } from '../core/DashboardEntityPOM'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export interface PageListFilters {
+  status?: 'draft' | 'published' | 'archived'
+  locale?: 'en' | 'es'
+}
+
+export class PagesPOM extends DashboardEntityPOM {
+  constructor() {
+    super(entitiesConfig.entities.pages.slug)
+  }
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): PagesPOM {
+    return new PagesPOM()
+  }
+
+  // ============================================
+  // PAGE-SPECIFIC LIST METHODS
+  // ============================================
+
+  /**
+   * Filter pages by status
+   */
+  filterByStatus(status: 'draft' | 'published' | 'archived') {
+    return this.selectFilter('status', status)
+  }
+
+  /**
+   * Apply multiple filters at once
+   */
+  applyFilters(filters: PageListFilters) {
+    if (filters.status) {
+      this.filterByStatus(filters.status)
+    }
+    if (filters.locale) {
+      this.selectFilter('locale', filters.locale)
+    }
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Navigate to create page
+   * Note: Pages use block editor, so this redirects to the editor
+   */
+  navigateToCreate() {
+    this.clickAdd()
+    return this
+  }
+
+  /**
+   * Navigate to edit page for a page
+   * Note: Pages use block editor, so this redirects to the editor
+   */
+  navigateToEdit(id: string) {
+    this.clickRowAction('edit', id)
+    return this
+  }
+
+  /**
+   * Delete page from list with API waits
+   */
+  deletePageWithApiWait(id: string) {
+    this.visitDetailWithApiWait(id)
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  /**
+   * Delete page by finding it in the list by title
+   */
+  deletePageByTitleWithApiWait(title: string) {
+    this.clickRowByText(title)
+    this.waitForDetail()
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  // ============================================
+  // ENTITY-SPECIFIC ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert page appears in list
+   */
+  assertPageInList(title: string) {
+    return this.assertInList(title)
+  }
+
+  /**
+   * Assert page does not appear in list
+   */
+  assertPageNotInList(title: string) {
+    return this.assertNotInList(title)
+  }
+
+  /**
+   * Assert page has specific status badge
+   */
+  assertPageStatus(id: string, status: string) {
+    cy.get(this.selectors.row(id)).should('contain.text', status)
+    return this
+  }
+}
+
+export default PagesPOM

package/templates/contents/themes/starter/tests/cypress/src/entities/index.ts

@@ -4,9 +4,11 @@
  * Page Object Models for specific entities:
  * - TasksPOM: Tasks CRUD operations
  * - PatternsPOM: Patterns CRUD operations with usage tracking (core entity)
+ * - PagesPOM: Pages CRUD operations (the block editor specs build on it)
  *
  * Add more entity POMs as you create new entities.
  */
 
 export { TasksPOM, type TaskFormData } from './TasksPOM'
 export { PatternsPOM } from './PatternsPOM'
+export { PagesPOM } from './PagesPOM'