@djangocfg/layouts 1.2.17 → 1.2.19

package/src/layouts/UILayout/REFACTORING.md

@@ -1,331 +0,0 @@
-# UILayout Refactoring - Complete Summary
-
-## 🎯 Goal
-
-Transform ComponentShowcaseLayout into a modern, config-driven UILayout with:
-1. **Single Source of Truth** - centralized configuration
-2. **Zero Duplication** - no repeated code
-3. **Auto-Rendering** - components render from config
-4. **AI Export** - "Copy for AI" button with complete documentation
-5. **Better Organization** - modular structure by category
-
-## ✅ What Was Done
-
-### 1. Renamed Old Structure
-```bash
-UILayout_old/  # Backup of old implementation
-```
-
-### 2. Created New Config-Driven Architecture
-
-#### Config Structure (Single Source of Truth)
-```
-config/
-├── components/              # Component configs by category
-│   ├── types.ts            # ComponentConfig interface
-│   ├── forms.config.tsx    # 8 form components
-│   ├── layout.config.tsx   # 5 layout components
-│   ├── navigation.config.tsx  # 4 navigation components
-│   ├── overlay.config.tsx     # 11 overlay components
-│   ├── feedback.config.tsx    # 5 feedback components
-│   ├── data.config.tsx        # 5 data components
-│   ├── specialized.config.tsx # 2 specialized components
-│   ├── blocks.config.tsx      # 7 landing page blocks
-│   ├── hooks.config.tsx       # 6 custom React hooks
-│   └── index.ts               # Aggregator
-├── categories.config.tsx   # Menu categories
-├── tailwind.config.ts      # Tailwind 4 guide
-├── ai-export.config.ts     # AI context generator
-└── index.ts                # Main exports
-```
-
-#### Component Architecture
-```
-components/
-├── AutoComponentDemo.tsx      # Reads from config, renders component
-├── CategoryRenderer.tsx       # Renders entire category from config
-├── TailwindGuideRenderer.tsx  # Renders Tailwind guide from config
-├── Header.tsx                 # Header with "Copy for AI" button
-├── Sidebar.tsx                # Navigation sidebar
-└── MobileOverlay.tsx          # Mobile menu overlay
-```
-
-### 3. Component Configuration Format
-
-Each component defined as:
-```typescript
-interface ComponentConfig {
-  name: string;           // "Button"
-  category: string;       // "forms"
-  description: string;    // "Interactive button with variants"
-  importPath: string;     // "import { Button } from '@djangocfg/ui';"
-  example: string;        // Code example as string
-  preview: ReactNode;     // Live React component
-}
-```
-
-### 4. Key Features Implemented
-
-#### ✅ Auto-Rendering from Config
-```tsx
-// Before: Manual demo files for each category
-FormComponentsDemo.tsx    // 200+ lines
-LayoutComponentsDemo.tsx  // 180+ lines
-NavigationComponentsDemo.tsx  // 150+ lines
-// ... 7 more demo files
-
-// After: One universal renderer
-<CategoryRenderer categoryId="forms" />  // Reads from config
-```
-
-#### ✅ "Copy for AI" Button
-- In Header component (desktop & mobile)
-- Generates complete documentation:
-  - Tailwind 4 guidelines
-  - All 53 components with examples
-  - Proper formatting for AI
-- Uses `generateAIContext()` function
-- One-click clipboard copy
-
-#### ✅ Zero Duplication
-```typescript
-// Before: Component defined in 3 places
-// 1. Demo file (preview)
-// 2. Code example (string)
-// 3. Import statement
-
-// After: Component defined ONCE
-{
-  name: 'Button',
-  preview: <Button>Click</Button>,
-  example: '<Button>Click</Button>',
-  importPath: "import { Button } from '@djangocfg/ui';"
-}
-```
-
-### 5. Statistics
-
-#### Total Components Documented
-| Category | Count | Config File |
-|----------|-------|-------------|
-| Forms | 8 | forms.config.tsx (320 lines) |
-| Layout | 5 | layout.config.tsx (240 lines) |
-| Navigation | 4 | navigation.config.tsx (195 lines) |
-| Overlay | 11 | overlay.config.tsx (510 lines) |
-| Feedback | 5 | feedback.config.tsx (220 lines) |
-| Data Display | 5 | data.config.tsx (200 lines) |
-| Specialized | 2 | specialized.config.tsx (95 lines) |
-| Blocks | 7 | blocks.config.tsx (280 lines) |
-| Hooks | 6 | hooks.config.tsx (170 lines) |
-| **TOTAL** | **53** | **2,230 lines** |
-
-#### Code Reduction
-- **Before**: ~1,800 lines of demo files + ~1,200 lines of component definitions = **3,000 lines**
-- **After**: ~2,230 lines (all-in-one configs) = **2,230 lines**
-- **Saved**: ~770 lines (-25%)
-- **Maintainability**: 100x better (single source of truth)
-
-### 6. Files Created
-
-#### Core Files (11)
-1. `UILayout.tsx` - Main layout component
-2. `UIGuideView.tsx` - Complete view with categories
-3. `UIGuideLanding.tsx` - Landing page (copied from old)
-4. `UIGuideApp.tsx` - Full app wrapper
-5. `types.ts` - Type definitions
-6. `constants.ts` - Constants
-7. `index.ts` - Main exports
-8. `README.md` - Documentation
-9. `REFACTORING.md` - This file
-
-#### Config Files (14)
-10. `config/components/types.ts`
-11. `config/components/forms.config.tsx`
-12. `config/components/layout.config.tsx`
-13. `config/components/navigation.config.tsx`
-14. `config/components/overlay.config.tsx`
-15. `config/components/feedback.config.tsx`
-16. `config/components/data.config.tsx`
-17. `config/components/specialized.config.tsx`
-18. `config/components/blocks.config.tsx`
-19. `config/components/hooks.config.tsx`
-20. `config/components/index.ts`
-21. `config/categories.config.tsx`
-22. `config/tailwind.config.ts`
-23. `config/ai-export.config.ts`
-24. `config/index.ts`
-
-#### Component Files (6)
-25. `components/AutoComponentDemo.tsx`
-26. `components/CategoryRenderer.tsx`
-27. `components/TailwindGuideRenderer.tsx`
-28. `components/Header.tsx` (copied & updated)
-29. `components/Sidebar.tsx` (copied)
-30. `components/MobileOverlay.tsx` (copied)
-
-#### Context (1)
-31. `context/` (copied from old)
-
-**Total: 31 files created/updated**
-
-## 🚀 Benefits
-
-### 1. Single Source of Truth
-- All component data in config files
-- No duplication
-- Easy to update
-
-### 2. Auto-Rendering
-- Add component to config → automatically appears everywhere
-- No manual demo file creation
-- Consistent presentation
-
-### 3. Type-Safe
-- Full TypeScript support
-- Interface for ComponentConfig
-- Compile-time error checking
-
-### 4. AI-Ready
-- "Copy for AI" button
-- Complete documentation export
-- Proper formatting for AI consumption
-
-### 5. Maintainable
-```typescript
-// Adding new component:
-
-// Before (3 steps):
-// 1. Create demo component in category file
-// 2. Add code example string
-// 3. Import and wire up
-
-// After (1 step):
-// Add to config file:
-{
-  name: 'NewComponent',
-  category: 'forms',
-  description: '...',
-  importPath: '...',
-  example: '...',
-  preview: <NewComponent />
-}
-```
-
-### 6. Scalable
-- Easy to add new categories
-- Easy to add new components
-- Modular structure
-
-## 📊 Comparison
-
-### Old Architecture
-```
-ComponentShowcaseLayout/
-├── categories/
-│   ├── FormComponentsDemo.tsx        # 200 lines
-│   ├── LayoutComponentsDemo.tsx      # 180 lines
-│   ├── NavigationComponentsDemo.tsx  # 150 lines
-│   ├── OverlayComponentsDemo.tsx     # 250 lines
-│   ├── FeedbackComponentsDemo.tsx    # 140 lines
-│   ├── DataDisplayDemo.tsx           # 170 lines
-│   ├── SpecializedComponentsDemo.tsx # 120 lines
-│   ├── BlocksDemo.tsx                # 280 lines
-│   ├── HooksDemo.tsx                 # 160 lines
-│   └── Tailwind4Guide.tsx            # 240 lines
-└── ... (other files)
-
-Problems:
-- ❌ Duplication (component defined multiple times)
-- ❌ Hard to maintain (update in multiple places)
-- ❌ Manual rendering (write demo for each component)
-- ❌ No AI export
-```
-
-### New Architecture
-```
-UILayout/
-├── config/
-│   ├── components/        # All component definitions
-│   │   ├── forms.config.tsx
-│   │   ├── layout.config.tsx
-│   │   └── ... (9 files total)
-│   ├── categories.config.tsx
-│   ├── tailwind.config.ts
-│   └── ai-export.config.ts
-├── components/
-│   ├── AutoComponentDemo.tsx      # Auto-renders from config
-│   ├── CategoryRenderer.tsx       # Renders entire category
-│   └── TailwindGuideRenderer.tsx  # Renders guide
-└── ...
-
-Benefits:
-- ✅ Single source of truth (config)
-- ✅ Easy to maintain (one place to update)
-- ✅ Auto-rendering (no manual demos)
-- ✅ AI export built-in
-```
-
-## 🎯 Migration Path
-
-If you want to migrate existing component showcase:
-
-1. **Analyze existing demos** - identify all components
-2. **Create config files** - one per category
-3. **Define ComponentConfig** - for each component:
-   ```typescript
-   {
-     name: string,
-     category: string,
-     description: string,
-     importPath: string,
-     example: string,
-     preview: ReactNode
-   }
-   ```
-4. **Replace demos** - use `<CategoryRenderer categoryId="..." />`
-5. **Test** - verify all components render correctly
-6. **Delete old demos** - remove manual demo files
-
-## ✅ Verification
-
-### TypeScript Check
-```bash
-pnpm check
-# ✅ No errors
-```
-
-### File Count
-```bash
-# Config files: 14
-# Component files: 6
-# Context: 1
-# Core: 11
-# Total: 32 files
-```
-
-### Component Count
-```bash
-# Total components in config: 53
-# - Forms: 8
-# - Layout: 5
-# - Navigation: 4
-# - Overlay: 11
-# - Feedback: 5
-# - Data: 5
-# - Specialized: 2
-# - Blocks: 7
-# - Hooks: 6
-```
-
-## 🎉 Result
-
-Полностью рефакторенная, config-driven система документации UI компонентов с:
-- ✅ Единым источником правды (конфиг)
-- ✅ Нулевым дублированием кода
-- ✅ Автоматическим рендерингом
-- ✅ Экспортом для AI
-- ✅ TypeScript безопасностью
-- ✅ Модульной структурой
-- ✅ Легкой масштабируемостью
-
-**Готово к использованию!** 🚀

