@djangocfg/layouts 1.4.30 → 2.0.2

package/src/layouts/{AppLayout/layouts/AuthLayout → AuthLayout}/AuthContext.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext } from 'react';
 
-import { useAuthForm } from '../../../../auth/hooks';
+import { useAuthForm } from '../../auth/hooks';
 
 import type { AuthContextType, AuthProps } from './types';
 
@@ -14,7 +14,7 @@ export const AuthProvider: React.FC<AuthProps> = ({
   supportUrl,
   termsUrl,
   privacyUrl,
-  enablePhoneAuth = false, // Default to true for backward compatibility
+  enablePhoneAuth = false, // Default to false for backward compatibility
   onIdentifierSuccess,
   onOTPSuccess,
   onError,
@@ -51,3 +51,4 @@ export const useAuthContext = () => {
   }
   return context;
 };
+

package/src/layouts/{AppLayout/layouts/AuthLayout → AuthLayout}/AuthHelp.tsx

@@ -111,3 +111,4 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
     </div>
   );
 };
+

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,61 @@
+/**
+ * Auth Layout
+ * 
+ * Layout for authentication pages with OTP authentication (email/phone)
+ * Supports two-step authentication flow: identifier input → OTP verification
+ * 
+ * @example
+ * ```tsx
+ * import { AuthLayout } from '@djangocfg/layouts';
+ * 
+ * <AuthLayout
+ *   sourceUrl="https://example.com"
+ *   supportUrl="https://example.com/support"
+ *   termsUrl="https://example.com/terms"
+ *   privacyUrl="https://example.com/privacy"
+ *   enablePhoneAuth={true}
+ * >
+ *   {/* Optional custom content above forms *\/}
+ * </AuthLayout>
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+
+import { AuthProvider, useAuthContext } from './AuthContext';
+import { IdentifierForm } from './IdentifierForm';
+import { OTPForm } from './OTPForm';
+import { Suspense } from '../../components';
+
+import type { AuthProps } from './types';
+
+export type AuthLayoutProps = AuthProps;
+
+export const AuthLayout: React.FC<AuthProps> = (props) => {
+  return (
+    <Suspense>
+      <AuthProvider {...props}>
+        <div
+          className={`min-h-screen flex flex-col items-center justify-center bg-background py-6 px-4 sm:py-12 sm:px-6 lg:px-8 ${props.className || ''}`}
+        >
+          <div className="w-full sm:max-w-md space-y-8">
+            {props.children}
+
+            <AuthContent />
+          </div>
+        </div>
+      </AuthProvider>
+    </Suspense>
+  );
+};
+
+// Separate component to use the context
+const AuthContent: React.FC = () => {
+  const { step } = useAuthContext();
+
+  return (
+    <div>{step === 'identifier' ? <IdentifierForm /> : <OTPForm />}</div>
+  );
+};

package/src/layouts/{AppLayout/layouts/AuthLayout → AuthLayout}/IdentifierForm.tsx

@@ -184,23 +184,29 @@ export const IdentifierForm: React.FC = () => {
                 <div className="text-sm text-muted-foreground leading-5">
                   <Label htmlFor="terms" className="cursor-pointer">
                     I agree to the{' '}
-                    <a
-                      href={termsUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary hover:underline font-medium"
-                    >
-                      Terms of Service
-                    </a>{' '}
-                    and{' '}
-                    <a
-                      href={privacyUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-primary hover:underline font-medium"
-                    >
-                      Privacy Policy
-                    </a>
+                    {termsUrl && (
+                      <>
+                        <a
+                          href={termsUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary hover:underline font-medium"
+                        >
+                          Terms of Service
+                        </a>{' '}
+                        and{' '}
+                      </>
+                    )}
+                    {privacyUrl && (
+                      <a
+                        href={privacyUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline font-medium"
+                      >
+                        Privacy Policy
+                      </a>
+                    )}
                   </Label>
                 </div>
               </div>
@@ -267,23 +273,29 @@ export const IdentifierForm: React.FC = () => {
               <div className="text-sm text-muted-foreground leading-5">
                 <Label htmlFor="terms-email" className="cursor-pointer">
                   I agree to the{' '}
-                  <a
-                    href={termsUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:underline font-medium"
-                  >
-                    Terms of Service
-                  </a>{' '}
-                  and{' '}
-                  <a
-                    href={privacyUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:underline font-medium"
-                  >
-                    Privacy Policy
-                  </a>
+                  {termsUrl && (
+                    <>
+                      <a
+                        href={termsUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline font-medium"
+                      >
+                        Terms of Service
+                      </a>{' '}
+                      and{' '}
+                    </>
+                  )}
+                  {privacyUrl && (
+                    <a
+                      href={privacyUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline font-medium"
+                    >
+                      Privacy Policy
+                    </a>
+                  )}
                 </Label>
               </div>
             </div>
@@ -322,3 +334,4 @@ export const IdentifierForm: React.FC = () => {
     </Card>
   );
 };
+

package/src/layouts/{AppLayout/layouts/AuthLayout → AuthLayout}/OTPForm.tsx

@@ -1,6 +1,5 @@
-"use client"
+'use client';
 
-// @ts-nocheck
 import React from 'react';
 import { Mail, MessageCircle, ArrowLeft, RotateCw, ShieldCheck } from 'lucide-react';
 
@@ -73,7 +72,6 @@ export const OTPForm: React.FC = () => {
               Enter verification code
             </label>
             <div className="flex justify-center">
-              {/* @ts-expect-error - TypeScript doesn't recognize children in JSX props for discriminated union */}
               <InputOTP
                 value={otp}
                 onChange={setOtp}
