@djangocfg/layouts 2.1.10 → 2.1.15

package/README.md

@@ -37,10 +37,12 @@ export default function RootLayout({ children }) {
 - ThemeProvider (light/dark/system)
 - TooltipProvider
 - SWRConfig
-- AuthProvider
+- AuthProvider (from `@djangocfg/api`)
 - ErrorTrackingProvider
 - Toaster + PageProgress
 
+> **Note:** Auth functionality is provided by `@djangocfg/api` package. See [@djangocfg/api documentation](../api/README.md) for auth usage.
+
 ### AppLayout
 
 Smart layout router built on BaseApp - automatically selects layout based on route:
@@ -80,7 +82,7 @@ export default function RootLayout({ children }) {
 
 Simple, props-based layout components. No complex configs needed!
 
-### Basic Layouts
+### Available Layouts
 
 ```tsx
 import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
@@ -121,105 +123,10 @@ import { PublicLayout, PrivateLayout, AuthLayout } from '@djangocfg/layouts';
 | `AuthLayout` | Authentication pages (login, signup, password reset) |
 | `AdminLayout` | Admin panel layout |
 | `ProfileLayout` | User profile pages |
-| `SupportLayout` | Support/help pages with ticket system |
-| `PaymentsLayout` | Payment flows and billing |
-
-## Auth
-
-Complete authentication system with OTP and OAuth support.
-
-```tsx
-import { AuthProvider, useAuth } from '@djangocfg/layouts/auth';
-import { AuthLayout, OAuthCallback } from '@djangocfg/layouts';
 
-// Basic auth page with OTP and GitHub OAuth
-<AuthLayout
-  enablePhoneAuth={false}
-  enableGithubAuth={true}
-  termsUrl="/legal/terms"
-  privacyUrl="/legal/privacy"
->
-  <h1>Welcome Back</h1>
-</AuthLayout>
-```
-
-| Export | Description |
-|--------|-------------|
-| `AuthProvider` | Auth context provider |
-| `useAuth` | Auth hook (user, login, logout) |
-| `useAuthGuard` | Route protection hook |
-| `useAuthRedirect` | Redirect hook for auth flows |
-| `useAutoAuth` | Auto-authentication hook |
-| `useGithubAuth` | GitHub OAuth hook |
-| `authMiddleware` | Next.js middleware |
-
-### GitHub OAuth
-
-Complete GitHub OAuth flow with automatic token handling:
-
-```tsx
-// app/auth/page.tsx
-import { AuthLayout } from '@djangocfg/layouts';
-
-export default function AuthPage() {
-  return (
-    <AuthLayout
-      enableGithubAuth={true}
-      redirectUrl="/dashboard"
-      onOAuthSuccess={(user, isNewUser, provider) => console.log('Success!', user)}
-      onError={(error) => console.error(error)}
-    >
-      <h1>Sign In</h1>
-    </AuthLayout>
-  );
-}
-```
-
-**OAuth Flow:**
-1. User clicks "Continue with GitHub"
-2. Redirects to GitHub authorization page
-3. GitHub redirects to `/auth?provider=github&code=XXX&state=YYY`
-4. `AuthLayout` automatically handles callback and exchanges code for JWT tokens
-5. User is logged in and redirected to `redirectUrl`
-
-> **Note:** OAuth callback handling is built into `AuthLayout` when `enableGithubAuth={true}`. No need to add `OAuthCallback` separately!
-
-**Using the hook directly:**
-
-```tsx
-import { useGithubAuth } from '@djangocfg/layouts';
-
-function CustomGithubButton() {
-  const { isLoading, startGithubAuth } = useGithubAuth({
-    onSuccess: (user) => console.log('Logged in!', user),
-    onError: (error) => console.error(error),
-  });
-
-  return (
-    <button onClick={startGithubAuth} disabled={isLoading}>
-      {isLoading ? 'Connecting...' : 'Login with GitHub'}
-    </button>
-  );
-}
-```
-
-### 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';
-```
+> **Extension Layouts:** Additional layouts like `SupportLayout` and `PaymentsLayout` are available in extension packages:
+> - `@djangocfg/ext-support` - Support ticket layouts
+> - `@djangocfg/ext-payments` - Payment flow layouts
 
 ## Analytics
 
@@ -263,7 +170,7 @@ Analytics.setUser('user-123');
 
 | Category | Events |
 |----------|--------|
-| **Auth** | `AUTH_OTP_REQUEST`, `AUTH_LOGIN_SUCCESS`, `AUTH_OTP_VERIFY_FAIL`, `AUTH_LOGOUT`, `AUTH_SESSION_EXPIRED`, `AUTH_TOKEN_REFRESH` |
+| **Auth** | `AUTH_LOGIN_SUCCESS`, `AUTH_LOGOUT`, `AUTH_SESSION_EXPIRED`, `AUTH_TOKEN_REFRESH` |
 | **OAuth** | `AUTH_OAUTH_START`, `AUTH_OAUTH_SUCCESS`, `AUTH_OAUTH_FAIL` |
 | **Error** | `ERROR_BOUNDARY`, `ERROR_API`, `ERROR_VALIDATION`, `ERROR_NETWORK` |
 | **Navigation** | `NAV_ADMIN_ENTER`, `NAV_DASHBOARD_ENTER`, `NAV_PAGE_VIEW` |
@@ -274,7 +181,7 @@ Analytics.setUser('user-123');
 Built-in tracking for:
 - **Page views** - on every route change
 - **User ID** - automatically set when user is authenticated
-- **Auth events** - login, logout, OTP, session expiry
+- **Auth events** - login, logout, session expiry (from `@djangocfg/api`)
 - **OAuth events** - GitHub OAuth start, success, failure
 - **Errors** - React ErrorBoundary errors
 
@@ -283,13 +190,9 @@ Built-in tracking for:
 Reusable UI components ready to use.
 
 ```tsx
-import { 
-  Breadcrumbs, 
-  AuthDialog, 
-  ContactForm, 
-  ContactPage,
-  KnowledgeChat,
-  ChatWidget
+import {
+  Breadcrumbs,
+  AuthDialog,
 } from '@djangocfg/layouts/snippets';
 ```
 
@@ -297,13 +200,13 @@ import {
 |---------|-------------|
 | `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 |
 
+> **Extension Snippets:** Additional components are available in extension packages:
+> - `@djangocfg/ext-leads` - ContactForm, ContactPage, ContactInfo
+> - `@djangocfg/ext-knowbase` - KnowledgeChat, ChatWidget, ChatUIProvider
+> - `@djangocfg/ext-newsletter` - Hero (with newsletter subscription)
+
 ### Breadcrumbs
 
 ```tsx
@@ -321,29 +224,6 @@ import Breadcrumbs from '@djangocfg/layouts/snippets';
 />
 ```
 
-### ContactPage
-
-```tsx
-import { ContactPage } from '@djangocfg/layouts/snippets';
-
-// Minimal - all defaults configured
-<ContactPage />
-
-// Custom
-<ContactPage
-  apiUrl="https://api.example.com"
-  email="hello@example.com"
-  calendlyUrl="https://calendly.com/..."
-/>
-```
-
-**Features:**
-- localStorage draft saving
-- Success state with icon
-- Zod validation from `@djangocfg/api`
-- Contact info cards (Email, WhatsApp, Location)
-- Optional Calendly integration
-
 ### AuthDialog
 
 ```tsx
@@ -356,16 +236,6 @@ import { AuthDialog, openAuthDialog } from '@djangocfg/layouts/snippets';
 openAuthDialog({ message: 'Sign in to continue' });
 ```
 
-### Chat Widget
-
-```tsx
-import { ChatWidget, ChatUIProvider, useChatUI } from '@djangocfg/layouts/snippets';
-
-<ChatUIProvider>
-  <ChatWidget />
-</ChatUIProvider>
-```
-
 ## Components
 
 Utility components organized by category.
@@ -373,8 +243,8 @@ Utility components organized by category.
 ### Core Components
 
 ```tsx
-import { 
-  JsonLd, 
+import {
+  JsonLd,
   LucideIcon,
   PageProgress,
   Suspense
@@ -391,7 +261,7 @@ import {
 ### Error Components
 
 ```tsx
-import { 
+import {
   ErrorBoundary,
   ErrorLayout,
   getErrorContent,
@@ -445,8 +315,8 @@ export default function Page() {
 ### Error Tracking
 
 ```tsx
-import { 
-  ErrorTrackingProvider, 
+import {
+  ErrorTrackingProvider,
   useErrors,
   ErrorButtons,
   ErrorToast
@@ -477,11 +347,11 @@ Ready-to-use page components.
 Pre-built legal page components with default configurations.
 
 ```tsx
-import { 
-  PrivacyPage, 
-  TermsPage, 
-  CookiesPage, 
-  SecurityPage 
+import {
+  PrivacyPage,
+  TermsPage,
+  CookiesPage,
+  SecurityPage
 } from '@djangocfg/layouts/pages/legal';
 
 // app/legal/privacy/page.tsx
@@ -510,7 +380,7 @@ export default function CustomPrivacy() {
 Utility functions and helpers.
 
 ```tsx
-import { 
+import {
   generateOgImageUrl,
   getAbsoluteOgImageUrl,
   createOgImageUrlBuilder
@@ -536,9 +406,6 @@ const ogUrl = generateOgImageUrl('/api/og', {
 |------|---------|
 | `@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` | All utility components |
 | `@djangocfg/layouts/pages` | Page components (legal pages) |
@@ -547,6 +414,22 @@ const ogUrl = generateOgImageUrl('/api/og', {
 | `@djangocfg/layouts/styles` | CSS |
 | `@djangocfg/layouts/styles/dashboard` | Dashboard-specific CSS |
 
+> **Auth Exports:** For authentication, use `@djangocfg/api/auth` - See [@djangocfg/api documentation](../api/README.md)
+
+## Extension Packages
+
+Additional functionality is available in extension packages:
+
+| Extension | Package | Description |
+|-----------|---------|-------------|
+| **Newsletter** | `@djangocfg/ext-newsletter` | Newsletter subscription and campaigns |
+| **Knowledge Base** | `@djangocfg/ext-knowbase` | Documentation, chat, RAG-powered AI |
+| **Leads** | `@djangocfg/ext-leads` | Lead capture and contact forms |
+| **Payments** | `@djangocfg/ext-payments` | Payment processing and subscriptions |
+| **Support** | `@djangocfg/ext-support` | Support tickets and helpdesk |
+
+Each extension has its own layouts, contexts, and components. See individual extension documentation for details.
+
 ## Requirements
 
 - Next.js >= 15
@@ -564,6 +447,7 @@ This package follows a **simple, props-based approach**:
 - ✅ **Type-safe** - full TypeScript support
 - ✅ **Flexible** - compose layouts as needed
 - ✅ **Production-ready** - built for real apps
+- ✅ **Modular** - core layouts in one package, extensions separate
 
 ## Examples
 
@@ -653,3 +537,11 @@ export default function LoginPage() {
 }
 ```
 
+## License
+
+MIT
+
+## Links
+
+- [DjangoCFG Documentation](https://djangocfg.com)
+- [GitHub](https://github.com/markolofsen/django-cfg)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.10",
+  "version": "2.1.15",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.10",
-    "@djangocfg/centrifugo": "^2.1.10",
-    "@djangocfg/ui-nextjs": "^2.1.10",
+    "@djangocfg/api": "^2.1.15",
+    "@djangocfg/centrifugo": "^2.1.15",
+    "@djangocfg/ui-nextjs": "^2.1.15",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -104,7 +104,7 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "7.65.0",
     "sonner": "2.0.7",
-    "swr": "^2.3.0",
+    "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.1.13"
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.10",
+    "@djangocfg/typescript-config": "^2.1.15",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/RedirectPage/RedirectPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useAuth } from '../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
 import { Preloader } from '@djangocfg/ui-nextjs/components';
 

package/src/index.ts

@@ -25,9 +25,6 @@
  * ```
  */
 
-// Auth system
-export * from './auth';
-
 // Layout components
 export * from './layouts';
 
@@ -42,6 +39,3 @@ export * from './utils';
 
 // Pages
 export * from './pages';
-
-// Contexts (API contexts for data management)
-export * from './contexts';

package/src/layouts/AppLayout/AppLayout.tsx

@@ -40,7 +40,7 @@ import React, { ReactNode, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
-import { type AuthConfig } from '../../auth/context';
+import { type AuthConfig } from '@djangocfg/api/auth';
 import { type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { Suspense, ClientOnly } from '../../components/core';

package/src/layouts/AppLayout/BaseApp.tsx

@@ -26,7 +26,7 @@
 import { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
 import { ThemeProvider, Toaster, TooltipProvider } from '@djangocfg/ui-nextjs';
-import { AuthProvider, type AuthConfig } from '../../auth/context';
+import { AuthProvider, type AuthConfig } from '@djangocfg/api/auth';
 import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { PageProgress } from '../../components/core/PageProgress';
 

package/src/layouts/AuthLayout/AuthContext.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext } from 'react';
 
-import { useAuthForm } from '../../auth/hooks';
+import { useAuthForm } from '@djangocfg/api/auth';
 
 import type { AuthContextType, AuthProps } from './types';
 

package/src/layouts/AuthLayout/OAuthCallback.tsx

@@ -6,7 +6,7 @@ import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui-nextjs/components';
 
-import { useGithubAuth } from '../../auth/hooks';
+import { useGithubAuth } from '@djangocfg/api/auth';
 
 export interface OAuthCallbackProps {
   onSuccess?: (user: any, isNewUser: boolean, provider: string) => void;

package/src/layouts/AuthLayout/OAuthProviders.tsx

@@ -5,7 +5,7 @@ import { Github, Loader2 } from 'lucide-react';
 
 import { Button } from '@djangocfg/ui-nextjs/components';
 
-import { useGithubAuth } from '../../auth/hooks';
+import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAuthContext } from './AuthContext';
 
 /**

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -39,7 +39,7 @@
 
 import React, { ReactNode } from 'react';
 import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg/ui-nextjs/components';
-import { useAuth } from '../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
 

package/src/layouts/PrivateLayout/components/PrivateHeader.tsx

@@ -14,7 +14,7 @@ import {
   SidebarTrigger,
 } from '@djangocfg/ui-nextjs/components';
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
-import { useAuth } from '../../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
 import type { HeaderConfig } from '../PrivateLayout';
 

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -10,8 +10,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@djangocfg/ui-nextjs/components';
-import { AccountsProvider } from '@djangocfg/layouts/auth/context';
-import { useAuth } from '../../auth';
+import { AccountsProvider } from '@djangocfg/api/auth';
+import { useAuth } from '@djangocfg/api/auth';
 
 import { AvatarSection, ProfileForm } from './components';
 

package/src/layouts/ProfileLayout/components/AvatarSection.tsx

@@ -5,8 +5,8 @@ import React, { useState } from 'react';
 import { toast } from 'sonner';
 
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui-nextjs/components';
-import { useAccountsContext } from '@djangocfg/layouts/auth/context';
-import { useAuth } from '../../../auth';
+import { useAccountsContext } from '@djangocfg/api/auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { profileLogger } from '../../../utils/logger';
 
 export const AvatarSection = () => {

package/src/layouts/ProfileLayout/components/ProfileForm.tsx

@@ -23,8 +23,8 @@ import {
   useAccountsContext,
   PatchedUserProfileUpdateRequestSchema,
   type PatchedUserProfileUpdateRequest
-} from '../../../auth/context';
-import { useAuth } from '../../../auth';
+} from '@djangocfg/api/auth';
+import { useAuth } from '@djangocfg/api/auth';
 
 export const ProfileForm = () => {
   const { user } = useAuth();

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -18,7 +18,7 @@ import {
   Button,
 } from '@djangocfg/ui-nextjs/components';
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
-import { useAuth } from '../../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
 import type { NavigationItem } from '../PublicLayout';
 

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -13,7 +13,7 @@ import { Button } from '@djangocfg/ui-nextjs/components';
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 import { cn } from '@djangocfg/ui-nextjs/lib';
 import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
-import { useAuth } from '../../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
 import type { NavigationItem } from '../PublicLayout';
 

package/src/layouts/_components/UserMenu.tsx

@@ -23,7 +23,7 @@ import {
   AvatarImage,
   Button,
 } from '@djangocfg/ui-nextjs/components';
-import { useAuth } from '../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 
 export interface UserMenuProps {
   variant?: 'desktop' | 'mobile';

package/src/layouts/index.ts

@@ -16,6 +16,4 @@ export * from './AdminLayout';
 
 // Additional layouts
 export * from './ProfileLayout';
-export * from './SupportLayout';
-export * from './PaymentsLayout';
 

package/src/snippets/Analytics/useAnalytics.ts

@@ -11,7 +11,7 @@
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import ReactGA from 'react-ga4';
-import { useAuth } from '../../auth';
+import { useAuth } from '@djangocfg/api/auth';
 
 // Check if we're in production
 const isProduction = process.env.NODE_ENV === 'production';

package/src/snippets/index.ts

@@ -2,12 +2,9 @@
 // Snippets - Reusable UI Snippets
 // ============================================================================
 
-export { KnowledgeChat, ChatWidget, ChatUIProvider, useChatUI } from './Chat';
-export type { ChatWidgetProps, ChatUIState } from './Chat';
 
 export * from './Breadcrumbs';
 export * from './AuthDialog';
-export * from './ContactForm';
 export * from './Analytics';
 
 // MCP Chat (AI-powered documentation assistant)