@djangocfg/layouts 1.4.30 → 2.0.2

package/src/layouts/_components/UserMenu.tsx

@@ -0,0 +1,160 @@
+/**
+ * User Menu Component for Layouts
+ *
+ * Simplified user menu component that works without AppContext
+ * Uses only useAuth() hook
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { User, LogOut, Settings } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+} from '@djangocfg/ui/components';
+import { useAuth } from '../../auth';
+
+export interface UserMenuProps {
+  variant?: 'desktop' | 'mobile';
+  profilePath?: string;
+  dashboardPath?: string;
+  authPath?: string;
+}
+
+export function UserMenu({
+  variant = 'desktop',
+  profilePath = '/profile',
+  dashboardPath = '/dashboard',
+  authPath = '/auth',
+}: UserMenuProps) {
+  const { user, isAuthenticated, logout } = useAuth();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  if (!isAuthenticated || !user) {
+    // Guest user - show sign in button
+    if (variant === 'mobile') {
+      return (
+        <Link href={authPath}>
+          <Button variant="default" className="w-full">
+            Sign In
+          </Button>
+        </Link>
+      );
+    }
+    return (
+      <Link href={authPath}>
+        <Button variant="default" size="sm">
+          Sign In
+        </Button>
+      </Link>
+    );
+  }
+
+  // Authenticated user
+  const displayName = user.display_username || user.email || 'User';
+  const userInitial = displayName.charAt(0).toUpperCase();
+  const userAvatar = user.avatar || '';
+
+  if (variant === 'mobile') {
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center gap-3 px-4 py-3">
+          <Avatar className="h-10 w-10">
+            <AvatarImage src={userAvatar} alt={displayName} />
+            <AvatarFallback>{userInitial}</AvatarFallback>
+          </Avatar>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-foreground truncate">
+              {displayName}
+            </p>
+            <p className="text-xs text-muted-foreground truncate">
+              {user.email}
+            </p>
+          </div>
+        </div>
+        <div className="space-y-1">
+          {profilePath && (
+            <Link
+              href={profilePath}
+              className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors"
+            >
+              <Settings className="h-4 w-4" />
+              Profile
+            </Link>
+          )}
+          <button
+            onClick={() => logout()}
+            className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-sm transition-colors w-full text-left"
+          >
+            <LogOut className="h-4 w-4" />
+            Sign Out
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Desktop variant
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="rounded-full">
+          <Avatar className="h-8 w-8">
+            <AvatarImage src={userAvatar} alt={displayName} />
+            <AvatarFallback>{userInitial}</AvatarFallback>
+          </Avatar>
+          <span className="sr-only">User menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">{displayName}</p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {profilePath && (
+            <DropdownMenuItem asChild>
+              <Link href={profilePath} className="flex items-center">
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Profile</span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => logout()}
+          className="text-destructive focus:text-destructive"
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Sign Out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

package/src/layouts/_components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared Layout Components
+ */
+
+export { UserMenu } from './UserMenu';
+export type { UserMenuProps } from './UserMenu';
+

package/src/layouts/index.ts

@@ -1,14 +1,21 @@
-// ============================================================================
-// Layouts - Page Layout Components
-// ============================================================================
+/**
+ * Layouts exports
+ * 
+ * Simple, straightforward layout components
+ * Import and use directly with props - no complex configs needed!
+ */
 
+// Smart layout router
+export * from './AppLayout';
+
+// Basic layouts
+export * from './PublicLayout';
+export * from './PrivateLayout';
+export * from './AuthLayout';
+export * from './AdminLayout';
 
+// Additional layouts
 export * from './ProfileLayout';
 export * from './SupportLayout';
 export * from './PaymentsLayout';
-export * from './AppLayout';
-export * from './ErrorLayout';
-export * from './SimpleLayout';
 
-// Note: CfgLayout is now part of AppLayout exports
-// Import it via: import { CfgLayout, useCfgApp } from '@djangocfg/layouts';

package/src/snippets/Analytics/AnalyticsProvider.tsx

@@ -2,7 +2,7 @@
  * AnalyticsProvider Component
  *
  * Initializes Google Analytics and auto-tracks pageviews.
- * Must be placed inside AppContextProvider and AuthProvider.
+ * Can work standalone with trackingId prop, or use AppContext if available.
  */
 
 'use client';
@@ -12,17 +12,21 @@ import { useAnalytics } from './useAnalytics';
 
 interface AnalyticsProviderProps {
   children: ReactNode;
+  /** Google Analytics tracking ID (optional if using AppContext) */
+  trackingId?: string;
 }
 
 /**
  * Analytics Provider that initializes tracking
  * Automatically:
- * - Initializes GA4 with tracking ID from config
+ * - Initializes GA4 with tracking ID from prop or config
  * - Sets user ID when authenticated
  * - Tracks page views on route changes
  */
