@djangocfg/layouts 1.4.27 → 1.4.29

package/src/layouts/UILayout/SUMMARY.md

@@ -1,298 +0,0 @@
-# UILayout - Декомпозиция завершена ✅
-
-## 🎉 Результат
-
-**TypeScript check: PASSED ✅**
-
-```bash
-> pnpm check
-> tsc --noEmit
-# No errors!
-```
-
-## 📊 Финальная статистика
-
-### Структура проекта
-```
-UILayout/
-├── 📁 core/              5 файлов  - Главные компоненты
-├── 📁 types/             4 файла   - Структурированные типы
-├── 📁 hooks/             5 файлов  - Custom hooks
-├── 📁 components/
-│   ├── layout/          13 файлов  - Декомпозированные layout
-│   ├── shared/           9 файлов  - Переиспользуемые UI
-│   └── content/          3 файла   - Content компоненты
-├── 📁 utils/             7 файлов  - AI export + helpers
-├── 📁 config/           15 файлов  - Конфигурация (не изменена)
-├── 📁 context/           2 файла   - React Context (не изменен)
-└── 📁 docs/              4 файла   - Документация
-
-Всего файлов: 65
-Новых файлов: ~48
-```
-
-### Созданные модули
-
-#### 1. **Types** (4 файла)
-- `component.ts` - ComponentConfig, ComponentCategory
-- `layout.ts` - UILayoutProps, LayoutConfig, UILayoutConfig
-- `navigation.ts` - NavigationState, SidebarState
-- `index.ts` - Re-exports
-
-#### 2. **Hooks** (5 файлов)
-- `useSidebarState.ts` - Управление sidebar
-- `useAIExport.ts` - AI экспорт с feedback
-- `useCategoryNavigation.ts` - Навигация с историей
-- `useComponentSearch.ts` - Поиск компонентов
-- `index.ts` - Re-exports
-
-#### 3. **Components**
-
-**Layout** (13 файлов):
-- `Header/` → 5 файлов (Header, HeaderDesktop, HeaderMobile, CopyAIButton, index)
-- `Sidebar/` → 5 файлов (Sidebar, SidebarContent, SidebarCategory, SidebarFooter, index)
-- `MobileOverlay/` → 2 файла (MobileOverlay, index)
-- `index.ts`
-
-**Shared** (9 файлов):
-- `Badge/` → 2 файла (CountBadge, index)
-- `CodeBlock/` → 3 файла (CodeBlock, CopyButton, index)
-- `Section/` → 2 файла (Section, index)
-- `index.ts`
-
-#### 4. **Utils** (7 файлов)
-- `ai-export/` → 3 файла (generators, formatters, index)
-- `component-helpers/` → 3 файла (search, filter, index)
-- `index.ts`
-
-#### 5. **Core** (5 файлов)
-- `UILayout.tsx` - Главный layout
-- `UIGuideApp.tsx` - App wrapper
-- `UIGuideView.tsx` - View component
-- `UIGuideLanding.tsx` - Landing page
-- `index.ts` - Re-exports
-
-## 🔧 Ключевые улучшения
-
-### 1. Декомпозиция компонентов
-```
-Header:  1 файл (115 строк) → 5 файлов (декомпозировано)
-Sidebar: 1 файл (189 строк) → 5 файлов (декомпозировано)
-```
-
-### 2. Новые hooks
-```typescript
-✅ useSidebarState()      - Управление sidebar
-✅ useAIExport()          - AI экспорт
-✅ useCategoryNavigation() - Навигация с историей
-✅ useComponentSearch()    - Поиск компонентов
-```
-
-### 3. Shared компоненты
-```typescript
-✅ <CountBadge />  - Бейдж счетчика
-✅ <CodeBlock />   - Блок кода с копированием
-✅ <Section />     - Секция с заголовком
-```
-
-### 4. Utils функции (15+)
-```typescript
-// AI Export
-✅ generateAIContext()
-✅ generateTailwindSection()
-✅ formatComponentAsMarkdown()
-✅ formatCodeBlock()
-
-// Component Helpers
-✅ searchComponents()
-✅ filterByCategory()
-✅ filterByTags()
-✅ applyFilters()
-✅ sortComponents()
-✅ groupComponentsBy()
-```
-
-## 📦 Публичные exports
-
-### Полный список экспортов:
-```typescript
-// Core
-export { UILayout, UIGuideApp, UIGuideView, UIGuideLanding } from '@djangocfg/layouts/UILayout';
-
-// Types
-export type {
-  ComponentConfig,
-  ComponentCategory,
-  UILayoutProps,
-  LayoutConfig,
-  UILayoutConfig,
-  NavigationState,
-  SidebarState,
-} from '@djangocfg/layouts/UILayout';
-
-// Hooks
-export {
-  useSidebarState,
-  useAIExport,
-  useCategoryNavigation,
-  useComponentSearch,
-} from '@djangocfg/layouts/UILayout';
-
-// Layout Components
-export {
-  Header,
-  HeaderDesktop,
-  HeaderMobile,
-  CopyAIButton,
-  Sidebar,
-  SidebarContent,
-  SidebarCategory,
-  SidebarFooter,
-  MobileOverlay,
-} from '@djangocfg/layouts/UILayout';
-
-// Shared Components
-export {
-  CountBadge,
-  CodeBlock,
-  CopyButton,
-  Section,
-} from '@djangocfg/layouts/UILayout';
-
-// Utils
-export {
-  generateAIContext,
-  searchComponents,
-  filterByCategory,
-  applyFilters,
-  sortComponents,
-  // ... и еще 10+
-} from '@djangocfg/layouts/UILayout';
-
-// Config
-export {
-  CATEGORIES,
-  COMPONENTS_CONFIG,
-  TAILWIND_GUIDE,
-  // ... весь config
-} from '@djangocfg/layouts/UILayout';
-```
-
-## ✨ Преимущества новой структуры
-
-### 1. Модульность
-- ✅ Каждый компонент - отдельный файл
-- ✅ Логика вынесена в hooks
-- ✅ Утилиты изолированы
-
-### 2. Переиспользование
-- ✅ Hooks можно использовать независимо
-- ✅ Shared компоненты универсальны
-- ✅ Utils работают с любыми данными
-
-### 3. Тестируемость
-- ✅ Каждый модуль тестируется отдельно
-- ✅ Hooks изолированы
-- ✅ Utils - чистые функции
-
-### 4. Масштабируемость
-- ✅ Легко добавлять hooks
-- ✅ Просто создавать shared компоненты
-- ✅ Удобно расширять utils
-
-### 5. Типобезопасность
-- ✅ Структурированные types
-- ✅ Все типы экспортируются
-- ✅ TypeScript check проходит
-
-## 🔄 Изменения
-
-### Удалено
-- ❌ Backward compatibility (ComponentShowcaseLayout)
-- ❌ Старые файлы из корня
-- ❌ Дублирующиеся компоненты
-- ❌ Legacy exports
-
-### Добавлено
-- ✅ 4 новых hooks
-- ✅ 3 shared компонента
-- ✅ 15+ utils функций
-- ✅ Структурированные types
-- ✅ Декомпозированные layout компоненты
-
-## 📚 Документация
-
-Создано 4 документа:
-1. **README.md** - Основная документация
-2. **STRUCTURE.md** - Детальная структура (3 уровня)
-3. **MIGRATION.md** - Руководство по использованию
-4. **FINAL_REPORT.md** - Полный отчет о декомпозиции
-5. **SUMMARY.md** - Этот краткий отчет
-
-## 💡 Примеры использования
-
-### 1. Использование hooks
-```typescript
-import { useSidebarState, useAIExport } from '@djangocfg/layouts/UILayout';
-
-function MyComponent() {
-  const sidebar = useSidebarState();
-  const { exportForAI, copied } = useAIExport({
-    generateContext: () => generateAIContext(),
-  });
-
-  return (
-    <div>
-      <button onClick={sidebar.toggle}>Toggle</button>
-      <button onClick={exportForAI}>
-        {copied ? 'Copied!' : 'Copy for AI'}
-      </button>
-    </div>
-  );
-}
-```
-
-### 2. Использование shared компонентов
-```typescript
-import { Section, CodeBlock, CountBadge } from '@djangocfg/layouts/UILayout';
-
-<Section title="API" description="Documentation">
-  <CodeBlock code="npm install" language="bash" showCopy={true} />
-  <CountBadge count={42} active={true} />
-</Section>
-```
-
-### 3. Использование utils
-```typescript
-import { searchComponents, applyFilters } from '@djangocfg/layouts/UILayout';
-
-const results = searchComponents(COMPONENTS_CONFIG, 'button');
-const filtered = applyFilters(COMPONENTS_CONFIG, {
-  category: 'forms',
-  query: 'input',
-});
-```
-
-## 🎯 Итоги
-
-### Достигнуто
-✅ Полная декомпозиция UILayout
-✅ Создано 48+ новых модульных файлов
-✅ 4 новых custom hooks
-✅ 3 переиспользуемых shared компонента
-✅ 15+ utils функций
-✅ Структурированные types
-✅ TypeScript check проходит без ошибок
-✅ Убрана backward compatibility
-✅ Чистая модульная архитектура
-
-### Качество кода
-✅ Модульность: 100%
-✅ Типобезопасность: 100%
-✅ Тестируемость: Высокая
-✅ Масштабируемость: Отличная
-✅ Документация: Полная
-
-## 🚀 Готово к использованию!
-
-Декомпозиция UILayout успешно завершена. Новая структура полностью готова к production использованию.

