@donotdev/cli 0.0.3

package/templates/app-demo/src/themes.css.example

@@ -0,0 +1,179 @@
+/* apps/demo/src/themes.css */
+
+/* ===========================
+   APP-WIDE SETTINGS
+   These apply to all themes - spacing, radius, shadows, routing animations
+   =========================== */
+:root {
+  /* ===========================
+     ROUTING ANIMATIONS
+     Customize page transition animations
+     Pure CSS - zero JS overhead. Respects prefers-reduced-motion.
+     Override in themes.css: --routing-animation: slide; to change animation type
+     =========================== */
+  /* Single animation type (fade, slide, or none to disable) - app-wide */
+  /* --routing-animation: fade; */  /* fade | slide | none */
+  /* --routing-default-duration: var(--dur-normal); */  /* Animation duration */
+
+  /* Breakpoint-specific durations (all inherit from --routing-default-duration) */
+  /* --routing-mobile-duration: var(--routing-default-duration); */
+  /* --routing-tablet-duration: var(--routing-default-duration); */
+  /* --routing-desktop-duration: var(--routing-default-duration); */
+  /* --routing-wide-duration: var(--routing-default-duration); */
+  
+  /* Examples: */
+  /* --routing-animation: slide; */  /* Use slide animation */
+  /* --routing-animation: none; */  /* Disable animations */
+  /* --routing-default-duration: 200ms; */  /* Faster animations */
+
+  /* ===========================
+     SPACING OVERRIDES
+     Customize spacing scale
+     =========================== */
+  /* --gap-sm: 0.5rem; */        /* 8px - tight spacing */
+  /* --gap-md: 1rem; */          /* 16px - medium spacing (default) */
+  /* --gap-lg: 2rem; */          /* 32px - large spacing */
+
+  /* ===========================
+     BORDER RADIUS OVERRIDES
+     Customize component corners
+     =========================== */
+  /* --radius-interactive: var(--radius-none); */ /* Buttons, links (default: square) */
+  /* --radius-surface: var(--radius-md); */ /* Cards, dialogs (default: 8px round) */
+  /* --radius-floating: var(--radius-none); */ /* Dropdowns, popovers (default: square) */
+
+  /* ===========================
+     SHADOW OVERRIDES
+     Customize elevation
+     =========================== */
+  /* --shadow-sm: ...; */        /* Small shadows */
+  /* --shadow-md: ...; */        /* Medium shadows (default) */
+  /* --shadow-xl: ...; */        /* Large shadows */
+}
+
+/* ===========================
+   LIGHT THEME (High Contrast Light)
+   Background: White
+   Foreground: Black
+   =========================== */
+:root.light {
+   --theme-icon: 'Sun';
+   --theme-label: 'Light';
+   --theme-is-dark: 0;
+
+   /* ===========================
+         1. USER SETS - 5 BRAND COLORS
+         =========================== */
+   --foreground: #000000;
+   --background: #ffffff;
+  --primary: #00bcd4; /* Cyan */
+  --secondary: #10b981; /* Green */
+  --accent: #ff9800; /* Orange */
+
+   /* ===========================
+         2. FRAMEWORK DEFAULTS - STATUS COLORS
+         (Override if needed)
+         =========================== */
+   --success: #10b981;
+   --warning: #f59e0b;
+   --destructive: #dc2626;
+
+   /* ===========================
+         3. AUTO-COMPUTED - SURFACES
+         (Plain sight computation for easy overriding)
+         =========================== */
+   --muted: color-mix(in oklab, var(--foreground) 5%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
+   --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
+   --input: var(--muted);
+   --ring: var(--primary);
+
+   --card: var(--background);
+   --card-foreground: var(--foreground);
+   --popover: var(--card);
+   --popover-foreground: var(--card-foreground);
+  --surface-1: var(--card);
+
+   /* ===========================
+         4. AUTO-COMPUTED - TEXT ON BRAND COLORS
+         (Mapped to foreground/background for consistency)
+         =========================== */
+  --primary-foreground: var(--foreground);
+   --secondary-foreground: var(--background);
+  --accent-foreground: var(--foreground);
+
+  --success-foreground: var(--background);
+  --warning-foreground: var(--foreground);
+  --destructive-foreground: var(--background);
+}
+
+/* ===========================
+       DARK THEME (High Contrast Dark)
+       Background: Black
+       Foreground: White
+       =========================== */
+:root.dark {
+   --theme-icon: 'Moon';
+   --theme-label: 'Dark';
+   --theme-is-dark: 1;
+
+   /* ===========================
+         1. USER SETS - 5 BRAND COLORS
+         =========================== */
+   --foreground: #ffffff;
+   --background: #000000;
+  --primary: #00bcd4; /* Cyan */
+  --secondary: #10b981; /* Green */
+  --accent: #ff9800; /* Orange */
+
+   /* ===========================
+         2. FRAMEWORK DEFAULTS - STATUS COLORS
+         =========================== */
+   --success: #10b981;
+   --warning: #f59e0b;
+  --destructive: #ef4444;
+
+   /* ===========================
+         3. AUTO-COMPUTED - SURFACES
+         =========================== */
+  --muted: color-mix(in oklab, var(--foreground) 10%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
+   --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
+   --input: var(--muted);
+   --ring: var(--primary);
+
+   --card: var(--background);
+   --card-foreground: var(--foreground);
+   --popover: var(--card);
+   --popover-foreground: var(--card-foreground);
+  --surface-1: var(--card);
+
+   /* ===========================
+         4. AUTO-COMPUTED - TEXT ON BRAND COLORS
+         =========================== */
+  --primary-foreground: var(--background);
+   --secondary-foreground: var(--foreground);
+  --accent-foreground: var(--background);
+
+  --success-foreground: var(--foreground);
+  --warning-foreground: var(--background);
+  --destructive-foreground: var(--foreground);
+}
+
+   /* ===========================
+   CUSTOM THEMES
+      =========================== */
+
+/* Add your custom themes here */
+/* Example:
+.brand {
+  --theme-icon: 'Zap';
+  --theme-label: 'Brand';
+  --background: #your-brand-background;
+  --foreground: #your-brand-foreground;
+  --primary: #your-brand-primary;
+  --secondary: #your-brand-secondary;
+  --accent: #your-brand-accent;
+  ... other variables ...
+}
+*/

package/templates/app-demo/tsconfig.json.example

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*", "vite.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/app-demo/vite.config.ts.example

@@ -0,0 +1,53 @@
+// apps/demo/vite.config.ts
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import autoprefixer from 'autoprefixer';
+// @ts-expect-error - postcss-import doesn't have type definitions
+import postcssImport from 'postcss-import';
+import postcssNesting from 'postcss-nesting';
+import { resolve as pathResolve } from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'automatic',
+    }),
+    tsconfigPaths({
+      ignoreConfigErrors: true,
+    }),
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postcssImport({
+          resolve: (id: string, basedir: string) => {
+            // Handle package imports like '@donotdev/components/styles'
+            if (!id.startsWith('.')) {
+              try {
+                return require.resolve(id, { paths: [basedir] });
+              } catch {
+                // Fallback to relative resolution
+                return pathResolve(basedir, id);
+              }
+            }
+            // Relative imports
+            return pathResolve(basedir, id);
+          },
+        }),
+        postcssNesting,
+        autoprefixer,
+      ],
+    },
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom', 'react/jsx-runtime'],
+  },
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+    preserveSymlinks: false,
+  },
+});

