@djangocfg/layouts 1.4.27 → 1.4.28

package/src/layouts/UILayout/TOOLS_INTEGRATION.md

@@ -1,216 +0,0 @@
-# Developer Tools Integration
-
-## Overview
-
-Successfully integrated three developer tool components into the UILayout showcase:
-
-1. **JsonTree** - Interactive JSON viewer with expand/collapse functionality
-2. **PrettyCode** - Syntax-highlighted code display
-3. **Mermaid** - Diagram renderer with fullscreen support
-
-## Changes Made
-
-### 1. Created Tools Configuration
-
-**File**: `config/components/tools.config.tsx`
-
-- Defined 3 component configurations with examples and previews
-- Added sample data for demonstrations
-- Included comprehensive usage examples
-
-### 2. Updated Components Index
-
-**File**: `config/components/index.ts`
-
-- Added `TOOLS_COMPONENTS` export
-- Integrated tools into `COMPONENTS_CONFIG` array
-- Tools now available in component registry
-
-### 3. Added Developer Tools Category
-
-**File**: `config/categories.config.tsx`
-
-- Created new "Developer Tools" category
-- Added Wrench icon from lucide-react
-- Positioned between "Specialized" and "Blocks" categories
-- Description: "Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams"
-
-### 4. Updated Tools Exports
-
-**File**: `packages/ui/src/tools/index.ts`
-
-- Ensured all tools are properly exported as named exports
-- Exported TypeScript types (Language, JsonTreeConfig)
-
-## Component Features
-
-### JsonTree
-
-**Features:**
-- Expand/collapse all functionality
-- Smart auto-expansion based on depth and collection size
-- Collection info display (array length, object keys count)
-- Copy to clipboard
-- Download as JSON file
-- Theme-aware colors using CSS variables
-- String truncation for long values
-- Configurable expansion limits
-
-**Configuration Options:**
-- `maxAutoExpandDepth` - Maximum depth to auto-expand (default: 2)
-- `maxAutoExpandArrayItems` - Max array items to auto-expand (default: 10)
-- `maxAutoExpandObjectKeys` - Max object keys to auto-expand (default: 5)
-- `maxStringLength` - String truncation threshold (default: 200)
-- `collectionLimit` - Collection size limit for performance (default: 50)
-- `showCollectionInfo` - Display collection metadata
-- `showExpandControls` - Show expand/collapse buttons
-- `showActionButtons` - Show copy/download buttons
-
-### PrettyCode
-
-**Features:**
-- Syntax highlighting with Prism
-- Automatic language detection
-- Theme support (dark/light)
-- Inline and block modes
-- Language badge display
-- Support for 15+ languages
-- Custom background colors
-- JSON auto-formatting
-
-**Supported Languages:**
-- JavaScript/TypeScript
-- Python
-- Bash/Shell
-- JSON, YAML, XML
-- HTML, CSS
-- SQL
-- Markdown
-- And more...
-
-### Mermaid
-
-**Features:**
-- Fullscreen modal view
-- Click to expand
-- ESC key to close
-- Theme-aware rendering
-- Semantic color variables
-- Support for all Mermaid diagram types
-- Responsive SVG sizing
-- Error handling with user feedback
-
-**Supported Diagrams:**
-- Flowchart / Graph
-- Sequence diagram
-- Class diagram
-- State diagram
-- Entity Relationship diagram
-- User Journey
-- Gantt chart
-- Pie chart
-- Git graph
-
-## Usage in UILayout
-
-The tools are now accessible through the UILayout navigation:
-
-1. Navigate to **Developer Tools** category in sidebar
-2. Click on any tool (JsonTree, PrettyCode, Mermaid)
-3. View live preview and usage examples
-4. Copy code examples for use in your project
-
-## Import Examples
-
-```tsx
-// Individual imports
-import { JsonTree } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui';
-import { Mermaid } from '@djangocfg/ui';
-
-// All at once
-import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
-```
-
-## Preview Examples
-
-### JsonTree Preview
-```tsx
-<JsonTree
-  title="User Data"
-  data={{
-    user: {
-      id: 1,
-      name: "John Doe",
-      profile: { bio: "Software engineer" }
-    }
-  }}
-  config={{
-    maxAutoExpandDepth: 2,
-    showCollectionInfo: true,
-    showExpandControls: true,
-  }}
-/>
-```
-
-### PrettyCode Preview
-```tsx
-<PrettyCode
-  data={pythonCode}
-  language="python"
-/>
-```
-
-### Mermaid Preview
-```tsx
-<Mermaid
-  chart={`
-    graph TD
-      A[Start] --> B{Decision}
-      B -->|Yes| C[OK]
-      B -->|No| D[End]
-  `}
-/>
-```
-
-## File Structure
-
-```
-UILayout/
-├── config/
-│   ├── components/
-│   │   ├── tools.config.tsx        # NEW - Tools configurations
-│   │   └── index.ts                # UPDATED - Added tools export
-│   └── categories.config.tsx       # UPDATED - Added tools category
-└── TOOLS_INTEGRATION.md           # THIS FILE
-```
-
-## Testing
-
-To verify the integration:
-
-1. Start the development server
-2. Navigate to UILayout showcase
-3. Check sidebar for "Developer Tools" category
-4. Verify all 3 components render correctly
-5. Test interactive features:
-   - JsonTree: expand/collapse, copy, download
-   - PrettyCode: syntax highlighting in different themes
-   - Mermaid: fullscreen view, ESC key close
-
-## Next Steps
-
-Potential enhancements:
-- Add search functionality to JsonTree
-- Add more code language examples to PrettyCode
-- Add more diagram type examples to Mermaid
-- Create composite examples combining multiple tools
-- Add performance benchmarks section
-
-## Notes
-
-- All components are theme-aware using CSS variables
-- All components support both light and dark modes
-- All components are fully responsive
-- No breaking changes to existing components
-- Backward compatible with existing UILayout structure

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

