@djangocfg/layouts 1.4.27 → 1.4.28

package/src/layouts/UILayout/components/layout/Header/HeaderMobile.tsx

@@ -1,71 +0,0 @@
-/**
- * HeaderMobile Component
- * Mobile version of the header
- */
-
-'use client';
-
-import React from 'react';
-import { Button } from '@djangocfg/ui';
-import { Menu, X } from 'lucide-react';
-import { CopyAIButton } from './CopyAIButton';
-
-interface HeaderMobileProps {
-  /** Project name */
-  projectName?: string;
-  /** Logo component */
-  logo?: React.ReactNode;
-  /** Is sidebar open */
-  isSidebarOpen?: boolean;
-  /** Toggle sidebar callback */
-  onToggleSidebar?: () => void;
-  /** Copy for AI callback - must return string */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Mobile Header
- * Compact header for mobile devices with hamburger menu
- */
-export function HeaderMobile({
-  projectName = 'Django CFG',
-  logo,
-  isSidebarOpen = false,
-  onToggleSidebar,
-  onCopyForAI,
-}: HeaderMobileProps) {
-  return (
-    <header className="w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="flex h-14 items-center px-4 gap-4">
-        {/* Hamburger Menu Button */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-9 w-9"
-          onClick={onToggleSidebar}
-          aria-label={isSidebarOpen ? 'Close menu' : 'Open menu'}
-        >
-          {isSidebarOpen ? (
-            <X className="h-5 w-5" />
-          ) : (
-            <Menu className="h-5 w-5" />
-          )}
-        </Button>
-
-        {/* Logo and Project Name */}
-        <div className="flex items-center gap-2 flex-1">
-          {logo}
-          <span className="font-semibold text-sm">{projectName}</span>
-        </div>
-
-        {/* Copy for AI Button */}
-        <CopyAIButton
-          onCopyForAI={onCopyForAI}
-          size="sm"
-          showLabel={false}
-          className="gap-2"
-        />
-      </div>
-    </header>
-  );
-}

package/src/layouts/UILayout/components/layout/Header/TestValidationButton.tsx

@@ -1,268 +0,0 @@
-/**
- * TestValidationButton Component
- *
- * Developer tool for testing Zod validation error events
- * Dispatches mock CustomEvent to test ValidationErrorProvider
- *
- * Only visible in development mode
- */
-
-'use client';
-
-import React, { useState } from 'react';
-import { Button } from '@djangocfg/ui';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@djangocfg/ui';
-import { Bug, AlertCircle } from 'lucide-react';
-
-/**
- * Mock Zod error factory
- */
-function createMockZodError(type: 'simple' | 'multiple' | 'nested' | 'array') {
-  const errors: Record<string, any> = {
-    simple: {
-      issues: [
-        {
-          path: ['email'],
-          message: 'Invalid email format',
-          code: 'invalid_string',
-          expected: 'email',
-          received: 'string',
-        }
-      ]
-    },
-    multiple: {
-      issues: [
-        {
-          path: ['email'],
-          message: 'Invalid email format',
-          code: 'invalid_string',
-        },
-        {
-          path: ['age'],
-          message: 'Number must be greater than 0',
-          code: 'too_small',
-          minimum: 0,
-        },
-        {
-          path: ['username'],
-          message: 'Required field',
-          code: 'invalid_type',
-          expected: 'string',
-          received: 'undefined',
-        }
-      ]
-    },
-    nested: {
-      issues: [
-        {
-          path: ['address', 'street'],
-          message: 'Street is required',
-          code: 'invalid_type',
-        },
-        {
-          path: ['address', 'zipCode'],
-          message: 'Invalid zip code format',
-          code: 'invalid_string',
-        }
-      ]
-    },
-    array: {
-      issues: [
-        {
-          path: ['items', 0, 'quantity'],
-          message: 'Quantity must be at least 1',
-          code: 'too_small',
-          minimum: 1,
-        },
-        {
-          path: ['items', 1, 'price'],
-          message: 'Price is required',
-          code: 'invalid_type',
-        }
-      ]
-    },
-  };
-
-  return errors[type];
-}
-
-/**
- * Dispatch validation error event
- */
-function dispatchValidationError(type: 'simple' | 'multiple' | 'nested' | 'array') {
-  const operations: Record<string, { operation: string; path: string; method: string; response: any }> = {
-    simple: {
-      operation: 'createUser',
-      path: '/api/users',
-      method: 'POST',
-      response: { email: 'not-an-email@' },
-    },
-    multiple: {
-      operation: 'updateProfile',
-      path: '/api/profile/123',
-      method: 'PATCH',
-      response: { email: 'bad', age: -5 },
-    },
-    nested: {
-      operation: 'createAddress',
-      path: '/api/addresses',
-      method: 'POST',
-      response: { address: { street: null, zipCode: '12' } },
-    },
-    array: {
-      operation: 'createOrder',
-      path: '/api/orders',
-      method: 'POST',
-      response: { items: [{ quantity: 0 }, { price: undefined }] },
-    },
-  };
-
-  const config = operations[type];
-  const error = createMockZodError(type);
-
-  const event = new CustomEvent('zod-validation-error', {
-    detail: {
-      operation: config.operation,
-      path: config.path,
-      method: config.method,
-      error: error,
-      response: config.response,
-      timestamp: new Date(),
-    },
-    bubbles: true,
-    cancelable: false,
-  });
-
-  window.dispatchEvent(event);
-
-  console.group('🧪 Test Validation Error Dispatched');
-  console.log('Type:', type);
-  console.log('Operation:', config.operation);
-  console.log('Endpoint:', config.method, config.path);
-  console.log('Issues:', error.issues);
-  console.groupEnd();
-}
-
-export interface TestValidationButtonProps {
-  /** Show in production (default: false - dev only) */
-  showInProduction?: boolean;
-  /** Button size */
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-  /** Additional CSS classes */
-  className?: string;
-  /** Always show label (default: responsive - hidden on mobile) */
-  showLabel?: boolean;
-}
-
-/**
- * Test Validation Button
- *
- * Dropdown menu with different validation error test cases
- * Only visible in development by default
- */
-export function TestValidationButton({
-  showInProduction = false,
-  size = 'sm',
-  className,
-  showLabel = false,
-}: TestValidationButtonProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Hide in production unless explicitly enabled
-  if (!showInProduction && process.env.NODE_ENV === 'production') {
-    return null;
-  }
-
-  return (
-    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size={size}
-          className={className}
-        >
-          <Bug className="h-4 w-4" />
-          <span className={showLabel ? "ml-2" : "ml-2 hidden sm:inline"}>Test Validation</span>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="end" className="w-[240px]">
-        <DropdownMenuLabel className="flex items-center gap-2">
-          <AlertCircle className="h-4 w-4 text-orange-500" />
-          <span>Test Validation Errors</span>
-        </DropdownMenuLabel>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          onClick={() => {
-            dispatchValidationError('simple');
-            setIsOpen(false);
-          }}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="font-medium">Simple Error</div>
-            <div className="text-xs text-muted-foreground">
-              Single field validation
-            </div>
-          </div>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem
-          onClick={() => {
-            dispatchValidationError('multiple');
-            setIsOpen(false);
-          }}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="font-medium">Multiple Errors</div>
-            <div className="text-xs text-muted-foreground">
-              3 validation errors
-            </div>
-          </div>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem
-          onClick={() => {
-            dispatchValidationError('nested');
-            setIsOpen(false);
-          }}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="font-medium">Nested Object</div>
-            <div className="text-xs text-muted-foreground">
-              Nested property errors
-            </div>
-          </div>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem
-          onClick={() => {
-            dispatchValidationError('array');
-            setIsOpen(false);
-          }}
-        >
-          <div className="flex flex-col gap-1">
-            <div className="font-medium">Array Validation</div>
-            <div className="text-xs text-muted-foreground">
-              Array item errors
-            </div>
-          </div>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <div className="px-2 py-1.5 text-xs text-muted-foreground">
-          💡 Check console and toast notifications
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/layouts/UILayout/components/layout/Header/index.ts

@@ -1,11 +0,0 @@
-/**
- * Header Components
- */
-
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export { HeaderMobile } from './HeaderMobile';
-export { HeaderDesktop } from './HeaderDesktop';
-export { CopyAIButton } from './CopyAIButton';
-export { TestValidationButton } from './TestValidationButton';
-export type { TestValidationButtonProps } from './TestValidationButton';

package/src/layouts/UILayout/components/layout/MobileOverlay/MobileOverlay.tsx

@@ -1,47 +0,0 @@
-/**
- * MobileOverlay Component
- * Dark overlay for mobile sidebar
- */
-
-'use client';
-
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '@djangocfg/ui/lib';
-
-export interface MobileOverlayProps {
-  /** Is overlay visible */
-  isOpen?: boolean;
-  /** Close callback */
-  onClose?: () => void;
-}
-
-/**
- * Mobile Overlay
- * Darkens background when mobile sidebar is open
- * Closes sidebar when clicked
- */
-export function MobileOverlay({ isOpen = false, onClose }: MobileOverlayProps) {
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!isOpen || !mounted || typeof window === 'undefined') {
-    return null;
-  }
-
-  return createPortal(
-    <div
-      className={cn(
-        'fixed inset-0 z-150 transition-opacity duration-300',
-        isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-      )}
-      style={{ backgroundColor: 'rgb(0 0 0 / 0.5)' }}
-      onClick={onClose}
-      aria-hidden="true"
-    />,
-    document.body
-  );
-}

package/src/layouts/UILayout/components/layout/MobileOverlay/index.ts

@@ -1,6 +0,0 @@
-/**
- * MobileOverlay Components
- */
-
-export { MobileOverlay } from './MobileOverlay';
-export type { MobileOverlayProps } from './MobileOverlay';

package/src/layouts/UILayout/components/layout/Sidebar/Sidebar.tsx

@@ -1,95 +0,0 @@
-/**
- * Sidebar Component
- * Navigation sidebar for component categories
- * Desktop: sticky with react-sticky-box
- * Mobile: Drawer component (Vaul-based)
- */
-
-'use client';
-
-import React from 'react';
-import { useIsMobile, Sticky, Drawer, DrawerContent } from '@djangocfg/ui';
-import type { ComponentCategory } from '../../../types';
-import { SidebarContent } from './SidebarContent';
-
-export interface SidebarProps {
-  /** Available categories */
-  categories: ComponentCategory[];
-  /** Current selected category */
-  currentCategory?: string;
-  /** Category change callback */
-  onCategoryChange?: (categoryId: string) => void;
-  /** Is sidebar open (mobile only) */
-  isOpen?: boolean;
-  /** Close sidebar callback (mobile only) */
-  onClose?: () => void;
-  /** Function to generate AI context */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Sidebar Component
- * Desktop: Always visible static sidebar
- * Mobile: Drawer-based sidebar with slide animation
- */
-export function Sidebar({
-  categories,
-  currentCategory,
-  onCategoryChange,
-  isOpen = false,
-  onClose,
-  onCopyForAI,
-}: SidebarProps) {
-  const isMobile = useIsMobile();
-
-  // Desktop sidebar - uses react-sticky-box via Sticky component
-  // Sticks to viewport top (with navbar offset) but stops at parent container boundary (footer)
-  // Parent UILayout has isolate + zIndex:0 to prevent overlapping navbar
-  if (!isMobile) {
-    return (
-      <div
-        className="w-64 flex-shrink-0 self-stretch bg-background"
-        style={{ boxShadow: '-1px 0 0 0 hsl(var(--border))' }}
-      >
-        <Sticky
-          offsetTop={56}
-          offsetBottom={0}
-          disableOnMobile={false}
-          className="w-64"
-        >
-          <aside
-            className="overflow-y-auto w-64 bg-background"
-            style={{ maxHeight: 'calc(100vh - 56px)' }}
-          >
-            <SidebarContent
-              categories={categories}
-              currentCategory={currentCategory}
-              onCategoryChange={onCategoryChange}
-              isMobile={false}
-              onCopyForAI={onCopyForAI}
-            />
-          </aside>
-        </Sticky>
-      </div>
-    );
-  }
-
-  // Mobile sidebar - uses Drawer component (Vaul-based)
-  return (
-    <Drawer
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose?.()}
-      direction="right"
-    >
-      <DrawerContent direction="right" className="w-64">
-        <SidebarContent
-          categories={categories}
-          currentCategory={currentCategory}
-          onCategoryChange={onCategoryChange}
-          isMobile={true}
-          onCopyForAI={onCopyForAI}
-        />
-      </DrawerContent>
-    </Drawer>
-  );
-}

package/src/layouts/UILayout/components/layout/Sidebar/SidebarCategory.tsx

@@ -1,54 +0,0 @@
-/**
- * SidebarCategory Component
- * Single category item in sidebar navigation
- */
-
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui/lib';
-import type { ComponentCategory } from '../../../types';
-import { CountBadge } from '../../shared/Badge';
-
-interface SidebarCategoryProps {
-  /** Category data */
-  category: ComponentCategory;
-  /** Is this category active */
-  active?: boolean;
-  /** Click handler */
-  onClick?: () => void;
-}
-
-/**
- * Sidebar Category Item
- * Displays a category with icon, label, and optional count badge
- */
-export function SidebarCategory({
-  category,
-  active = false,
-  onClick,
-}: SidebarCategoryProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
-        active
-          ? 'bg-primary text-primary-foreground'
-          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-      )}
-      title={category.description}
-    >
-      {/* Icon */}
-      <span className="flex-shrink-0">{category.icon}</span>
-
-      {/* Label */}
-      <span className="flex-1 text-left break-words">{category.label}</span>
-
-      {/* Count Badge */}
-      {category.count !== undefined && (
-        <CountBadge count={category.count} active={active} />
-      )}
-    </button>
-  );
-}