package/src/layouts/UILayout/TOOLS_INTEGRATION.md

@@ -1,216 +0,0 @@
-# Developer Tools Integration
-
-## Overview
-
-Successfully integrated three developer tool components into the UILayout showcase:
-
-1. **JsonTree** - Interactive JSON viewer with expand/collapse functionality
-2. **PrettyCode** - Syntax-highlighted code display
-3. **Mermaid** - Diagram renderer with fullscreen support
-
-## Changes Made
-
-### 1. Created Tools Configuration
-
-**File**: `config/components/tools.config.tsx`
-
-- Defined 3 component configurations with examples and previews
-- Added sample data for demonstrations
-- Included comprehensive usage examples
-
-### 2. Updated Components Index
-
-**File**: `config/components/index.ts`
-
-- Added `TOOLS_COMPONENTS` export
-- Integrated tools into `COMPONENTS_CONFIG` array
-- Tools now available in component registry
-
-### 3. Added Developer Tools Category
-
-**File**: `config/categories.config.tsx`
-
-- Created new "Developer Tools" category
-- Added Wrench icon from lucide-react
-- Positioned between "Specialized" and "Blocks" categories
-- Description: "Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams"
-
-### 4. Updated Tools Exports
-
-**File**: `packages/ui/src/tools/index.ts`
-
-- Ensured all tools are properly exported as named exports
-- Exported TypeScript types (Language, JsonTreeConfig)
-
-## Component Features
-
-### JsonTree
-
-**Features:**
-- Expand/collapse all functionality
-- Smart auto-expansion based on depth and collection size
-- Collection info display (array length, object keys count)
-- Copy to clipboard
-- Download as JSON file
-- Theme-aware colors using CSS variables
-- String truncation for long values
-- Configurable expansion limits
-
-**Configuration Options:**
-- `maxAutoExpandDepth` - Maximum depth to auto-expand (default: 2)
-- `maxAutoExpandArrayItems` - Max array items to auto-expand (default: 10)
-- `maxAutoExpandObjectKeys` - Max object keys to auto-expand (default: 5)
-- `maxStringLength` - String truncation threshold (default: 200)
-- `collectionLimit` - Collection size limit for performance (default: 50)
-- `showCollectionInfo` - Display collection metadata
-- `showExpandControls` - Show expand/collapse buttons
-- `showActionButtons` - Show copy/download buttons
-
-### PrettyCode
-
-**Features:**
-- Syntax highlighting with Prism
-- Automatic language detection
-- Theme support (dark/light)
-- Inline and block modes
-- Language badge display
-- Support for 15+ languages
-- Custom background colors
-- JSON auto-formatting
-
-**Supported Languages:**
-- JavaScript/TypeScript
-- Python
-- Bash/Shell
-- JSON, YAML, XML
-- HTML, CSS
-- SQL
-- Markdown
-- And more...
-
-### Mermaid
-
-**Features:**
-- Fullscreen modal view
-- Click to expand
-- ESC key to close
-- Theme-aware rendering
-- Semantic color variables
-- Support for all Mermaid diagram types
-- Responsive SVG sizing
-- Error handling with user feedback
-
-**Supported Diagrams:**
-- Flowchart / Graph
-- Sequence diagram
-- Class diagram
-- State diagram
-- Entity Relationship diagram
-- User Journey
-- Gantt chart
-- Pie chart
-- Git graph
-
-## Usage in UILayout
-
-The tools are now accessible through the UILayout navigation:
-
-1. Navigate to **Developer Tools** category in sidebar
-2. Click on any tool (JsonTree, PrettyCode, Mermaid)
-3. View live preview and usage examples
-4. Copy code examples for use in your project
-
-## Import Examples
-
-```tsx
-// Individual imports
-import { JsonTree } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui';
-import { Mermaid } from '@djangocfg/ui';
-
-// All at once
-import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
-```
-
-## Preview Examples
-
-### JsonTree Preview
-```tsx
-<JsonTree
-  title="User Data"
-  data={{
-    user: {
-      id: 1,
-      name: "John Doe",
-      profile: { bio: "Software engineer" }
-    }
-  }}
-  config={{
-    maxAutoExpandDepth: 2,
-    showCollectionInfo: true,
-    showExpandControls: true,
-  }}
-/>
-```
-
-### PrettyCode Preview
-```tsx
-<PrettyCode
-  data={pythonCode}
-  language="python"
-/>
-```
-
-### Mermaid Preview
-```tsx
-<Mermaid
-  chart={`
-    graph TD
-      A[Start] --> B{Decision}
-      B -->|Yes| C[OK]
-      B -->|No| D[End]
-  `}
-/>
-```
-
-## File Structure
-
-```
-UILayout/
-├── config/
-│   ├── components/
-│   │   ├── tools.config.tsx        # NEW - Tools configurations
-│   │   └── index.ts                # UPDATED - Added tools export
-│   └── categories.config.tsx       # UPDATED - Added tools category
-└── TOOLS_INTEGRATION.md           # THIS FILE
-```
-
-## Testing
-
-To verify the integration:
-
-1. Start the development server
-2. Navigate to UILayout showcase
-3. Check sidebar for "Developer Tools" category
-4. Verify all 3 components render correctly
-5. Test interactive features:
-   - JsonTree: expand/collapse, copy, download
-   - PrettyCode: syntax highlighting in different themes
-   - Mermaid: fullscreen view, ESC key close
-
-## Next Steps
-
-Potential enhancements:
-- Add search functionality to JsonTree
-- Add more code language examples to PrettyCode
-- Add more diagram type examples to Mermaid
-- Create composite examples combining multiple tools
-- Add performance benchmarks section
-
-## Notes
-
-- All components are theme-aware using CSS variables
-- All components support both light and dark modes
-- All components are fully responsive
-- No breaking changes to existing components
-- Backward compatible with existing UILayout structure

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

