@digilogiclabs/create-saas-app 2.5.0 → 2.6.0

package/dist/templates/shared/quality/web/src/__tests__/accessibility.test.tsx

@@ -0,0 +1,140 @@
+/**
+ * Accessibility Test Suite
+ *
+ * Uses axe-core to automatically scan pages for WCAG 2.2 AA violations.
+ * Run: npm test -- accessibility
+ *
+ * Setup: npm i -D @axe-core/react axe-core vitest
+ *
+ * Generated by @digilogiclabs/create-saas-app
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+// Dynamically import axe-core to avoid build errors if not installed
+async function checkAccessibility(container: HTMLElement) {
+  try {
+    const axe = await import('axe-core');
+    const results = await axe.default.run(container);
+    return results;
+  } catch {
+    // axe-core not installed — skip gracefully
+    return null;
+  }
+}
+
+describe('Accessibility', () => {
+  it('should have no critical accessibility violations on a basic page', async () => {
+    const { container } = render(
+      <main>
+        <h1>Test Page</h1>
+        <nav aria-label="Main navigation">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+        </nav>
+        <section aria-label="Content">
+          <p>Test content</p>
+          <button type="button">Action</button>
+        </section>
+      </main>
+    );
+
+    const results = await checkAccessibility(container);
+
+    if (results) {
+      // Filter to only critical and serious violations
+      const critical = results.violations.filter(
+        (v) => v.impact === 'critical' || v.impact === 'serious'
+      );
+
+      if (critical.length > 0) {
+        const summary = critical
+          .map((v) => `[${v.impact}] ${v.id}: ${v.description}`)
+          .join('\n');
+        expect(critical, `Accessibility violations found:\n${summary}`).toHaveLength(0);
+      }
+    } else {
+      // axe-core not installed — test passes with a warning
+      console.warn(
+        'axe-core not installed. Run: npm i -D axe-core\n' +
+        'Accessibility testing will be enabled once installed.'
+      );
+    }
+  });
+
+  it('should have proper heading hierarchy', () => {
+    const { container } = render(
+      <main>
+        <h1>Page Title</h1>
+        <section>
+          <h2>Section</h2>
+          <h3>Subsection</h3>
+        </section>
+      </main>
+    );
+
+    const headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    const levels = Array.from(headings).map((h) =>
+      parseInt(h.tagName.replace('H', ''))
+    );
+
+    // Verify no heading level is skipped (e.g., h1 -> h3 without h2)
+    for (let i = 1; i < levels.length; i++) {
+      const jump = levels[i]! - levels[i - 1]!;
+      expect(
+        jump,
+        `Heading level jumped from h${levels[i - 1]} to h${levels[i]}`
+      ).toBeLessThanOrEqual(1);
+    }
+  });
+
+  it('should have accessible form labels', () => {
+    const { container } = render(
+      <form>
+        <label htmlFor="email">Email</label>
+        <input id="email" type="email" aria-required="true" />
+        <label htmlFor="password">Password</label>
+        <input id="password" type="password" aria-required="true" />
+        <button type="submit">Submit</button>
+      </form>
+    );
+
+    const inputs = container.querySelectorAll('input');
+    inputs.forEach((input) => {
+      const id = input.getAttribute('id');
+      if (id) {
+        const label = container.querySelector(`label[for="${id}"]`);
+        expect(
+          label,
+          `Input #${id} is missing a label`
+        ).not.toBeNull();
+      }
+    });
+  });
+
+  it('should have sufficient touch targets (44px minimum)', () => {
+    const { container } = render(
+      <div>
+        <button style={{ minHeight: '44px', minWidth: '44px' }}>
+          Click me
+        </button>
+        <a href="/" style={{ display: 'inline-block', minHeight: '44px', padding: '12px' }}>
+          Link
+        </a>
+      </div>
+    );
+
+    const buttons = container.querySelectorAll('button');
+    buttons.forEach((button) => {
+      const style = window.getComputedStyle(button);
+      const height = parseFloat(style.minHeight) || button.offsetHeight;
+      // Only check if explicit minHeight is set
+      if (style.minHeight && style.minHeight !== 'auto') {
+        expect(
+          height,
+          `Button "${button.textContent}" has touch target ${height}px (minimum 44px)`
+        ).toBeGreaterThanOrEqual(44);
+      }
+    });
+  });
+});

package/dist/templates/shared/security/web/lib/api-security.ts

@@ -1,17 +1,30 @@
 /**
  * Shared API security utilities.
  *
- * Built on platform-core/auth building blocks — no local reimplementations.
- * Uses constantTimeEqual, classifyError, rate limiting, and audit from the package.
+ * Built on platform-core's createSecureHandlerFactory — apps configure auth,
+ * rate limiting, and error handling once, then use composable wrappers per route.
  *
- * Two usage patterns:
- *   1. Wrappers: withPublicApi / withAuthenticatedApi / withAdminApi (recommended)
- *   2. Primitives: enforceRateLimit, isAdminRequest, errorResponse (manual composition)
+ * Usage:
+ *   // Authenticated route
+ *   export const POST = withAuthenticatedApi({
+ *     rateLimit: 'authMutation',
+ *     validate: CreateItemSchema,
+ *   }, async (request, { session, validated }) => {
+ *     return Response.json({ created: true })
+ *   })
+ *
+ *   // Public route (manual composition)
+ *   export async function GET(request: NextRequest) {
+ *     const rl = await enforceRateLimit(request, 'list', AppRateLimits.publicRead)
+ *     if (rl) return rl
+ *     return NextResponse.json({ items: [] })
+ *   }
  */
 import 'server-only';
 import { NextRequest, NextResponse } from 'next/server';
