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

package/templates/contents/themes/default/tests/cypress/e2e/_devtools/pages.bdd.md

@@ -1,303 +0,0 @@
----
-feature: DevTools Page Content
-priority: high
-tags: [dev-area, pages, content]
-grepTags: [uat, feat-dev-area, regression]
-coverage: 6
----
-
-# DevTools Page Content
-
-> Tests the content and functionality of each /devtools page including Home quick links, Style Gallery components, Test Cases viewer, and Config viewer tabs.
-
-## @test PAGE-001: Home page renders quick links
-
-### Metadata
-- **Priority:** High
-- **Type:** Smoke
-- **Tags:** home, quick-links
-- **Grep:** `@smoke`
-
-```gherkin:en
-Scenario: Display all quick link cards on home page
-
-Given I am logged in as Developer (developer@nextspark.dev)
-When I visit /devtools home
-Then the home page container should be visible
-And all quick links should be visible (Style, Tests, Config)
-
-When I click Style Gallery quick link
-Then I should be on /devtools/style
-
-When I go back to /devtools home
-And I click Test Cases quick link
-Then I should be on /devtools/tests
-
-When I go back to /devtools home
-And I click Config Viewer quick link
-Then I should be on /devtools/config
-```
-
-```gherkin:es
-Scenario: Mostrar todas las tarjetas de enlaces rapidos en home
-
-Given estoy logueado como Developer (developer@nextspark.dev)
-When visito /devtools home
-Then el contenedor de home page deberia estar visible
-And todos los enlaces rapidos deberian estar visibles (Style, Tests, Config)
-
-When hago clic en el enlace rapido Style Gallery
-Then deberia estar en /devtools/style
-
-When vuelvo a /devtools home
-And hago clic en el enlace rapido Test Cases
-Then deberia estar en /devtools/tests
-
-When vuelvo a /devtools home
-And hago clic en el enlace rapido Config Viewer
-Then deberia estar en /devtools/config
-```
-
-### Expected Results
-- Home page container visible
-- All 3 quick link cards displayed
-- Each quick link navigates correctly
-- All target pages load successfully
-
----
-
-## @test PAGE-002: Style Gallery loads components
-
-### Metadata
-- **Priority:** High
-- **Type:** Smoke
-- **Tags:** style-gallery, components, tabs
-
-```gherkin:en
-Scenario: Display all Style Gallery sections
-
-Given I am logged in as Developer (developer@nextspark.dev)
-When I visit /devtools/style
-Then the style page should be visible
-
-And I verify all tab sections by clicking through them:
-| Tab | Content Section |
-| Components | Component Gallery |
-| Field Types | Field Types Gallery |
-| Theme | Theme Preview |
-```
-
-```gherkin:es
-Scenario: Mostrar todas las secciones de Style Gallery
-
-Given estoy logueado como Developer (developer@nextspark.dev)
-When visito /devtools/style
-Then la pagina de estilos deberia estar visible
-
-And verifico todas las secciones de tabs haciendo clic en cada una:
-| Tab | Seccion de Contenido |
-| Components | Component Gallery |
-| Field Types | Field Types Gallery |
-| Theme | Theme Preview |
-```
-
-### Expected Results
-- Style page container visible
-- Components tab visible by default
-- Field Types tab content loads on click
-- Theme tab content loads on click
-
----
-
-## @test PAGE-003a: Test Cases viewer shows file tree
-
-### Metadata
-- **Priority:** High
-- **Type:** Smoke
-- **Tags:** test-cases, file-tree
-
-```gherkin:en
-Scenario: Display test cases viewer with file tree
-
-Given I am logged in as Developer (developer@nextspark.dev)
-When I visit /devtools/tests
-Then the tests page should be visible
-And the viewer container should be visible
-And either file tree or empty state should be displayed
-```
-
-```gherkin:es
-Scenario: Mostrar visor de test cases con arbol de archivos
-
-Given estoy logueado como Developer (developer@nextspark.dev)
-When visito /devtools/tests
-Then la pagina de tests deberia estar visible
-And el contenedor del visor deberia estar visible
-And deberia mostrarse el arbol de archivos o estado vacio
-```
-
-### Expected Results
-- Tests page container visible
-- Viewer component rendered
-- File tree shows .bdd.md files (or empty state)
-
----
-
-## @test PAGE-003b: Test Cases viewer shows markdown content
-
-### Metadata
-- **Priority:** Medium
-- **Type:** Regression
-- **Tags:** test-cases, markdown, file-select
-
-```gherkin:en
-Scenario: Show markdown content when selecting a file
-
-Given I am on /devtools/tests
-When I check if file tree has files
-And files exist
-And I click on the first file
-Then the content area should be visible
-And markdown content should be rendered
-```
-
-```gherkin:es
-Scenario: Mostrar contenido markdown al seleccionar un archivo
-
-Given estoy en /devtools/tests
-When verifico si el arbol de archivos tiene archivos
-And existen archivos
-And hago clic en el primer archivo
-Then el area de contenido deberia estar visible
-And el contenido markdown deberia estar renderizado
-```
-
-### Expected Results
-- File selection works
-- Markdown content loads
-- Content is properly formatted
-
----
-
-## @test PAGE-004a: Config viewer shows tabs
-
-### Metadata
-- **Priority:** High
-- **Type:** Smoke
-- **Tags:** config, tabs
-
-```gherkin:en
-Scenario: Display config viewer with tabs
-
-Given I am logged in as Developer (developer@nextspark.dev)
-When I visit /devtools/config
-Then the config page should be visible
-And config tabs should be visible (Theme, Entities)
-
-When I click Theme tab
-Then Theme content should be visible
-
-When I click Entities tab
-Then Entities content should be visible
-```
-
-```gherkin:es
-Scenario: Mostrar visor de config con tabs
-
-Given estoy logueado como Developer (developer@nextspark.dev)
-When visito /devtools/config
-Then la pagina de config deberia estar visible
-And los tabs de config deberian estar visibles (Theme, Entities)
-
-When hago clic en el tab Theme
-Then el contenido de Theme deberia estar visible
-
-When hago clic en el tab Entities
-Then el contenido de Entities deberia estar visible
-```
-
-### Expected Results
-- Config page container visible
-- Theme and Entities tabs visible
-- Tab switching works correctly
-- Each tab shows correct content
-
----
-
-## @test PAGE-004b: Config viewer shows copy buttons
-
-### Metadata
-- **Priority:** Medium
-- **Type:** Regression
-- **Tags:** config, copy-buttons
-
-```gherkin:en
-Scenario: Display copy buttons in config viewer
-
-Given I am on /devtools/config
-When I click Theme tab
-Then copy button for theme config should be visible
-
-When I click Entities tab
-Then copy button for entities config should be visible
-```
-
-```gherkin:es
-Scenario: Mostrar botones de copia en el visor de config
-
-Given estoy en /devtools/config
-When hago clic en el tab Theme
-Then el boton de copia para config de theme deberia estar visible
-
-When hago clic en el tab Entities
-Then el boton de copia para config de entities deberia estar visible
-```
-
-### Expected Results
-- Copy buttons present in both tabs
-- Copy functionality available for developers
-
----
-
-## UI Elements
-
-| Element | Selector | Description |
-|---------|----------|-------------|
-| Home Page | `[data-cy="dev-home-page"]` | Dev home page container |
-| Home Style Link | `[data-cy="dev-home-style-link"]` | Quick link to Style Gallery |
-| Home Tests Link | `[data-cy="dev-home-tests-link"]` | Quick link to Test Cases |
-| Home Config Link | `[data-cy="dev-home-config-link"]` | Quick link to Config Viewer |
-| Style Page | `[data-cy="dev-style-page"]` | Style Gallery page container |
-| Style Tab Components | `[data-cy="dev-style-tab-components"]` | Components tab trigger |
-| Style Tab Field Types | `[data-cy="dev-style-tab-field-types"]` | Field Types tab trigger |
-| Style Tab Theme | `[data-cy="dev-style-tab-theme"]` | Theme tab trigger |
-| Style Component Gallery | `[data-cy="dev-style-component-gallery"]` | Components tab content |
-| Style Field Types | `[data-cy="dev-style-field-types"]` | Field Types tab content |
-| Style Theme Preview | `[data-cy="dev-style-theme-preview"]` | Theme tab content |
-| Tests Page | `[data-cy="dev-tests-page"]` | Test Cases page container |
-| Tests Viewer | `[data-cy="dev-tests-viewer"]` | Test viewer container |
-| Tests Tree | `[data-cy="dev-tests-tree"]` | File tree component |
-| Tests Empty State | `[data-cy="dev-tests-empty-state"]` | Empty state when no files |
-| Tests Content | `[data-cy="dev-tests-content"]` | Content display area |
-| Tests Markdown | `[data-cy="dev-tests-markdown-content"]` | Rendered markdown content |
-| Config Page | `[data-cy="dev-config-page"]` | Config Viewer page container |
-| Config Viewer | `[data-cy="dev-config-viewer"]` | Config viewer container |
-| Config Tab Theme | `[data-cy="dev-config-tab-theme"]` | Theme tab trigger |
-| Config Tab Entities | `[data-cy="dev-config-tab-entities"]` | Entities tab trigger |
-| Config Theme Content | `[data-cy="dev-config-theme-content"]` | Theme config content |
-| Config Entities Content | `[data-cy="dev-config-entities-content"]` | Entities config content |
-| Config Copy Theme | `[data-cy="dev-config-copy-theme"]` | Copy theme config button |
-| Config Copy Entities | `[data-cy="dev-config-copy-entities"]` | Copy entities config button |
-
----
-
-## Summary
-
-| Test ID | Block | Description | Tags |
-|---------|-------|-------------|------|
-| PAGE-001 | Home Page | Quick links display and work | `@smoke` |
-| PAGE-002 | Style Gallery | All tab sections load | |
-| PAGE-003a | Test Cases | File tree viewer works | |
-| PAGE-003b | Test Cases | Markdown content renders | |
-| PAGE-004a | Config Viewer | Tabs display and switch | |
-| PAGE-004b | Config Viewer | Copy buttons available | |

