@djangocfg/layouts 1.4.26 → 1.4.28

package/src/layouts/UILayout/components/TailwindGuideRenderer.tsx

@@ -1,138 +0,0 @@
-/**
- * TailwindGuideRenderer
- * Renders Tailwind CSS v4 guide from config
- */
-
-'use client';
-
-import React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui/tools';
-import { TAILWIND_GUIDE } from '../config';
-import { CategorySection } from './AutoComponentDemo';
-
-/**
- * TailwindGuideRenderer - Dynamically renders Tailwind guide from config
- */
-export function TailwindGuideRenderer() {
-  return (
-    <CategorySection
-      title="Tailwind CSS v4 Guide"
-      description="Everything you need to know about migrating to and using Tailwind CSS v4"
-    >
-      {/* Key Changes */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Key Changes in Tailwind CSS v{TAILWIND_GUIDE.version}</CardTitle>
-          <CardDescription>
-            Major improvements and breaking changes you should know about
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ul className="list-disc list-inside space-y-2 text-muted-foreground">
-            {TAILWIND_GUIDE.keyChanges.map((change, index) => (
-              <li key={index}>{change}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* Best Practices */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Best Practices</CardTitle>
-          <CardDescription>
-            Follow these patterns for clean, maintainable code
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div>
-              <h3 className="font-semibold mb-2">✅ Recommended Patterns</h3>
-              <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-4">
-                {TAILWIND_GUIDE.bestPractices.map((practice, index) => (
-                  <li key={index}>{practice}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Migration Steps */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Migration Steps (v3 → v4)</CardTitle>
-          <CardDescription>
-            Step-by-step guide to upgrade your project
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
-            {TAILWIND_GUIDE.migrationSteps.map((step, index) => (
-              <li key={index}>{step}</li>
-            ))}
-          </ol>
-        </CardContent>
-      </Card>
-
-      {/* Examples */}
-      {TAILWIND_GUIDE.examples.map((example, index) => (
-        <Card key={index}>
-          <CardHeader>
-            <CardTitle>{example.title}</CardTitle>
-            <CardDescription>{example.description}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <PrettyCode
-              data={example.code}
-              language="css"
-              className="text-sm"
-            />
-          </CardContent>
-        </Card>
-      ))}
-
-      {/* Resources */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Official Resources</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ul className="space-y-2">
-            <li>
-              <a
-                href="https://tailwindcss.com/docs/upgrade-guide"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                Official Upgrade Guide
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://tailwindcss.com/docs/guides/nextjs"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                Next.js Integration Guide
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://tailwindcss.com/blog/tailwindcss-v4"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                Tailwind CSS v4.0 Release Notes
-              </a>
-            </li>
-          </ul>
-        </CardContent>
-      </Card>
-    </CategorySection>
-  );
-}

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

@@ -1,15 +0,0 @@
-/**
- * UILayout Components
- * All UI components for UILayout
- */
-
-// Layout components
-export * from './layout';
-
-// Shared components
-export * from './shared';
-
-// Content components (keeping old exports for backward compatibility)
-export { AutoComponentDemo, CategorySection } from './AutoComponentDemo';
-export { CategoryRenderer } from './CategoryRenderer';
-export { TailwindGuideRenderer } from './TailwindGuideRenderer';

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

@@ -1,58 +0,0 @@
-/**
- * CopyAIButton Component
- * Button for copying AI context to clipboard
- */
-
-'use client';
-
-import React from 'react';
-import { Button } from '@djangocfg/ui';
-import { Sparkles, Check } from 'lucide-react';
-import { useAIExport } from '../../../hooks';
-
-interface CopyAIButtonProps {
-  /** Function to generate AI context - must return string */
-  onCopyForAI?: () => string;
-  /** Button size */
-  size?: 'sm' | 'default' | 'lg';
-  /** Show text label */
-  showLabel?: boolean;
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Copy for AI Button
- * Shows "Copied!" feedback after successful copy
- */
-export function CopyAIButton({
-  onCopyForAI,
-  size = 'sm',
-  showLabel = true,
-  className,
-}: CopyAIButtonProps) {
-  const { copied, exportForAI } = useAIExport({
-    generateContext: onCopyForAI,
-  });
-
-  return (
-    <Button
-      variant="outline"
-      size={size}
-      onClick={exportForAI}
-      className={className}
-    >
-      {copied ? (
-        <>
-          <Check className="h-4 w-4" />
-          {showLabel && <span className="ml-2">Copied!</span>}
-        </>
-      ) : (
-        <>
-          <Sparkles className="h-4 w-4" />
-          {showLabel && <span className="ml-2">Copy for AI</span>}
-        </>
-      )}
-    </Button>
-  );
-}

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

@@ -1,60 +0,0 @@
-/**
- * Header Component
- * Simple unified header for UI documentation
- */
-
-'use client';
-
-import React from 'react';
-import { CopyAIButton } from './CopyAIButton';
-import { TestValidationButton } from './TestValidationButton';
-
-export interface HeaderProps {
-  /** Page title */
-  title?: string;
-  /** Project name */
-  projectName?: string;
-  /** Logo component */
-  logo?: React.ReactNode;
-  /** Copy for AI callback - must return string */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Header Component
- * Displays title and Copy for AI button
- */
-export function Header({
-  title = 'UI Component Library',
-  projectName = 'Django CFG',
-  logo,
-  onCopyForAI,
-}: HeaderProps) {
-  return (
-    <header className="w-full border-b bg-background">
-      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          {/* Left: Logo and Title */}
-          <div className="flex items-center gap-3">
-            {logo && <div className="flex-shrink-0">{logo}</div>}
-            <div className="flex flex-col">
-              <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
-              <p className="text-xs text-muted-foreground hidden sm:block">{projectName}</p>
-            </div>
-          </div>
-
-          {/* Right: Developer Tools */}
-          <div className="flex items-center gap-2">
-            {/* Test Validation Error Button (dev only) */}
-            <TestValidationButton size="sm" />
-
-            {/* Copy for AI Button */}
-            {onCopyForAI && (
-              <CopyAIButton onCopyForAI={onCopyForAI} />
-            )}
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}

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

@@ -1,51 +0,0 @@
-/**
- * HeaderDesktop Component
- * Desktop version of the header
- */
-
-'use client';
-
-import React from 'react';
-import { CopyAIButton } from './CopyAIButton';
-import { TestValidationButton } from './TestValidationButton';
-
-interface HeaderDesktopProps {
-  /** Page title */
-  title?: string;
-  /** Copy for AI callback - must return string */
-  onCopyForAI?: () => string;
-}
-
-/**
- * Desktop Header
- * Full-width header for desktop with page title and actions
- */
-export function HeaderDesktop({
-  title = 'UI Component Library',
-  onCopyForAI,
-}: HeaderDesktopProps) {
-  return (
-    <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="flex h-14 items-center gap-4 px-6">
-        {/* Page Title */}
-        <div className="flex-1">
-          <h1 className="text-lg font-semibold">{title}</h1>
-        </div>
-
-        {/* Developer Tools */}
-        <div className="flex items-center gap-2">
-          {/* Test Validation Error Button (dev only) */}
-          <TestValidationButton size="sm" />
-
-          {/* Copy for AI Button */}
-          <CopyAIButton
-            onCopyForAI={onCopyForAI}
-            size="sm"
-            showLabel={true}
-            className="gap-2"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

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';