@nextsparkjs/core 0.1.0-beta.7 → 0.1.0-beta.71

package/templates/contents/themes/starter/tests/jest/setup.ts

@@ -0,0 +1,170 @@
+/**
+ * Jest Setup for Starter Theme
+ *
+ * This file provides complete Jest setup for npm mode.
+ * It includes all necessary polyfills and mocks.
+ */
+
+import '@testing-library/jest-dom'
+import { TextEncoder, TextDecoder } from 'util'
+
+// Polyfill TextEncoder/TextDecoder for jsdom
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as typeof global.TextDecoder
+
+// Polyfill Web APIs for Next.js server components testing
+class MockHeaders {
+  private _headers: Map<string, string> = new Map()
+
+  constructor(init?: HeadersInit) {
+    if (init) {
+      if (init instanceof MockHeaders) {
+        init._headers.forEach((value, key) => this._headers.set(key, value))
+      } else if (Array.isArray(init)) {
+        init.forEach(([key, value]) => this._headers.set(key.toLowerCase(), value))
+      } else {
+        Object.entries(init).forEach(([key, value]) => this._headers.set(key.toLowerCase(), value))
+      }
+    }
+  }
+
+  get(name: string) { return this._headers.get(name.toLowerCase()) || null }
+  set(name: string, value: string) { this._headers.set(name.toLowerCase(), value) }
+  has(name: string) { return this._headers.has(name.toLowerCase()) }
+  delete(name: string) { this._headers.delete(name.toLowerCase()) }
+  forEach(cb: (value: string, key: string) => void) { this._headers.forEach(cb) }
+  entries() { return this._headers.entries() }
+  keys() { return this._headers.keys() }
+  values() { return this._headers.values() }
+}
+
+class MockRequest {
+  url: string
+  method: string
+  headers: MockHeaders
+  private _body: any
+
+  constructor(input: string | URL, init?: RequestInit) {
+    this.url = typeof input === 'string' ? input : input.toString()
+    this.method = init?.method || 'GET'
+    this.headers = new MockHeaders(init?.headers as HeadersInit)
+    this._body = init?.body
+  }
+
+  async json() {
+    if (!this._body) return {}
+    return typeof this._body === 'string' ? JSON.parse(this._body) : this._body
+  }
+
+  async text() {
+    return this._body?.toString() || ''
+  }
+
+  clone() {
+    return new MockRequest(this.url, {
+      method: this.method,
+      headers: Object.fromEntries(this.headers.entries()),
+      body: this._body,
+    })
+  }
+}
+
+class MockResponse {
+  body: any
+  status: number
+  statusText: string
+  headers: MockHeaders
+  ok: boolean
+
+  constructor(body?: any, init?: ResponseInit) {
+    this.body = body
+    this.status = init?.status || 200
+    this.statusText = init?.statusText || 'OK'
+    this.headers = new MockHeaders(init?.headers as HeadersInit)
+    this.ok = this.status >= 200 && this.status < 300
+  }
+
+  async json() {
+    if (!this.body) return {}
+    return typeof this.body === 'string' ? JSON.parse(this.body) : this.body
+  }
+
+  async text() {
+    return this.body?.toString() || ''
+  }
+
+  clone() {
+    return new MockResponse(this.body, {
+      status: this.status,
+      statusText: this.statusText,
+      headers: Object.fromEntries(this.headers.entries()),
+    })
+  }
+
+  static json(data: any, init?: ResponseInit) {
+    return new MockResponse(JSON.stringify(data), {
+      ...init,
+      headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) as object },
+    })
+  }
+}
+
+// Assign to global scope
+global.Headers = MockHeaders as any
+global.Request = MockRequest as any
+global.Response = MockResponse as any
+
+// Mock fetch
+global.fetch = jest.fn().mockResolvedValue(new MockResponse('{}', { status: 200 }))
+
+// Mock Web Crypto API
+const crypto = require('crypto')
+Object.defineProperty(global, 'crypto', {
+  value: {
+    getRandomValues: (arr: Uint8Array) => crypto.randomFillSync(arr),
+    randomUUID: () => crypto.randomUUID(),
+    subtle: {
+      digest: async (algorithm: string, data: BufferSource) => {
+        const hash = crypto.createHash(algorithm.toLowerCase().replace('-', ''))
+        hash.update(Buffer.from(data as ArrayBuffer))
+        return hash.digest().buffer
+      },
+      encrypt: jest.fn(),
+      decrypt: jest.fn(),
+      sign: jest.fn(),
+      verify: jest.fn(),
+      generateKey: jest.fn(),
+      importKey: jest.fn(),
+      exportKey: jest.fn(),
+    },
+  },
+})
+
+// Mock matchMedia for component tests with media queries
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))
+
+// Mock IntersectionObserver
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))