package/templates/contents/themes/default/tests/cypress/e2e/_devtools/pages.cy.ts

@@ -1,184 +0,0 @@
-/// <reference types="cypress" />
-
-import * as allure from 'allure-cypress'
-import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
-import { loginAsDefaultDeveloper } from '../../src/session-helpers'
-
-/**
- * DevTools Page Content Tests
- *
- * Tests the content and functionality of each /devtools page:
- * - Home page renders quick links
- * - Style Gallery loads all components
- * - Test Cases viewer shows file tree
- * - Config viewer shows tabs and content
- *
- * Test User:
- * - Developer: developer@nextspark.dev (via loginAsDefaultDeveloper)
- */
-
-describe('DevTools - Page Content', {
-  tags: ['@uat', '@feat-devtools', '@regression']
-}, () => {
-  const devtools = DevtoolsPOM.create()
-
-  beforeEach(() => {
-    allure.epic('UAT')
-    allure.feature('DevTools')
-    allure.story('Page Content')
-
-    // Login as developer before each test
-    loginAsDefaultDeveloper()
-  })
-
-  describe('PAGE-001: Home page renders quick links', () => {
-    it('should display all quick link cards on home page', () => {
-      allure.severity('high')
-
-      // 1. Visit /devtools home
-      devtools.visitHome()
-
-      // 2. Verify page container is visible
-      devtools.assertHomePageVisible()
-
-      // 3. Verify all quick links are visible
-      devtools.assertHomeQuickLinksVisible()
-
-      // 4. Verify quick links are clickable and navigate correctly
-      cy.log('Testing Style Gallery quick link...')
-      devtools.clickHomeStyleLink()
-      devtools.assertOnStyleGallery()
-
-      cy.log('Testing Test Cases quick link...')
-      devtools.visitHome()
-      devtools.clickHomeTestsLink()
-      devtools.assertOnTestCases()
-
-      cy.log('Testing Config Viewer quick link...')
-      devtools.visitHome()
-      devtools.clickHomeConfigLink()
-      devtools.assertOnConfig()
-
-      cy.log(`✅ Home page quick links work correctly`)
-    })
-  })
-
-  describe('PAGE-002: Style Gallery loads components', () => {
-    it('should display all Style Gallery sections', () => {
-      allure.severity('high')
-
-      // 1. Visit /devtools/style
-      devtools.visitStyleGallery()
-
-      // 2. Verify page is visible
-      devtools.assertStylePageVisible()
-
-      // 3. Verify all tab sections by clicking through them
-      // (assertStyleSectionsVisible clicks each tab and verifies content)
-      devtools.assertStyleSectionsVisible()
-
-      cy.log(`✅ Style Gallery sections loaded correctly`)
-    })
-  })
-
-  describe('PAGE-003: Test Cases viewer shows file tree', () => {
-    it('should display test cases viewer with file tree', () => {
-      allure.severity('high')
-
-      // 1. Visit /devtools/tests
-      devtools.visitTestCases()
-
-      // 2. Verify page is visible
-      devtools.assertTestsPageVisible()
-
-      // 3. Verify viewer container is visible
-      devtools.assertTestsViewerVisible()
-
-      // 4. Verify file tree is present (or empty state if no files)
-      cy.get('body').then(($body) => {
-        if ($body.find(devtools.selectors.testsTree).length > 0) {
-          // File tree exists
-          cy.get(devtools.selectors.testsTree).should('be.visible')
-          cy.log('✅ File tree displayed')
-        } else if ($body.find(devtools.selectors.testsEmptyState).length > 0) {
-          // Empty state (no test files)
-          cy.get(devtools.selectors.testsEmptyState).should('be.visible')
-          cy.log('✅ Empty state displayed (no test files found)')
-        }
-      })
-
-      cy.log(`✅ Test Cases viewer loaded correctly`)
-    })
-
-    it('should show markdown content when selecting a file', () => {
-      allure.severity('medium')
-
-      // 1. Visit /devtools/tests
-      devtools.visitTestCases()
-
-      // 2. Check if file tree has files
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy^="dev-tests-file-"]').length > 0) {
-          // Files exist - click first file
-          cy.get('[data-cy^="dev-tests-file-"]').first().click()
-
-          // 3. Verify markdown content is displayed
-          cy.get(devtools.selectors.testsContent).should('be.visible')
-          cy.get(devtools.selectors.testsMarkdownContent).should('be.visible')
-
-          cy.log('✅ File content displayed when selected')
-        } else {
-          cy.log('⚠️ No test files found - skipping file selection test')
-        }
-      })
-    })
-  })
-
-  describe('PAGE-004: Config viewer shows tabs', () => {
-    it('should display config viewer with tabs', () => {
-      allure.severity('high')
-
-      // 1. Visit /devtools/config
-      devtools.visitConfig()
-
-      // 2. Verify page is visible
-      devtools.assertConfigPageVisible()
-
-      // 3. Verify tabs are visible
-      devtools.assertConfigTabsVisible()
-
-      // 4. Test Theme tab
-      cy.log('Testing Theme tab...')
-      devtools.clickConfigTabTheme()
-      cy.get(devtools.selectors.configThemeContent).should('be.visible')
-
-      // 5. Test Entities tab
-      cy.log('Testing Entities tab...')
-      devtools.clickConfigTabEntities()
-      cy.get(devtools.selectors.configEntitiesContent).should('be.visible')
-
-      cy.log(`✅ Config viewer tabs work correctly`)
-    })
-
-    it('should display copy buttons in config viewer', () => {
-      allure.severity('medium')
-
-      // 1. Visit /devtools/config
-      devtools.visitConfig()
-
-      // 2. Verify copy buttons exist for theme config
-      devtools.clickConfigTabTheme()
-      cy.get(devtools.selectors.configCopyTheme).should('be.visible')
-
-      // 3. Verify copy buttons exist for entities config
-      devtools.clickConfigTabEntities()
-      cy.get(devtools.selectors.configCopyEntities).should('be.visible')
-
-      cy.log(`✅ Copy buttons displayed correctly`)
-    })
-  })
-
-  after(() => {
-    cy.log('✅ DevTools page content tests completed')
-  })
-})

