@djangocfg/layouts 1.4.27 → 1.4.29

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>
-  );
-}

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

@@ -1,9 +0,0 @@
-/**
- * Sidebar Components
- */
-
-export { Sidebar } from './Sidebar';
-export type { SidebarProps } from './Sidebar';
-export { SidebarContent } from './SidebarContent';
-export { SidebarCategory } from './SidebarCategory';
-export { SidebarFooter } from './SidebarFooter';

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

@@ -1,8 +0,0 @@
-/**
- * Layout Components
- * Structural components for UILayout
- */
-
-export * from './Header';
-export * from './Sidebar';
-export * from './MobileOverlay';

package/src/layouts/UILayout/components/shared/Badge/CountBadge.tsx

@@ -1,38 +0,0 @@
-/**
- * CountBadge Component
- * Badge for displaying count numbers
- */
-
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui/lib';
-
-interface CountBadgeProps {
-  /** Count to display */
-  count: number;
-  /** Is active/selected */
-  active?: boolean;
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Count Badge
- * Displays a count number with optional active state
- */
-export function CountBadge({ count, active = false, className }: CountBadgeProps) {
-  return (
-    <span
-      className={cn(
-        'text-xs px-2 py-0.5 rounded-full flex-shrink-0',
-        active
-          ? 'bg-primary-foreground/20 text-primary-foreground'
-          : 'bg-muted text-muted-foreground',
-        className
-      )}
-    >
-      {count}
-    </span>
-  );
-}

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

@@ -1,5 +0,0 @@
-/**
- * Badge Components
- */
-
-export { CountBadge } from './CountBadge';

package/src/layouts/UILayout/components/shared/CodeBlock/CodeBlock.tsx

@@ -1,48 +0,0 @@
-/**
- * CodeBlock Component
- * Displays code with syntax highlighting and copy button
- */
-
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui/lib';
-import { CopyButton } from './CopyButton';
-
-interface CodeBlockProps {
-  /** Code to display */
-  code: string;
-  /** Programming language */
-  language?: string;
-  /** Show copy button */
-  showCopy?: boolean;
-  /** Custom class name */
-  className?: string;
-}
-
-/**
- * Code Block
- * Displays formatted code with optional copy functionality
- */
-export function CodeBlock({
-  code,
-  language = 'tsx',
-  showCopy = true,
-  className,
-}: CodeBlockProps) {
-  return (
-    <div className={cn('relative group', className)}>
-      {/* Copy Button */}
-      {showCopy && (
-        <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
-          <CopyButton code={code} />
-        </div>
-      )}
-
-      {/* Code Display */}
-      <pre className="bg-muted/50 rounded-lg p-4 overflow-x-auto">
-        <code className={`language-${language} text-sm`}>{code}</code>
-      </pre>
-    </div>
-  );
-}

package/src/layouts/UILayout/components/shared/CodeBlock/CopyButton.tsx

@@ -1,49 +0,0 @@
-/**
- * CopyButton Component
- * Button for copying code to clipboard
- */
-
-'use client';
-
-import React, { useState } from 'react';
-import { Button } from '@djangocfg/ui';
-import { Copy, Check } from 'lucide-react';
-import { useCopy } from '@djangocfg/ui';
-
-interface CopyButtonProps {
-  /** Code to copy */
-  code: string;
-  /** Button size */
-  size?: 'sm' | 'default' | 'lg';
-}
-
-/**
- * Copy Button
- * Shows check icon after successful copy
- */
-export function CopyButton({ code, size = 'sm' }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-  const { copyToClipboard } = useCopy();
-
-  const handleCopy = async () => {
-    await copyToClipboard(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <Button
-      variant="ghost"
-      size={size}
-      onClick={handleCopy}
-      className="h-8 w-8 p-0"
-      aria-label="Copy code"
-    >
-      {copied ? (
-        <Check className="h-4 w-4 text-green-500" />
-      ) : (
-        <Copy className="h-4 w-4" />
-      )}
-    </Button>
-  );
-}

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

@@ -1,6 +0,0 @@
-/**
- * CodeBlock Components
- */
-
-export { CodeBlock } from './CodeBlock';
-export { CopyButton } from './CopyButton';

package/src/layouts/UILayout/components/shared/Section/Section.tsx

@@ -1,63 +0,0 @@
-/**
- * Section Component
- * Reusable section with title and optional description
- */
-
-'use client';
-
-import React, { ReactNode } from 'react';
-import { cn } from '@djangocfg/ui/lib';
-
-interface SectionProps {
-  /** Section title */
-  title?: string;
-  /** Section description */
-  description?: string;
-  /** Section content */
-  children: ReactNode;
-  /** Custom class name */
-  className?: string;
-  /** Title class name */
-  titleClassName?: string;
-  /** Content class name */
-  contentClassName?: string;
-}
-
-/**
- * Section Component
- * Displays a section with optional title and description
- */
-export function Section({
-  title,
-  description,
-  children,
-  className,
-  titleClassName,
-  contentClassName,
-}: SectionProps) {
-  return (
-    <section className={cn('space-y-4', className)}>
-      {/* Header */}
-      {(title || description) && (
-        <div className="space-y-1">
-          {title && (
-            <h2
-              className={cn(
-                'text-2xl font-bold tracking-tight',
-                titleClassName
-              )}
-            >
-              {title}
-            </h2>
-          )}
-          {description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          )}
-        </div>
-      )}
-
-      {/* Content */}
-      <div className={contentClassName}>{children}</div>
-    </section>
-  );
-}

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

@@ -1,5 +0,0 @@
-/**
- * Section Components
- */
-
-export { Section } from './Section';

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

@@ -1,8 +0,0 @@
-/**
- * Shared Components
- * Reusable UI components
- */
-
-export * from './Badge';
-export * from './CodeBlock';
-export * from './Section';

package/src/layouts/UILayout/config/ai-export.config.ts

@@ -1,89 +0,0 @@
-/**
- * AI Export Configuration
- * Generates formatted documentation for AI consumption
- */
-
-import { COMPONENTS_CONFIG, getAllCategories } from './components';
-import { TAILWIND_GUIDE } from './tailwind.config';
-
-export interface UILibraryConfig {
-  projectName: string;
-  version: string;
-  description: string;
-  totalComponents: number;
-}
-
-export const UI_LIBRARY_CONFIG: UILibraryConfig = {
-  projectName: "Django CFG UI",
-  version: "1.0.0",
-  description: "Comprehensive React UI library with 56+ components, 7 blocks, and 11 hooks built with Radix UI, Tailwind CSS v4, and TypeScript",
-  totalComponents: COMPONENTS_CONFIG.length,
-};
-
-/**
- * Generate formatted text for AI consumption
- * This is the single source of truth that gets copied to clipboard
- */
-export function generateAIContext(): string {
-  const { projectName, version, description } = UI_LIBRARY_CONFIG;
-
-  let output = `# ${projectName} v${version}\n\n`;
-  output += `${description}\n\n`;
-
-  // Quick Reference - Available Components
-  output += `## 📋 Quick Reference - Available Components\n\n`;
-  const categories = getAllCategories();
-  categories.forEach(category => {
-    const comps = COMPONENTS_CONFIG.filter(comp => comp.category === category);
-    const componentNames = comps.map(c => c.name).join(', ');
-    output += `### ${category.charAt(0).toUpperCase() + category.slice(1)} (${comps.length})\n`;
-    output += `${componentNames}\n\n`;
-  });
-  output += `---\n\n`;
-
-  // Tailwind 4 Guide
-  output += `## Tailwind CSS v${TAILWIND_GUIDE.version} Guidelines\n\n`;
-
-  output += `### Key Changes\n`;
-  TAILWIND_GUIDE.keyChanges.forEach(change => {
-    output += `- ${change}\n`;
-  });
-  output += `\n`;
-
-  output += `### Best Practices\n`;
-  TAILWIND_GUIDE.bestPractices.forEach(practice => {
-    output += `- ${practice}\n`;
-  });
-  output += `\n`;
-
-  output += `### Migration Steps\n`;
-  TAILWIND_GUIDE.migrationSteps.forEach((step, index) => {
-    output += `${index + 1}. ${step}\n`;
-  });
-  output += `\n`;
-
-  output += `### Examples\n\n`;
-  TAILWIND_GUIDE.examples.forEach(example => {
-    output += `#### ${example.title}\n`;
-    output += `${example.description}\n\n`;
-    output += `\`\`\`css\n${example.code}\n\`\`\`\n\n`;
-  });
-
-  // Components by Category
-  categories.forEach(category => {
-    const comps = COMPONENTS_CONFIG.filter(comp => comp.category === category);
-
-    output += `## ${category.charAt(0).toUpperCase() + category.slice(1)} (${comps.length})\n\n`;
-
-    comps.forEach(comp => {
-      output += `### ${comp.name}\n`;
-      output += `${comp.description}\n\n`;
-      output += `\`\`\`tsx\n`;
-      output += `${comp.importPath}\n\n`;
-      output += `${comp.example}\n`;
-      output += `\`\`\`\n\n`;
-    });
-  });
-
-  return output;
-}