@djangocfg/layouts 1.4.26 → 1.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.26",
+  "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.26",
-    "@djangocfg/og-image": "^1.4.26",
-    "@djangocfg/ui": "^1.4.26",
+    "@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.26",
+    "@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/ContactForm.tsx

@@ -58,17 +58,17 @@ export interface ContactFormProps {
 // ============================================================================
 
 /**
- * ContactForm - Contact form using Django-CFG Lead API
+ * ContactFormBase - Contact form using Django-CFG Lead API
+ *
+ * NOTE: Use ContactForm from index.ts which is dynamically imported (ssr: false)
  *
  * @example
  * ```tsx
- * <ContactForm
- *   apiUrl="https://api.example.com"
- *   onSuccess={(result) => console.log('Lead ID:', result.lead_id)}
- * />
+ * import { ContactForm } from '@djangocfg/layouts';
+ * <ContactForm apiUrl="https://api.example.com" />
  * ```
  */
-export function ContactForm({ apiUrl, ...props }: ContactFormProps) {
+export function ContactFormBase({ apiUrl, ...props }: ContactFormProps) {
   return (
     <ContactFormProvider apiUrl={apiUrl}>
       <ContactFormInner {...props} />
@@ -112,20 +112,42 @@ function ContactFormInner({
   const t = { ...DEFAULT_FORM_TEXTS, ...texts };
   const [draft, setDraft, clearDraft] = useLocalStorage<FormDraft>(STORAGE_KEY, emptyDraft);
   const [isSuccess, setIsSuccess] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
 
   const form = useForm<FormData>({
     resolver: zodResolver(Schemas.LeadSubmissionRequestSchema),
+    // Start with empty values to match SSR
     defaultValues: {
       ...emptyDraft,
-      ...draft,
-      site_url: typeof window !== 'undefined' ? window.location.href : '',
+      site_url: '',
     },
   });
 
+  // Hydrate form with localStorage draft and site_url after mount
+  useEffect(() => {
+    if (isHydrated) return;
+    setIsHydrated(true);
+
+    // Apply draft from localStorage and set site_url
+    const currentValues = form.getValues();
+    const hasDraftData = draft.name || draft.email || draft.company || draft.subject || draft.message;
+
+    if (hasDraftData || !currentValues.site_url) {
+      form.reset({
+        ...emptyDraft,
+        ...draft,
+        site_url: window.location.href,
+      });
+    }
+  }, [draft, form, isHydrated]);
+
   // Watch form values and save to localStorage
   const watchedValues = useWatch({ control: form.control });
 
   useEffect(() => {
+    // Only save to localStorage after hydration to avoid unnecessary writes
+    if (!isHydrated) return;
+
     const { name, email, company, subject, message } = watchedValues;
     if (name || email || company || subject || message) {
       setDraft({
@@ -136,14 +158,30 @@ function ContactFormInner({
         message: message || '',
       });
     }
-  }, [watchedValues, setDraft]);
+  }, [watchedValues, setDraft, isHydrated]);
 
   const handleSubmit = async (data: FormData) => {
     try {
       const result = await submit(data);
       if (resetOnSuccess) {
-        form.reset();
-        clearDraft();
+        // Keep contact info (name, email, company), clear only message content
+        const currentValues = form.getValues();
+        form.reset({
+          name: currentValues.name,
+          email: currentValues.email,
+          company: currentValues.company,
+          subject: '',
+          message: '',
+          site_url: currentValues.site_url,
+        });
+        // Update draft to keep contact info
+        setDraft({
+          name: currentValues.name || '',
+          email: currentValues.email || '',
+          company: currentValues.company || '',
+          subject: '',
+          message: '',
+        });
       }
       setIsSuccess(true);
       onSuccess?.(result);
@@ -156,7 +194,16 @@ function ContactFormInner({
 
   const handleReset = () => {
     setIsSuccess(false);
-    form.reset();
+    // Keep contact info when returning to form
+    const currentDraft = draft;
+    form.reset({
+      name: currentDraft.name,
+      email: currentDraft.email,
+      company: currentDraft.company,
+      subject: '',
+      message: '',
+      site_url: typeof window !== 'undefined' ? window.location.href : '',
+    });
   };
 
   // Success state

package/src/snippets/ContactForm/ContactPage.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import React from 'react';
-import { Mail, MapPin, Calendar } from 'lucide-react';
-import { ContactForm } from './ContactForm';
+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 */
@@ -48,31 +51,20 @@ export interface ContactPageProps {
 // ============================================================================
 
 /**
- * ContactPage - Pre-configured contact page component
+ * ContactPageBase - Pre-configured contact page component
  *
- * Ready to use in any project with sensible defaults.
+ * NOTE: Use ContactPage from index.ts which is dynamically imported (ssr: false)
  *
  * @example
  * ```tsx
- * // Minimal usage - just drop it in
+ * import { ContactPage } from '@djangocfg/layouts';
  * <ContactPage />
- *
- * // With custom title
- * <ContactPage
- *   title={<>Contact <span className="text-primary">Us</span></>}
- *   subtitle="We'd love to hear from you"
- * />
- *
- * // Override defaults
- * <ContactPage
- *   apiUrl="https://api.myproject.com"
- *   email="hello@myproject.com"
- * />
  * ```
  */
-export function ContactPage({
+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.",
@@ -81,6 +73,9 @@ export function ContactPage({
   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" />,
@@ -88,6 +83,12 @@ export function ContactPage({
       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',
@@ -108,8 +109,8 @@ export function ContactPage({
       </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/snippets/ContactForm/dynamic.tsx

@@ -0,0 +1,55 @@
+/**
+ * Dynamic ContactForm components (ssr: false)
+ *
+ * Avoids hydration mismatch when using localStorage for form drafts.
+ * Components are loaded client-side only.
+ */
+
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@djangocfg/ui';
+import type { ContactFormProps } from './ContactForm';
+import type { ContactPageProps } from './ContactPage';
+
+function ContactFormSkeleton() {
+  return (
+    <div className="space-y-4">
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-10" />
+      <Skeleton className="w-full h-24" />
+      <Skeleton className="w-full h-10" />
+    </div>
+  );
+}
+
+function ContactPageSkeleton() {
+  return (
+    <div>
+      <div className="text-center mb-8 md:mb-12">
+        <Skeleton className="w-64 h-12 mx-auto mb-4" />
+        <Skeleton className="w-96 h-6 mx-auto" />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2">
+          <ContactFormSkeleton />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="w-full h-32" />
+          <Skeleton className="w-full h-24" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const ContactForm = dynamic<ContactFormProps>(
+  () => import('./ContactForm').then((mod) => mod.ContactFormBase),
+  { ssr: false, loading: () => <ContactFormSkeleton /> }
+);
+
+export const ContactPage = dynamic<ContactPageProps>(
+  () => import('./ContactPage').then((mod) => mod.ContactPageBase),
+  { ssr: false, loading: () => <ContactPageSkeleton /> }
+);

package/src/snippets/ContactForm/index.ts

@@ -2,10 +2,13 @@
 // ContactForm - Contact form using Django-CFG Lead API
 // ============================================================================
 
-// Components
-export { ContactForm, type ContactFormProps } from './ContactForm';
+// Components (dynamic import, ssr: false - no hydration issues)
+export { ContactForm, ContactPage } from './dynamic';
 export { ContactInfo } from './ContactInfo';
-export { ContactPage, type ContactPageProps } from './ContactPage';
+
+// Types
+export type { ContactFormProps } from './ContactForm';
+export type { ContactPageProps } from './ContactPage';
 
 // Provider & Hooks
 export {

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.