@djangocfg/layouts 1.0.6 → 1.2.0

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

@@ -0,0 +1,195 @@
+/**
+ * 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>
+
+      {/* Footer */}
+      <div className="border-t p-4">
+        <p className="text-xs text-muted-foreground">
+          Built with Radix UI + Tailwind CSS v4
+        </p>
+      </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/components/TailwindGuideRenderer.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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/config/ai-export.config.ts

@@ -0,0 +1,80 @@
+/**
+ * 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`;
+
+  // 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
+  const categories = getAllCategories();
+
+  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

@@ -0,0 +1,114 @@
+/**
+ * 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,
+} 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: '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);
+}