package/templates/app-next/.env.example

@@ -0,0 +1,92 @@
+# Next.js Environment Variables (NEXT_PUBLIC_ prefix required for client-side)
+#
+# =============================================================================
+# ENVIRONMENT FILE STRUCTURE
+# =============================================================================
+# Next.js loads .env files in this priority order (higher overrides lower):
+#   1. .env.production.local (highest priority, gitignored, production only)
+#   2. .env.production (mode-specific, production only)
+#   3. .env.local (always loaded, gitignored, local overrides)
+#   4. .env (base file, lowest priority, committed to git)
+#
+# RECOMMENDED SETUP:
+#   - .env (this file) → Base/default values (committed to git)
+#   - .env.local → Local development overrides (gitignored)
+#   - .env.production.local → Production overrides (gitignored)
+#
+# Copy this file to .env and update with your values
+# For local dev: copy to .env.local and override as needed
+# For production: copy to .env.production.local with production values
+
+# =============================================================================
+# App Configuration
+# =============================================================================
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+# =============================================================================
+# DoNotDev License Key
+# =============================================================================
+# Get your license key from: https://donotdev.com/pricing
+# Removes watermark and enables all features
+# Can be the same key as in root .env if sharing across apps
+NEXT_PUBLIC_DONOTDEV_LICENSE_KEY=dndev_your_key_here
+
+# =============================================================================
+# Authentication & OAuth Providers
+# =============================================================================
+# Comma-separated list of enabled auth providers
+# Available: github (required for framework), google, facebook, discord, twitter, microsoft, spotify, linkedin, reddit, twitch, yahoo, apple
+# Uncomment when Firebase is configured (requires NEXT_PUBLIC_FIREBASE_API_KEY and NEXT_PUBLIC_FIREBASE_PROJECT_ID)
+# NEXT_PUBLIC_AUTH_PARTNERS=google,github
+
+# Comma-separated list of enabled OAuth partners for API access
+# Available: google, github, facebook, discord, twitter, microsoft, spotify, linkedin, reddit, twitch, yahoo, apple
+# NEXT_PUBLIC_OAUTH_PARTNERS=google,spotify
+
+# Individual OAuth client IDs (only needed for OAuth partners)
+# NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
+# NEXT_PUBLIC_GITHUB_CLIENT_ID=your_github_client_id
+# NEXT_PUBLIC_SPOTIFY_CLIENT_ID=your_spotify_client_id
+
+# =============================================================================
+# Firebase Configuration
+# =============================================================================
+# Get these values from your Firebase project settings
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
+NEXT_PUBLIC_FIREBASE_FUNCTIONS_REGION=
+
+# =============================================================================
+# Firebase Emulator (Development only)
+# =============================================================================
+# Set to true to use Firebase emulators instead of production services
+NEXT_PUBLIC_USE_FIREBASE_EMULATOR=false
+NEXT_PUBLIC_FIREBASE_EMULATOR_HOST=localhost
+NEXT_PUBLIC_FIREBASE_EMULATOR_PORT=9099
+NEXT_PUBLIC_FIREBASE_AUTH_EMULATOR_HOST=http://localhost:9099
+NEXT_PUBLIC_FIREBASE_FIRESTORE_EMULATOR_HOST=localhost:8080
+NEXT_PUBLIC_FIREBASE_FUNCTIONS_EMULATOR_PORT=5001
+
+# =============================================================================
+# Firebase App Check (Abuse Protection)
+# =============================================================================
+# reCAPTCHA v3 site key for App Check
+# NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcXXXX...
+# Optional: Debug token for localhost testing
+# NEXT_PUBLIC_APPCHECK_DEBUG_TOKEN=XXXX-XXXX-XXXX
+
+# =============================================================================
+# Stripe Configuration (if using billing)
+# =============================================================================
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+
+# =============================================================================
+# Sentry (optional - auto-enabled if SENTRY_DSN is set)
+# =============================================================================
+# Framework automatically initializes Sentry if this variable is set
+NEXT_PUBLIC_SENTRY_DSN=