-import { randomUUID } from 'crypto';
 import {
+  // Factory for composable wrappers
+  createSecureHandlerFactory,
   // Security primitives
   constantTimeEqual,
   // Rate limiting
@@ -33,18 +46,12 @@ export { escapeHtml } from '@digilogiclabs/platform-core/auth';
 export { errorResponse, zodErrorResponse };
 
 // ---------------------------------------------------------------------------
-// Request ID / Correlation ID
+// Rate limiting — Redis-backed with in-memory fallback
 // ---------------------------------------------------------------------------
 
-/** Generate or extract a request ID for correlation. */
-export function getRequestId(request: NextRequest): string {
-  return request.headers.get('x-request-id') || randomUUID();
-}
-
 /**
- * Rate-limit a request using Redis-backed store (if REDIS_URL is set)
- * or in-memory fallback. Wraps platform-core's enforceRateLimit to
- * automatically inject the store.
+ * Rate-limit a request. Wraps platform-core's enforceRateLimit to
+ * automatically inject the Redis store.
  */
 export async function enforceRateLimit(
   request: { headers: { get(name: string): string | null } },
@@ -65,254 +72,80 @@ export async function enforceRateLimit(
 }
 
 // ---------------------------------------------------------------------------
-// Admin / Cron auth helpers
+// Rate limit presets — tune for your app's traffic patterns
 // ---------------------------------------------------------------------------
 
-/** Extract bearer token from Authorization header. */
-function extractBearerToken(request: NextRequest): string | null {
-  const header = request.headers.get('authorization');
-  if (!header?.startsWith('Bearer ')) return null;
-  return header.slice(7);
-}
-
-/** Check if request has a valid admin bearer token (ADMIN_SECRET). Timing-safe. */
-export function isAdminRequest(request: NextRequest): boolean {
-  const secret = config.adminSecret;
-  if (!secret) return false;
-  const token = extractBearerToken(request);
-  if (!token) return false;
-  return constantTimeEqual(token, secret);
-}
-
-/** Check if request has a valid cron bearer token (CRON_SECRET). Timing-safe. */
-export function isCronRequest(request: NextRequest): boolean {
-  const secret = config.cronSecret;
-  if (!secret) return false;
-  const token = extractBearerToken(request);
-  if (!token) return false;
-  return constantTimeEqual(token, secret);
-}
-
-// ---------------------------------------------------------------------------
-// Rate limiting presets — tune for your app's traffic patterns
-// ---------------------------------------------------------------------------
-
-/** App-specific rate limit presets. Extend or override as needed. */
 export const AppRateLimits = {
-  /** Public read endpoints */
   publicRead: { limit: 60, windowSeconds: 60 } satisfies RateLimitRule,
-  /** Authenticated mutations */
   authMutation: { limit: 30, windowSeconds: 60 } satisfies RateLimitRule,
-  /** Admin endpoints */
   admin: CommonRateLimits.adminAction,
-  /** Beta code validation */
   betaValidation: CommonRateLimits.betaValidation,
-  /** Webhook endpoints (generous — Stripe retries) */
   webhook: { limit: 100, windowSeconds: 60 } satisfies RateLimitRule,
 } as const;
 
+type AppRateLimitPreset = keyof typeof AppRateLimits;
+
 // ---------------------------------------------------------------------------
-// API Wrapper Types
+// Rate limit enforcer for the factory
 // ---------------------------------------------------------------------------
 
-interface ApiWrapperConfig {
-  /** Rate limit rule (defaults to preset based on wrapper type) */
-  rateLimit?: RateLimitRule;
-  /** Operation name for rate limiting and logging */
-  operation?: string;
-}
-
-interface AuthenticatedApiContext {
-  /** The authenticated session */
-  session: { user: { id: string; email: string; roles?: string[] } };
-  /** Request correlation ID */
-  requestId: string;
-}
-
-interface PublicApiContext {
-  /** Request correlation ID */
-  requestId: string;
+async function enforcePreset(
+  request: Request,
+  operation: string,
+  preset: AppRateLimitPreset,
+  userId?: string,
+): Promise<Response | null> {
+  const rule = AppRateLimits[preset];
+  return enforceRateLimit(request, operation, rule, userId ? { userId } : undefined);
 }
 
-type PublicApiHandler = (request: NextRequest, context: PublicApiContext) => Promise<NextResponse>;
-
-type AuthenticatedApiHandler = (
-  request: NextRequest,
-  context: AuthenticatedApiContext
-) => Promise<NextResponse>;
-
-type AdminApiHandler = (request: NextRequest, context: PublicApiContext) => Promise<NextResponse>;
-
-type CronApiHandler = (request: NextRequest, context: PublicApiContext) => Promise<NextResponse>;
-
 // ---------------------------------------------------------------------------
-// API Wrappers — compose auth, rate limiting, error handling automatically
+// Composable API security wrappers (via platform-core factory)
 // ---------------------------------------------------------------------------
 
-/**
- * Wrap a public API route with rate limiting and error handling.
- * No authentication required.
- *
- * @example
- * export const GET = withPublicApi({ operation: 'list-items' }, async (req, ctx) => {
- *   return NextResponse.json({ items: [] });
- * });
- */
-export function withPublicApi(
-  handlerConfig: ApiWrapperConfig,
-  handler: PublicApiHandler
-): (request: NextRequest) => Promise<NextResponse> {
-  return async (request: NextRequest) => {
-    const requestId = getRequestId(request);
-    const operation = handlerConfig.operation || 'public';
-
-    try {
-      // Rate limiting
-      const rateLimited = await enforceRateLimit(
-        request,
-        operation,
-        handlerConfig.rateLimit || AppRateLimits.publicRead
-      );
-      if (rateLimited) return rateLimited as NextResponse;
-
-      const response = await handler(request, { requestId });
-      response.headers.set('x-request-id', requestId);
-      return response;
-    } catch (error) {
-      const { status, body } = classifyError(error, process.env.NODE_ENV === 'development');
-      return NextResponse.json({ ...body, requestId }, { status });
-    }
-  };
-}
-
-/**
- * Wrap an authenticated API route with session validation, rate limiting, and error handling.
- * Requires a valid Auth.js session.
- *
- * @example
- * export const POST = withAuthenticatedApi({ operation: 'create-item' }, async (req, ctx) => {
- *   const { session, requestId } = ctx;
- *   return NextResponse.json({ userId: session.user.id });
- * });
- */
-export function withAuthenticatedApi(
-  handlerConfig: ApiWrapperConfig,
-  handler: AuthenticatedApiHandler
-): (request: NextRequest) => Promise<NextResponse> {
-  return async (request: NextRequest) => {
-    const requestId = getRequestId(request);
-    const operation = handlerConfig.operation || 'authenticated';
-
-    try {
-      // Dynamic import to avoid Edge runtime issues
-      const { auth } = await import('@/auth');
-      const session = await auth();
-
-      if (!session?.user?.id) {
-        return NextResponse.json({ error: 'Unauthorized', requestId }, { status: 401 });
-      }
-
-      // Rate limiting (per-user)
-      const rateLimited = await enforceRateLimit(
-        request,
-        operation,
-        handlerConfig.rateLimit || AppRateLimits.authMutation,
-        { userId: session.user.id }
-      );
-      if (rateLimited) return rateLimited as NextResponse;
-
-      const response = await handler(request, {
-        session: session as AuthenticatedApiContext['session'],
-        requestId,
-      });
-      response.headers.set('x-request-id', requestId);
-      return response;
-    } catch (error) {
-      const { status, body } = classifyError(error, process.env.NODE_ENV === 'development');
-      return NextResponse.json({ ...body, requestId }, { status });
-    }
-  };
-}
-
-/**
- * Wrap an admin API route with Bearer token auth, rate limiting, and error handling.
- * Requires ADMIN_SECRET Bearer token.
- *
- * @example
- * export const POST = withAdminApi({ operation: 'admin-action' }, async (req, ctx) => {
- *   return NextResponse.json({ success: true });
- * });
- */
-export function withAdminApi(
-  handlerConfig: ApiWrapperConfig,
-  handler: AdminApiHandler
-): (request: NextRequest) => Promise<NextResponse> {
-  return async (request: NextRequest) => {
-    const requestId = getRequestId(request);
-    const operation = handlerConfig.operation || 'admin';
-
-    try {
-      if (!isAdminRequest(request)) {
-        return NextResponse.json({ error: 'Forbidden', requestId }, { status: 403 });
-      }
+export const {
+  withPublicApi,
+  withAuthenticatedApi,
+  withAdminApi,
+  withLegacyAdminApi,
+  createSecureHandler,
+} = createSecureHandlerFactory<
+  { user?: { id?: string; email?: string | null; name?: string | null; roles?: string[] } },
+  AppRateLimitPreset
+>({
+  getSession: async () => {
+    const { auth } = await import('@/auth');
+    return auth();
+  },
+  isAdmin: (session) => session?.user?.roles?.includes('admin') ?? false,
+  rateLimiter: {
+    enforce: enforcePreset,
+    publicDefault: 'publicRead',
+    authDefault: 'authMutation',
+    adminDefault: 'admin',
+  },
+  adminSecret: config.adminSecret,
+  classifyError: (error, isDev) => classifyError(error, isDev),
+});
 
-      // Rate limiting
-      const rateLimited = await enforceRateLimit(
-        request,
-        operation,
-        handlerConfig.rateLimit || AppRateLimits.admin
-      );
-      if (rateLimited) return rateLimited as NextResponse;
+// ---------------------------------------------------------------------------
+// Legacy helpers — for routes that need manual composition
+// ---------------------------------------------------------------------------
 
-      const response = await handler(request, { requestId });
-      response.headers.set('x-request-id', requestId);
-      return response;
-    } catch (error) {
-      const { status, body } = classifyError(error, process.env.NODE_ENV === 'development');
-      return NextResponse.json({ ...body, requestId }, { status });
-    }
-  };
+/** Check if request has a valid admin bearer token. Timing-safe. */
+export function isAdminRequest(request: NextRequest): boolean {
+  const secret = config.adminSecret;
+  if (!secret) return false;
+  const header = request.headers.get('authorization');
+  if (!header?.startsWith('Bearer ')) return false;
+  return constantTimeEqual(header.slice(7), secret);
 }
 
-/**
- * Wrap a cron/scheduled API route with CRON_SECRET Bearer token auth,
- * falling back to admin session check. Uses generous rate limits since
- * cron jobs are server-to-server.
- *
- * @example
- * export const POST = withCronApi({ operation: 'daily-digest' }, async (req, ctx) => {
- *   // Run scheduled task...
- *   return NextResponse.json({ processed: 42 });
- * });
- */
-export function withCronApi(
-  handlerConfig: ApiWrapperConfig,
-  handler: CronApiHandler
-): (request: NextRequest) => Promise<NextResponse> {
-  return async (request: NextRequest) => {
-    const requestId = getRequestId(request);
-    const operation = handlerConfig.operation || 'cron';
-
-    try {
-      // Accept CRON_SECRET Bearer token or fall back to ADMIN_SECRET
-      if (!isCronRequest(request) && !isAdminRequest(request)) {
-        return NextResponse.json({ error: 'Forbidden', requestId }, { status: 403 });
-      }
-
-      // Rate limiting (generous — cron jobs are server-to-server)
-      const rateLimited = await enforceRateLimit(
-        request,
-        operation,
-        handlerConfig.rateLimit || AppRateLimits.webhook
-      );
-      if (rateLimited) return rateLimited as NextResponse;
-
-      const response = await handler(request, { requestId });
-      response.headers.set('x-request-id', requestId);
-      return response;
-    } catch (error) {
-      const { status, body } = classifyError(error, process.env.NODE_ENV === 'development');
-      return NextResponse.json({ ...body, requestId }, { status });
-    }
-  };
+/** Check if request has a valid cron bearer token. Timing-safe. */
+export function isCronRequest(request: NextRequest): boolean {
+  const secret = config.cronSecret;
+  if (!secret) return false;
+  const header = request.headers.get('authorization');
+  if (!header?.startsWith('Bearer ')) return false;
+  return constantTimeEqual(header.slice(7), secret);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digilogiclabs/create-saas-app",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Create modern SaaS applications with DLL Platform - tier-aware scaffolding with platform-core and app-sdk",
   "main": "dist/cli/index.js",
   "bin": {
@@ -69,7 +69,7 @@
     "ora": "^5.4.1",
     "semver": "^7.5.4",
     "validate-npm-package-name": "^5.0.0",
-    "zod": "^3.22.4"
+    "zod": "^4.1.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",

package/src/templates/shared/design/web/src/config/design.config.ts

@@ -0,0 +1,51 @@
+/**
+ * Design System Configuration
+ *
+ * Central design config for {{projectName}}.
+ * Values here drive the CSS custom properties in globals.css.
+ * Override tokens per-app — never hardcode colors/spacing in components.
+ *
+ * Generated by @digilogiclabs/create-saas-app
+ */
+
+export const designConfig = {
+  /** App theme preset */
+  theme: "{{theme}}" as const,
+
+  /** Primary accent color */
+  accent: "{{themeColor}}" as const,
+
+  /** Default color mode */
+  defaultMode: "{{defaultTheme}}" as const,
+
+  /** Content density */
+  density: "comfortable" as const,
+
+  /** Border radius scale */
+  radius: "lg" as const,
+
+  /** Motion preference */
+  motion: "{{motion}}" as const,
+
+  /** Landing page style */
+  landingStyle: "{{landingStyle}}" as const,
+
+  /** Layout archetype */
+  layout: "dashboard" as const,
+} as const;
+
+/**
+ * Color presets mapped to CSS custom property values.
+ * Used by ThemeProvider to set --color-accent at runtime.
+ */
+export const accentColors = {
+  blue: { light: "#3b82f6", dark: "#60a5fa" },
+  green: { light: "#10b981", dark: "#34d399" },
+  purple: { light: "#8b5cf6", dark: "#a78bfa" },
+  orange: { light: "#f97316", dark: "#fb923c" },
+  red: { light: "#ef4444", dark: "#f87171" },
+  slate: { light: "#475569", dark: "#94a3b8" },
+} as const;
+
+export type AccentColor = keyof typeof accentColors;
+export type DesignConfig = typeof designConfig;

package/src/templates/shared/landing/web/src/components/LandingPage.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import {
+  PageShell,
+  PageHeader,
+  SectionBlock,
+  FeatureGrid,
+  CTACluster,
+  Hero,
+  Button,
+} from '@digilogiclabs/saas-factory-ui'
+import { Zap, Shield, Rocket, BarChart3 } from 'lucide-react'
+import Link from 'next/link'
+
+/**
+ * LandingPage — Design-system-aligned landing page component.
+ *
+ * Uses PageShell, FeatureGrid, CTACluster, and SectionBlock from
+ * @digilogiclabs/saas-factory-ui for consistent structure.
+ *
+ * Generated by @digilogiclabs/create-saas-app
+ */
+export function LandingPage() {
+  return (
+    <PageShell maxWidth="xl" padding="none">
+      {/* Hero Section */}
+      <Hero
+        title="Build Your SaaS, Faster"
+        subtitle="Everything you need to launch — authentication, payments, and a beautiful UI. All in one platform."
+        variant="centered"
+        size="lg"
+        primaryAction={{
+          text: "Get Started",
+          onClick: () => (window.location.href = '/signup'),
+        }}
+        secondaryAction={{
+          text: "View Pricing",
+          onClick: () => {
+            document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })
+          },
+          variant: "outline",
+        }}
+        className="py-20 px-4"
+      />
+
+      {/* Features Section */}
+      <SectionBlock spacing="lg">
+        <FeatureGrid
+          title="Why Choose Us"
+          description="Built on battle-tested infrastructure with modern design patterns."
+          columns={4}
+          variant="cards"
+          features={[
+            {
+              icon: <Zap className="w-5 h-5" />,
+              title: "Lightning Fast",
+              description: "Optimized for Core Web Vitals with server-first rendering and smart caching.",
+            },
+            {
+              icon: <Shield className="w-5 h-5" />,
+              title: "Enterprise Security",
+              description: "Self-hosted auth via Keycloak, rate limiting, CSRF protection, and audit logging.",
+            },
+            {
+              icon: <Rocket className="w-5 h-5" />,
+              title: "Ship in Days",
+              description: "Pre-built auth flows, payment integration, and a complete component library.",
+            },
+            {
+              icon: <BarChart3 className="w-5 h-5" />,
+              title: "Full Observability",
+              description: "Health checks, structured logging, metrics, and distributed tracing out of the box.",
+            },
+          ]}
+        />
+      </SectionBlock>
+
+      {/* CTA Section */}
+      <SectionBlock spacing="lg">
+        <div className="text-center py-16 px-4 rounded-2xl bg-gradient-to-br from-primary/5 to-accent/5">
+          <h2 className="text-2xl sm:text-3xl font-bold mb-4">
+            Ready to launch?
+          </h2>
+          <p className="text-muted-foreground mb-8 max-w-lg mx-auto">
+            Start building today with a complete SaaS foundation. No vendor lock-in.
+          </p>
+          <CTACluster
+            align="center"
+            size="lg"
+            primary={{ text: "Start Free Trial", href: "/signup" }}
+            secondary={{ text: "View Documentation", href: "/docs", variant: "outline" }}
+          />
+        </div>
+      </SectionBlock>
+    </PageShell>
+  )
+}