@djangocfg/layouts 1.4.27 → 1.4.28

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

package/src/layouts/UILayout/config/categories.config.tsx

@@ -1,122 +0,0 @@
-/**
- * Categories Configuration
- * Defines all component categories with metadata
- */
-
-import React from 'react';
-import {
-  Home,
-  FormInput,
-  LayoutGrid,
-  Navigation as NavigationIcon,
-  Square,
-  MessageSquare,
-  Table2,
-  Puzzle,
-  Boxes,
-  Code2,
-  Palette,
-  Wrench,
-} from 'lucide-react';
-import { getComponentCount } from './components';
-
-export interface ComponentCategory {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-  count?: number;
-  description?: string;
-}
-
-export const CATEGORIES: ComponentCategory[] = [
-  {
-    id: 'overview',
-    label: 'Overview',
-    icon: <Home className="h-4 w-4" />,
-    description: 'Welcome to Django CFG UI Library - explore 56+ components, 7 blocks, and 11 hooks',
-  },
-  {
-    id: 'forms',
-    label: 'Form Components',
-    icon: <FormInput className="h-4 w-4" />,
-    count: getComponentCount('forms'),
-    description: 'Input fields, buttons, checkboxes, selects, and form validation components',
-  },
-  {
-    id: 'layout',
-    label: 'Layout Components',
-    icon: <LayoutGrid className="h-4 w-4" />,
-    count: getComponentCount('layout'),
-    description: 'Cards, separators, skeletons, and structural layout components',
-  },
-  {
-    id: 'navigation',
-    label: 'Navigation',
-    icon: <NavigationIcon className="h-4 w-4" />,
-    count: getComponentCount('navigation'),
-    description: 'Menus, breadcrumbs, tabs, and pagination components',
-  },
-  {
-    id: 'overlay',
-    label: 'Overlay Components',
-    icon: <Square className="h-4 w-4" />,
-    count: getComponentCount('overlay'),
-    description: 'Dialogs, sheets, popovers, tooltips, and dropdown menus',
-  },
-  {
-    id: 'feedback',
-    label: 'Feedback',
-    icon: <MessageSquare className="h-4 w-4" />,
-    count: getComponentCount('feedback'),
-    description: 'Toasts, alerts, progress bars, badges, and status indicators',
-  },
-  {
-    id: 'data',
-    label: 'Data Display',
-    icon: <Table2 className="h-4 w-4" />,
-    count: getComponentCount('data'),
-    description: 'Tables, accordions, collapsibles, and data visualization',
-  },
-  {
-    id: 'specialized',
-    label: 'Specialized',
-    icon: <Puzzle className="h-4 w-4" />,
-    count: getComponentCount('specialized'),
-    description: 'Advanced components like sidebar navigation and image handling',
-  },
-  {
-    id: 'tools',
-    label: 'Developer Tools',
-    icon: <Wrench className="h-4 w-4" />,
-    count: getComponentCount('tools'),
-    description: 'Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams',
-  },
-  {
-    id: 'blocks',
-    label: 'Blocks',
-    icon: <Boxes className="h-4 w-4" />,
-    count: getComponentCount('blocks'),
-    description: 'Pre-built landing page sections: Hero, SuperHero, Features, CTA, Newsletter, Stats, Testimonials',
-  },
-  {
-    id: 'hooks',
-    label: 'Hooks',
-    icon: <Code2 className="h-4 w-4" />,
-    count: getComponentCount('hooks'),
-    description: 'Custom React hooks for common functionality and state management',
-  },
-  {
-    id: 'tailwind4',
-    label: 'Tailwind CSS v4',
-    icon: <Palette className="h-4 w-4" />,
-    description: 'Migration guide and best practices for Tailwind CSS v4',
-  },
-];
-
-export function getCategoryById(id: string): ComponentCategory | undefined {
-  return CATEGORIES.find(cat => cat.id === id);
-}
-
-export function getTotalComponentCount(): number {
-  return CATEGORIES.reduce((sum, cat) => sum + (cat.count || 0), 0);
-}