package/src/layouts/UILayout/UILayout.tsx

@@ -1,122 +0,0 @@
-/**
- * UILayout
- * Modern, config-driven layout for UI component documentation
- */
-
-'use client';
-
-import React, { ReactNode } from 'react';
-import { useCopy, Sticky } from '@djangocfg/ui';
-import { Sidebar } from './components/Sidebar';
-import { Header } from './components/Header';
-import { MobileOverlay } from './components/MobileOverlay';
-import { generateAIContext } from './config';
-import { useShowcase } from './context';
-import type { ComponentCategory } from './config';
-
-export interface UILayoutProps {
-  children: ReactNode;
-  title?: string;
-  description?: string;
-  categories: ComponentCategory[];
-  currentCategory?: string;
-  onCategoryChange?: (categoryId: string) => void;
-  logo?: ReactNode;
-  projectName?: string;
-}
-
-/**
- * UILayout - Main layout component for UI documentation
- *
- * Features:
- * - Config-driven: All component data comes from centralized config
- * - "Copy for AI": One-click export of all documentation
- * - Responsive: Mobile-first design with sidebar
- * - Type-safe: Full TypeScript support
- *
- * @example
- * ```tsx
- * <UILayout
- *   title="UI Components"
- *   categories={CATEGORIES}
- *   currentCategory={category}
- *   onCategoryChange={setCategory}
- * >
- *   <CategoryRenderer categoryId={category} />
- * </UILayout>
- * ```
- */
-export function UILayout({
-  children,
-  title = "UI Component Library",
-  description,
-  categories,
-  currentCategory,
-  onCategoryChange,
-  logo,
-  projectName = "Django CFG UI",
-}: UILayoutProps) {
-  const { isSidebarOpen, toggleSidebar, closeSidebar } = useShowcase();
-  const { copyToClipboard } = useCopy();
-
-  const handleCategoryChange = (categoryId: string) => {
-    onCategoryChange?.(categoryId);
-    closeSidebar();
-  };
-
-  const handleCopyForAI = () => {
-    const aiContext = generateAIContext();
-    copyToClipboard(aiContext);
-  };
-
-  return (
-    <div className="flex bg-background">
-      {/* Mobile Overlay - outside flex container for proper z-index stacking */}
-      <MobileOverlay
-        isOpen={isSidebarOpen}
-        onClose={closeSidebar}
-      />
-
-      {/* Sidebar with Sticky - parent must be scrollable for react-sticky-box */}
-      <div className="h-full sticky top-0">
-        <Sidebar
-          categories={categories}
-          currentCategory={currentCategory}
-          onCategoryChange={handleCategoryChange}
-          isOpen={isSidebarOpen}
-          projectName={projectName}
-          logo={logo}
-        />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col min-w-0">
-        {/* Header with Copy for AI button */}
-        <Header
-          title={title}
-          projectName={projectName}
-          logo={logo}
-          isSidebarOpen={isSidebarOpen}
-          onToggleSidebar={toggleSidebar}
-          onCopyForAI={handleCopyForAI}
-        />
-
-        {/* Content Area */}
-        <div className="flex-1">
-          <div className="container max-w-7xl mx-auto p-6">
-            {description && (
-              <p className="text-sm text-muted-foreground mb-6">
-                {description}
-              </p>
-            )}
-            {children}
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
-
-// Legacy export for backward compatibility
-export { UILayout as ComponentShowcaseLayout };
-export type { UILayoutProps as ComponentShowcaseLayoutProps };

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