@djangocfg/layouts 1.0.6 → 1.1.0

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

@@ -0,0 +1,42 @@
+/**
+ * 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';

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

@@ -0,0 +1,77 @@
+/**
+ * Tailwind CSS v4 Configuration & Guidelines
+ * Documentation for Tailwind CSS v4 best practices
+ */
+
+export interface TailwindGuide {
+  version: string;
+  keyChanges: string[];
+  bestPractices: string[];
+  migrationSteps: string[];
+  examples: {
+    title: string;
+    description: string;
+    code: string;
+  }[];
+}
+
+export const TAILWIND_GUIDE: TailwindGuide = {
+  version: "4.0",
+
+  keyChanges: [
+    "CSS-First Configuration: Theme is now defined using CSS custom properties in an @theme block instead of JavaScript",
+    "New Import Syntax: Use @import \"tailwindcss\" instead of @tailwind directives",
+    "Simplified PostCSS Setup: Use @tailwindcss/postcss plugin",
+    "Performance Improvements: 10x faster build times, significantly smaller CSS bundles",
+    "Modern Browser Support: Optimized for Safari 16.4+, Chrome 111+, Firefox 128+"
+  ],
+
+  bestPractices: [
+    "Use standard Tailwind classes only: py-16 sm:py-20 md:py-24 lg:py-32",
+    "Responsive patterns: px-4 sm:px-6 lg:px-8",
+    "Container pattern: container max-w-7xl mx-auto",
+    "Avoid custom utilities like: section-padding, animate-*, shadow-brand",
+    "Mobile-first approach with breakpoints: sm: (640px), md: (768px), lg: (1024px), xl: (1280px)",
+    "Use CSS variables: var(--color-primary), var(--font-family-sans)"
+  ],
+
+  migrationSteps: [
+    "Update dependencies: npm install tailwindcss@latest postcss@latest",
+    "Replace JavaScript config with CSS @theme block",
+    "Update import directives: @import \"tailwindcss\"",
+    "Configure PostCSS: use @tailwindcss/postcss plugin",
+    "Test and refactor: remove custom utilities and use standard Tailwind classes"
+  ],
+
+  examples: [
+    {
+      title: "CSS-First Configuration",
+      description: "Define theme using CSS custom properties",
+      code: `@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --font-family-sans: ui-sans-serif, system-ui, sans-serif;
+}`
+    },
+    {
+      title: "Responsive Spacing",
+      description: "Mobile-first responsive padding and spacing",
+      code: `<section className="py-16 sm:py-20 md:py-24 lg:py-32">
+  <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
+      Title
+    </h1>
+  </div>
+</section>`
+    },
+    {
+      title: "Component Styling",
+      description: "Standard Tailwind classes for components",
+      code: `<button className="px-6 py-3 bg-primary text-primary-foreground rounded-md shadow-lg hover:shadow-xl transition-all duration-300">
+  Click me
+</button>`
+    }
+  ]
+};

package/src/layouts/UILayout/constants.ts

@@ -0,0 +1,23 @@
+/**
+ * Constants for UILayout
+ */
+
+export const MOBILE_BREAKPOINT = 768; // px
+export const SIDEBAR_WIDTH = 256; // px (w-64)
+export const HEADER_HEIGHT = 56; // px (h-14)
+
+export const ANIMATION_DURATION = {
+  fast: 150,
+  normal: 300,
+  slow: 500,
+} as const;
+
+export const Z_INDEX = {
+  sidebar: 30,
+  overlay: 20,
+  header: 40,
+  dropdown: 50,
+} as const;
+
+export const DEFAULT_PROJECT_NAME = 'Django CFG UI';
+export const DEFAULT_DESCRIPTION = 'Explore our comprehensive collection of 56+ React components built with Radix UI and Tailwind CSS';

package/src/layouts/UILayout/context/ShowcaseContext.tsx