package/templates/app-next/next.config.ts.example

@@ -0,0 +1,8 @@
+import { defineNextConfig } from '@donotdev/core/next';
+import { appConfig } from './src/config/app';
+
+export default defineNextConfig({
+  appConfig,
+  output: 'export',
+  distDir: 'dist',
+});

package/templates/app-next/postcss.config.js.example

@@ -0,0 +1,58 @@
+/**
+ * PostCSS config for Next.js
+ * Uses custom resolver for workspace package resolution (matches framework pattern)
+ */
+
+import postcssImport from 'postcss-import';
+import postcssNesting from 'postcss-nesting';
+import autoprefixer from 'autoprefixer';
+import { createRequire } from 'node:module';
+import { resolve, join, dirname } from 'node:path';
+import { existsSync } from 'node:fs';
+
+const findPackageRoot = (startDir) => {
+  let current = resolve(startDir);
+  const root = resolve('/');
+  
+  while (current !== root) {
+    const pkgPath = join(current, 'package.json');
+    if (existsSync(pkgPath)) {
+      return current;
+    }
+    const parent = dirname(current);
+    if (parent === current) break;
+    current = parent;
+  }
+  
+  return startDir;
+};
+
+const customResolve = (id, basedir) => {
+  try {
+    const packageRoot = findPackageRoot(basedir);
+    const require = createRequire(join(packageRoot, 'package.json'));
+    return require.resolve(id);
+  } catch (error) {
+    return resolve(basedir, id);
+  }
+};
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: [
+    postcssImport({ resolve: customResolve }),
+    postcssNesting,
+    autoprefixer({
+      overrideBrowserslist: [
+        '> 1%',
+        'last 2 versions',
+        'Firefox ESR',
+        'not dead',
+        'not op_mini all',
+      ],
+      grid: 'autoplace',
+    }),
+  ],
+};
+
+export default config;

package/templates/app-next/service-account-key.json.example

@@ -0,0 +1,2 @@
+{}
+

package/templates/app-next/src/app/ClientLayout.tsx.example

