@djangocfg/layouts 1.4.27 → 1.4.28

package/src/layouts/UILayout/config/components/specialized.config.tsx

@@ -1,400 +0,0 @@
-/**
- * Specialized Components Configuration
- */
-
-import React from 'react';
-import {
-  Button,
-  ButtonGroup,
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-  Spinner,
-  Kbd,
-  TokenIcon,
-  Toaster,
-  InputGroup,
-  Item,
-} from '@djangocfg/ui';
-import type { ComponentConfig } from './types';
-
-export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'Sidebar',
-    category: 'specialized',
-    description: 'Full-featured sidebar navigation component (23KB) with collapsible groups, icons, and Next.js router support',
-    importPath: `import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from '@djangocfg/ui';`,
-    example: `// SidebarMenuButton with href automatically uses Next.js Link
-<Sidebar>
-  <SidebarContent>
-    <SidebarGroup>
-      <SidebarGroupLabel>Main</SidebarGroupLabel>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton href="/" isActive tooltip="Dashboard">
-              <HomeIcon />
-              <span>Dashboard</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <SidebarMenuButton href="/users" tooltip="Users">
-              <UsersIcon />
-              <span>Users</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-
-    <SidebarGroup>
-      <SidebarGroupLabel>Settings</SidebarGroupLabel>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton href="/settings">
-              <SettingsIcon />
-              <span>Preferences</span>
-            </SidebarMenuButton>
-            {/* Submenu items also support href */}
-            <SidebarMenuSub>
-              <SidebarMenuSubItem>
-                <SidebarMenuSubButton href="/settings/profile">
-                  Profile
-                </SidebarMenuSubButton>
-              </SidebarMenuSubItem>
-            </SidebarMenuSub>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  </SidebarContent>
-</Sidebar>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          The Sidebar component is a comprehensive navigation solution with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Collapsible menu groups</li>
-          <li>• Icon support with lucide-react</li>
-          <li>• Active state management</li>
-          <li>• Responsive design (mobile drawer)</li>
-          <li>• Keyboard navigation</li>
-          <li>• 23KB bundle size</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          See <strong>DashboardLayout</strong> in the UI Guide for full implementation example
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'ImageWithFallback',
-    category: 'specialized',
-    description: 'Enhanced image component with loading states and fallback support',
-    importPath: `import { ImageWithFallback } from '@djangocfg/ui';`,
-    example: `<div className="space-y-4">
-  {/* Successful load */}
-  <ImageWithFallback
-    src="/images/example.jpg"
-    alt="Example image"
-    width={300}
-    height={200}
-    className="rounded-md"
-  />
-
-  {/* With fallback */}
-  <ImageWithFallback
-    src="/invalid-image.jpg"
-    alt="Image with fallback"
-    fallbackSrc="/images/placeholder.jpg"
-    width={300}
-    height={200}
-    className="rounded-md"
-  />
-
-  {/* Custom loading state */}
-  <ImageWithFallback
-    src="/large-image.jpg"
-    alt="Loading example"
-    width={300}
-    height={200}
-    className="rounded-md"
-    loadingComponent={
-      <div className="flex items-center justify-center h-full">
-        <Spinner />
-      </div>
-    }
-  />
-</div>`,
-    preview: (
-      <div className="space-y-4">
-        <p className="text-sm text-muted-foreground">
-          Features:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Automatic fallback on load error</li>
-          <li>• Custom loading states</li>
-          <li>• Built on Next.js Image component</li>
-          <li>• Preserves aspect ratio</li>
-          <li>• Optimized performance</li>
-        </ul>
-        <div className="p-4 border rounded-md bg-muted/30">
-          <p className="text-xs font-mono text-muted-foreground">
-            Image loading states: loading → loaded | error → fallback
-          </p>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'ButtonGroup',
-    category: 'specialized',
-    description: 'Group buttons together with shared borders',
-    importPath: `import { ButtonGroup, Button } from '@djangocfg/ui';`,
-    example: `<ButtonGroup orientation="horizontal">
-  <Button variant="outline">Left</Button>
-  <Button variant="outline">Center</Button>
-  <Button variant="outline">Right</Button>
-</ButtonGroup>`,
-    preview: (
-      <div className="space-y-4">
-        <ButtonGroup orientation="horizontal">
-          <Button variant="outline">Left</Button>
-          <Button variant="outline">Center</Button>
-          <Button variant="outline">Right</Button>
-        </ButtonGroup>
-        <ButtonGroup orientation="vertical">
-          <Button variant="outline">Top</Button>
-          <Button variant="outline">Middle</Button>
-          <Button variant="outline">Bottom</Button>
-        </ButtonGroup>
-      </div>
-    ),
-  },
-  {
-    name: 'Empty',
-    category: 'specialized',
-    description: 'Empty state component for no data scenarios',
-    importPath: `import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '@djangocfg/ui';`,
-    example: `<Empty>
-  <EmptyHeader>
-    <EmptyMedia>
-      <svg>...</svg>
-    </EmptyMedia>
-    <EmptyTitle>No results found</EmptyTitle>
-    <EmptyDescription>
-      Try adjusting your search or filter to find what you're looking for.
-    </EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <Button>Clear filters</Button>
-  </EmptyContent>
-</Empty>`,
-    preview: (
-      <Empty className="border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-            </svg>
-          </EmptyMedia>
-          <EmptyTitle>No results found</EmptyTitle>
-          <EmptyDescription>
-            Try adjusting your search or filter to find what you're looking for.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <Button>Clear filters</Button>
-        </EmptyContent>
-      </Empty>
-    ),
-  },
-  {
-    name: 'Spinner',
-    category: 'specialized',
-    description: 'Loading spinner indicator',
-    importPath: `import { Spinner } from '@djangocfg/ui';`,
-    example: `<div className="flex gap-4 items-center">
-  <Spinner />
-  <Spinner className="size-6" />
-  <Spinner className="size-8" />
-</div>`,
-    preview: (
-      <div className="flex gap-4 items-center">
-        <Spinner />
-        <Spinner className="size-6" />
-        <Spinner className="size-8" />
-      </div>
-    ),
-  },
-  {
-    name: 'Kbd',
-    category: 'specialized',
-    description: 'Keyboard key display component',
-    importPath: `import { Kbd } from '@djangocfg/ui';`,
-    example: `<div className="flex gap-2">
-  <Kbd>⌘</Kbd>
-  <Kbd>K</Kbd>
-</div>`,
-    preview: (
-      <div className="space-y-4">
-        <div className="flex gap-2 items-center">
-          <span className="text-sm">Press</span>
-          <Kbd>⌘</Kbd>
-          <Kbd>K</Kbd>
-          <span className="text-sm">to open</span>
-        </div>
-        <div className="flex gap-2 items-center">
-          <span className="text-sm">Press</span>
-          <Kbd>Ctrl</Kbd>
-          <span className="text-sm">+</span>
-          <Kbd>C</Kbd>
-          <span className="text-sm">to copy</span>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'TokenIcon',
-    category: 'specialized',
-    description: 'Cryptocurrency token icon component',
-    importPath: `import { TokenIcon } from '@djangocfg/ui';`,
-    example: `<div className="flex gap-4">
-  <TokenIcon symbol="btc" size={32} />
-  <TokenIcon symbol="eth" size={32} />
-  <TokenIcon symbol="usdt" size={32} />
-</div>`,
-    preview: (
-      <div className="flex gap-4 items-center">
-        <TokenIcon symbol="btc" size={32} />
-        <TokenIcon symbol="eth" size={32} />
-        <TokenIcon symbol="usdt" size={32} />
-        <TokenIcon symbol="bnb" size={32} />
-      </div>
-    ),
-  },
-  {
-    name: 'Sonner (Toaster)',
-    category: 'specialized',
-    description: 'Toast notifications powered by Sonner library',
-    importPath: `import { Toaster } from '@djangocfg/ui';
-import { toast } from 'sonner';`,
-    example: `// Add Toaster to your app layout
-<Toaster />
-
-// Then use toast anywhere in your app
-toast.success('Operation completed!');
-toast.error('Something went wrong');
-toast.info('New message received');
-toast.promise(
-  fetchData(),
-  {
-    loading: 'Loading...',
-    success: 'Data loaded!',
-    error: 'Failed to load',
-  }
-);`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          Sonner is a powerful toast notification system with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Promise-based toasts</li>
-          <li>• Multiple variants (success, error, info, warning)</li>
-          <li>• Custom duration and position</li>
-          <li>• Action buttons support</li>
-          <li>• Dark mode support</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          See <strong>sonner</strong> documentation for API details
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'InputGroup',
-    category: 'specialized',
-    description: 'Enhanced input with prefix/suffix addons',
-    importPath: `import { InputGroup, Input } from '@djangocfg/ui';`,
-    example: `<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <SearchIcon className="size-4" />
-  </InputGroupAddon>
-  <Input placeholder="Search..." />
-  <InputGroupAddon align="inline-end">
-    <Kbd>⌘K</Kbd>
-  </InputGroupAddon>
-</InputGroup>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50 space-y-4">
-        <p className="text-sm text-muted-foreground">
-          InputGroup allows you to add prefixes and suffixes to inputs:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Icons and text addons</li>
-          <li>• Button addons</li>
-          <li>• Keyboard shortcuts display</li>
-          <li>• Currency and units</li>
-          <li>• Inline and block alignment</li>
-        </ul>
-        <InputGroup className="max-w-sm">
-          <div className="px-3 text-sm text-muted-foreground">$</div>
-          <input type="text" placeholder="0.00" className="flex-1 bg-transparent border-0 outline-none px-2" />
-          <div className="px-3 text-sm text-muted-foreground">USD</div>
-        </InputGroup>
-      </div>
-    ),
-  },
-  {
-    name: 'Item',
-    category: 'specialized',
-    description: 'List item component with variants and layouts',
-    importPath: `import { Item, ItemGroup } from '@djangocfg/ui';`,
-    example: `<ItemGroup>
-  <Item variant="outline" size="default">
-    <ItemIcon>
-      <FileIcon />
-    </ItemIcon>
-    <ItemContent>
-      <ItemTitle>Document.pdf</ItemTitle>
-      <ItemDescription>Updated 2 hours ago</ItemDescription>
-    </ItemContent>
-    <ItemAction>
-      <Button variant="ghost" size="sm">View</Button>
-    </ItemAction>
-  </Item>
-</ItemGroup>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          Item component for building lists with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Multiple variants (default, outline, muted)</li>
-          <li>• Icon, content, and action slots</li>
-          <li>• Flexible layouts</li>
-          <li>• Separator support</li>
-          <li>• Perfect for file lists, notifications, etc.</li>
-        </ul>
-      </div>
-    ),
-  },
-];

package/src/layouts/UILayout/config/components/tools.config.tsx

@@ -1,234 +0,0 @@
-/**
- * Developer Tools Components Configuration
- */
-
-import React from 'react';
-import { JsonTree, PrettyCode, Mermaid, LottiePlayer } from '@djangocfg/ui';
-import type { ComponentConfig } from './types';
-
-// Sample data for demos
-const sampleJsonData = {
-  user: {
-    id: 1,
-    name: "John Doe",
-    email: "john@example.com",
-    profile: {
-      bio: "Software engineer",
-      location: "San Francisco",
-      interests: ["coding", "music", "travel"]
-    },
-    posts: [
-      { id: 1, title: "First Post", views: 120 },
-      { id: 2, title: "Second Post", views: 89 }
-    ]
-  },
-  settings: {
-    theme: "dark",
-    notifications: true,
-    language: "en"
-  }
-};
-
-const samplePythonCode = `def fibonacci(n):
-    """Calculate the nth Fibonacci number."""
-    if n <= 1:
-        return n
-    return fibonacci(n - 1) + fibonacci(n - 2)
-
-# Example usage
-result = fibonacci(10)
-print(f"The 10th Fibonacci number is: {result}")`;
-
-const sampleMermaidChart = `graph TD
-    A[Start] --> B{Is it?}
-    B -->|Yes| C[OK]
-    C --> D[Rethink]
-    D --> B
-    B ---->|No| E[End]`;
-
-export const TOOLS_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'JsonTree',
-    category: 'tools',
-    description: 'Interactive JSON tree viewer with expand/collapse, search, and export functionality',
-    importPath: `import { JsonTree } from '@djangocfg/ui';`,
-    example: `<JsonTree
-  title="User Data"
-  data={{
-    user: {
-      id: 1,
-      name: "John Doe",
-      email: "john@example.com",
-      profile: {
-        bio: "Software engineer",
-        interests: ["coding", "music"]
-      }
-    }
-  }}
-  config={{
-    maxAutoExpandDepth: 2,
-    showCollectionInfo: true,
-    showExpandControls: true,
-    showActionButtons: true,
-  }}
-/>`,
-    preview: (
-      <div className="h-[500px]">
-        <JsonTree
-          title="User Data"
-          data={sampleJsonData}
-          config={{
-            maxAutoExpandDepth: 2,
-            showCollectionInfo: true,
-            showExpandControls: true,
-            showActionButtons: true,
-          }}
-        />
-      </div>
-    ),
-  },
-  {
-    name: 'PrettyCode',
-    category: 'tools',
-    description: 'Syntax-highlighted code display with automatic language detection and theme support',
-    importPath: `import { PrettyCode } from '@djangocfg/ui';`,
-    example: `// Code as string
-<PrettyCode
-  data={pythonCode}
-  language="python"
-/>
-
-// JSON object (auto-formatted)
-<PrettyCode
-  data={{ user: "John", age: 30 }}
-  language="json"
-/>
-
-// Inline code
-<PrettyCode
-  data="const x = 42;"
-  language="javascript"
-  inline
-/>`,
-    preview: (
-      <div className="space-y-4">
-        {/* Block code example */}
-        <div className="h-[300px]">
-          <PrettyCode
-            data={samplePythonCode}
-            language="python"
-          />
-        </div>
-
-        {/* Inline code example */}
-        <div className="p-4 border rounded-md bg-muted/50">
-          <p className="text-sm text-muted-foreground mb-2">
-            Inline code example:
-          </p>
-          <div className="flex items-center gap-2">
-            <span className="text-sm">Run</span>
-            <PrettyCode
-              data="npm install @djangocfg/ui"
-              language="bash"
-              inline
-            />
-            <span className="text-sm">to install</span>
-          </div>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'Mermaid',
-    category: 'tools',
-    description: 'Interactive Mermaid diagram renderer with fullscreen view and theme support',
-    importPath: `import { Mermaid } from '@djangocfg/ui';`,
-    example: `<Mermaid
-  chart={\`
-    graph TD
-      A[Start] --> B{Is it?}
-      B -->|Yes| C[OK]
-      C --> D[Rethink]
-      D --> B
-      B -->|No| E[End]
-  \`}
-/>
-
-// Sequence diagram
-<Mermaid
-  chart={\`
-    sequenceDiagram
-      participant A as Alice
-      participant B as Bob
-      A->>B: Hello Bob!
-      B->>A: Hello Alice!
-  \`}
-/>
-
-// Flowchart
-<Mermaid
-  chart={\`
-    flowchart LR
-      A[Hard edge] -->|Link text| B(Round edge)
-      B --> C{Decision}
-      C -->|One| D[Result one]
-      C -->|Two| E[Result two]
-  \`}
-/>`,
-    preview: (
-      <div className="space-y-4">
-        <Mermaid chart={sampleMermaidChart} />
-
-        <div className="p-4 border rounded-md bg-muted/50">
-          <p className="text-sm text-muted-foreground mb-2">
-            Supported diagram types:
-          </p>
-          <ul className="space-y-1 text-sm text-muted-foreground">
-            <li>• Flowchart / Graph</li>
-            <li>• Sequence diagram</li>
-            <li>• Class diagram</li>
-            <li>• State diagram</li>
-            <li>• Entity Relationship diagram</li>
-            <li>• User Journey</li>
-            <li>• Gantt chart</li>
-            <li>• Pie chart</li>
-            <li>• Git graph</li>
-          </ul>
-          <p className="text-xs text-muted-foreground mt-3">
-            Click on diagram to view in fullscreen mode
-          </p>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'LottiePlayer',
-    category: 'tools',
-    description: 'Lottie animation player with size presets and playback controls',
-    importPath: `import { LottiePlayer } from '@djangocfg/ui';`,
-    example: `<LottiePlayer
-  src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
-  size="md"
-  autoplay
-  loop
-/>
-
-// Custom size and speed
-<LottiePlayer
-  src={animationData}
-  width={300}
-  height={300}
-  speed={1.5}
-/>`,
-    preview: (
-      <div className="flex items-center justify-center p-8">
-        <LottiePlayer
-          src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
-          size="md"
-          autoplay
-          loop
-        />
-      </div>
-    ),
-  },
-];

package/src/layouts/UILayout/config/components/types.ts

@@ -1,14 +0,0 @@
-/**
- * Component Configuration Types
- */
-
-import React from 'react';
-
-export interface ComponentConfig {
-  name: string;
-  category: string;
-  description: string;
-  importPath: string;
-  example: string;
-  preview: React.ReactNode;
-}

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

@@ -1,42 +0,0 @@
-/**
- * Configuration Module Exports
- * Single source of truth for all UI documentation
- */
-
-// Components configuration
-export {
-  COMPONENTS_CONFIG,
-  FORM_COMPONENTS,
-  LAYOUT_COMPONENTS,
-  NAVIGATION_COMPONENTS,
-  OVERLAY_COMPONENTS,
-  FEEDBACK_COMPONENTS,
-  DATA_COMPONENTS,
-  SPECIALIZED_COMPONENTS,
-  BLOCKS,
-  HOOKS,
-  getComponentsByCategory,
-  getComponentByName,
-  getAllCategories,
-  getComponentCount,
-} from './components';
-export type { ComponentConfig } from './components';
-
-// Categories configuration
-export {
-  CATEGORIES,
-  getCategoryById,
-  getTotalComponentCount,
-} from './categories.config';
-export type { ComponentCategory } from './categories.config';
-
-// Tailwind configuration
-export { TAILWIND_GUIDE } from './tailwind.config';
-export type { TailwindGuide } from './tailwind.config';
-
-// AI Export configuration
-export {
-  UI_LIBRARY_CONFIG,
-  generateAIContext,
-} from './ai-export.config';
-export type { UILibraryConfig } from './ai-export.config';