@djangocfg/layouts 1.4.30 → 2.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/layouts
 
-Pre-built layouts, auth, analytics, and snippets for Next.js + Tailwind CSS.
+Simple, straightforward layout components for Next.js - import and use with props.
 
 **Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
@@ -12,23 +12,67 @@ pnpm add @djangocfg/layouts
 
 ## Layouts
 
-```tsx
-import { AppLayout } from '@djangocfg/layouts/layouts';
+Simple, props-based layout components. No complex configs needed!
+
+### Basic Layouts
 
-<AppLayout config={config}>{children}</AppLayout>
+```tsx
+import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
+
+// Public page
+<PublicLayout 
+  logo="/logo.svg" 
+  siteName="My App" 
+  navigation={navItems}
+>
+  {children}
+</PublicLayout>
+
+// Private page
+<PrivateLayout 
+  sidebar={{ items: menuItems }} 
+  header={{ title: 'Dashboard' }}
+>
+  {children}
+</PrivateLayout>
+
+// Auth page
+<AuthLayout 
+  logo="/logo.svg" 
+  title="Sign In"
+  subtitle="Welcome back"
+>
+  <LoginForm />
+</AuthLayout>
 ```
 
 | Layout | Description |
 |--------|-------------|
-| `AppLayout` | Main app shell with sidebar, header, footer |
+| `PublicLayout` | Public pages (home, docs, contact, legal) |
+| `PrivateLayout` | Authenticated user pages (dashboard, profile) |
+| `AuthLayout` | Authentication pages (login, signup, password reset) |
+| `AdminLayout` | Admin panel layout |
+| `AppLayout` | Smart layout router with config-based setup |
 | `ProfileLayout` | User profile pages |
-| `SupportLayout` | Support/help pages |
-| `PaymentsLayout` | Payment flows |
-| `UILayout` | UI showcase |
-| `ErrorLayout` | Error pages (404, 500) |
+| `SupportLayout` | Support/help pages with ticket system |
+| `PaymentsLayout` | Payment flows and billing |
+
+### AppLayout
+
+Smart layout component that automatically selects the right layout based on config:
+
+```tsx
+import { AppLayout } from '@djangocfg/layouts';
+
+<AppLayout config={appLayoutConfig}>
+  {children}
+</AppLayout>
+```
 
 ## Auth
 
+Complete authentication system with context, hooks, and middleware.
+
 ```tsx
 import { AuthProvider, useAuth } from '@djangocfg/layouts/auth';
 import { AuthDialog } from '@djangocfg/layouts/snippets';
@@ -43,8 +87,28 @@ import { AuthDialog } from '@djangocfg/layouts/snippets';
 | `AuthProvider` | Auth context provider |
 | `useAuth` | Auth hook (user, login, logout) |
 | `useAuthGuard` | Route protection hook |
+| `useAuthRedirect` | Redirect hook for auth flows |
+| `useAutoAuth` | Auto-authentication hook |
 | `authMiddleware` | Next.js middleware |
 
+### Auth Context
+
+```tsx
+import { AccountsProvider, useAccountsContext } from '@djangocfg/layouts/auth/context';
+```
+
+### Auth Hooks
+
+```tsx
+import { 
+  useAuthForm,
+  useAuthGuard,
+  useAuthRedirect,
+  useAutoAuth,
+  useProfileCache
+} from '@djangocfg/layouts/auth/hooks';
+```
+
 ## Analytics
 
 Google Analytics integration via `react-ga4`. Auto-tracks pageviews and user sessions.
@@ -102,24 +166,52 @@ Built-in tracking for:
 
 ## Snippets
 
+Reusable UI components ready to use.
+
 ```tsx
-import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippets';
+import { 
+  Breadcrumbs, 
+  AuthDialog, 
+  ContactForm, 
+  ContactPage,
+  KnowledgeChat,
+  ChatWidget
+} from '@djangocfg/layouts/snippets';
 ```
 
 | Snippet | Description |
 |---------|-------------|
-| `ContactPage` | Ready-to-use contact page with form |
-| `ContactForm` | Contact form with API integration |
-| `ContactInfo` | Contact details card |
-| `AuthDialog` | Auth modal (login/register) |
-| `VideoPlayer` | Vidstack video player |
-| `Breadcrumbs` | Navigation breadcrumbs |
-| `Chat` | Chat widget |
+| `Breadcrumbs` | Navigation breadcrumbs with automatic path generation |
+| `AuthDialog` | Auth modal (login/register) with event-based triggers |
+| `ContactForm` | Contact form with API integration and validation |
+| `ContactPage` | Complete contact page with form and info cards |
+| `ContactInfo` | Contact details card component |
+| `KnowledgeChat` | AI-powered chat widget with knowledge base |
+| `ChatWidget` | Chat widget component |
 | `AnalyticsProvider` | Analytics wrapper component |
 