@@ -0,0 +1,53 @@
+/**
+ * Showcase Context
+ * Manages navigation state for ComponentShowcaseLayout
+ */
+
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ShowcaseContextValue {
+  currentCategory: string;
+  setCurrentCategory: (category: string) => void;
+  isSidebarOpen: boolean;
+  toggleSidebar: () => void;
+  closeSidebar: () => void;
+}
+
+const ShowcaseContext = createContext<ShowcaseContextValue | undefined>(undefined);
+
+interface ShowcaseProviderProps {
+  children: ReactNode;
+  defaultCategory?: string;
+}
+
+export function ShowcaseProvider({ children, defaultCategory = 'overview' }: ShowcaseProviderProps) {
+  const [currentCategory, setCurrentCategory] = useState(defaultCategory);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => setIsSidebarOpen(prev => !prev);
+  const closeSidebar = () => setIsSidebarOpen(false);
+
+  return (
+    <ShowcaseContext.Provider
+      value={{
+        currentCategory,
+        setCurrentCategory,
+        isSidebarOpen,
+        toggleSidebar,
+        closeSidebar,
+      }}
+    >
+      {children}
+    </ShowcaseContext.Provider>
+  );
+}
+
+export function useShowcase() {
+  const context = useContext(ShowcaseContext);
+  if (!context) {
+    throw new Error('useShowcase must be used within ShowcaseProvider');
+  }
+  return context;
+}

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

@@ -0,0 +1 @@
+export { ShowcaseProvider, useShowcase } from './ShowcaseContext';

package/src/layouts/UILayout/index.ts

@@ -0,0 +1,64 @@
+/**
+ * UILayout Module Exports
+ * Config-driven UI documentation layout
+ */
+
+// Main Layout Component
+export { UILayout, ComponentShowcaseLayout } from './UILayout';
+export type { UILayoutProps, ComponentShowcaseLayoutProps } from './UILayout';
+
+// Context for navigation management
+export { ShowcaseProvider, useShowcase } from './context';
+
+// UI Guide View (specific implementation for Django CFG UI)
+export { default as UIGuideView } from './UIGuideView';
+export { UIGuideLanding } from './UIGuideLanding';
+export { UIGuideApp } from './UIGuideApp';
+
+// Components
+export { AutoComponentDemo, CategorySection } from './components/AutoComponentDemo';
+export { CategoryRenderer } from './components/CategoryRenderer';
+export { TailwindGuideRenderer } from './components/TailwindGuideRenderer';
+export { Sidebar } from './components/Sidebar';
+export { Header } from './components/Header';
+export { MobileOverlay } from './components/MobileOverlay';
+
+// Configuration (Single Source of Truth)
+export {
+  // All components
+  COMPONENTS_CONFIG,
+  FORM_COMPONENTS,
+  LAYOUT_COMPONENTS,
+  NAVIGATION_COMPONENTS,
+  OVERLAY_COMPONENTS,
+  FEEDBACK_COMPONENTS,
+  DATA_COMPONENTS,
+  SPECIALIZED_COMPONENTS,
+  BLOCKS,
+  HOOKS,
+  // Utility functions
+  getComponentsByCategory,
+  getComponentByName,
+  getAllCategories,
+  getComponentCount,
+  // Categories
+  CATEGORIES,
+  getCategoryById,
+  getTotalComponentCount,
+  // Tailwind
+  TAILWIND_GUIDE,
+  // AI Export
+  UI_LIBRARY_CONFIG,
+  generateAIContext,
+} from './config';
+
+// Types
+export type {
+  ComponentConfig,
+  ComponentCategory,
+  TailwindGuide,
+  UILibraryConfig,
+} from './config';
+
+// Constants
+export * from './constants';

package/src/layouts/UILayout/types.ts

@@ -0,0 +1,13 @@
+/**
+ * UILayout Types
+ */
+
+import { ReactNode } from 'react';
+
+export interface ComponentCategory {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  count?: number;
+  description?: string;
+}

package/src/layouts/index.ts

@@ -6,4 +6,8 @@
 export * from './ProfileLayout';
 export * from './SupportLayout';
 export * from './PaymentsLayout';
-export * from './AppLayout';
+export * from './AppLayout';
+export * from './ErrorLayout';
+
+// UILayout - Config-driven UI documentation layout
+export * from './UILayout';