@@ -1,77 +0,0 @@
-/**
- * AutoComponentDemo
- * Automatically renders component demos from configuration
- */
-
-'use client';
-
-import React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui/tools';
-import type { ComponentConfig } from '../config';
-
-interface AutoComponentDemoProps {
-  component: ComponentConfig;
-}
-
-/**
- * AutoComponentDemo - Renders a component demo from config
- * This is the single component used to display all UI components
- */
-export function AutoComponentDemo({ component }: AutoComponentDemoProps) {
-  return (
-    <Card className="mb-6">
-      <CardHeader>
-        <CardTitle className="text-lg">{component.name}</CardTitle>
-        <CardDescription>{component.description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Tabs defaultValue="preview" className="w-full">
-          <TabsList className="mb-4">
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="preview" className="space-y-4">
-            <div className="p-6 border rounded-md bg-card">
-              {component.preview}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="code">
-            <PrettyCode
-              data={`${component.importPath}\n\n${component.example}`}
-              language="tsx"
-              className="text-sm"
-            />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  );
-}
-
-/**
- * CategorySection - Groups related component demos
- */
-interface CategorySectionProps {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-export function CategorySection({ title, description, children }: CategorySectionProps) {
-  return (
-    <div className="mb-12">
-      <div className="mb-6">
-        <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
-        {description && (
-          <p className="text-muted-foreground mt-2">{description}</p>
-        )}
-      </div>
-      <div className="space-y-6">
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-/**
- * CategoryRenderer
- * Universal renderer for any category using config data
- */
-
-'use client';
-
-import React from 'react';
-import { getComponentsByCategory, getCategoryById } from '../config';
-import { AutoComponentDemo, CategorySection } from './AutoComponentDemo';
-
-interface CategoryRendererProps {
-  categoryId: string;
-}
-
-/**
- * CategoryRenderer - Dynamically renders all components in a category
- * No need for separate demo files - everything comes from config
- */
-export function CategoryRenderer({ categoryId }: CategoryRendererProps) {
-  const category = getCategoryById(categoryId);
-  const components = getComponentsByCategory(categoryId);
-
-  if (!category || components.length === 0) {
-    return (
-      <div className="p-8 text-center text-muted-foreground">
-        <p>No components found for this category</p>
-      </div>
-    );
-  }
-
-  return (
-    <CategorySection
-      title={category.label}
-      description={category.description}
-    >
-      {components.map((component) => (
-        <AutoComponentDemo
-          key={component.name}
-          component={component}
-        />
-      ))}
-    </CategorySection>
-  );
-}

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