@nextsparkjs/theme-default 0.1.0-beta.17 → 0.1.0-beta.171

package/migrations/098_patterns_sample_data.sql

@@ -0,0 +1,234 @@
+-- Migration: 098_patterns_sample_data.sql
+-- Description: Sample patterns for testing pattern references and usage tracking
+-- Date: 2025-01-17
+
+-- =====================================================
+-- PATTERNS SAMPLE DATA
+-- =====================================================
+
+-- Pattern 1: Newsletter CTA (Published)
+INSERT INTO public.patterns (
+  id,
+  "userId",
+  "teamId",
+  title,
+  slug,
+  blocks,
+  status,
+  description,
+  "createdAt",
+  "updatedAt"
+) VALUES (
+  '00000000-0000-4000-b000-000000000001',
+  'test-developer-001',
+  'team-nextspark-001',
+  'Newsletter CTA',
+  'newsletter-cta',
+  '[
+    {
+      "id": "newsletter-cta-block",
+      "blockSlug": "cta-section",
+      "props": {
+        "title": "Stay Updated",
+        "content": "Subscribe to our newsletter for the latest updates, tips, and exclusive content delivered straight to your inbox.",
+        "backgroundColor": "primary",
+        "textColor": "white",
+        "primaryCta": {
+          "label": "Subscribe Now",
+          "url": "/newsletter",
+          "variant": "secondary"
+        },
+        "secondaryCta": {
+          "label": "Learn More",
+          "url": "/about",
+          "variant": "outline"
+        }
+      }
+    }
+  ]',
+  'published',
+  'Reusable newsletter call-to-action section for pages',
+  NOW() - INTERVAL '7 days',
+  NOW() - INTERVAL '2 days'
+) ON CONFLICT (id) DO UPDATE SET
+  title = EXCLUDED.title,
+  slug = EXCLUDED.slug,
+  blocks = EXCLUDED.blocks,
+  status = EXCLUDED.status,
+  description = EXCLUDED.description,
+  "updatedAt" = EXCLUDED."updatedAt";
+
+-- Pattern 2: Footer Links (Published)
+INSERT INTO public.patterns (
+  id,
+  "userId",
+  "teamId",
+  title,
+  slug,
+  blocks,
+  status,
+  description,
+  "createdAt",
+  "updatedAt"
+) VALUES (
+  '00000000-0000-4000-b000-000000000002',
+  'test-developer-001',
+  'team-nextspark-001',
+  'Footer Links',
+  'footer-links',
+  '[
+    {
+      "id": "footer-links-block",
+      "blockSlug": "text-content",
+      "props": {
+        "content": "## Quick Links\n\n- [Home](/)\n- [Features](/features)\n- [Pricing](/pricing)\n- [About](/about)\n- [Contact](/contact)\n\n## Resources\n\n- [Documentation](/getting-started)\n- [API Reference](/api)\n- [Support](/support)\n- [Blog](/blog)",
+        "textAlign": "left",
+        "maxWidth": "4xl",
+        "padding": "lg"
+      }
+    }
+  ]',
+  'published',
+  'Common footer links section for all pages',
+  NOW() - INTERVAL '14 days',
+  NOW() - INTERVAL '5 days'
+) ON CONFLICT (id) DO UPDATE SET
+  title = EXCLUDED.title,
+  slug = EXCLUDED.slug,
+  blocks = EXCLUDED.blocks,
+  status = EXCLUDED.status,
+  description = EXCLUDED.description,
+  "updatedAt" = EXCLUDED."updatedAt";
+
+-- Pattern 3: Hero Header (Draft)
+INSERT INTO public.patterns (
+  id,
+  "userId",
+  "teamId",
+  title,
+  slug,
+  blocks,
+  status,
+  description,
+  "createdAt",
+  "updatedAt"
+) VALUES (
+  '00000000-0000-4000-b000-000000000003',
+  'test-developer-001',
+  'team-nextspark-001',
+  'Hero Header',
+  'hero-header',
+  '[
+    {
+      "id": "hero-header-block",
+      "blockSlug": "hero",
+      "props": {
+        "title": "Welcome to NextSpark",
+        "content": "The complete SaaS boilerplate for modern web applications. Build faster, scale smarter.",
+        "textAlign": "center",
+        "size": "lg",
+        "cta": {
+          "text": "Get Started",
+          "link": "/signup",
+          "variant": "default"
+        },
+        "secondaryCta": {
+          "text": "View Demo",
+          "link": "/demo",
+          "variant": "outline"
+        }
+      }
+    }
+  ]',
+  'draft',
+  'Standard hero header for landing pages (work in progress)',
+  NOW() - INTERVAL '3 days',
+  NOW() - INTERVAL '1 day'
+) ON CONFLICT (id) DO UPDATE SET
+  title = EXCLUDED.title,
+  slug = EXCLUDED.slug,
+  blocks = EXCLUDED.blocks,
+  status = EXCLUDED.status,
+  description = EXCLUDED.description,
+  "updatedAt" = EXCLUDED."updatedAt";
+
+-- =====================================================
+-- PATTERN USAGES SAMPLE DATA
+-- =====================================================
+
+-- Usage 1: Newsletter CTA used in Home page
+INSERT INTO public.pattern_usages (
+  id,
+  "patternId",
+  "entityType",
+  "entityId",
+  "teamId",
+  "createdAt"
+) VALUES (
+  '00000000-0000-4000-c000-000000000001',
+  '00000000-0000-4000-b000-000000000001',
+  'pages',
+  '00000000-0000-4000-a000-000000000001',
+  'team-nextspark-001',
+  NOW() - INTERVAL '5 days'
+) ON CONFLICT ("patternId", "entityType", "entityId") DO NOTHING;
+
+-- Usage 2: Newsletter CTA used in Features page
+INSERT INTO public.pattern_usages (
+  id,
+  "patternId",
+  "entityType",
+  "entityId",
+  "teamId",
+  "createdAt"
+) VALUES (
+  '00000000-0000-4000-c000-000000000002',
+  '00000000-0000-4000-b000-000000000001',
+  'pages',
+  '00000000-0000-4000-a000-000000000002',
+  'team-nextspark-001',
+  NOW() - INTERVAL '4 days'
+) ON CONFLICT ("patternId", "entityType", "entityId") DO NOTHING;
+
+-- Usage 3: Footer Links used in Home page
+INSERT INTO public.pattern_usages (
+  id,
+  "patternId",
+  "entityType",
+  "entityId",
+  "teamId",
+  "createdAt"
+) VALUES (
+  '00000000-0000-4000-c000-000000000003',
+  '00000000-0000-4000-b000-000000000002',
+  'pages',
+  '00000000-0000-4000-a000-000000000001',
+  'team-nextspark-001',
+  NOW() - INTERVAL '10 days'
+) ON CONFLICT ("patternId", "entityType", "entityId") DO NOTHING;
+
+-- Usage 4: Footer Links used in About page
+INSERT INTO public.pattern_usages (
+  id,
+  "patternId",
+  "entityType",
+  "entityId",
+  "teamId",
+  "createdAt"
+) VALUES (
+  '00000000-0000-4000-c000-000000000004',
+  '00000000-0000-4000-b000-000000000002',
+  'pages',
+  '00000000-0000-4000-a000-000000000004',
+  'team-nextspark-001',
+  NOW() - INTERVAL '8 days'
+) ON CONFLICT ("patternId", "entityType", "entityId") DO NOTHING;
+
+-- =====================================================
+-- VERIFICATION QUERIES (for manual testing)
+-- =====================================================
+-- SELECT id, title, status FROM patterns WHERE id::text LIKE '00000000-0000-4000-b000-%';
+-- Expected: 3 rows (newsletter, footer-links, hero-header)
+
+-- SELECT id, "patternId", "entityType", "entityId" FROM pattern_usages WHERE id::text LIKE '00000000-0000-4000-c000-%';
+-- Expected: 4 rows

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/theme-default",
-  "version": "0.1.0-beta.17",
+  "version": "0.1.0-beta.171",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
@@ -9,6 +9,8 @@
   ],
   "dependencies": {},
   "peerDependencies": {
+    "@nextsparkjs/core": "*",
+    "@nextsparkjs/testing": "*",
     "@tanstack/react-query": "^5.0.0",
     "lucide-react": "^0.539.0",
     "next": "^15.0.0",
@@ -16,8 +18,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
-    "zod": "^4.0.0",
-    "@nextsparkjs/core": "0.1.0-beta.17"
+    "zod": "^4.0.0"
   },
   "nextspark": {
     "type": "theme",

package/styles/globals.css

@@ -3,8 +3,38 @@
  *
  * Pure neutral grays using OKLCH color space.
  * Based on shadcn/ui default configuration.
+ *
+ * Ú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";
+
 /* =============================================
    DEFAULT THEME - LIGHT MODE
    ============================================= */
@@ -177,3 +207,15 @@
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
 }