+### Breadcrumbs
+
+```tsx
+import Breadcrumbs from '@djangocfg/layouts/snippets';
+
+// Auto-generate from current path
+<Breadcrumbs />
+
+// Or provide custom items
+<Breadcrumbs
+  items={[
+    { path: '/', label: 'Home', isActive: false },
+    { path: '/products', label: 'Products', isActive: true },
+  ]}
+/>
+```
+
 ### ContactPage
 
 ```tsx
+import { ContactPage } from '@djangocfg/layouts/snippets';
+
 // Minimal - all defaults configured
 <ContactPage />
 
@@ -135,13 +227,75 @@ import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippe
 - localStorage draft saving
 - Success state with icon
 - Zod validation from `@djangocfg/api`
+- Contact info cards (Email, WhatsApp, Location)
+- Optional Calendly integration
+
+### AuthDialog
+
+```tsx
+import { AuthDialog, openAuthDialog } from '@djangocfg/layouts/snippets';
+
+// Add to layout
+<AuthDialog authPath="/auth" />
+
+// Trigger from anywhere
+openAuthDialog({ message: 'Sign in to continue' });
+```
+
+### Chat Widget
+
+```tsx
+import { ChatWidget, ChatUIProvider, useChatUI } from '@djangocfg/layouts/snippets';
+
+<ChatUIProvider>
+  <ChatWidget />
+</ChatUIProvider>
+```
+
+## Components
+
+Utility components for common use cases.
+
+```tsx
+import { 
+  ErrorBoundary, 
+  PageProgress, 
+  JsonLd, 
+  LucideIcon 
+} from '@djangocfg/layouts/components';
+```
+
+| Component | Description |
+|-----------|-------------|
+| `ErrorBoundary` | React error boundary component |
+| `PageProgress` | Page loading progress indicator |
+| `JsonLd` | JSON-LD structured data component |
+| `LucideIcon` | Lucide icon wrapper component |
 
 ## Validation
 
 Error tracking and validation utilities.
 
 ```tsx