package/src/layouts/UILayout/components/layout/Sidebar/SidebarContent.tsx

@@ -1,93 +0,0 @@
-/**
- * SidebarContent Component
- * Main content of the sidebar (logo, navigation, footer)
- */
-
-'use client';
-
-import React from 'react';
-import type { ComponentCategory } from '../../../types';
-import { SidebarCategory } from './SidebarCategory';
-import { CopyAIButton } from '../Header/CopyAIButton';
-import { TestValidationButton } from '../Header/TestValidationButton';
-
-interface SidebarContentProps {
-  /** Available categories */
-  categories: ComponentCategory[];
-  /** Current selected category */
-  currentCategory?: string;
-  /** Category change callback */
-  onCategoryChange?: (categoryId: string) => void;
-  /** Is mobile view */
-  isMobile: boolean;
-  /** Function to generate AI context */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Sidebar Content
- * Contains logo (desktop only), navigation, and footer
- */
-export function SidebarContent({
-  categories,
-  currentCategory,
-  onCategoryChange,
-  isMobile,
-  onCopyForAI,
-}: SidebarContentProps) {
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-
-      {/* Developer Tools */}
-      {!isMobile && (
-        <div className="border-b flex-shrink-0 px-4 py-3 flex gap-2">
-          {onCopyForAI && (
-            <CopyAIButton
-              onCopyForAI={onCopyForAI}
-              size="sm"
-              showLabel
-              className="flex-1"
-            />
-          )}
-          <TestValidationButton
-            size="sm"
-            showLabel={false}
-          />
-        </div>
-      )}
-
-      {/* Navigation */}
-      <div className="flex-1 overflow-y-auto scrollbar-thin">
-        <div className="p-4">
-          <nav>
-            {/* Section Header */}
-            <div className="mb-4">
-              <h3 className="mb-2 px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                Component Categories
-              </h3>
-            </div>
-
-            {/* Categories List */}
-            <div className="space-y-1">
-              {categories.map((category) => (
-                <SidebarCategory
-                  key={category.id}
-                  category={category}
-                  active={currentCategory === category.id}
-                  onClick={() => onCategoryChange?.(category.id)}
-                />
-              ))}
-            </div>
-          </nav>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="border-t p-4 bg-muted/30">
-        <p className="text-xs text-muted-foreground">
-          Built with Tailwind CSS v4
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/layouts/UILayout/components/layout/Sidebar/SidebarFooter.tsx

@@ -1,49 +0,0 @@
-/**
- * SidebarFooter Component
- * Footer section with developer tools (Copy for AI, Test Validation)
- */
-
-'use client';
-
-import React from 'react';
-import { CopyAIButton } from '../Header/CopyAIButton';
-import { TestValidationButton } from '../Header/TestValidationButton';
-
-export interface SidebarFooterProps {
-  /** Function to generate AI context */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Sidebar Footer
- * Developer tools: Copy for AI and Test Validation buttons
- */
-export function SidebarFooter({ onCopyForAI }: SidebarFooterProps) {
-  return (
-    <div className="border-t p-4 bg-muted/30 space-y-3">
-      {/* Developer Tools */}
-      <div className="flex flex-col gap-2">
-        {onCopyForAI && (
-          <CopyAIButton
-            onCopyForAI={onCopyForAI}
-            size="sm"
-            showLabel
-            className="w-full justify-start"
-          />
-        )}
-        <TestValidationButton
-          size="sm"
-          showLabel
-          className="w-full justify-start"
-        />
-      </div>
-
-      {/* Tailwind v4 info */}
-      <div className="pt-2 border-t border-border/50">
-        <p className="text-xs text-muted-foreground">
-          Built with Tailwind CSS v4
-        </p>
-      </div>
-    </div>
-  );
-}