@djangocfg/layouts 1.4.27 → 1.4.28

package/src/layouts/UILayout/hooks/useAIExport.ts

@@ -1,78 +0,0 @@
-/**
- * useAIExport Hook
- * Handles AI context export with copy to clipboard
- */
-
-'use client';
-
-import { useState, useCallback } from 'react';
-import { useCopy } from '@djangocfg/ui';
-
-interface UseAIExportOptions {
-  /** Function to generate AI context */
-  generateContext?: () => string;
-  /** Success callback */
-  onSuccess?: () => void;
-  /** Error callback */
-  onError?: (error: Error) => void;
-  /** Duration to show "copied" state (ms) */
-  copiedDuration?: number;
-}
-
-interface UseAIExportReturn {
-  /** Is currently in "copied" state */
-  copied: boolean;
-  /** Export function */
-  exportForAI: () => Promise<void>;
-  /** Reset copied state */
-  reset: () => void;
-}
-
-/**
- * Hook for AI export functionality
- * Handles copying AI context to clipboard with visual feedback
- */
-export function useAIExport(options: UseAIExportOptions = {}): UseAIExportReturn {
-  const {
-    generateContext,
-    onSuccess,
-    onError,
-    copiedDuration = 2000,
-  } = options;
-
-  const [copied, setCopied] = useState(false);
-  const { copyToClipboard } = useCopy();
-
-  const exportForAI = useCallback(async () => {
-    try {
-      // Generate context
-      const context = generateContext?.() || '';
-
-      // Copy to clipboard
-      await copyToClipboard(context);
-
-      // Set copied state
-      setCopied(true);
-
-      // Reset after duration
-      setTimeout(() => {
-        setCopied(false);
-      }, copiedDuration);
-
-      // Success callback
-      onSuccess?.();
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  }, [generateContext, copyToClipboard, copiedDuration, onSuccess, onError]);
-
-  const reset = useCallback(() => {
-    setCopied(false);
-  }, []);
-
-  return {
-    copied,
-    exportForAI,
-    reset,
-  };
-}

package/src/layouts/UILayout/hooks/useCategoryNavigation.ts

@@ -1,92 +0,0 @@
-/**
- * useCategoryNavigation Hook
- * Manages category navigation with history
- */
-
-'use client';
-
-import { useState, useCallback, useMemo } from 'react';
-import type { NavigationState } from '../types';
-
-interface UseCategoryNavigationOptions {
-  /** Initial category */
-  initialCategory?: string;
-  /** On category change callback */
-  onCategoryChange?: (categoryId: string) => void;
-}
-
-interface UseCategoryNavigationReturn extends NavigationState {
-  /** Navigate to a category */
-  navigateTo: (categoryId: string) => void;
-  /** Go back in history */
-  goBack: () => void;
-  /** Go forward in history */
-  goForward: () => void;
-}
-
-/**
- * Hook for category navigation with history support
- */
-export function useCategoryNavigation(
-  options: UseCategoryNavigationOptions = {}
-): UseCategoryNavigationReturn {
-  const { initialCategory = 'overview', onCategoryChange } = options;
-
-  const [currentCategory, setCurrentCategory] = useState(initialCategory);
-  const [history, setHistory] = useState<string[]>([initialCategory]);
-  const [historyIndex, setHistoryIndex] = useState(0);
-
-  const canGoBack = useMemo(() => historyIndex > 0, [historyIndex]);
-  const canGoForward = useMemo(
-    () => historyIndex < history.length - 1,
-    [historyIndex, history.length]
-  );
-
-  const navigateTo = useCallback(
-    (categoryId: string) => {
-      if (categoryId === currentCategory) return;
-
-      // Remove forward history if we're not at the end
-      const newHistory = history.slice(0, historyIndex + 1);
-      newHistory.push(categoryId);
-
-      setHistory(newHistory);
-      setHistoryIndex(newHistory.length - 1);
-      setCurrentCategory(categoryId);
-      onCategoryChange?.(categoryId);
-    },
-    [currentCategory, history, historyIndex, onCategoryChange]
-  );
-
-  const goBack = useCallback(() => {
-    if (!canGoBack) return;
-
-    const newIndex = historyIndex - 1;
-    const categoryId = history[newIndex];
-
-    setHistoryIndex(newIndex);
-    setCurrentCategory(categoryId);
-    onCategoryChange?.(categoryId);
-  }, [canGoBack, historyIndex, history, onCategoryChange]);
-
-  const goForward = useCallback(() => {
-    if (!canGoForward) return;
-
-    const newIndex = historyIndex + 1;
-    const categoryId = history[newIndex];
-
-    setHistoryIndex(newIndex);
-    setCurrentCategory(categoryId);
-    onCategoryChange?.(categoryId);
-  }, [canGoForward, historyIndex, history, onCategoryChange]);
-
-  return {
-    currentCategory,
-    history,
-    canGoBack,
-    canGoForward,
-    navigateTo,
-    goBack,
-    goForward,
-  };
-}

package/src/layouts/UILayout/hooks/useComponentSearch.ts

@@ -1,81 +0,0 @@
-/**
- * useComponentSearch Hook
- * Search and filter components
- */
-
-'use client';
-
-import { useState, useCallback, useMemo } from 'react';
-import type { ComponentConfig } from '../types';
-
-interface UseComponentSearchOptions {
-  /** All available components */
-  components: ComponentConfig[];
-  /** Search in these fields */
-  searchFields?: Array<keyof ComponentConfig>;
-}
-
-interface UseComponentSearchReturn {
-  /** Search query */
-  query: string;
-  /** Set search query */
-  setQuery: (query: string) => void;
-  /** Filtered results */
-  results: ComponentConfig[];
-  /** Clear search */
-  clear: () => void;
-  /** Is searching */
-  isSearching: boolean;
-}
-
-/**
- * Hook for searching components
- * Supports fuzzy search across multiple fields
- */
-export function useComponentSearch(
-  options: UseComponentSearchOptions
-): UseComponentSearchReturn {
-  const {
-    components,
-    searchFields = ['name', 'description', 'category'],
-  } = options;
-
-  const [query, setQuery] = useState('');
-
-  const results = useMemo(() => {
-    if (!query.trim()) {
-      return components;
-    }
-
-    const lowerQuery = query.toLowerCase();
-
-    return components.filter((component) => {
-      return searchFields.some((field) => {
-        const value = component[field];
-        if (typeof value === 'string') {
-          return value.toLowerCase().includes(lowerQuery);
-        }
-        if (Array.isArray(value)) {
-          return value.some((item) =>
-            String(item).toLowerCase().includes(lowerQuery)
-          );
-        }
-        return false;
-      });
-    });
-  }, [query, components, searchFields]);
-
-  const clear = useCallback(() => {
-    setQuery('');
-  }, []);
-
-  const isSearching = useMemo(() => query.trim().length > 0, [query]);
-
-  return {
-    query,
-    setQuery,
-    results,
-    clear,
-    isSearching,
-  };
-}

package/src/layouts/UILayout/hooks/useSidebarState.ts

@@ -1,36 +0,0 @@
-/**
- * useSidebarState Hook
- * Manages sidebar open/close state
- */
-
-'use client';
-
-import { useState, useCallback } from 'react';
-import type { SidebarState } from '../types';
-
-/**
- * Hook for managing sidebar state
- * Provides open/close/toggle functionality
- */
-export function useSidebarState(): SidebarState {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggle = useCallback(() => {
-    setIsOpen(prev => !prev);
-  }, []);
-
-  const open = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  return {
-    isOpen,
-    toggle,
-    open,
-    close,
-  };
-}

package/src/layouts/UILayout/index.ts

@@ -1,160 +0,0 @@
-/**
- * UILayout Module Exports
- * Декомпозированная, модульная архитектура для UI документации
- */
-
-// ============================================================================
-// CORE COMPONENTS
-// ============================================================================
-
-export {
-  UILayout,
-  UILayoutSidebar,
-  UIGuideApp,
-  UIGuideView,
-  UIGuideLanding,
-} from './core';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-export type {
-  // Component types
-  ComponentConfig,
-  ComponentCategory,
-  // Layout types
-  UILayoutProps,
-  LayoutConfig,
-  UILayoutConfig,
-  // Navigation types
-  NavigationState,
-  SidebarState,
-} from './types';
-
-// ============================================================================
-// HOOKS
-// ============================================================================
-
-export {
-  useSidebarState,
-  useAIExport,
-  useCategoryNavigation,
-  useComponentSearch,
-} from './hooks';
-
-// ============================================================================
-// COMPONENTS
-// ============================================================================
-
-// Layout components
-export {
-  Header,
-  HeaderMobile,
-  HeaderDesktop,
-  CopyAIButton,
-  Sidebar,
-  SidebarContent,
-  SidebarCategory,
-  SidebarFooter,
-  MobileOverlay,
-} from './components/layout';
-
-export type {
-  HeaderProps,
-  SidebarProps,
-  MobileOverlayProps,
-} from './components/layout';
-
-// Shared components
-export {
-  CountBadge,
-  CodeBlock,
-  CopyButton,
-  Section,
-} from './components/shared';
-
-// Content components
-export {
-  AutoComponentDemo,
-  CategorySection,
-  CategoryRenderer,
-  TailwindGuideRenderer,
-} from './components';
-
-// ============================================================================
-// CONFIGURATION
-// ============================================================================
-
-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';
-
-export type {
-  TailwindGuide,
-  UILibraryConfig,
-} from './config';
-
-// ============================================================================
-// UTILITIES
-// ============================================================================
-
-export {
-  // AI Export utilities
-  formatComponentAsMarkdown,
-  formatComponentsAsMarkdownList,
-  formatImports,
-  formatCodeBlock,
-  formatSectionHeader,
-  formatList,
-  // Component helpers
-  searchComponents,
-  filterByCategory,
-  filterByTags,
-  getUniqueCategories,
-  getUniqueTags,
-  findComponentByName,
-  applyFilters,
-  sortComponents,
-  groupComponentsBy,
-} from './utils';
-
-export type {
-  FilterOptions,
-} from './utils/component-helpers/filter';
-
-// ============================================================================
-// CONTEXT
-// ============================================================================
-
-export { ShowcaseProvider, useShowcase } from './context';
-
-// ============================================================================
-// CONSTANTS
-// ============================================================================
-
-export * from './constants';

package/src/layouts/UILayout/types/component.ts

@@ -1,45 +0,0 @@
-/**
- * Component Configuration Types
- */
-
-import type { ReactNode } from 'react';
-
-/**
- * Component Configuration
- * Defines metadata and content for a single component
- */
-export interface ComponentConfig {
-  /** Component name (e.g., "Button") */
-  name: string;
-  /** Category ID this component belongs to */
-  category: string;
-  /** Short description of the component */
-  description: string;
-  /** Import statement (e.g., "import { Button } from '@djangocfg/ui';") */
-  importPath: string;
-  /** Code example as string */
-  example: string;
-  /** Live preview component */
-  preview: ReactNode;
-  /** Optional tags for filtering */
-  tags?: string[];
-  /** Optional dependencies */
-  dependencies?: string[];
-}
-
-/**
- * Component Category
- * Defines a category in the sidebar navigation
- */
-export interface ComponentCategory {
-  /** Unique category ID */
-  id: string;
-  /** Display label */
-  label: string;
-  /** Icon component */
-  icon: ReactNode;
-  /** Number of components in this category */
-  count?: number;
-  /** Category description */
-  description?: string;
-}

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

@@ -1,23 +0,0 @@
-/**
- * UILayout Types
- * Centralized type definitions
- */
-
-// Component types
-export type {
-  ComponentConfig,
-  ComponentCategory,
-} from './component';
-
-// Layout types
-export type {
-  UILayoutProps,
-  LayoutConfig,
-  UILayoutConfig,
-} from './layout';
-
-// Navigation types
-export type {
-  NavigationState,
-  SidebarState,
-} from './navigation';

package/src/layouts/UILayout/types/layout.ts

@@ -1,57 +0,0 @@
-/**
- * Layout Configuration Types
- */
-
-import type { ReactNode } from 'react';
-import type { ComponentCategory } from './component';
-
-/**
- * UILayout Props
- * Main layout component props
- */
-export interface UILayoutProps {
-  /** Content to render in the main area */
-  children: ReactNode;
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Available categories */
-  categories: ComponentCategory[];
-  /** Current selected category */
-  currentCategory?: string;
-  /** Callback when category changes */
-  onCategoryChange?: (categoryId: string) => void;
-  /** Logo component */
-  logo?: ReactNode;
-  /** Project name */
-  projectName?: string;
-}
-
-/**
- * Layout Configuration
- * Defines layout dimensions and behavior
- */
-export interface LayoutConfig {
-  /** Header height in pixels */
-  headerHeight?: number;
-  /** Container max width */
-  containerMaxWidth?: string;
-  /** Enable sticky header */
-  stickyHeader?: boolean;
-}
-
-/**
- * UILayout Configuration
- * Complete configuration for UILayout
- */
-export interface UILayoutConfig {
-  /** Layout configuration */
-  layout?: LayoutConfig;
-  /** Default category to show */
-  defaultCategory?: string;
-  /** Enable search */
-  enableSearch?: boolean;
-  /** Enable breadcrumbs */
-  enableBreadcrumbs?: boolean;
-}

package/src/layouts/UILayout/types/navigation.ts

@@ -1,33 +0,0 @@
-/**
- * Navigation Types
- */
-
-/**
- * Navigation State
- * Tracks navigation history and current position
- */
-export interface NavigationState {
-  /** Current category ID */
-  currentCategory: string;
-  /** Navigation history */
-  history: string[];
-  /** Can navigate back */
-  canGoBack: boolean;
-  /** Can navigate forward */
-  canGoForward: boolean;
-}
-
-/**
- * Sidebar State
- * Tracks sidebar open/close state
- */
-export interface SidebarState {
-  /** Is sidebar open (mobile) */
-  isOpen: boolean;
-  /** Toggle sidebar */
-  toggle: () => void;
-  /** Open sidebar */
-  open: () => void;
-  /** Close sidebar */
-  close: () => void;
-}

package/src/layouts/UILayout/utils/ai-export/formatters.ts

@@ -1,71 +0,0 @@
-/**
- * AI Export Formatters
- * Formatting utilities for AI documentation
- */
-
-import type { ComponentConfig } from '../../types';
-
-/**
- * Format component as markdown
- */
-export function formatComponentAsMarkdown(component: ComponentConfig): string {
-  return `
-### ${component.name}
-${component.description}
-
-\`\`\`tsx
-${component.importPath}
-
-${component.example}
-\`\`\`
-`.trim();
-}
-
-/**
- * Format multiple components as markdown list
- */
-export function formatComponentsAsMarkdownList(
-  components: ComponentConfig[]
-): string {
-  return components.map(formatComponentAsMarkdown).join('\n\n');
-}
-
-/**
- * Format import statements
- */
-export function formatImports(components: ComponentConfig[]): string {
-  const uniqueImports = new Set(components.map((c) => c.importPath));
-  return Array.from(uniqueImports).join('\n');
-}
-
-/**
- * Format code block
- */
-export function formatCodeBlock(code: string, language = 'tsx'): string {
-  return `\`\`\`${language}\n${code}\n\`\`\``;
-}
-
-/**
- * Format section header
- */
-export function formatSectionHeader(
-  title: string,
-  level: number = 2,
-  count?: number
-): string {
-  const hashes = '#'.repeat(level);
-  const countStr = count !== undefined ? ` (${count})` : '';
-  return `${hashes} ${title}${countStr}`;
-}
-
-/**
- * Format list
- */
-export function formatList(items: string[], ordered = false): string {
-  return items
-    .map((item, index) => {
-      const prefix = ordered ? `${index + 1}. ` : '- ';
-      return `${prefix}${item}`;
-    })
-    .join('\n');
-}

package/src/layouts/UILayout/utils/ai-export/index.ts

@@ -1,5 +0,0 @@
-/**
- * AI Export Utilities
- */
-
-export * from './formatters';