@@ -0,0 +1,39 @@
+'use client';
+// src/app/ClientLayout.tsx
+
+import { NextJsAppProviders } from '@donotdev/ui/next';
+import { appConfig } from '../config/app';
+
+interface ClientLayoutProps {
+  children: React.ReactNode;
+  serverCookies?: string;
+}
+
+/**
+ * Client-side layout wrapper for Next.js App Router
+ * 
+ * Configuration-driven architecture with smart defaults.
+ * Layout preset comes from appConfig.preset (configured in config/app.ts).
+ * Layout prop is for breadcrumbs and slot customizations only.
+ * CSS variable overrides should be done in themes.css.
+ * Override only what you need - everything else has sensible defaults.
+ */
+export function ClientLayout({ children, serverCookies }: ClientLayoutProps) {
+  return (
+    <div id="root">
+      <NextJsAppProviders
+        config={appConfig}
+        serverCookies={serverCookies}
+        layout={{
+          breadcrumbs: 'smart', // 'smart' | 'always' | 'never' | false
+          header: {
+            // end: () => <YourHeaderActions />,
+          },
+          // footer: () => <CustomFooter />,
+        }}
+      >
+        {children}
+      </NextJsAppProviders>
+    </div>
+  );
+}

package/templates/app-next/src/app/layout.tsx.example

@@ -0,0 +1,52 @@
+import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
+import '../globals.css';
+import { ClientLayout } from './ClientLayout';
+
+/**
+ * Framework fonts are loaded via CSS @font-face rules in dndev.css
+ *
+ * The framework CSS includes optimized @font-face declarations for Roboto
+ * with proper unicode-range subsetting for performance.
+ * Fonts are copied from framework to public/fonts/ by AssetDiscovery during build.
+ */
+
+export const metadata: Metadata = {
+  title: 'DoNotDev Demo',
+  description: 'Next.js site using DNDev framework',
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  /**
+   * SSR: Read theme from cookies to apply correct theme class to HTML
+   *
+   * This ensures the server-rendered HTML has the correct theme class,
+   * preventing FOUC (Flash of Unstyled Content) when client hydrates.
+   *
+   * Flow:
+   * 1. Server reads cookie → applies theme class to <html>/<body>
+   * 2. NextJsStoresInitializer hydrates store from cookie
+   * 3. Client hydrates → Zustand persist matches server state
+   * 4. setAvailableThemes() ensures DOM matches persisted theme
+   */
+  const cookieStore = await cookies();
+  const themeCookie = cookieStore.get('dndev-theme');
+  const themeClass = themeCookie?.value || 'light';
+
+  return (
+    <html lang="en" className={`dndev-design-tokens ${themeClass}`}>
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+      </head>
+      <body className={themeClass}>
+        <ClientLayout serverCookies={cookieStore.toString()}>
+          {children}
+        </ClientLayout>
+      </body>
+    </html>
+  );
+} 

package/templates/app-next/src/app/not-found.tsx.example

@@ -0,0 +1,21 @@
+/**
+ * @fileoverview Not found page for Next.js App Router
+ * @description 404 error page using framework's NotFoundPage component
+ * Next.js automatically uses this file for unmatched routes
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+
+import { NotFoundPage } from '@donotdev/ui';
+
+/**
+ * Next.js App Router automatically uses not-found.tsx for 404 errors
+ * This file exports the framework's NotFoundPage component which provides:
+ * - Professional full-viewport centered design
+ * - i18n translation support
+ * - Dynamic route suggestions
+ * - Accessible navigation buttons
+ */
+export default NotFoundPage;
+

package/templates/app-next/src/config/app.ts.example

@@ -0,0 +1,75 @@
+/**
+ * @fileoverview Application configuration
+ * @description Defines application metadata and feature flags
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+
+import type { AppConfig } from '@donotdev/core';
+
+/**
+ * Application name constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_NAME = '{{appName}}';
+
+/**
+ * Application short name constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_SHORT_NAME = '{{appShortName}}';
+
+/**
+ * Application description constant
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const APP_DESCRIPTION = 'Built with DoNotDev Framework';
+
+/**
+ * Application configuration object
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export const appConfig: AppConfig = {
+  app: {
+    name: APP_NAME,
+    shortName: APP_SHORT_NAME,
+    description: APP_DESCRIPTION,
+    // Optional: Configure footer legal links
+    // Remove any links you don't need
+    footer: {
+      legalLinks: [
+        { path: '#cookie-settings', label: 'footer.legal.cookieSettings' },
+        { path: '/legal/privacy', label: 'footer.legal.privacyPolicy' },
+        { path: '/legal/terms', label: 'footer.legal.termsOfService' },
+        // Add more links as needed:
+        // { path: '/legal/legal-notice', label: 'footer.legal.legalNotice' },
+        // { path: '/license', label: 'License' },
+      ],
+    },
+  },
+  preset: 'docs', // 'landing' | 'admin' | 'moolti' | 'docs' | 'blog' | 'game' | 'plain'
+  features: {
+    // Optional: Enable debug tools in development
+    // debug: true,
+  },
+  // Optional: Override auth routes
+  // auth: {
+  //   authRoute: '/signin',
+  //   roleRoute: '/403',
+  //   tierRoute: '/pricing',
+  // },
+};
+