package/templates/contents/themes/starter/tests/jest/tsconfig.jest.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  }
+}

package/templates/features/blog/blocks/post-content/component.tsx

@@ -79,7 +79,7 @@ export function PostContentBlock({
 
   // Build section classes with background
   const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
+    'py-16 px-4 @md:py-24',
     { backgroundColor, className }
   )
 
@@ -119,7 +119,7 @@ export function PostContentBlock({
         {/* Optional Section Title */}
         {title && (
           <div className={cn('mb-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
-            <h2 className="text-4xl font-bold md:text-5xl lg:text-6xl tracking-tight">
+            <h2 className="text-4xl font-bold @md:text-5xl @lg:text-6xl tracking-tight">
               {title}
             </h2>
           </div>

package/templates/features/blog/entities/posts/posts.config.ts

@@ -81,6 +81,7 @@ export const postsEntityConfig: EntityConfig = {
   // ==========================================
   builder: {
     enabled: true,
+    showSlug: true, // Slug is user-editable (public content)
     sidebarFields: ['excerpt', 'featuredImage'], // Extra fields shown in sidebar
     seo: true, // Enable SEO fields panel in editor
   },

package/templates/features/pages/blocks/hero/component.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { HeroBlockProps } from './schema'
+
+/**
+ * Hero Block Component
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content, cta
+ * - Design: backgroundColor, backgroundImage, textColor, alignment
+ * - Advanced: className, id
+ */
+export function HeroBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Hero-specific design
+  backgroundImage,
+  textColor = 'light',
+  alignment = 'center',
+  // Base advanced props
+  className,
+  id,
+  // Legacy props for backward compatibility
+  ...legacyProps
+}: HeroBlockProps & {
+  ctaText?: string
+  ctaLink?: string
+  subtitle?: string
+  description?: string
+}) {
+  // Handle legacy CTA format (ctaText, ctaLink) for backward compatibility
+  const ctaConfig = cta || (legacyProps.ctaText ? {
+    text: legacyProps.ctaText,
+    link: legacyProps.ctaLink || '#',
+    target: '_self' as const,
+  } : undefined)
+
+  // Handle legacy subtitle/description props for backward compatibility
+  const displayContent = content || legacyProps.subtitle || legacyProps.description
+
+  // Alignment classes mapping
+  const alignmentClasses = {
+    left: 'text-left items-start',
+    center: 'text-center items-center',
+    right: 'text-right items-end',
+  }
+
+  // Build section classes with background and custom className
+  const sectionClasses = buildSectionClasses(
+    cn(
+      'relative flex min-h-[600px] items-center justify-center overflow-hidden px-4 py-20',
+      textColor === 'light' ? 'text-white dark:text-white' : 'text-gray-900 dark:text-gray-100'
+    ),
+    { backgroundColor, className }
+  )
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.hero.container')}>
+      {/* Background Image */}
+      {backgroundImage && (
+        <div
+          className="absolute inset-0 z-0"
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <div className="absolute inset-0 bg-black/40 dark:bg-black/60" />
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={cn(
+        'container relative z-10 mx-auto max-w-4xl flex flex-col',
+        alignmentClasses[alignment]
+      )}>
+        {title && (
+          <h1 className="mb-6 text-5xl font-bold leading-tight @md:text-6xl @lg:text-7xl">
+            {title}
+          </h1>
+        )}
+
+        {displayContent && (
+          <p className="mb-8 text-xl @md:text-2xl opacity-90 max-w-2xl">
+            {displayContent}
+          </p>
+        )}
+
+        {ctaConfig && (
+          <Button asChild size="lg" className="text-lg px-8 py-6">
+            <a
+              href={ctaConfig.link}
+              target={ctaConfig.target}
+              rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
+              data-cy={sel('blocks.hero.cta')}
+            >
+              {ctaConfig.text}
+            </a>
+          </Button>
+        )}
+      </div>
+    </section>
+  )
+}

package/templates/features/pages/entities/pages/pages.config.ts

@@ -81,6 +81,7 @@ export const pagesEntityConfig: EntityConfig = {
   // ==========================================
   builder: {
     enabled: true,
+    showSlug: true, // Slug is user-editable (public content)
     sidebarFields: ['locale'], // Pages don't have extra sidebar fields beyond basic settings
     seo: true, // Enable SEO fields panel in editor
   },

package/templates/next.config.mjs

@@ -10,10 +10,23 @@ const withNextIntl = createNextIntlPlugin('./i18n.ts');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // Ignore TypeScript build errors - needed until DTS generation is enabled for @nextsparkjs/core
+  // Without this, production builds fail due to missing declaration files for deep imports
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   transpilePackages: ['@nextsparkjs/core'],
+  serverExternalPackages: ['handlebars'],
   experimental: {
     externalDir: true,
   },
+  // Include markdown files in Vercel deployment for dynamic file reads
+  // Required because fs.readFileSync() reads are not automatically traced
+  outputFileTracingIncludes: {
+    '/docs/**/*': ['./contents/**/docs/**/*'],
+    '/superadmin/docs/**/*': ['./contents/**/docs/**/*'],
+    '/devtools/tests/**/*': ['./contents/**/tests/**/*'],
+  },
   // Optimize imports from @nextsparkjs/core to reduce bundle size and improve tree-shaking
   modularizeImports: {
     '@nextsparkjs/core/components/ui': {
@@ -24,6 +37,9 @@ const nextConfig = {
     },
   },
   images: {
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     remotePatterns: [
       {
         protocol: 'https',
@@ -50,6 +66,16 @@ const nextConfig = {
         hostname: 'i.pravatar.cc',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: '*.supabase.co',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: '*.cloudinary.com',
+        pathname: '/**',
+      },
     ],
   },
   webpack: (config, { isServer }) => {
@@ -80,13 +106,117 @@ const nextConfig = {
     return config
   },
   async headers() {
+    const isProduction = process.env.NODE_ENV === 'production';
+
+    // Allowed image domains (must match remotePatterns above)
+    // NOTE: Wildcard patterns (*.public.blob.vercel-storage.com, *.supabase.co, *.cloudinary.com)
+    // allow images from any account on these services for development flexibility.
+    // For production with stricter security, consider restricting to specific account subdomains.
+    const allowedImageDomains = [
+      'https://lh3.googleusercontent.com',
+      'https://*.public.blob.vercel-storage.com',
+      'https://images.unsplash.com',
+      'https://upload.wikimedia.org',
+      'https://i.pravatar.cc',
+      'https://*.supabase.co',
+      'https://*.cloudinary.com',
+    ].join(' ');
+
+    // CSP directives
+    // Note: 'unsafe-inline' for styles is required by many UI libraries including shadcn/ui
+    // Note: 'unsafe-eval' is required by Next.js in development for hot reload
+    //
+    // SECURITY NOTE: 'unsafe-inline' for scripts
+    // ==========================================
+    // 'unsafe-inline' is required because:
+    // 1. Next.js injects inline scripts for hydration and routing
+    // 2. Many React patterns rely on inline event handlers
+    // 3. Implementing nonces requires middleware changes and affects all components
+    //
+    // To implement nonce-based CSP (stricter security):
+    // 1. Create middleware to generate nonce per request
+    // 2. Pass nonce to all Script components: <Script nonce={nonce} />
+    // 3. Update CSP: script-src 'self' 'nonce-${nonce}'
+    // See: https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
+    const cspDirectives = [
+      "default-src 'self'",
+      // unsafe-inline required for Next.js hydration; unsafe-eval only in dev for hot reload
+      `script-src 'self' 'unsafe-inline'${!isProduction ? " 'unsafe-eval'" : ''} https://js.stripe.com`,
+      "style-src 'self' 'unsafe-inline'",
+      `img-src 'self' data: blob: ${allowedImageDomains}`,
+      "font-src 'self' data:",
+      // wss: needed for Next.js hot reload in development
+      `connect-src 'self' https://api.stripe.com${!isProduction ? ' wss:' : ''}`,
+      "frame-src 'self' https://js.stripe.com https://hooks.stripe.com",
+      // Allow embedding in iframes from same origin (needed for page builder preview)
+      "frame-ancestors 'self'",
+      "object-src 'none'",
+      "base-uri 'self'",
+      // CSP violation reporting - sends violations to /api/csp-report
+      // report-uri is deprecated but has wider browser support
+      // report-to is the modern replacement (configured via Reporting-Endpoints header)
+      "report-uri /api/csp-report",
+      "report-to csp-endpoint",
+    ];
+
+    // Security headers for all routes
+    const securityHeaders = [
+      // Reporting API endpoint for modern browsers (used by report-to CSP directive)
+      {
+        key: 'Reporting-Endpoints',
+        value: 'csp-endpoint="/api/csp-report"'
+      },
+      {
+        key: 'X-Content-Type-Options',
+        value: 'nosniff'
+      },
+      {
+        // SAMEORIGIN allows same-origin iframes (needed for page builder preview)
+        key: 'X-Frame-Options',
+        value: 'SAMEORIGIN'
+      },
+      // X-XSS-Protection is deprecated but kept for legacy browser support
+      // Modern browsers use CSP instead
+      {
+        key: 'X-XSS-Protection',
+        value: '1; mode=block'
+      },
+      {
+        key: 'Referrer-Policy',
+        value: 'strict-origin-when-cross-origin'
+      },
+      {
+        key: 'Permissions-Policy',
+        value: 'camera=(), microphone=(), geolocation=()'
+      },
+      {
+        key: 'Content-Security-Policy',
+        value: cspDirectives.join('; ')
+      },
+    ];
+
+    // Add HSTS only in production
+    // Note: Only add 'preload' if you plan to submit to https://hstspreload.org
+    if (isProduction) {
+      securityHeaders.push({
+        key: 'Strict-Transport-Security',
+        value: 'max-age=31536000; includeSubDomains; preload'
+      });
+    }
+
     return [
+      // Security headers for all routes
+      {
+        source: '/:path*',
+        headers: securityHeaders
+      },
+      // CORS headers for API routes
       {
         source: '/api/:path*',
         headers: [
           {
             key: 'Access-Control-Allow-Origin',
-            value: 'http://localhost:3000'
+            value: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
           },
           {
             key: 'Access-Control-Allow-Methods',
@@ -94,7 +224,7 @@ const nextConfig = {
           },
           {
             key: 'Access-Control-Allow-Headers',
-            value: 'Content-Type, Authorization, x-verify-from-ui, Cookie, Set-Cookie'
+            value: 'Content-Type, Authorization, x-api-key, x-verify-from-ui, Cookie, Set-Cookie'
           },
           {
             key: 'Access-Control-Allow-Credentials',

package/templates/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+# pnpm workspace configuration
+# Enables plugins and themes to have their own package.json with dependencies
+packages:
+  - 'contents/themes/*'
+  - 'contents/plugins/*'