@djangocfg/layouts 1.2.17 → 1.2.18

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

@@ -1,114 +0,0 @@
-/**
- * Header Component
- * Top header for mobile and page title with Copy for AI button
- */
-
-'use client';
-
-import React, { useState } from 'react';
-import { Button, useIsMobile, useCopy } from '@djangocfg/ui';
-import { Menu, X, Sparkles, Check } from 'lucide-react';
-
-interface HeaderProps {
-  title?: string;
-  projectName?: string;
-  logo?: React.ReactNode;
-  isSidebarOpen?: boolean;
-  onToggleSidebar?: () => void;
-  onCopyForAI?: () => void;
-}
-
-export function Header({
-  title = 'UI Component Library',
-  projectName = 'Django CFG',
-  logo,
-  isSidebarOpen = false,
-  onToggleSidebar,
-  onCopyForAI,
-}: HeaderProps) {
-  const isMobile = useIsMobile();
-  const { copyToClipboard } = useCopy();
-  const [copied, setCopied] = useState(false);
-
-  const handleCopyForAI = async () => {
-    if (onCopyForAI) {
-      onCopyForAI();
-    }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <>
-      {/* Mobile Header - only on mobile */}
-      {isMobile && (
-        <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">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-9 w-9"
-              onClick={onToggleSidebar}
-            >
-              {isSidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </Button>
-
-            <div className="flex items-center gap-2 flex-1">
-              {logo}
-              <span className="font-semibold text-sm">{projectName}</span>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleCopyForAI}
-              className="gap-2"
-            >
-              {copied ? (
-                <>
-                  <Check className="h-4 w-4" />
-                  <span className="hidden xs:inline">Copied!</span>
-                </>
-              ) : (
-                <>
-                  <Sparkles className="h-4 w-4" />
-                  <span className="hidden xs:inline">Copy for AI</span>
-                </>
-              )}
-            </Button>
-          </div>
-        </header>
-      )}
-
-      {/* Desktop Page Header - only on desktop */}
-      {!isMobile && (
-        <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">
-            <div className="flex-1">
-              <h1 className="text-lg font-semibold">{title}</h1>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleCopyForAI}
-              className="gap-2"
-            >
-              {copied ? (
-                <>
-                  <Check className="h-4 w-4" />
-                  Copied!
-                </>
-              ) : (
-                <>
-                  <Sparkles className="h-4 w-4" />
-                  Copy for AI
-                </>
-              )}
-            </Button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

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

@@ -1,33 +0,0 @@
-/**
- * Mobile Overlay Component
- * Backdrop overlay for mobile sidebar
- */
-
-'use client';
-
-import React from 'react';
-import { cn } from '@djangocfg/ui/lib';
-import { useIsMobile } from '@djangocfg/ui';
-
-interface MobileOverlayProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function MobileOverlay({ isOpen, onClose }: MobileOverlayProps) {
-  const isMobile = useIsMobile();
-
-  // Only show on mobile when sidebar is open
-  if (!isMobile || !isOpen) return null;
-
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 z-[150] bg-background/80 backdrop-blur-sm",
-        "animate-in fade-in duration-300"
-      )}
-      onClick={onClose}
-      aria-hidden="true"
-    />
-  );
-}

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

