@djangocfg/nextjs 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/nextjs",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Next.js server utilities: sitemap, health, OG images, contact forms, navigation, config",
   "keywords": [
     "nextjs",
@@ -95,17 +95,18 @@
     "check-links": "tsx src/scripts/check-links.ts"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.35",
+    "@djangocfg/api": "^1.4.36",
     "next": "^15.4.4"
   },
   "devDependencies": {
-    "@djangocfg/imgai": "^1.0.21",
-    "@djangocfg/layouts": "^2.0.5",
-    "@djangocfg/typescript-config": "^1.4.35",
+    "@djangocfg/imgai": "^1.0.22",
+    "@djangocfg/layouts": "^2.0.6",
+    "@djangocfg/typescript-config": "^1.4.36",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",
     "@types/webpack": "^5.28.5",
+    "@vercel/og": "^0.8.5",
     "eslint": "^9.37.0",
     "linkinator": "^7.5.0",
     "lucide-react": "^0.469.0",
@@ -113,10 +114,12 @@
     "prompts": "^2.4.2",
     "tsup": "^8.0.1",
     "tsx": "^4.19.2",
-    "typescript": "^5.9.3",
-    "@vercel/og": "^0.8.5"
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0"
   }
 }

package/src/config/base-next-config.ts

@@ -23,6 +23,7 @@
 
 import type { NextConfig } from 'next';
 import type { Configuration as WebpackConfig } from 'webpack';
+import chalk from 'chalk';
 import { deepMerge } from './deepMerge';
 
 // ─────────────────────────────────────────────────────────────────────────
@@ -32,6 +33,25 @@ import { deepMerge } from './deepMerge';
 const isStaticBuild = process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
 const isDev = process.env.NODE_ENV === 'development';
 
+// Global flag to track if browser was already opened (persists across hot reloads)
+let browserOpened = false;
+let bannerPrinted = false;
+
+// ASCII Art Banner for Django CFG
+const DJANGO_CFG_BANNER = `
+     888  d8b                                               .d888         
+     888  Y8P                                              d88P"          
+     888                                                   888            
+ .d88888 8888  8888b.  88888b.   .d88b.   .d88b.   .d8888b 888888 .d88b.  
+d88" 888 "888     "88b 888 "88b d88P"88b d88""88b d88P"    888   d88P"88b 
+888  888  888 .d888888 888  888 888  888 888  888 888      888   888  888 
+Y88b 888  888 888  888 888  888 Y88b 888 Y88..88P Y88b.    888   Y88b 888 
+ "Y88888  888 "Y888888 888  888  "Y88888  "Y88P"   "Y8888P 888    "Y88888 
+          888                        888                              888 
+         d88P                   Y8b d88P                         Y8b d88P 
+       888P"                     "Y88P"                           "Y88P"  
+`;
+
 // ─────────────────────────────────────────────────────────────────────────
 // Configuration Options
 // ─────────────────────────────────────────────────────────────────────────