@@ -176,3 +174,4 @@ export const OTPForm: React.FC = () => {
     </Card>
   );
 };
+

package/src/layouts/AuthLayout/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Auth Layout exports
+ */
+
+export { AuthLayout } from './AuthLayout';
+export type { AuthLayoutProps } from './AuthLayout';
+
+// Context and hooks (renamed to avoid conflict with main AuthProvider)
+export { AuthProvider as AuthLayoutProvider, useAuthContext } from './AuthContext';
+
+// Forms
+export { IdentifierForm } from './IdentifierForm';
+export { OTPForm } from './OTPForm';
+
+// Help component
+export { AuthHelp } from './AuthHelp';
+
+// Types (renamed to avoid conflict with main AuthContextType)
+export type { 
+  AuthContextType as AuthLayoutContextType, 
+  AuthProps as AuthLayoutFormProps, 
+  AuthHelpProps 
+} from './types';
+

package/src/layouts/{AppLayout/layouts/AuthLayout → AuthLayout}/types.ts

@@ -59,3 +59,4 @@ export interface AuthHelpProps {
   className?: string;
   variant?: 'default' | 'compact';
 }
+

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -0,0 +1,144 @@
+/**
+ * Private Layout
+ * 
+ * Layout for authenticated user pages (dashboard, profile, etc.)
+ * Import and use directly with props - no complex configs needed!
+ * 
+ * Features:
+ * - Responsive sidebar with mobile burger menu
+ * - Keyboard shortcut (Ctrl/Cmd + B) to toggle sidebar
+ * - Header with sidebar trigger and user menu
+ * - Configurable content padding
+ * 
+ * @example
+ * ```tsx
+ * import { PrivateLayout } from '@djangocfg/layouts';
+ * 
+ * <PrivateLayout
+ *   sidebar={{
+ *     items: [
+ *       { label: 'Dashboard', href: '/dashboard', icon: 'LayoutDashboard' },
+ *       { label: 'Profile', href: '/profile', icon: 'User' }
+ *     ]
+ *   }}
+ *   header={{
+ *     title: 'Dashboard',
+ *     profilePath: '/profile' // Optional, defaults to '/profile'
+ *   }}
+ * >
+ *   {children}
+ * </PrivateLayout>
+ * 
+ * Note: User data (name, email, avatar) is automatically loaded from useAuth() context
+ * Keyboard shortcut: Ctrl/Cmd + B to toggle sidebar
+ * ```
+ */
+
+'use client';
+
+import React, { ReactNode } from 'react';
+import { SidebarProvider, SidebarInset, Preloader, Button, ButtonLink } from '@djangocfg/ui/components';
+import { useAuth } from '../../auth';
+import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
+import type { LucideIcon as LucideIconType } from 'lucide-react';
+
+export interface SidebarItem {
+  label: string;
+  href: string;
+  icon?: string | LucideIconType;
+  badge?: string | number;
+}
+
+export interface SidebarConfig {
+  items: SidebarItem[];
+  homeHref?: string;
+}
+
+export interface HeaderConfig {
+  title?: string;
+  /** Profile path (optional, defaults to '/profile') */
+  profilePath?: string;
+}
+
+export interface PrivateLayoutProps {
+  children: ReactNode;
+  /** Sidebar configuration */
+  sidebar?: SidebarConfig;
+  /** Header configuration */
+  header?: HeaderConfig;
+  /** Content padding */
+  contentPadding?: 'none' | 'default';
+}
+
+export function PrivateLayout({
+  children,
+  sidebar,
+  header,
+  contentPadding = 'default',
+}: PrivateLayoutProps) {
+  const { isAuthenticated, isLoading, user } = useAuth();
+
+  // Debug logging in development
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[PrivateLayout] Render state:', {
+      isLoading,
+      isAuthenticated,
+      hasUser: !!user,
+      hasSidebar: !!sidebar,
+      hasHeader: !!header,
+    });
+  }
+
+  // Show loading state while auth is being checked
+  if (isLoading) {
+    return (
+      <Preloader
+        variant="fullscreen"
+        text="Authenticating..."
+        size="lg"
+        backdrop={true}
+        backdropOpacity={80}
+      />
+    );
+  }
+
+  // Don't render if user is not authenticated
+  if (!isAuthenticated) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('[PrivateLayout] User not authenticated, returning null');
+    }
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen gap-4">
+        <h3 className="text-2xl font-bold">
+          Not Authenticated
+        </h3>
+        <p className="text-muted-foreground">
+          Please log in to continue.
+        </p>
+        <ButtonLink
+          variant="outline"
+          href="/auth"
+        >
+          Login
+        </ButtonLink>
+      </div>
+    );
+  }
+
+  return (
+    <SidebarProvider defaultOpen={true}>
+      {/* Sidebar */}
+      {sidebar && <PrivateSidebar sidebar={sidebar} />}
+
+      {/* Main content area */}
+      <SidebarInset className="flex flex-col">
+        {/* Header with sidebar trigger */}
+        {(header || isAuthenticated) && <PrivateHeader header={header} />}
+
+        {/* Page content */}
+        <PrivateContent padding={contentPadding}>{children}</PrivateContent>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+

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

@@ -0,0 +1,32 @@
+/**
+ * Private Layout Content
+ *
+ * Main content wrapper for PrivateLayout
+ */
+
+'use client';
+
+import React, { ReactNode } from 'react';
+import { cn } from '@djangocfg/ui/lib';
+
+interface PrivateContentProps {
+  children: ReactNode;
+  padding?: 'none' | 'default';
+}
+
+export function PrivateContent({
+  children,
+  padding = 'default',
+}: PrivateContentProps) {
+  return (
+    <main
+      className={cn(
+        'flex-1 overflow-y-auto',
+        padding === 'default' && 'p-4 sm:p-6 lg:p-8'
+      )}
+    >
+      {children}
+    </main>
+  );
+}
+

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

@@ -0,0 +1,57 @@
+/**
+ * Private Layout Header
+ *
+ * Header component for PrivateLayout with sidebar trigger
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import {
+  Button,
+  Separator,
+  SidebarTrigger,
+} from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { useAuth } from '../../../auth';
+import { UserMenu } from '../../_components/UserMenu';
+import type { HeaderConfig } from '../PrivateLayout';
+
+interface PrivateHeaderProps {
+  header?: HeaderConfig;
+}
+
+export function PrivateHeader({ header }: PrivateHeaderProps) {
+  const { user, logout } = useAuth();
+  const profilePath = header?.profilePath || '/profile';
+
+  return (
+    <header className="sticky top-0 z-10 h-16 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border">
+      {/* Left side */}
+      <div className="flex items-center gap-4">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 h-4" />
+
+        {header?.title && (
+          <h1 className="text-lg font-semibold text-foreground">
+            {header.title}
+          </h1>
+        )}
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center gap-3">
+        {/* Theme Toggle */}
+        <ThemeToggle />
+
+        {/* User Menu */}
+        <UserMenu
+          variant="desktop"
+          profilePath={profilePath}
+        />
+      </div>
+    </header>
+  );
+}
+

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