@@ -1,188 +0,0 @@
-/**
- * Sidebar Component
- * Navigation sidebar for component categories
- */
-
-'use client';
-
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '@djangocfg/ui/lib';
-import { useIsMobile } from '@djangocfg/ui';
-import type { ComponentCategory } from '../types';
-
-interface SidebarProps {
-  categories: ComponentCategory[];
-  currentCategory?: string;
-  onCategoryChange?: (categoryId: string) => void;
-  isOpen?: boolean;
-  projectName?: string;
-  logo?: React.ReactNode;
-}
-
-interface SidebarContentProps {
-  categories: ComponentCategory[];
-  currentCategory?: string;
-  onCategoryChange?: (categoryId: string) => void;
-  projectName?: string;
-  logo?: React.ReactNode;
-  isMobile: boolean;
-}
-
-/**
- * Sidebar Content Component
- * Extracted content for reuse in desktop and mobile versions
- */
-function SidebarContent({
-  categories,
-  currentCategory,
-  onCategoryChange,
-  projectName,
-  logo,
-  isMobile,
-}: SidebarContentProps) {
-  return (
-    <div className={cn("flex flex-col overflow-hidden", isMobile ? "h-full" : "h-screen")}>
-      {/* Logo - Desktop only */}
-      {!isMobile && (
-        <div className="flex h-14 items-center border-b px-6 gap-2 flex-shrink-0">
-          {logo}
-          <span className="font-semibold text-sm">{projectName}</span>
-        </div>
-      )}
-
-      {/* Navigation */}
-      <div className="flex-1 overflow-y-auto scrollbar-thin">
-        <div className="p-4">
-          <nav>
-            <div className="mb-4">
-              <h3 className="mb-2 px-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                Component Categories
-              </h3>
-            </div>
-
-            <div className="space-y-1">
-              {categories.map((category) => (
-                <button
-                  key={category.id}
-                  onClick={() => onCategoryChange?.(category.id)}
-                  className={cn(
-                    "w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
-                    currentCategory === category.id
-                      ? "bg-primary text-primary-foreground"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
-                  )}
-                  title={category.description}
-                >
-                  <span className="flex-shrink-0">{category.icon}</span>
-                  <span className="flex-1 text-left break-words">{category.label}</span>
-                  {category.count && (
-                    <span className={cn(
-                      "text-xs px-2 py-0.5 rounded-full flex-shrink-0",
-                      currentCategory === category.id
-                        ? "bg-primary-foreground/20 text-primary-foreground"
-                        : "bg-muted text-muted-foreground"
-                    )}>
-                      {category.count}
-                    </span>
-                  )}
-                </button>
-              ))}
-            </div>
-          </nav>
-        </div>
-      </div>
-
-      {/* Tailwind 4 Info Section */}
-      <div className="border-t p-4 bg-muted/30">
-        <div className="mb-3">
-          <h4 className="text-xs font-semibold text-foreground uppercase tracking-wider mb-2">
-            Tailwind CSS v4
-          </h4>
-          <p className="text-xs text-muted-foreground leading-relaxed mb-3">
-            This UI library uses Tailwind CSS v4 with CSS-first configuration
-          </p>
-        </div>
-
-        <div className="space-y-2 text-xs">
-          <div className="flex items-start gap-2">
-            <span className="text-primary mt-0.5">✓</span>
-            <span className="text-muted-foreground">CSS-first @theme configuration</span>
-          </div>
-          <div className="flex items-start gap-2">
-            <span className="text-primary mt-0.5">✓</span>
-            <span className="text-muted-foreground">10x faster build times</span>
-          </div>
-          <div className="flex items-start gap-2">
-            <span className="text-primary mt-0.5">✓</span>
-            <span className="text-muted-foreground">Modern CSS features (color-mix, @property)</span>
-          </div>
-          <div className="flex items-start gap-2">
-            <span className="text-primary mt-0.5">✓</span>
-            <span className="text-muted-foreground">Responsive: px-4 sm:px-6 lg:px-8</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function Sidebar({
-  categories,
-  currentCategory,
-  onCategoryChange,
-  isOpen = false,
-  projectName = 'Django CFG',
-  logo,
-}: SidebarProps) {
-  const isMobile = useIsMobile();
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Desktop sidebar - always visible, no portal
-  if (!isMobile) {
-    return (
-      <aside className="w-64 border-r bg-background flex-shrink-0">
-        <SidebarContent
-          categories={categories}
-          currentCategory={currentCategory}
-          onCategoryChange={onCategoryChange}
-          projectName={projectName}
-          logo={logo}
-          isMobile={false}
-        />
-      </aside>
-    );
-  }
-
-  // Mobile sidebar - use portal when open
-  if (!isOpen || !mounted) {
-    return null;
-  }
-
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  return createPortal(
-    <aside
-      className={cn(
-        "fixed inset-y-0 left-0 w-64 z-[200] bg-background border-r shadow-lg transition-transform duration-300",
-        isOpen ? "translate-x-0" : "-translate-x-full"
-      )}
-    >
-      <SidebarContent
-        categories={categories}
-        currentCategory={currentCategory}
-        onCategoryChange={onCategoryChange}
-        projectName={projectName}
-        logo={logo}
-        isMobile={true}
-      />
-    </aside>,
-    document.body
-  );
-}

package/src/layouts/UILayout/types.ts

@@ -1,13 +0,0 @@
-/**
- * UILayout Types
- */
-
-import { ReactNode } from 'react';
-
-export interface ComponentCategory {
-  id: string;
-  label: string;
-  icon: ReactNode;
-  count?: number;
-  description?: string;
-}