@@ -43,6 +63,8 @@ export interface BaseNextConfigOptions {
   transpilePackages?: string[];
   /** Additional optimize package imports (merged with defaults) */
   optimizePackageImports?: string[];
+  /** Automatically open browser in dev mode (default: false) */
+  openBrowser?: boolean;
   /** Custom webpack configuration function (called after base webpack logic) */
   webpack?: (
     config: WebpackConfig,
@@ -153,6 +175,50 @@ export function createBaseNextConfig(
     webpack: (config: WebpackConfig, webpackOptions: { isServer: boolean; dev: boolean;[key: string]: any }) => {
       const { isServer, dev } = webpackOptions;
 
+      // Print banner and auto-open browser in dev mode (client-side only)
+      if (dev && !isServer) {
+        // Create a simple plugin to print banner and open browser after first compilation
+        const DevStartupPlugin = class {
+          apply(compiler: any) {
+            compiler.hooks.done.tap('DevStartupPlugin', () => {
+              // Print banner only once
+              if (!bannerPrinted) {
+                bannerPrinted = true;
+                console.log('\n' + chalk.yellowBright.bold(DJANGO_CFG_BANNER) + '\n');
+              }
+
+              // Auto-open browser if enabled
+              if (options.openBrowser && !browserOpened) {
+                browserOpened = true;
+                // Delay to ensure server is ready
+                setTimeout(() => {
+                  const { exec } = require('child_process');
+                  const port = process.env.PORT || '3000';
+                  const url = `http://localhost:${port}`;
+                  
+                  const command = process.platform === 'darwin'
+                    ? 'open'
+                    : process.platform === 'win32'
+                    ? 'start'
+                    : 'xdg-open';
+                  
+                  exec(`${command} ${url}`, (error: Error | null) => {
+                    if (error) {
+                      console.warn(`Failed to open browser: ${error.message}`);
+                    }
+                  });
+                }, 2000); // Wait 2 seconds for server to be ready
+              }
+            });
+          }
+        };
+        
+        if (!config.plugins) {
+          config.plugins = [];
+        }
+        config.plugins.push(new DevStartupPlugin());
+      }
+
       // Dev mode optimizations
       if (dev) {
         config.optimization = {
@@ -227,6 +293,7 @@ export function createBaseNextConfig(
   // These are internal to BaseNextConfigOptions and should not be in the final config
   delete (finalConfig as any).optimizePackageImports;
   delete (finalConfig as any).isDefaultCfgAdmin;
+  delete (finalConfig as any).openBrowser;
   // Note: We don't delete transpilePackages, experimental, env, webpack
   // as they are valid NextConfig keys and may have been overridden by user
 

package/src/contact/submit.ts

@@ -4,6 +4,8 @@
  * Server-side function to submit contact form data to backend API.
  * Can be used in Next.js API routes to avoid CORS issues.
  * 
+ * Uses Fetchers with server-side API instance for type safety and Zod validation.
+ * 
  * @example
  * ```ts
  * import { submitContactForm } from '@djangocfg/nextjs/contact';
@@ -17,8 +19,9 @@
  * ```
  */
 
-import { API, Fetchers } from '@djangocfg/api';
-import type { Schemas } from '@djangocfg/api';
+// Use server-only exports to avoid loading React hooks (useSWRConfig)
+import { API, MemoryStorageAdapter, Fetchers } from '@djangocfg/api/server';
+import type { Schemas } from '@djangocfg/api/server';
 
 export interface SubmitContactFormOptions {
   /** Lead submission data */
@@ -35,31 +38,11 @@ export interface SubmitContactFormResult {
   lead_id?: number;
 }
 
-/**
- * Simple server-side memory storage adapter.
- * Implements StorageAdapter interface without importing from client package.
- */
-class ServerMemoryStorageAdapter {
-  private storage: Map<string, string> = new Map();
-
-  getItem(key: string): string | null {
-    return this.storage.get(key) || null;
-  }
-
-  setItem(key: string, value: string): void {
-    this.storage.set(key, value);
-  }
-
-  removeItem(key: string): void {
-    this.storage.delete(key);
-  }
-}
-
 /**
  * Submit contact form data to backend API
  * 
- * Server-side function that uses the typed fetcher for type safety
- * and runtime validation via Zod schemas.
+ * Server-side function that uses Fetchers with server-side API instance.
+ * This provides type safety, Zod validation, and proper error handling.
  */
 export async function submitContactForm({
   data,
@@ -75,10 +58,10 @@ export async function submitContactForm({
     throw new Error('API URL is required');
   }
 
-  // Create server-side API instance with server-only memory storage adapter
-  // This avoids importing MemoryStorageAdapter from client package
+  // Create server-side API instance with MemoryStorageAdapter
+  // This works on server-side and doesn't require browser APIs
   const serverApi = new API(apiUrl, {
-    storage: new ServerMemoryStorageAdapter(),
+    storage: new MemoryStorageAdapter(),
   });
 
   // Prepare submission data with site_url
@@ -87,14 +70,24 @@ export async function submitContactForm({
     site_url: data.site_url || siteUrl,
   };
 
-  // Use typed fetcher with server API instance
-  // This provides type safety and runtime validation via Zod
-  const result = await Fetchers.createLeadsSubmitCreate(submissionData, serverApi);
+  try {
+    // Use typed fetcher with server API instance
+    // This provides type safety and runtime validation via Zod
+    // Using Fetchers namespace to avoid loading hooks
+    const result = await Fetchers.createLeadsSubmitCreate(submissionData, serverApi);
 
-  return {
-    success: result.success,
-    message: result.message,
-    lead_id: result.lead_id,
-  };
+    // Return formatted result
+    return {
+      success: result.success ?? true,
+      message: result.message || 'Contact form submitted successfully',
+      lead_id: result.lead_id,
+    };
+  } catch (error) {
+    // Handle API errors (including validation errors from Zod)
+    if (error instanceof Error) {
+      throw new Error(`Failed to submit contact form: ${error.message}`);
+    }
+    throw new Error('An unexpected error occurred while submitting the contact form');
+  }
 }