@@ -1,77 +0,0 @@
-/**
- * AutoComponentDemo
- * Automatically renders component demos from configuration
- */
-
-'use client';
-
-import React from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
-import { PrettyCode } from '@djangocfg/ui/tools';
-import type { ComponentConfig } from '../config';
-
-interface AutoComponentDemoProps {
-  component: ComponentConfig;
-}
-
-/**
- * AutoComponentDemo - Renders a component demo from config
- * This is the single component used to display all UI components
- */
-export function AutoComponentDemo({ component }: AutoComponentDemoProps) {
-  return (
-    <Card className="mb-6">
-      <CardHeader>
-        <CardTitle className="text-lg">{component.name}</CardTitle>
-        <CardDescription>{component.description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Tabs defaultValue="preview" className="w-full">
-          <TabsList className="mb-4">
-            <TabsTrigger value="preview">Preview</TabsTrigger>
-            <TabsTrigger value="code">Code</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="preview" className="space-y-4">
-            <div className="p-6 border rounded-md bg-card">
-              {component.preview}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="code">
-            <PrettyCode
-              data={`${component.importPath}\n\n${component.example}`}
-              language="tsx"
-              className="text-sm"
-            />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  );
-}
-
-/**
- * CategorySection - Groups related component demos
- */
-interface CategorySectionProps {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-export function CategorySection({ title, description, children }: CategorySectionProps) {
-  return (
-    <div className="mb-12">
-      <div className="mb-6">
-        <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
-        {description && (
-          <p className="text-muted-foreground mt-2">{description}</p>
-        )}
-      </div>
-      <div className="space-y-6">
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-/**
- * CategoryRenderer
- * Universal renderer for any category using config data
- */
-
-'use client';
-
-import React from 'react';
-import { getComponentsByCategory, getCategoryById } from '../config';
-import { AutoComponentDemo, CategorySection } from './AutoComponentDemo';
-
-interface CategoryRendererProps {
-  categoryId: string;
-}
-
-/**
- * CategoryRenderer - Dynamically renders all components in a category
- * No need for separate demo files - everything comes from config
- */
-export function CategoryRenderer({ categoryId }: CategoryRendererProps) {
-  const category = getCategoryById(categoryId);
-  const components = getComponentsByCategory(categoryId);
-
-  if (!category || components.length === 0) {
-    return (
-      <div className="p-8 text-center text-muted-foreground">
-        <p>No components found for this category</p>
-      </div>
-    );
-  }
-
-  return (
-    <CategorySection
-      title={category.label}
-      description={category.description}
-    >
-      {components.map((component) => (
-        <AutoComponentDemo
-          key={component.name}
-          component={component}
-        />
-      ))}
-    </CategorySection>
-  );
-}