-import { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '@djangocfg/layouts';
+import { 
+  ErrorTrackingProvider, 
+  useErrors,
+  ErrorButtons,
+  ErrorToast
+} from '@djangocfg/layouts/validation';
+```
+
+### Error Tracking
+
+```tsx
+import { ErrorTrackingProvider, useErrors } from '@djangocfg/layouts/validation';
+
+<ErrorTrackingProvider>
+  <YourApp />
+</ErrorTrackingProvider>
+
+// In components
+const { addError, clearErrors, errors } = useErrors();
 ```
 
 ## Exports
@@ -151,10 +305,15 @@ import { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '@dja
 | `@djangocfg/layouts` | Main exports (all modules) |
 | `@djangocfg/layouts/layouts` | Layout components |
 | `@djangocfg/layouts/auth` | Auth context & hooks |
+| `@djangocfg/layouts/auth/context` | Auth context only |
+| `@djangocfg/layouts/auth/hooks` | Auth hooks only |
 | `@djangocfg/layouts/snippets` | Reusable components + Analytics |
+| `@djangocfg/layouts/components` | Utility components |
+| `@djangocfg/layouts/validation` | Validation & error tracking |
 | `@djangocfg/layouts/utils` | Utilities |
 | `@djangocfg/layouts/types` | TypeScript types |
 | `@djangocfg/layouts/styles` | CSS |
+| `@djangocfg/layouts/styles/dashboard` | Dashboard-specific CSS |
 
 ## Requirements
 
@@ -162,3 +321,103 @@ import { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '@dja
 - React >= 19
 - Tailwind CSS >= 4
 - react-ga4 (bundled)
+- @djangocfg/ui (peer dependency)
+- @djangocfg/api (peer dependency)
+
+## Philosophy
+
+This package follows a **simple, props-based approach**:
+
+- ✅ **No complex configs** - just pass props
+- ✅ **Type-safe** - full TypeScript support
+- ✅ **Flexible** - compose layouts as needed
+- ✅ **Production-ready** - built for real apps
+
+## Examples
+
+### Complete App Setup
+
+```tsx
+// app/layout.tsx
+import { AppLayout } from '@djangocfg/layouts';
+import { appLayoutConfig } from './_config/appLayoutConfig';
+
+export default function RootLayout({ children }) {
+  return (
+    <AppLayout config={appLayoutConfig}>
+      {children}
+    </AppLayout>
+  );
+}
+```
+
+### Public Page
+
+```tsx
+// app/page.tsx
+import { PublicLayout } from '@djangocfg/layouts';
+
+export default function HomePage() {
+  return (
+    <PublicLayout
+      logo="/logo.svg"
+      siteName="My App"
+      navigation={[
+        { label: 'Home', href: '/' },
+        { label: 'Docs', href: '/docs' },
+        { label: 'Contact', href: '/contact' }
+      ]}
+    >
+      <h1>Welcome</h1>
+    </PublicLayout>
+  );
+}
+```
+
+### Private Dashboard
+
+```tsx
+// app/dashboard/page.tsx
+import { PrivateLayout } from '@djangocfg/layouts';
+
+export default function DashboardPage() {
+  return (
+    <PrivateLayout
+      sidebar={{
+        items: [
+          { label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+          { label: 'Settings', href: '/settings', icon: 'Settings' }
+        ]
+      }}
+      header={{
+        title: 'Dashboard',
+        userMenu: { name: 'John Doe', email: 'john@example.com' }
+      }}
+    >
+      <h1>Dashboard</h1>
+    </PrivateLayout>
+  );
+}
+```
+
+### Auth Page
+
+```tsx
+// app/auth/login/page.tsx
+import { AuthLayout } from '@djangocfg/layouts';
+import { LoginForm } from './_components/LoginForm';
+
+export default function LoginPage() {
+  return (
+    <AuthLayout
+      logo="/logo.svg"
+      siteName="My App"
+      title="Sign In"
+      subtitle="Welcome back! Please sign in to continue."
+    >
+      <LoginForm />
+    </AuthLayout>
+  );
+}
+```
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.30",
-  "description": "Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS",
+  "version": "2.0.1",
+  "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
     "dashboard",
@@ -10,10 +10,7 @@
     "nextjs",
     "react",
     "tailwindcss",
-    "typescript",
-    "django",
-    "templates",
-    "ui-kit"
+    "typescript"
   ],
   "author": {
     "name": "DjangoCFG",
@@ -37,6 +34,11 @@
       "import": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./layouts": {
+      "types": "./src/layouts/index.ts",
+      "import": "./src/layouts/index.ts",
+      "default": "./src/layouts/index.ts"
+    },
     "./auth": {
       "types": "./src/auth/index.ts",
       "import": "./src/auth/index.ts",
@@ -52,21 +54,11 @@
       "import": "./src/auth/hooks/index.ts",
       "default": "./src/auth/hooks/index.ts"
     },
-    "./layouts": {
-      "types": "./src/layouts/index.ts",
-      "import": "./src/layouts/index.ts",
-      "default": "./src/layouts/index.ts"
-    },
     "./snippets": {
       "types": "./src/snippets/index.ts",
       "import": "./src/snippets/index.ts",
       "default": "./src/snippets/index.ts"
     },
-    "./types": {
-      "types": "./src/types/index.ts",
-      "import": "./src/types/index.ts",
-      "default": "./src/types/index.ts"
-    },
     "./utils": {
       "types": "./src/utils/index.ts",
       "import": "./src/utils/index.ts",
@@ -85,9 +77,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.30",
-    "@djangocfg/og-image": "^1.4.30",
-    "@djangocfg/ui": "^1.4.30",
+    "@djangocfg/api": "^1.4.31",
+    "@djangocfg/centrifugo": "^1.4.31",
+    "@djangocfg/ui": "^1.4.31",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -103,13 +95,11 @@
     "zod": "^4.0.10"
   },
   "dependencies": {
-    "@vidstack/react": "next",
-    "media-icons": "next",
-    "react-ga4": "^2.1.0",
-    "vidstack": "next"
+    "react-ga4": "^2.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.30",
+    "@djangocfg/centrifugo": "^1.4.31",
+    "@djangocfg/typescript-config": "^1.4.31",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",
@@ -120,3 +110,4 @@
     "access": "public"
   }
 }
+

package/src/auth/context/AuthContext.tsx

@@ -1,14 +1,14 @@
 // @ts-nocheck
 'use client';
 
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import React, {
     createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState
 } from 'react';
 
 import { api, Enums } from '@djangocfg/api';
 import { useAccountsContext, AccountsProvider } from './AccountsContext';
-import { useLocalStorage } from '@djangocfg/ui/hooks';
+import { useLocalStorage, useQueryParams } from '@djangocfg/ui/hooks';
 import { getCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
 
 import { authLogger } from '../../utils/logger';
@@ -52,7 +52,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   const [initialized, setInitialized] = useState(false);
   const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const queryParams = useQueryParams();
 
   // Use localStorage hooks for email, phone, and redirect
   const [storedEmail, setStoredEmail, clearStoredEmail] = useLocalStorage<string | null>(EMAIL_STORAGE_KEY, null);
@@ -232,7 +232,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     const isAuthenticated = api.isAuthenticated();
     const authRoute = config?.routes?.auth || defaultRoutes.auth;
     const isAuthPage = pathname === authRoute;
-    const flowParam = searchParams?.get('flow');
+    const flowParam = queryParams.get('flow');
 
     // Only redirect authenticated users away from auth page if they're not in a flow
     // This prevents interference with OTP verification flow
@@ -240,7 +240,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       const callbackUrl = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
       window.location.href = callbackUrl;
     }
-  }, [initialized, pathname, searchParams, config?.routes]);
+  }, [initialized, pathname, queryParams, config?.routes]);
 
   const pushToDefaultCallbackUrl = useCallback(() => {
     const callbackUrl = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;

package/src/auth/hooks/useAuthGuard.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 import { useAuth } from '../context';

package/src/auth/hooks/useAutoAuth.ts

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
+import { useQueryParams } from '@djangocfg/ui/hooks';
 import { authLogger } from '../../utils/logger';
 
 export interface UseAutoAuthOptions {
@@ -15,17 +16,17 @@ export interface UseAutoAuthOptions {
  */
 export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
   const { onOTPDetected, cleanupUrl = true } = options;
-  const searchParams = useSearchParams();
+  const queryParams = useQueryParams();
   const pathname = usePathname();
   const router = useRouter();
 
-  const isReady = !!pathname && !!searchParams.get('otp');
-  const hasOTP = !!(searchParams.get('otp'));
+  const isReady = !!pathname && !!queryParams.get('otp');
+  const hasOTP = !!(queryParams.get('otp'));
 
   useEffect(() => {
     if (!isReady) return;
 
-    const queryOtp = searchParams.get('otp') as string;
+    const queryOtp = queryParams.get('otp') as string;
 
     // Handle OTP detection
     if (queryOtp && typeof queryOtp === 'string' && queryOtp.length === 6) {
@@ -35,11 +36,11 @@ export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
 
     // Clean up URL to remove sensitive params for security
     if (cleanupUrl && queryOtp) {
-      const cleanQuery = Object.fromEntries(searchParams.entries());
+      const cleanQuery = Object.fromEntries(queryParams.entries());
       delete cleanQuery.otp;
       router.push(`${pathname}?${new URLSearchParams(cleanQuery).toString()}`);
     }
-  }, [pathname, searchParams, onOTPDetected, cleanupUrl]);
+  }, [pathname, queryParams, onOTPDetected, cleanupUrl, router]);
 
   return {
     isReady,

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,78 @@
+/**
+ * Simple ErrorBoundary Component
+ * 
+ * Catches React errors and displays a fallback UI
+ */
+
+'use client';
+
+import React, { Component, ReactNode, ErrorInfo } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  supportEmail?: string;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Call custom error handler if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+    
+    // Log to console in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('ErrorBoundary caught an error:', error, errorInfo);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-screen items-center justify-center bg-background p-4">
+          <div className="max-w-md w-full space-y-4 text-center">
+            <h1 className="text-2xl font-bold text-foreground">Something went wrong</h1>
+            <p className="text-muted-foreground">
+              We're sorry, but something unexpected happened. Please try refreshing the page.
+            </p>
+            {this.props.supportEmail && (
+              <p className="text-sm text-muted-foreground">
+                If the problem persists, please contact{' '}
+                <a
+                  href={`mailto:${this.props.supportEmail}`}
+                  className="text-primary hover:underline"
+                >
+                  {this.props.supportEmail}
+                </a>
+              </p>
+            )}
+            <button
+              onClick={() => window.location.reload()}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              Refresh Page
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+

package/src/components/JsonLd.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface JsonLdProps {
+  data: Record<string, any> | Record<string, any>[];
+}
+
+/**
+ * JsonLd Component
+ * 
+ * Renders JSON-LD structured data for SEO.
+ * Use this for schema.org markup (Organization, WebSite, FAQPage, etc.)
+ * 
+ * @example
+ * ```tsx
+ * <JsonLd data={{
+ *   "@context": "https://schema.org",
+ *   "@type": "Organization",
+ *   "name": "My Company"
+ * }} />
+ * ```
+ */
+export function JsonLd({ data }: JsonLdProps) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data, null, 0),
+      }}
+    />
+  );
+}