-export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
-  useAnalytics(); // Initialize and auto-track
+export function AnalyticsProvider({ children, trackingId }: AnalyticsProviderProps) {
+  // If trackingId is provided as prop, use it directly
+  // Otherwise, useAnalytics will try to get it from AppContext
+  useAnalytics(trackingId);
   return <>{children}</>;
 }
 

package/src/snippets/Analytics/useAnalytics.ts

@@ -9,9 +9,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
 import ReactGA from 'react-ga4';
-import { useAppContext } from '../../layouts/AppLayout/context';
 import { useAuth } from '../../auth';
 
 // Check if we're in production
@@ -99,12 +98,12 @@ export const Analytics = {
  * event('button_click', { category: 'engagement', label: 'signup' });
  * ```
  */
-export function useAnalytics() {
-  const router = useRouter();
-  const { config } = useAppContext();
+export function useAnalytics(trackingIdProp?: string) {
+  const pathname = usePathname();
   const { user, isAuthenticated } = useAuth();
 
-  const trackingId = config.analytics?.googleTrackingId;
+  // Use trackingId from prop (passed from AppLayout)
+  const trackingId = trackingIdProp;
   const isEnabled = isProduction && Boolean(trackingId);
 
   // Initialize GA4
@@ -119,23 +118,14 @@ export function useAnalytics() {
     Analytics.setUser(String(user.id));
   }, [isEnabled, isAuthenticated, user?.id]);
 
-  // Auto-track page views on route change
+  // Auto-track page views on route change (App Router)
   useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled || typeof window === 'undefined') return;
 
-    // Track initial page view
-    Analytics.pageview(window.location.pathname + window.location.search);
-
-    // Track on route change
-    const handleRouteChange = (url: string) => {
-      Analytics.pageview(url);
-    };
-
-    router.events.on('routeChangeComplete', handleRouteChange);
-    return () => {
-      router.events.off('routeChangeComplete', handleRouteChange);
-    };
-  }, [router.events, isEnabled]);
+    // Track page view when pathname changes
+    const url = pathname + (window.location.search || '');
+    Analytics.pageview(url);
+  }, [pathname, isEnabled]);
 
   return {
     isEnabled,

package/src/snippets/Chat/ChatWidget.tsx

@@ -7,7 +7,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import {useRouter} from 'next/router';
+import { usePathname } from 'next/navigation';
 import { Card, CardContent, CardHeader, Button, useIsMobile, useLocalStorage } from '@djangocfg/ui';
 import {
   MessageSquare,
@@ -49,7 +49,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
     toggleTimestamps,
   } = useChatUI();
 
-  const router = useRouter();
+  const pathname = usePathname();
   const isMobile = useIsMobile();
   
   const [isLoading, setIsLoading] = useState(false);
@@ -66,8 +66,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
     []
   );
 
-  const isSupport = router.pathname.startsWith('/private/support');
-  const isContact = router.pathname.startsWith('/private/contact');
+  const isSupport = pathname.startsWith('/private/support');
+  const isContact = pathname.startsWith('/private/contact');
 
   // Mount portal target
   useEffect(() => {

package/src/snippets/ContactForm/ContactFormProvider.tsx

@@ -50,31 +50,44 @@ export function ContactFormProvider({ children, apiUrl }: ContactFormProviderPro
   const [error, setError] = useState<Error | null>(null);
   const [lastResponse, setLastResponse] = useState<LeadSubmissionResult | null>(null);
 
-  // Configure API on mount
-  useEffect(() => {
-    configureAPI({ baseUrl: apiUrl });
-  }, [apiUrl]);
+  // Always use local API route to avoid CORS issues
+  // Pass apiUrl in request body so route.ts knows where to proxy
 
-  // Submit function using generated fetcher
+  // Submit function - always uses local API route
   const submit = useCallback(async (data: LeadSubmissionData): Promise<LeadSubmissionResult> => {
     setIsSubmitting(true);
     setError(null);
 
     try {
-      // Use the generated fetcher which handles Zod validation
-      const response = await createLeadsSubmitCreate({
-        name: data.name,
-        email: data.email,
-        message: data.message,
-        company: data.company ?? undefined,
-        company_site: data.company_site ?? undefined,
-        contact_type: data.contact_type ? CONTACT_TYPE_MAP[data.contact_type] : undefined,
-        contact_value: data.contact_value ?? undefined,
-        subject: data.subject ?? undefined,
-        extra: data.extra ?? undefined,
-        site_url: data.site_url,
+      // Always use local Next.js API route to avoid CORS issues
+      // Pass apiUrl from ContactPage in the request body so route.ts knows where to proxy
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          _apiUrl: apiUrl || '', // Pass apiUrl to route.ts for proxying (can be empty for fallback)
+          name: data.name,
+          email: data.email,
+          message: data.message,
+          company: data.company,
+          company_site: data.company_site,
+          contact_type: data.contact_type,
+          contact_value: data.contact_value,
+          subject: data.subject,
+          extra: data.extra,
+          site_url: data.site_url || (typeof window !== 'undefined' ? window.location.origin : undefined),
+        }),
       });
 
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({ message: 'Failed to submit contact form' }));
+        throw new Error(errorData.message || `HTTP ${res.status}`);
+      }
+
+      const response: LeadSubmissionResult = await res.json();
+
       const result: LeadSubmissionResult = {
         success: response.success,
         message: response.message,
@@ -90,7 +103,7 @@ export function ContactFormProvider({ children, apiUrl }: ContactFormProviderPro
     } finally {
       setIsSubmitting(false);
     }
-  }, []);
+  }, [apiUrl]);
 
   // Reset error state
   const resetError = useCallback(() => {
@@ -98,7 +111,7 @@ export function ContactFormProvider({ children, apiUrl }: ContactFormProviderPro
   }, []);
 
   const value: ContactFormContextValue = {
-    apiUrl,
+    apiUrl: '/api/contact', // Always use local endpoint
     submit,
     isSubmitting,
     error,

package/src/snippets/ContactForm/ContactPage.tsx

@@ -10,10 +10,8 @@ import type { ContactDetail, LeadSubmissionResult } from './types';
 // Config
 // ============================================================================
 
-const isDev = process.env.NODE_ENV === 'development';
-
 const DEFAULT_CONFIG = {
-  apiUrl: isDev ? 'http://localhost:8000' : 'https://api.reforms.ai',
+  apiUrl: 'https://api.reforms.ai',
   email: 'markolofsen@gmail.com',
   whatsapp: '+62 813 39646301',
   calendly: 'https://calendly.com/markolofsen/meeting',
@@ -24,7 +22,7 @@ const DEFAULT_CONFIG = {
 // ============================================================================
 
 export interface ContactPageProps {
-  /** Override API URL */
+  /** Override API URL (defaults to DEFAULT_CONFIG.apiUrl) */
   apiUrl?: string;
   /** Override email */
   email?: string;

package/src/snippets/ContactForm/types.ts

@@ -19,9 +19,10 @@ export interface ContactFormProviderProps {
   children: ReactNode;
   /**
    * API base URL for lead submission
-   * @example "https://api.example.com"
+   * If not provided or empty, will use local Next.js API route (/api/contact)
+   * @example "https://api.example.com" or undefined to use /api/contact
    */
-  apiUrl: string;
+  apiUrl?: string;
 }
 
 // ============================================================================

package/src/snippets/index.ts

@@ -7,6 +7,5 @@ export type { ChatWidgetProps, ChatUIState } from './Chat';
 
 export * from './Breadcrumbs';
 export * from './AuthDialog';
-export * from './VideoPlayer';
 export * from './ContactForm';
 export * from './Analytics';

package/src/layouts/AppLayout/README.md

@@ -1,204 +0,0 @@
-# AppLayout - Unified Application Layout System
-
-Умный самодостаточный компонент для управления всеми layout'ами приложения.
-
-## 📁 Структура
-
-```
-AppLayout/
-├── types/                  # Все типы
-│   ├── config.ts          # AppLayoutConfig
-│   ├── layout.ts          # PublicLayoutConfig, PrivateLayoutConfig
-│   ├── navigation.ts      # NavigationItem, DashboardMenuItem
-│   ├── routes.ts          # RouteConfig, RouteDetectors
-│   └── index.ts
-│
-├── context/                # Unified App Context
-│   ├── AppContext.tsx     # Главный контекст приложения
-│   └── index.ts
-│
-├── hooks/                  # Custom hooks
-│   ├── useLayoutMode.ts   # Определение текущего режима
-│   ├── useNavigation.ts   # Навигационные хуки
-│   └── index.ts
-│
-├── providers/              # Provider components
-│   ├── ThemeProvider.tsx  # Тема
-│   ├── AuthProvider.tsx   # Аутентификация
-│   └── index.ts
-│
-├── layouts/                # Layout renderers
-│   ├── PublicLayout/      # Публичный layout
-│   ├── PrivateLayout/     # Приватный layout (Dashboard)
-│   ├── AuthLayout/        # Auth layout (минимальный)
-│   └── index.ts
-│
-├── components/             # UI components
-│   ├── Seo.tsx           # SEO meta tags
-│   ├── PageProgress.tsx  # Loading bar
-│   └── index.ts
-│
-├── utils/                  # Utilities
-│   ├── routeDetection.ts # Определение типа маршрута
-│   └── index.ts
-│
-├── AppLayout.tsx          # Главный компонент
-├── index.ts               # Public exports
-└── README.md              # Документация
-```
-
-## 🎯 Основная идея
-
-**Единая точка входа** - один компонент `<AppLayout>` управляет всем:
-- Автоматически определяет тип страницы (public/private/auth)
-- Применяет нужный layout
-- Управляет состоянием через единый контекст
-- Предоставляет хуки для доступа к функционалу
-
-## 🚀 Использование
-
-### В _app.tsx (единственное место подключения)
-
-```tsx
-import { AppLayout } from '@djangocfg/layouts';
-import { appLayoutConfig } from '@/core/appLayoutConfig';
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <AppLayout config={appLayoutConfig}>
-      <Component {...pageProps} />
-    </AppLayout>
-  );
-}
-```
-
-### Конфигурация
-
-```tsx
-// core/appLayoutConfig.ts
-import type { AppLayoutConfig } from '@djangocfg/layouts';
-
-export const appLayoutConfig: AppLayoutConfig = {
-  app: {
-    name: 'My App',
-    logoPath: '/logo.svg',
-  },
-  api: {
-    baseUrl: process.env.NEXT_PUBLIC_API_URL,
-  },
-  routes: {
-    auth: '/auth',
-    defaultCallback: '/dashboard',
-    detectors: {
-      isPublicRoute: (path) => !path.startsWith('/private'),
-      isPrivateRoute: (path) => path.startsWith('/private'),
-      isAuthRoute: (path) => path.startsWith('/auth'),
-      getUnauthenticatedRedirect: (path) =>
-        path.startsWith('/private') ? '/auth' : null,
-      getPageTitle: (path) => 'My App',
-    },
-  },
-  publicLayout: {
-    navigation: { /* ... */ },
-    userMenu: { /* ... */ },
-    footer: { /* ... */ },
-  },
-  privateLayout: {
-    menuGroups: [ /* ... */ ],
-    showChat: true,
-  },
-};
-```
-
-## 🎨 Использование в компонентах
-
-### Доступ к контексту
-
-```tsx
-import { useAppContext } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const {
-    config,
-    layoutMode,
-    mobileMenuOpen,
-    toggleMobileMenu
-  } = useAppContext();
-
-  return (
-    <button onClick={toggleMobileMenu}>
-      {layoutMode === 'private' ? 'Dashboard' : 'Home'}
-    </button>
-  );
-}
-```
-
-### Использование хуков
-
-```tsx
-import { useLayoutMode, useNavigation } from '@djangocfg/layouts';
-
-function MyComponent() {
-  const mode = useLayoutMode(); // 'public' | 'private' | 'auth'
-  const { isActive } = useNavigation();
-
-  if (mode === 'private') {
-    return <DashboardView />;
-  }
-
-  return <PublicView />;
-}
-```
-
-## 🏗️ Архитектурные принципы
-
-### 1. Single Source of Truth
-Вся конфигурация в одном месте - `AppLayoutConfig`
-
-### 2. Context над Props
-Никакого prop drilling - всё через `useAppContext()`
-
-### 3. Декомпозиция
-Каждая папка отвечает за свою область:
-- `types/` - только типы
-- `context/` - состояние и контекст
-- `hooks/` - переиспользуемая логика
-- `layouts/` - рендеринг layout'ов
-- `components/` - UI компоненты
-
-### 4. Автоматизация
-Layout определяется автоматически на основе маршрута
-
-### 5. Расширяемость
-Легко добавить новый layout или функционал
-
-## 📦 Экспорты
-
-```tsx
-// Главный компонент
-export { AppLayout } from './AppLayout';
-
-// Контекст и хуки
-export { useAppContext } from './context';
-export { useLayoutMode, useNavigation } from './hooks';
-
-// Типы
-export type {
-  AppLayoutConfig,
-  PublicLayoutConfig,
-  PrivateLayoutConfig,
-  RouteConfig,
-  NavigationItem,
-  DashboardMenuItem,
-} from './types';
-```
-
-## 🎯 Преимущества
-
-✅ **Одно место подключения** - только в `_app.tsx`
-✅ **Нет prop drilling** - всё через контекст
-✅ **Автоматический роутинг** - layout определяется сам
-✅ **Типобезопасность** - TypeScript везде
-✅ **Легкая настройка** - один конфиг объект
-✅ **Декомпозиция** - чистая структура папок
-✅ **Переиспользование** - хуки для всего