@djangocfg/layouts 1.0.1

package/src/layouts/index.ts

@@ -0,0 +1,9 @@
+// ============================================================================
+// Layouts - Page Layout Components
+// ============================================================================
+
+
+export * from './ProfileLayout';
+export * from './SupportLayout';
+export * from './PaymentsLayout';
+export * from './AppLayout';

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { LogIn } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@djangocfg/ui/components';
+import { useEventListener } from '@djangocfg/ui/hooks';
+
+// Re-export events for backwards compatibility
+export const DIALOG_EVENTS = {
+  OPEN_AUTH_DIALOG: 'OPEN_AUTH_DIALOG',
+  CLOSE_AUTH_DIALOG: 'CLOSE_AUTH_DIALOG',
+  AUTH_SUCCESS: 'AUTH_SUCCESS',
+  AUTH_FAILURE: 'AUTH_FAILURE',
+} as const;
+
+interface AuthDialogProps {
+  onAuthRequired?: () => void;
+  authPath?: string;
+}
+
+export const AuthDialog: React.FC<AuthDialogProps> = ({
+  onAuthRequired,
+  authPath = '/auth'
+}) => {
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState<string>('Please sign in to continue');
+  const router = useRouter();
+
+  // Listen for open auth dialog event
+  useEventListener(DIALOG_EVENTS.OPEN_AUTH_DIALOG, (payload: any) => {
+    if (payload?.message) {
+      setMessage(payload.message);
+    }
+    setOpen(true);
+  });
+
+  // Listen for close auth dialog event
+  useEventListener(DIALOG_EVENTS.CLOSE_AUTH_DIALOG, () => {
+    setOpen(false);
+  });
+
+  const handleClose = () => {
+    setMessage('Please sign in to continue');
+    setOpen(false);
+  };
+
+  const handleGoToAuth = () => {
+    // Save current URL for redirect after successful auth
+    if (typeof window !== 'undefined') {
+      sessionStorage.setItem('redirectAfterAuth', window.location.pathname);
+    }
+
+    if (onAuthRequired) {
+      onAuthRequired();
+    } else {
+      router.push(authPath);
+    }
+
+    handleClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Authentication Required</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <p className="text-sm text-muted-foreground">{message}</p>
+
+          <Button onClick={handleGoToAuth} className="w-full">
+            <LogIn className="h-4 w-4 mr-2" />
+            Go to Sign In
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/snippets/AuthDialog/events.ts

@@ -0,0 +1,21 @@
+export const AUTH_EVENTS = {
+  OPEN_AUTH_DIALOG: 'OPEN_AUTH_DIALOG',
+  CLOSE_AUTH_DIALOG: 'CLOSE_AUTH_DIALOG',
+  AUTH_SUCCESS: 'AUTH_SUCCESS',
+  AUTH_FAILURE: 'AUTH_FAILURE',
+} as const;
+
+export type AuthEventType = typeof AUTH_EVENTS[keyof typeof AUTH_EVENTS];
+
+export interface OpenAuthDialogPayload {
+  message?: string;
+  redirectUrl?: string;
+}
+
+export interface AuthSuccessPayload {
+  user?: any;
+}
+
+export interface AuthFailurePayload {
+  error?: string;
+}

package/src/snippets/AuthDialog/index.ts

@@ -0,0 +1,3 @@
+export { AuthDialog, DIALOG_EVENTS } from './AuthDialog';
+export * from './events';
+export { useAuthDialog } from './useAuthDialog';

package/src/snippets/AuthDialog/useAuthDialog.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+
+import { AUTH_EVENTS, type OpenAuthDialogPayload } from './events';
+import { events } from '@djangocfg/ui';
+
+/**
+ * Hook to control auth dialog from anywhere in the app
+ */
+export function useAuthDialog() {
+  const openAuthDialog = useCallback((options?: OpenAuthDialogPayload) => {
+    events.publish({
+      type: AUTH_EVENTS.OPEN_AUTH_DIALOG,
+      payload: options,
+    });
+  }, []);
+
+  const closeAuthDialog = useCallback(() => {
+    events.publish({
+      type: AUTH_EVENTS.CLOSE_AUTH_DIALOG,
+    });
+  }, []);
+
+  return {
+    openAuthDialog,
+    closeAuthDialog,
+  };
+}

package/src/snippets/Breadcrumbs.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight, Home } from "lucide-react";
+
+export interface BreadcrumbItem {
+  path: string;
+  label: string;
+  isActive: boolean;
+}
+
+interface BreadcrumbsProps {
+  items?: BreadcrumbItem[];
+  className?: string;
+}
+
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className = "" }) => {
+  const pathname = usePathname();
+  
+  // Use provided items or generate from pathname
+  const breadcrumbs = items || generateBreadcrumbsFromPath(pathname);
+
+  if (breadcrumbs.length <= 1) {
+    return null;
+  }
+
+  return (
+    <nav className={`flex items-center space-x-2 text-sm ${className}`} aria-label="Breadcrumb">
+      <ol className="flex items-center space-x-2">
+        {breadcrumbs.map((item: BreadcrumbItem, index: number) => (
+          <li key={item.path} className="flex items-center">
+            {index > 0 && (
+              <ChevronRight className="w-4 h-4 text-gray-400 mx-2" />
+            )}
+            
+            {item.isActive ? (
+              <span className="text-gray-900 dark:text-white font-medium flex items-center gap-1">
+                {index === 0 && <Home className="w-4 h-4" />}
+                {item.label}
+              </span>
+            ) : (
+              <Link
+                href={item.path}
+                className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 
+                         transition-colors duration-200 flex items-center gap-1 hover:underline"
+              >
+                {index === 0 && <Home className="w-4 h-4" />}
+                {item.label}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
+
+// Helper function to generate breadcrumbs from pathname
+function generateBreadcrumbsFromPath(pathname: string): BreadcrumbItem[] {
+  const segments = pathname.split('/').filter(Boolean);
+  const breadcrumbs: BreadcrumbItem[] = [
+    { path: '/', label: 'Home', isActive: pathname === '/' }
+  ];
+
+  let currentPath = '';
+  segments.forEach((segment, index) => {
+    currentPath += `/${segment}`;
+    breadcrumbs.push({
+      path: currentPath,
+      label: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
+      isActive: index === segments.length - 1
+    });
+  });
+
+  return breadcrumbs;
+}
+
+export default Breadcrumbs;
+export { generateBreadcrumbsFromPath };

package/src/snippets/Chat/ChatUIContext.tsx

@@ -0,0 +1,110 @@
+/**
+ * Chat UI Context
+ * Manages UI state for chat widget (toggle, expand, minimize)
+ */
+
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import type { ChatUIState } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ChatUIContextValue {
+  uiState: ChatUIState;
+  toggleChat: () => void;
+  openChat: () => void;
+  closeChat: () => void;
+  expandChat: () => void;
+  collapseChat: () => void;
+  minimizeChat: () => void;
+  toggleSources: () => void;
+  toggleTimestamps: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const ChatUIContext = createContext<ChatUIContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface ChatUIProviderProps {
+  children: ReactNode;
+  initialState?: Partial<ChatUIState>;
+}
+
+export function ChatUIProvider({ children, initialState }: ChatUIProviderProps) {
+  const [uiState, setUIState] = useState<ChatUIState>({
+    isOpen: false,
+    isExpanded: false,
+    isMinimized: false,
+    showSources: true,
+    showTimestamps: false,
+    ...initialState,
+  });
+
+  const toggleChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isOpen: !prev.isOpen }));
+  }, []);
+
+  const openChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isOpen: true }));
+  }, []);
+
+  const closeChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const expandChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isExpanded: true, isMinimized: false }));
+  }, []);
+
+  const collapseChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isExpanded: false }));
+  }, []);
+
+  const minimizeChat = useCallback(() => {
+    setUIState((prev) => ({ ...prev, isMinimized: true, isExpanded: false }));
+  }, []);
+
+  const toggleSources = useCallback(() => {
+    setUIState((prev) => ({ ...prev, showSources: !prev.showSources }));
+  }, []);
+
+  const toggleTimestamps = useCallback(() => {
+    setUIState((prev) => ({ ...prev, showTimestamps: !prev.showTimestamps }));
+  }, []);
+
+  const value: ChatUIContextValue = {
+    uiState,
+    toggleChat,
+    openChat,
+    closeChat,
+    expandChat,
+    collapseChat,
+    minimizeChat,
+    toggleSources,
+    toggleTimestamps,
+  };
+
+  return <ChatUIContext.Provider value={value}>{children}</ChatUIContext.Provider>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useChatUI(): ChatUIContextValue {
+  const context = useContext(ChatUIContext);
+  if (!context) {
+    throw new Error('useChatUI must be used within ChatUIProvider');
+  }
+  return context;
+}
+