@djangocfg/layouts 1.4.29 → 2.0.1

package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx

@@ -1,242 +0,0 @@
-/**
- * Footer Component
- *
- * Responsive footer with Desktop and Mobile variants
- * Refactored from _old/MainLayout - uses context only!
- */
-
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { useIsMobile } from '@djangocfg/ui/hooks';
-import { useAppContext } from '../../../context';
-
-/**
- * Footer Component
- *
- * Features:
- * - Responsive (Desktop/Mobile variants)
- * - Project info with logo and description
- * - Badge (optional)
- * - Social links (GitHub, LinkedIn, Twitter, Telegram)
- * - Menu sections (single items or grouped)
- * - Legal links (Privacy, Terms, Security, Cookies, etc.)
- * - Copyright and branding
- *
- * All data from context!
- */
-export function Footer() {
-  const { config } = useAppContext();
-  const isMobile = useIsMobile();
-
-  const { app, publicLayout } = config;
-  const footer = publicLayout.footer;
-  const currentYear = new Date().getFullYear();
-
-  if (isMobile) {
-    return (
-      <footer className="lg:hidden bg-background border-t border-border mt-auto">
-        <div className="w-full px-4 py-8">
-          {/* Project Info */}
-          <div className="text-center space-y-4 mb-6">
-            <div className="flex items-center justify-center gap-2">
-              <div className="w-6 h-6 flex items-center justify-center">
-                <img
-                  src={app.logoPath}
-                  alt={`${app.name} Logo`}
-                  className="w-full h-full object-contain"
-                />
-              </div>
-              <span className="text-lg font-bold text-foreground">{app.name}</span>
-            </div>
-            {app.description && (
-              <p className="text-muted-foreground text-sm leading-relaxed max-w-md mx-auto">
-                {app.description}
-              </p>
-            )}
-          </div>
-
-          {/* Quick Links */}
-          <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
-            {footer.links.docs && (
-              <a
-                href={footer.links.docs}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-                title="Documentation"
-              >
-                Docs
-              </a>
-            )}
-            {footer.links.privacy && (
-              <Link
-                href={footer.links.privacy}
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-              >
-                Privacy
-              </Link>
-            )}
-            {footer.links.terms && (
-              <Link
-                href={footer.links.terms}
-                className="text-sm text-muted-foreground hover:text-primary transition-colors"
-              >
-                Terms
-              </Link>
-            )}
-          </div>
-
-          {/* Bottom Section */}
-          <div className="border-t border-border pt-4">
-            <div className="text-center space-y-2">
-              <div className="text-xs text-muted-foreground">
-                © {currentYear} {app.name}. All rights reserved.
-              </div>
-              <div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
-                Made with ❤️ by{' '}
-                <a
-                  href="https://reforms.ai"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-primary transition-colors"
-                >
-                  ReformsAI
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </footer>
-    );
-  }
-
-  // Desktop Footer
-  return (
-    <footer className="max-lg:hidden bg-background border-t border-border mt-auto">
-      <div className="w-full px-8 lg:px-16 xl:px-24 py-12">
-        <div className="flex flex-col gap-8">
-          {/* Top Section - Two Column Layout */}
-          <div className="flex gap-8">
-            {/* Left Column - Project Info */}
-            <div className="space-y-4" style={{ width: '30%', minWidth: '300px' }}>
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 flex items-center justify-center">
-                  <img
-                    src={app.logoPath}
-                    alt={`${app.name} Logo`}
-                    className="w-full h-full object-contain"
-                  />
-                </div>
-                <span className="text-xl font-bold text-foreground">{app.name}</span>
-              </div>
-              {app.description && (
-                <p className="text-muted-foreground text-sm leading-relaxed">
-                  {app.description}
-                </p>
-              )}
-              {/* Badge */}
-              {footer.badge && (
-                <div className="pt-2">
-                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-sm bg-primary/10 hover:bg-primary/15 border border-primary/20 text-xs font-medium text-primary transition-colors">
-                    <footer.badge.icon className="w-3.5 h-3.5" />
-                    {footer.badge.text}
-                  </span>
-                </div>
-              )}
-            </div>
-
-            {/* Right Column - Footer Menu Sections (max 4 columns, rest wraps) */}
-            <div className="flex flex-wrap gap-8 flex-1">
-              {footer.menuSections.map((section) => (
-                <div key={section.title} className="flex-1 basis-[calc(25%-1.5rem)] min-w-[140px] max-w-[200px]">
-                  <h3 className="text-sm font-semibold text-foreground mb-3">
-                    {section.title}
-                  </h3>
-                  <ul className="space-y-2">
-                    {section.items.map((item) => (
-                      <li key={item.path}>
-                        <Link
-                          href={item.path}
-                          className="text-muted-foreground hover:text-primary text-sm transition-colors"
-                        >
-                          {item.label}
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Bottom Section */}
-          <div className="border-t border-border" style={{ marginTop: '2rem', paddingTop: '2rem' }}>
-            <div className="flex justify-between items-center gap-4">
-            <div className="text-xs text-muted-foreground">
-              © {currentYear} {app.name}. All rights reserved.
-            </div>
-            <div className="text-xs text-muted-foreground flex items-center gap-1">
-              Made with ❤️ by{' '}
-              <a
-                href="https://reforms.ai"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hover:text-primary transition-colors"
-              >
-                ReformsAI
-              </a>
-            </div>
-            <div className="flex flex-wrap items-center gap-4">
-              {footer.links.docs && (
-                <a
-                  href={footer.links.docs}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                  title="Documentation"
-                >
-                  Docs
-                </a>
-              )}
-              {footer.links.privacy && (
-                <Link
-                  href={footer.links.privacy}
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                >
-                  Privacy Policy
-                </Link>
-              )}
-              {footer.links.terms && (
-                <Link
-                  href={footer.links.terms}
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                >
-                  Terms of Service
-                </Link>
-              )}
-              {footer.links.security && (
-                <Link
-                  href={footer.links.security}
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                >
-                  Security
-                </Link>
-              )}
-              {footer.links.cookies && (
-                <Link
-                  href={footer.links.cookies}
-                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
-                >
-                  Cookies
-                </Link>
-              )}
-            </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/src/layouts/AppLayout/layouts/PublicLayout/components/MobileDrawer.tsx

@@ -1,150 +0,0 @@
-/**
- * Mobile Drawer
- *
- * Full-screen slide-in drawer for mobile navigation
- * Uses @djangocfg/ui Drawer component (Vaul-based)
- */
-
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { X } from 'lucide-react';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerClose,
-} from '@djangocfg/ui/components';
-import { useAppContext } from '../../../context';
-import { useNavigation } from '../../../hooks';
-import { UserMenu } from '../../../components';
-
-/**
- * Mobile Drawer Component
- *
- * Features:
- * - Slide-in drawer from right (using Vaul)
- * - UserMenu component (authenticated/guest)
- * - Navigation sections
- * - Smooth animations via Vaul library
- *
- * All data from context!
- */
-export function MobileDrawer() {
-  const { config, mobileDrawerOpen, closeMobileDrawer } = useAppContext();
-  const { isActive } = useNavigation();
-
-  const { app, publicLayout } = config;
-
-  const handleNavigate = () => {
-    closeMobileDrawer();
-  };
-
-  // Prepare menu sections before render
-  const singleItemSections = React.useMemo(
-    () => publicLayout.navigation.menuSections.filter(s => s.items.length === 1),
-    [publicLayout.navigation.menuSections]
-  );
-
-  const multipleItemsSections = React.useMemo(
-    () => publicLayout.navigation.menuSections.filter(s => s.items.length > 1),
-    [publicLayout.navigation.menuSections]
-  );
-
-  return (
-    <Drawer
-      open={mobileDrawerOpen}
-      onOpenChange={(open) => !open && closeMobileDrawer()}
-      direction="right"
-    >
-      <DrawerContent direction="right" className="w-80 lg:hidden">
-        {/* Header */}
-        <DrawerHeader className="flex flex-row items-center justify-between p-4 border-b border-border/30">
-          <div className="flex items-center gap-3">
-            <img
-              src={app.logoPath}
-              alt={`${app.name} Logo`}
-              className="h-8 w-auto object-contain"
-            />
-            <DrawerTitle className="text-lg font-bold text-foreground">
-              {app.name}
-            </DrawerTitle>
-          </div>
-          <DrawerClose className="p-2 rounded-sm transition-colors hover:bg-accent/50">
-            <X className="size-5" />
-            <span className="sr-only">Close menu</span>
-          </DrawerClose>
-        </DrawerHeader>
-
-        {/* Scrollable Content */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-6">
-          {/* User Menu Card */}
-          <UserMenu variant="mobile" onNavigate={handleNavigate} />
-
-          {/* Navigation Sections */}
-          <div className="space-y-6">
-            {/* Group all single-item sections into "Menu" */}
-            {singleItemSections.length > 0 && (
-              <div className="space-y-3">
-                <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                  Menu
-                </h3>
-                <div className="space-y-1">
-                  {singleItemSections.map((section) => {
-                    const item = section.items[0];
-                    if (!item) return null;
-
-                    return (
-                      <Link
-                        key={item.path}
-                        href={item.path}
-                        className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
-                          isActive(item.path)
-                            ? 'bg-accent text-accent-foreground'
-                            : 'text-foreground hover:bg-accent hover:text-accent-foreground'
-                        }`}
-                        onClick={handleNavigate}
-                      >
-                        {item.label}
-                      </Link>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            {/* Render multiple-items sections normally */}
-            {multipleItemsSections.map((section) => (
-              <div key={section.title} className="space-y-3">
-                <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                  {section.title}
-                </h3>
-                <div className="space-y-1">
-                  {section.items.map((item) => (
-                    <Link
-                      key={item.path}
-                      href={item.path}
-                      className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
-                        isActive(item.path)
-                          ? 'bg-accent text-accent-foreground'
-                          : 'text-foreground hover:bg-accent hover:text-accent-foreground'
-                      }`}
-                      onClick={handleNavigate}
-                    >
-                      {item.label}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Bottom spacer */}
-          <div style={{ height: '15vh' }}></div>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}

package/src/layouts/AppLayout/layouts/PublicLayout/components/Navigation.tsx

@@ -1,169 +0,0 @@
-/**
- * Public Layout Navigation
- *
- * Full-featured navigation using @djangocfg/ui components
- * Refactored from _old/MainLayout - uses context only!
- */
-
-'use client';
-
-import React from 'react';
-import Link from 'next/link';
-import { Menu, ChevronDown } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from '@djangocfg/ui/components';
-import { ThemeToggle } from '@djangocfg/ui/theme';
-import { cn } from '@djangocfg/ui/lib';
-import { useIsMobile } from '@djangocfg/ui/hooks';
-import { useAppContext } from '../../../context';
-import { useNavigation } from '../../../hooks';
-import { UserMenu } from '../../../components';
-import { MobileDrawer } from './MobileDrawer';
-
-/**
- * Navigation Component
- *
- * Features:
- * - Logo and branding
- * - NavigationMenu from @djangocfg/ui (Radix UI based)
- * - Theme toggle
- * - User menu (desktop)
- * - Mobile menu button
- *
- * All data from context - zero prop drilling!
- */
-export function Navigation() {
-  const { config, toggleMobileDrawer } = useAppContext();
-  const { isActive } = useNavigation();
-  const isMobile = useIsMobile();
-  const [openDropdown, setOpenDropdown] = React.useState<string | null>(null);
-
-  const { app, publicLayout } = config;
-
-  return (
-    <nav className="sticky top-0 w-full backdrop-blur-xl z-50 isolate" style={{ backgroundColor: 'hsl(var(--background) / 0.8)', boxShadow: '0 1px 0 0 hsl(var(--border))', zIndex: 50 }}>
-      <div className="w-full px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between py-2 min-h-[40px]">
-          {/* Left side - Logo and Navigation Menu */}
-          <div className="flex items-center gap-6">
-            {/* Logo */}
-            <Link
-              href={publicLayout.navigation.homePath}
-              className="flex items-center gap-3 group"
-            >
-              <img
-                src={app.logoPath}
-                alt={`${app.name} Logo`}
-                className="h-8 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
-              />
-              <span className="text-xl font-bold transition-colors duration-300 text-foreground group-hover:text-primary">
-                {app.name}
-              </span>
-            </Link>
-
-            {/* Desktop Navigation Menu */}
-            {!isMobile && (
-              <div className="flex items-center gap-1">
-                {publicLayout.navigation.menuSections.map((section) => {
-                  // Single item section - render as direct link
-                  if (section.items.length === 1) {
-                    const item = section.items[0];
-                    if (!item) return null;
-
-                    return (
-                      <Link
-                        key={section.title}
-                        href={item.path}
-                        className={cn(
-                          'inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
-                          isActive(item.path) && 'bg-accent text-accent-foreground'
-                        )}
-                      >
-                        {item.label}
-                      </Link>
-                    );
-                  }
-
-                  // Multiple items - render as dropdown menu
-                  return (
-                    <div
-                      key={section.title}
-                      onMouseEnter={() => setOpenDropdown(section.title)}
-                      onMouseLeave={() => setOpenDropdown(null)}
-                    >
-                      <DropdownMenu
-                        open={openDropdown === section.title}
-                        onOpenChange={(open) => setOpenDropdown(open ? section.title : null)}
-                        modal={false}
-                      >
-                        <DropdownMenuTrigger
-                          className={cn(
-                            "inline-flex h-9 items-center justify-center gap-1 rounded-md px-4 py-2 text-sm font-medium transition-colors focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-                            openDropdown === section.title ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-                          )}
-                        >
-                          {section.title}
-                          <ChevronDown className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180" />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="start"
-                          sideOffset={0}
-                          className="p-2"
-                          style={{
-                            minWidth: '250px',
-                            backdropFilter: 'blur(24px)',
-                            WebkitBackdropFilter: 'blur(24px)'
-                          }}
-                        >
-                          {section.items.map((item) => (
-                            <DropdownMenuItem key={item.path} asChild>
-                              <Link
-                                href={item.path}
-                                className={cn(
-                                  'cursor-pointer w-full hover:bg-accent hover:text-accent-foreground transition-colors text-base px-4 py-3 rounded-md',
-                                  isActive(item.path) && 'bg-accent/50'
-                                )}
-                              >
-                                {item.label}
-                              </Link>
-                            </DropdownMenuItem>
-                          ))}
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          {/* Right side - Theme Toggle & User Menu */}
-          {!isMobile && (
-          <div className="flex items-center gap-2">
-            <ThemeToggle />
-            <UserMenu variant="desktop" />
-          </div>
-          )}
-
-          {/* Mobile Menu Button - Only visible on mobile */}
-          {isMobile && (
-          <button
-            onClick={toggleMobileDrawer}
-            className="p-2 rounded-md transition-colors hover:bg-accent text-foreground hover:text-primary"
-            aria-label="Toggle mobile menu"
-          >
-            <Menu className="size-6" />
-          </button>
-          )}
-        </div>
-      </div>
-
-      {/* Mobile Drawer */}
-      <MobileDrawer />
-    </nav>
-  );
-}

package/src/layouts/AppLayout/layouts/PublicLayout/index.ts

@@ -1,5 +0,0 @@
-/**
- * PublicLayout Module
- */
-
-export * from './PublicLayout';

package/src/layouts/AppLayout/layouts/index.ts

@@ -1,7 +0,0 @@
-/**
- * Layouts Module
- */
-
-export * from './PublicLayout';
-export * from './PrivateLayout';
-export * from './AuthLayout';

package/src/layouts/AppLayout/providers/CoreProviders.tsx

@@ -1,80 +0,0 @@
-// @ts-nocheck
-/**
- * Core Providers
- *
- * Wraps application with all necessary providers
- */
-
-'use client';
-
-import React, { ReactNode } from 'react';
-import { ThemeProvider, Toaster } from '@djangocfg/ui';
-import { AuthProvider } from '../../../auth';
-import { ErrorTrackingProvider } from '../../../validation';
-import type { AppLayoutConfig } from '../types';
-import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../../validation';
-
-export interface CoreProvidersProps {
-  children: ReactNode;
-  config: AppLayoutConfig;
-  /**
-   * Validation error tracking configuration
-   * @default { enabled: true, showToast: true, maxErrors: 50 }
-   */
-  validation?: Partial<ValidationErrorConfig>;
-  /**
-   * CORS error tracking configuration
-   * @default { enabled: true, showToast: true }
-   */
-  cors?: Partial<CORSErrorConfig>;
-  /**
-   * Network error tracking configuration
-   * @default { enabled: false }
-   */
-  network?: Partial<NetworkErrorConfig>;
-  /**
-   * Custom error handler for all error types
-   */
-  onError?: (error: any) => boolean | void;
-}
-
-/**
- * Core Providers Wrapper
- *
- * Provides:
- * - ThemeProvider (dark/light mode)
- * - AuthProvider (authentication)
- * - ErrorTrackingProvider (validation, CORS & network error tracking)
- * - Toaster (notifications)
- */
-export function CoreProviders({ children, config, validation, cors, network, onError }: CoreProvidersProps) {
-  return (
-    <ThemeProvider
-      defaultTheme={config.theme?.defaultTheme}
-      storageKey={config.theme?.storageKey}
-    >
-      <AuthProvider
-        config={{
-          apiUrl: config.api.baseUrl,
-          routes: {
-            auth: config.routes.auth,
-            defaultCallback: config.routes.defaultCallback,
-            defaultAuthCallback: config.routes.defaultAuthCallback || config.routes.defaultCallback,
-          },
-        }}
-      >
-        <ErrorTrackingProvider
-          validation={validation}
-          cors={cors}
-          network={network}
-          onError={onError}
-        >
-          {children}
-        </ErrorTrackingProvider>
-      </AuthProvider>
-
-      {/* Global toast notifications */}
-      <Toaster />
-    </ThemeProvider>
-  );
-}

package/src/layouts/AppLayout/providers/index.ts

@@ -1,5 +0,0 @@
-/**
- * Providers Module
- */
-
-export * from './CoreProviders';