@djangocfg/layouts 1.4.27 → 1.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.27",
+  "version": "1.4.28",
   "description": "Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS",
   "keywords": [
     "layouts",
@@ -85,9 +85,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.27",
-    "@djangocfg/og-image": "^1.4.27",
-    "@djangocfg/ui": "^1.4.27",
+    "@djangocfg/api": "^1.4.28",
+    "@djangocfg/og-image": "^1.4.28",
+    "@djangocfg/ui": "^1.4.28",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -109,7 +109,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.27",
+    "@djangocfg/typescript-config": "^1.4.28",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/middlewares/index.ts

@@ -1 +1 @@
-export { middleware, config } from './proxy'; 
+export { proxyMiddleware, proxyMiddlewareConfig } from './proxy'; 

package/src/auth/middlewares/proxy.ts

@@ -1,6 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-export function middleware(request: NextRequest) {
+/**
+ * Proxy middleware for media and API endpoints
+ * Use this in your middleware.ts file
+ */
+export function proxyMiddleware(request: NextRequest) {
   const { pathname, search } = request.nextUrl;
   const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
@@ -19,6 +23,10 @@ export function middleware(request: NextRequest) {
   return NextResponse.next();
 }
 
-export const config = {
+/**
+ * Recommended matcher config for proxy middleware
+ * Add this to your middleware.ts config
+ */
+export const proxyMiddlewareConfig = {
   matcher: ['/media/:path*', '/api/:path*'],
 };

package/src/layouts/index.ts

@@ -9,8 +9,5 @@ export * from './PaymentsLayout';
 export * from './AppLayout';
 export * from './ErrorLayout';
 
-// UILayout - Config-driven UI documentation layout
-export * from './UILayout';
-
 // Note: CfgLayout is now part of AppLayout exports
 // Import it via: import { CfgLayout, useCfgApp } from '@djangocfg/layouts';

package/src/snippets/ContactForm/ContactPage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Mail, MapPin, Calendar } from 'lucide-react';
+import { Mail, MapPin, Calendar, MessageCircle } from 'lucide-react';
 import { ContactFormBase as ContactForm } from './ContactForm';
 import { ContactInfo } from './ContactInfo';
 import type { ContactDetail, LeadSubmissionResult } from './types';
@@ -15,6 +15,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const DEFAULT_CONFIG = {
   apiUrl: isDev ? 'http://localhost:8000' : 'https://api.reforms.ai',
   email: 'markolofsen@gmail.com',
+  telegram: '+62 813 39646301',
   calendly: 'https://calendly.com/markolofsen/meeting',
 };
 
@@ -27,6 +28,8 @@ export interface ContactPageProps {
   apiUrl?: string;
   /** Override email */
   email?: string;
+  /** Override telegram */
+  telegram?: string;
   /** Override calendly link */
   calendlyUrl?: string;
   /** Page title */
@@ -61,6 +64,7 @@ export interface ContactPageProps {
 export function ContactPageBase({
   apiUrl = DEFAULT_CONFIG.apiUrl,
   email = DEFAULT_CONFIG.email,
+  telegram = DEFAULT_CONFIG.telegram,
   calendlyUrl = DEFAULT_CONFIG.calendly,
   title = 'Get in Touch',
   subtitle = "Have a question or want to work together? We'd love to hear from you.",
@@ -69,6 +73,9 @@ export function ContactPageBase({
   className,
   onSuccess,
 }: ContactPageProps) {
+  // Format phone for tel: link (remove spaces)
+  const telegramPhone = telegram.replace(/\s/g, '');
+
   const contactDetails: ContactDetail[] = [
     {
       icon: <Mail className="h-5 w-5" />,
@@ -76,6 +83,12 @@ export function ContactPageBase({
       value: email,
       href: `mailto:${email}`,
     },
+    {
+      icon: <MessageCircle className="h-5 w-5" />,
+      label: 'Telegram',
+      value: telegram,
+      href: `https://t.me/${telegramPhone}`,
+    },
     {
       icon: <MapPin className="h-5 w-5" />,
       label: 'Location',
@@ -96,8 +109,8 @@ export function ContactPageBase({
       </div>
 
       {/* Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <div className="lg:col-span-2">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
+        <div>
           <ContactForm apiUrl={apiUrl} onSuccess={onSuccess} />
         </div>
         <div>

package/src/layouts/UILayout/README.md

@@ -1,267 +0,0 @@
-# UILayout - Config-Driven UI Documentation System
-
-Modern, type-safe layout system for showcasing UI component libraries with built-in "Copy for AI" functionality.
-
-## 🎯 Key Features
-
-- **Config-Driven**: Single source of truth for all component documentation
-- **Type-Safe**: Full TypeScript support with strict typing
-- **Auto-Rendering**: Components automatically rendered from config
-- **AI-Ready**: One-click export of entire documentation for AI consumption
-- **Responsive**: Mobile-first design with adaptive sidebar
-- **Dark Mode**: Built-in theme support
-- **Organized**: Modular config structure by category
-
-## 📁 Structure
-
-```
-UILayout/
-├── config/                    # All configuration (Single Source of Truth)
-│   ├── components/           # Component configs by category
-│   │   ├── forms.config.tsx       # 8 form components
-│   │   ├── layout.config.tsx      # 5 layout components
-│   │   ├── navigation.config.tsx  # 4 navigation components
-│   │   ├── overlay.config.tsx     # 11 overlay components
-│   │   ├── feedback.config.tsx    # 5 feedback components
-│   │   ├── data.config.tsx        # 5 data display components
-│   │   ├── specialized.config.tsx # 2 specialized components
-│   │   ├── blocks.config.tsx      # 7 landing page blocks
-│   │   ├── hooks.config.tsx       # 6 custom hooks
-│   │   └── index.ts               # Aggregates all configs
-│   ├── categories.config.tsx # Category definitions
-│   ├── tailwind.config.ts    # Tailwind 4 guidelines
-│   ├── ai-export.config.ts   # AI context generator
-│   └── index.ts              # Main config exports
-├── components/               # React components
-│   ├── AutoComponentDemo.tsx      # Auto-renders from config
-│   ├── CategoryRenderer.tsx       # Renders entire category
-│   ├── TailwindGuideRenderer.tsx  # Renders Tailwind guide
-│   ├── Header.tsx                 # Header with "Copy for AI"
-│   ├── Sidebar.tsx
-│   └── MobileOverlay.tsx
-├── context/                  # React Context
-│   └── ShowcaseContext.tsx   # Navigation state management
-├── UILayout.tsx              # Main layout component
-├── UIGuideView.tsx           # Complete UI guide view
-├── UIGuideLanding.tsx        # Landing page
-└── UIGuideApp.tsx            # Full app wrapper
-```
-
-## 🚀 Quick Start
-
-### Basic Usage
-
-```tsx
-import { UILayout, CATEGORIES } from '@djangocfg/layouts';
-
-function MyComponentGuide() {
-  const [category, setCategory] = useState('forms');
-
-  return (
-    <UILayout
-      title="My Component Library"
-      categories={CATEGORIES}
-      currentCategory={category}
-      onCategoryChange={setCategory}
-    >
-      {/* Your content */}
-    </UILayout>
-  );
-}
-```
-
-### Using Category Renderer (Auto-render from config)
-
-```tsx
-import { UILayout, CATEGORIES, CategoryRenderer } from '@djangocfg/layouts';
-
-function MyComponentGuide() {
-  const [category, setCategory] = useState('forms');
-
-  return (
-    <UILayout
-      title="My Component Library"
-      categories={CATEGORIES}
-      currentCategory={category}
-      onCategoryChange={setCategory}
-    >
-      {/* Automatically renders all components in category */}
-      <CategoryRenderer categoryId={category} />
-    </UILayout>
-  );
-}
-```
-
-### Using Complete UI Guide
-
-```tsx
-import { UIGuideApp } from '@djangocfg/layouts';
-
-// Complete pre-configured UI guide with all components
-export default function Page() {
-  return <UIGuideApp />;
-}
-```
-
-## 📝 Adding New Components
-
-### 1. Add to Config
-
-Edit the appropriate config file in `config/components/`:
-
-```tsx
-// config/components/forms.config.tsx
-export const FORM_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'MyComponent',
-    category: 'forms',
-    description: 'A custom form component',
-    importPath: "import { MyComponent } from '@mylib/ui';",
-    example: `<MyComponent value="test" onChange={handler} />`,
-    preview: <MyComponent value="test" onChange={() => {}} />
-  },
-  // ... other components
-];
-```
-
-### 2. That's It!
-
-No need to:
-- ❌ Create separate demo files
-- ❌ Write duplicate rendering code
-- ❌ Update multiple places
-
-The component automatically:
-- ✅ Appears in the UI guide
-- ✅ Gets included in "Copy for AI"
-- ✅ Shows in the category with proper formatting
-
-## 🤖 Copy for AI Feature
-
-Click the "Copy for AI" button in the header to export entire documentation including:
-
-- ✅ Tailwind CSS v4 guidelines and best practices
-- ✅ All 53 components with full examples
-- ✅ Import statements
-- ✅ Usage examples
-- ✅ Properly formatted for AI consumption
-
-Perfect for giving AI assistants complete context about your UI library!
-
-## 📊 Component Statistics
-
-| Category | Components |
-|----------|------------|
-| Forms | 8 |
-| Layout | 5 |
-| Navigation | 4 |
-| Overlay | 11 |
-| Feedback | 5 |
-| Data Display | 5 |
-| Specialized | 2 |
-| Blocks | 7 |
-| Hooks | 6 |
-| **Total** | **53** |
-
-## 🎨 Customization
-
-### Custom Categories
-
-```tsx
-import type { ComponentCategory } from '@djangocfg/layouts';
-
-const customCategories: ComponentCategory[] = [
-  {
-    id: 'custom',
-    label: 'My Category',
-    icon: <MyIcon />,
-    count: 5,
-    description: 'Custom component category'
-  }
-];
-```
-
-### Custom Config
-
-```tsx
-import type { ComponentConfig } from '@djangocfg/layouts';
-
-const customComponents: ComponentConfig[] = [
-  {
-    name: 'Component',
-    category: 'custom',
-    description: '...',
-    importPath: '...',
-    example: '...',
-    preview: <Component />
-  }
-];
-```
-
-## 🔧 API Reference
-
-### UILayout Props
-
-```typescript
-interface UILayoutProps {
-  children: ReactNode;
-  title?: string;
-  description?: string;
-  categories: ComponentCategory[];
-  currentCategory?: string;
-  onCategoryChange?: (categoryId: string) => void;
-  logo?: ReactNode;
-  projectName?: string;
-}
-```
-
-### ComponentConfig Type
-
-```typescript
-interface ComponentConfig {
-  name: string;           // Component name
-  category: string;       // Category ID
-  description: string;    // Short description
-  importPath: string;     // Import statement
-  example: string;        // Code example
-  preview: ReactNode;     // Live preview component
-}
-```
-
-### Available Exports
-
-```typescript
-// Components
-export { UILayout, CategoryRenderer, AutoComponentDemo };
-
-// Views
-export { UIGuideView, UIGuideApp, UIGuideLanding };
-
-// Config
-export {
-  CATEGORIES,
-  COMPONENTS_CONFIG,
-  generateAIContext
-};
-
-// Types
-export type {
-  ComponentConfig,
-  ComponentCategory,
-  UILayoutProps
-};
-```
-
-## 🎯 Benefits
-
-1. **Single Source of Truth**: All component data in one place
-2. **Zero Duplication**: Write component config once, use everywhere
-3. **Type-Safe**: Full TypeScript support prevents errors
-4. **Auto-Update**: Add to config, automatically appears everywhere
-5. **AI-Friendly**: Built-in export for AI assistants
-6. **Maintainable**: Easy to update and extend
-7. **Scalable**: Add categories and components effortlessly
-
-## 📖 More Info
-
-See the main package README for complete documentation and examples.

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 использованию.