@@ -0,0 +1,141 @@
+/**
+ * Private Layout Sidebar
+ *
+ * Sidebar navigation component for PrivateLayout
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@djangocfg/ui/components';
+import { cn } from '@djangocfg/ui/lib';
+import { LucideIcon } from '../../../components';
+import type { SidebarItem, SidebarConfig } from '../PrivateLayout';
+
+interface PrivateSidebarProps {
+  sidebar: SidebarConfig;
+}
+
+export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
+  const pathname = usePathname();
+  const { state, isMobile } = useSidebar();
+  const homeHref = sidebar.homeHref || '/';
+
+  const isActive = (href: string) => {
+    const matches = pathname === href || pathname.startsWith(href + '/');
+    if (!matches) return false;
+
+    // Check if there's a more specific (longer) path that also matches
+    return !sidebar.items.some(otherItem =>
+      otherItem.href !== href &&
+      otherItem.href.startsWith(href + '/') &&
+      (pathname === otherItem.href || pathname.startsWith(otherItem.href + '/'))
+    );
+  };
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <div
+          className="flex items-center gap-3"
+          style={
+            state === 'collapsed'
+              ? {
+                  paddingLeft: '7px',
+                  paddingTop: '0.5rem',
+                  paddingBottom: '0.5rem',
+                  transition: 'padding 200ms ease-in-out',
+                }
+              : {
+                  padding: '0.5rem',
+                  transition: 'padding 200ms ease-in-out',
+                }
+          }
+        >
+          <Link href={homeHref}>
+            <div className="flex items-center gap-3">
+              <div
+                className={cn(
+                  'bg-primary rounded-sm flex items-center justify-center flex-shrink-0',
+                  isMobile ? 'h-10 w-10' : 'h-8 w-8'
+                )}
+              >
+                <span className="text-primary-foreground font-bold text-sm">
+                  D
+                </span>
+              </div>
+              {state !== 'collapsed' && (
+                <span
+                  className={cn(
+                    'font-semibold text-foreground truncate',
+                    isMobile && 'text-base'
+                  )}
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  Dashboard
+                </span>
+              )}
+            </div>
+          </Link>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {sidebar.items.map((item) => {
+                const active = isActive(item.href);
+
+                return (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={active}
+                      tooltip={item.label}
+                      size={isMobile ? 'lg' : 'default'}
+                    >
+                      <Link href={item.href}>
+                        {item.icon && (
+                          <LucideIcon
+                            icon={
+                              typeof item.icon === 'string'
+                                ? item.icon
+                                : item.icon
+                            }
+                            className={isMobile ? 'h-5 w-5' : 'h-4 w-4'}
+                          />
+                        )}
+                        <span className={isMobile ? 'text-base' : ''}>
+                          {item.label}
+                        </span>
+                        {item.badge && (
+                          <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
+                        )}
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+

package/src/layouts/PrivateLayout/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Private Layout Components
+ */
+
+export { PrivateSidebar } from './PrivateSidebar';
+export { PrivateHeader } from './PrivateHeader';
+export { PrivateContent } from './PrivateContent';
+

package/src/layouts/PrivateLayout/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Private Layout exports
+ */
+
+export { PrivateLayout } from './PrivateLayout';
+export type { PrivateLayoutProps, SidebarItem, SidebarConfig, HeaderConfig } from './PrivateLayout';
+

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -43,13 +43,15 @@ const ProfileContent = ({
     });
   };
 
+  React.useEffect(() => {
+    if (onUnauthenticated) {
+      onUnauthenticated();
+    }
+  }, [onUnauthenticated]);
+
+
   // Show auth check if no user
   if (!user && !isLoading) {
-    React.useEffect(() => {
-      if (onUnauthenticated) {
-        onUnauthenticated();
-      }
-    }, [onUnauthenticated]);
 
     return (
       <div className="flex items-center justify-center min-h-screen">
@@ -63,8 +65,14 @@ const ProfileContent = ({
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      <div>
+        <Preloader
+          variant="fullscreen"
+          text="Authenticating..."
+          size="lg"
+          backdrop={true}
+          backdropOpacity={80}
+        />
       </div>
     );
   }