+
+/* =============================================
+   BASE STYLES
+   ============================================= */
+* {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}

package/templates/(public)/page.tsx

@@ -69,7 +69,7 @@ function Home() {
                       <span className="text-sm font-medium">{t('auth.authenticated')}</span>
                     </div>
                     <p className="text-lg">
-                      {t('auth.welcomeBack', { email: user.email })}
+                      {t('auth.welcomeBack', { email: user.email || '' })}
                     </p>
                     <Link href="/dashboard">
                       <Button size="lg" className="gap-2">

package/tests/cypress/e2e/_utils/devtools/access.bdd.md

@@ -0,0 +1,262 @@
+---
+feature: DevTools Access Control
+priority: critical
+tags: [dev-area, access-control, security, roles]
+grepTags: [uat, feat-dev-area, smoke, regression]
+coverage: 7
+---
+
+# DevTools Access Control
+
+> Role-based access control tests for the /devtools area. Validates that Developer users can access all /devtools routes and /admin, while Superadmin and Member users are blocked.
+
+## @test ACCESS-001: Developer can access /devtools
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** developer, access, home
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access /devtools home page
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools
+Then I should be on /devtools home page
+And the home page container should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder a /devtools home page
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools
+Then deberia estar en /devtools home page
+And el contenedor de home page deberia estar visible
+```
+
+### Expected Results
+- Developer successfully accesses /devtools
+- Home page renders correctly
+- No access denied errors
+
+---
+
+## @test ACCESS-002: Developer can access /devtools/style
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** developer, access, style-gallery
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Style Gallery
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/style
+Then the URL should include /devtools/style
+And the style page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder a Style Gallery
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/style
+Then la URL deberia incluir /devtools/style
+And la pagina de estilos deberia estar visible
+```
+
+### Expected Results
+- Style Gallery page loads successfully
+- All component sections available
+
+---
+
+## @test ACCESS-003: Developer can access /devtools/tests
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** developer, access, test-cases
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Test Cases viewer
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/tests
+Then the URL should include /devtools/tests
+And the tests page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder al visor de Test Cases
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/tests
+Then la URL deberia incluir /devtools/tests
+And la pagina de tests deberia estar visible
+```
+
+### Expected Results
+- Test Cases viewer loads successfully
+- File tree or empty state visible
+
+---
+
+## @test ACCESS-004: Developer can access /devtools/config
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** developer, access, config
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Config Viewer
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/config
+Then the URL should include /devtools/config
+And the config page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder al Config Viewer
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/config
+Then la URL deberia incluir /devtools/config
+And la pagina de config deberia estar visible
+```
+
+### Expected Results
+- Config Viewer loads successfully
+- Theme and Entities tabs available
+
+---
+
+## @test ACCESS-005: Developer can access /admin (inherited)
+
+### Metadata
+- **Priority:** High
+- **Type:** Regression
+- **Tags:** developer, admin, inherited
+
+```gherkin:en
+Scenario: Developer can access Admin area
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /admin
+Then the URL should include /admin
+And the Admin container should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder al area Admin
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /admin
+Then la URL deberia incluir /admin
+And el contenedor de Admin deberia estar visible
+```
+
+### Expected Results
+- Developer inherits superadmin privileges for Admin
+- Admin control panel accessible
+- No access denied redirect
+
+---
+
+## @test ACCESS-006: Superadmin is BLOCKED from /devtools
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** superadmin, blocked, security
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Superadmin is redirected when attempting to access /devtools
+
+Given I am logged in as Superadmin (superadmin@nextspark.dev)
+When I attempt to visit /devtools
+Then I should be redirected to /dashboard
+And the URL should include error=access_denied
+```
+
+```gherkin:es
+Scenario: Superadmin es redirigido al intentar acceder a /devtools
+
+Given estoy logueado como Superadmin (superadmin@nextspark.dev)
+When intento visitar /devtools
+Then deberia ser redirigido a /dashboard
+And la URL deberia incluir error=access_denied
+```
+
+### Expected Results
+- Superadmin cannot access /devtools area
+- Redirect to dashboard with error parameter
+- Access control working correctly
+
+---
+
+## @test ACCESS-007: Member is BLOCKED from /devtools
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** member, blocked, security
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Member is redirected when attempting to access /devtools
+
+Given I am logged in as Member (emily.johnson@nextspark.dev)
+When I attempt to visit /devtools
+Then I should be redirected to /dashboard
+And the URL should include error=access_denied
+```
+
+```gherkin:es
+Scenario: Member es redirigido al intentar acceder a /devtools
+
+Given estoy logueado como Member (emily.johnson@nextspark.dev)
+When intento visitar /devtools
+Then deberia ser redirigido a /dashboard
+And la URL deberia incluir error=access_denied
+```
+
+### Expected Results
+- Member cannot access /devtools area
+- Redirect to dashboard with error parameter
+- Access control working correctly
+
+---
+
+## UI Elements
+
+| Element | Selector | Description |
+|---------|----------|-------------|
+| Home Page | `[data-cy="dev-home-page"]` | Dev area home page container |
+| Style Page | `[data-cy="dev-style-page"]` | Style Gallery page container |
+| Tests Page | `[data-cy="dev-tests-page"]` | Test Cases viewer container |
+| Config Page | `[data-cy="dev-config-page"]` | Config Viewer page container |
+| Admin Container | `[data-cy="admin-container"]` | Admin main container |
+
+---
+
+## Summary
+
+| Test ID | Block | Description | Tags |
+|---------|-------|-------------|------|
+| ACCESS-001 | Developer Access | Developer can access /devtools home | `@smoke` |
+| ACCESS-002 | Developer Access | Developer can access /devtools/style | `@smoke` |
+| ACCESS-003 | Developer Access | Developer can access /devtools/tests | `@smoke` |
+| ACCESS-004 | Developer Access | Developer can access /devtools/config | `@smoke` |
+| ACCESS-005 | Inherited Access | Developer can access /admin | |
+| ACCESS-006 | Blocked Access | Superadmin BLOCKED from /devtools | `@smoke` |
+| ACCESS-007 | Blocked Access | Member BLOCKED from /devtools | `@smoke` |