package/templates/contents/themes/default/tests/cypress/e2e/_docs/README.md

@@ -1,215 +0,0 @@
-# Cypress Documentation Videos
-
-This directory contains Cypress tests designed to generate documentation videos with narration support.
-
-## Concept
-
-Instead of manually recording tutorial videos, we use Cypress tests that:
-1. **Slow down execution** to human-readable speed using `cypress-slow-down`
-2. **Add narration markers** that are saved as JSON for post-processing
-3. **Highlight elements** visually during important steps
-4. **Generate MP4 videos** automatically via Cypress video recording
-
-## Quick Start
-
-### Run a documentation test
-
-```bash
-# Interactive mode (watch the test execute)
-NEXT_PUBLIC_ACTIVE_THEME=default pnpm cy:open
-
-# Headless mode (generates video file)
-NEXT_PUBLIC_ACTIVE_THEME=default pnpm cy:run --spec "**/teams-system.doc.cy.ts"
-```
-
-### Output Files
-
-After running, you'll find:
-- **Video**: `cypress/videos/docs/tutorials/teams-system.doc.cy.ts.mp4`
-- **Narrations**: `cypress/docs-output/narrations/teams-system.doc-narrations.json`
-
-## File Structure
-
-```
-cypress/e2e/docs/
-├── README.md                    # This file
-└── tutorials/
-    ├── teams-system.doc.cy.ts   # The actual Cypress test
-    └── teams-system.narration.json  # Narration script (reference)
-
-cypress/docs-output/
-└── narrations/
-    └── teams-system.doc-narrations.json  # Generated narration timing
-```
-
-## Creating a New Documentation Video
-
-### 1. Plan the narration
-
-Create a `.narration.json` file with your script:
-
-```json
-{
-  "title": "Feature Name Tutorial",
-  "chapters": [
-    {
-      "id": "intro",
-      "title": "Introduction",
-      "narrations": [
-        {
-          "step": 1,
-          "text": "Welcome to this tutorial...",
-          "action": "none",
-          "estimatedSeconds": 5
-        }
-      ]
-    }
-  ]
-}
-```
-
-### 2. Create the test file
-
-Use the `*.doc.cy.ts` naming convention:
-
-```typescript
-import { slowCypressDown } from 'cypress-slow-down'
-import 'cypress-slow-down/commands'
-
-const CONFIG = {
-  commandDelay: 600,  // ms between commands
-  narration: {
-    short: 2500,
-    medium: 4000,
-    long: 5500,
-  }
-}
-
-describe('Tutorial: Feature Name', { tags: ['@doc'] }, () => {
-  before(() => {
-    slowCypressDown(CONFIG.commandDelay)
-  })
-
-  it('demonstrates the feature', () => {
-    // Chapter marker
-    cy.log('📖 **CHAPTER: Introduction**')
-    cy.wait(2000)
-
-    // Narration with wait
-    cy.log('🎙️ Welcome to this tutorial about...')
-    cy.wait(4000)  // Time for narration
-
-    // Your test actions...
-    cy.visit('/some-page')
-
-    // Highlight important elements
-    cy.get('[data-cy="important"]').then($el => {
-      $el.css({ outline: '4px solid red' })
-    })
-    cy.wait(2000)  // Let viewer see highlight
-  })
-})
-```
-
-### 3. Run and collect outputs
-
-```bash
-# Generate video and narrations
-NEXT_PUBLIC_ACTIVE_THEME=default pnpm cy:run --spec "**/your-feature.doc.cy.ts"
-```
-
-## Post-Processing Pipeline
-
-The generated outputs can be processed with AI tools:
-
-### Video + Narrations → Final Documentation
-
-```
-┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
-│  Cypress Video  │    │  Narration JSON │    │   AI Service    │
-│  (MP4, no audio)│───►│  (timestamps)   │───►│  (Guidde/HeyGen)│
-└─────────────────┘    └─────────────────┘    └─────────────────┘
-                                                      │
-                                                      ▼
-                                              ┌─────────────────┐
-                                              │  Final Video    │
-                                              │  + AI Narration │
-                                              │  + Subtitles    │
-                                              └─────────────────┘
-```
-
-### Narration JSON Format
-
-The generated `*-narrations.json` contains:
-
-```json
-[
-  {
-    "timestamp": 1702400000000,
-    "step": 1,
-    "text": "=== Introduction ===",
-    "chapter": "Introduction",
-    "duration": 2500
-  },
-  {
-    "timestamp": 1702400002500,
-    "step": 2,
-    "text": "Welcome to this tutorial...",
-    "duration": 4000
-  }
-]
-```
-
-This can be used to:
-- Generate SRT subtitle files
-- Send to text-to-speech APIs (ElevenLabs, Google TTS)
-- Sync audio with video using FFmpeg
-
-## Speed Configuration
-
-Adjust the `commandDelay` and narration durations based on your needs:
-
-| Setting | Value | Use Case |
-|---------|-------|----------|
-| `commandDelay: 300` | Fast | Quick demos |
-| `commandDelay: 600` | Normal | Standard tutorials |
-| `commandDelay: 1000` | Slow | Detailed explanations |
-
-### Narration Timing Guide
-
-| Duration | Words | Use For |
-|----------|-------|---------|
-| 2500ms | ~8-10 | Short phrases |
-| 4000ms | ~15-18 | Standard sentences |
-| 5500ms | ~22-25 | Longer explanations |
-
-## Tips
-
-1. **Use `cy.wait()` strategically** - Add pauses after important actions
-2. **Highlight sparingly** - Only highlight what you're talking about
-3. **Chapter markers** - Help viewers navigate in longer videos
-4. **Test first without slow-down** - Ensure test passes before recording
-5. **Keep videos under 5 minutes** - Split longer tutorials into parts
-
-## Running Only Doc Tests
-
-Use tags to filter:
-
-```bash
-# Run only documentation tests
-pnpm cy:run --env grepTags=@doc
-
-# Run only tutorial tests
-pnpm cy:run --env grepTags=@tutorial
-
-# Exclude doc tests from regular test runs
-pnpm cy:run --env grepTags=-@doc
-```
-
-## Future Enhancements
-
-- [ ] Automated subtitle generation script
-- [ ] Integration with AI narration APIs
-- [ ] FFmpeg post-processing script
-- [ ] Multi-language support
-- [ ] Automated upload to docs site