@djangocfg/layouts 2.0.4 → 2.0.6

package/src/layouts/AppLayout/AppLayout.tsx

@@ -38,15 +38,16 @@
 
 import React, { ReactNode, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
+import { SWRConfig } from 'swr';
 import { ThemeProvider, Toaster } from '@djangocfg/ui';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
-import { ErrorBoundary } from '../../components/ErrorBoundary';
+import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { AuthProvider, type AuthConfig } from '../../auth/context';
-import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/ErrorsTracker';
+import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
-import { PageProgress } from '../../components/PageProgress';
+import { PageProgress } from '../../components/core/PageProgress';
 import { UpdateNotifier } from '../../components/UpdateNotifier';
-import { Suspense } from '../../components';
+import { Suspense } from '../../components/core';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 
@@ -295,16 +296,25 @@ export function AppLayout(props: AppLayoutProps) {
       defaultTheme={getResolvedTheme()}
       storageKey={theme?.storageKey}
     >
-      <AuthProvider config={auth}>
-        <ErrorTrackingProvider
-          validation={errorTracking?.validation}
-          cors={errorTracking?.cors}
-          network={errorTracking?.network}
-          onError={errorTracking?.onError}
-        >
-          <AppLayoutContent {...props} />
-        </ErrorTrackingProvider>
-      </AuthProvider>
+      <SWRConfig
+        value={{
+          // Default SWR configuration
+          revalidateOnFocus: true,
+          revalidateOnReconnect: true,
+          dedupingInterval: 2000,
+        }}
+      >
+        <AuthProvider config={auth}>
+          <ErrorTrackingProvider
+            validation={errorTracking?.validation}
+            cors={errorTracking?.cors}
+            network={errorTracking?.network}
+            onError={errorTracking?.onError}
+          >
+            <AppLayoutContent {...props} />
+          </ErrorTrackingProvider>
+        </AuthProvider>
+      </SWRConfig>
     </ThemeProvider>
   );
 }

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -13,7 +13,7 @@ import {
   PaymentsProvider,
   OverviewProvider,
   RootPaymentsProvider,
-} from '@djangocfg/api/cfg/contexts';
+} from '@djangocfg/layouts/contexts';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
 import { Wallet, CreditCard, History } from 'lucide-react';
 import { OverviewView } from './views/overview';

package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx

@@ -34,7 +34,7 @@ import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/layouts/contexts';
 import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
 import { openPaymentDetailsDialog } from '../events';
 import { paymentsLogger } from '../../../utils/logger';

package/src/layouts/PaymentsLayout/views/overview/components/BalanceCard.tsx

@@ -16,7 +16,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { Wallet, RefreshCw, Plus } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 import { openCreatePaymentDialog } from '../../../events';
 
 export const BalanceCard: React.FC = () => {

package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx

@@ -16,7 +16,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { History, ExternalLink } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 import { openPaymentDetailsDialog } from '../../../events';
 
 export const RecentPayments: React.FC = () => {

package/src/layouts/PaymentsLayout/views/transactions/components/TransactionsList.tsx

@@ -28,7 +28,7 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { History, Search, Filter, RefreshCw, ArrowUpRight, ArrowDownLeft } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/layouts/contexts';
 
 export const TransactionsList: React.FC = () => {
   const {

package/src/layouts/ProfileLayout/components/ProfileForm.tsx

@@ -23,7 +23,7 @@ import {
   useAccountsContext,
   PatchedUserProfileUpdateRequestSchema,
   type PatchedUserProfileUpdateRequest
-} from '@djangocfg/layouts/auth/context';
+} from '../../../auth/context';
 import { useAuth } from '../../../auth';
 
 export const ProfileForm = () => {

package/src/layouts/SupportLayout/SupportLayout.tsx

@@ -7,7 +7,7 @@
 'use client';
 
 import React from 'react';
-import { SupportProvider } from '@djangocfg/api/cfg/contexts';
+import { SupportProvider } from '@djangocfg/layouts/contexts';
 import { SupportLayoutProvider, useSupportLayoutContext } from './context';
 import {
   TicketList,

package/src/layouts/SupportLayout/components/TicketCard.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { Badge, Card, CardContent, cn } from '@djangocfg/ui';
 import { Clock, MessageSquare } from 'lucide-react';
-import type { Ticket } from '@djangocfg/api/cfg/contexts';
+import type { Ticket } from '@djangocfg/layouts/contexts';
 
 interface TicketCardProps {
   ticket: Ticket;

package/src/layouts/SupportLayout/context/SupportLayoutContext.tsx

@@ -6,7 +6,7 @@
 'use client';
 
 import React, { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
-import { useSupportContext, type Ticket } from '@djangocfg/api/cfg/contexts';
+import { useSupportContext, type Ticket } from '@djangocfg/layouts/contexts';
 import { CfgSupportTypes } from '@djangocfg/api';
 import { supportLogger } from '../../../utils/logger';
 

package/src/layouts/SupportLayout/index.ts

@@ -1,6 +1,8 @@
 export * from './SupportLayout';
 export * from './context';
 export * from './events';
+// types.ts only contains UI-specific types (SupportUIState, TicketFormData)
+// Ticket and Message are exported from @djangocfg/layouts/contexts
 export * from './types';
 export * from './components';
 

package/src/layouts/SupportLayout/types.ts

@@ -3,10 +3,8 @@
  * Types for SupportLayout - combines API types with UI state
  */
 
-import type { Ticket, Message } from '@djangocfg/api/cfg/contexts';
-
-// Re-export API types
-export type { Ticket, Message };
+// Note: Ticket and Message types are exported from @djangocfg/layouts/contexts
+// Import them directly: import type { Ticket, Message } from '@djangocfg/layouts/contexts';
 
 // UI State
 export interface SupportUIState {

package/src/pages/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Pages exports
+ */
+
+export * from './legal';
+

package/src/pages/legal/LegalPage.tsx

@@ -0,0 +1,85 @@
+/**
+ * LegalPage Component
+ *
+ * Reusable component for legal pages (Privacy, Terms, Cookies, Security)
+ * Accepts configuration for flexible content rendering
+ *
+ * Usage:
+ * ```tsx
+ * import { LegalPage } from '@djangocfg/layouts/components/legal';
+ * import { privacyConfig } from './config';
+ *
+ * export default function PrivacyPage() {
+ *   return <LegalPage config={privacyConfig} />;
+ * }
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from '@djangocfg/ui/components';
+import type { LegalPageConfig } from './types';
+
+export interface LegalPageProps {
+  config: LegalPageConfig;
+  className?: string;
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(date: string | Date | undefined): string {
+  if (!date) return '';
+  if (typeof date === 'string') return date;
+  return date.toISOString().split('T')[0];
+}
+
+/**
+ * LegalPage Component
+ */
+export function LegalPage({ config, className }: LegalPageProps) {
+  const { title, lastUpdated, sections } = config;
+
+  return (
+    <div className={`container mx-auto max-w-4xl py-16 px-4 ${className || ''}`}>
+      <div className="flex flex-col gap-8">
+        {/* Header */}
+        <div className="flex flex-col gap-4">
+          <h1 className="text-4xl font-bold">{title}</h1>
+          {lastUpdated && (
+            <p className="text-lg text-muted-foreground">
+              Last updated: {formatDate(lastUpdated)}
+            </p>
+          )}
+        </div>
+
+        {/* Sections */}
+        {sections.map((section, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle>{section.title}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-muted-foreground">
+              {Array.isArray(section.content) ? (
+                <div className="flex flex-col gap-2">
+                  {section.content.map((paragraph, pIndex) => (
+                    <p key={pIndex}>{paragraph}</p>
+                  ))}
+                </div>
+              ) : (
+                <p>{section.content}</p>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/src/pages/legal/configs.ts

@@ -0,0 +1,131 @@
+/**
+ * Default legal page configurations
+ *
+ * Pre-configured content for common legal pages
+ * Can be customized or extended as needed
+ */
+
+import type { LegalPageConfig } from './types';
+
+export const privacyConfig: LegalPageConfig = {
+  title: 'Privacy Policy',
+  sections: [
+    {
+      title: 'Information We Collect',
+      content: 'We collect information that you provide directly to us, including when you create an account, use our services, or communicate with us.',
+    },
+    {
+      title: 'How We Use Your Information',
+      content: [
+        'We use the information we collect to:',
+        'Provide, maintain, and improve our services',
+        'Process transactions and send related information',
+        'Send technical notices and support messages',
+        'Respond to your comments and questions',
+      ],
+    },
+    {
+      title: 'Information Sharing',
+      content: 'We do not share your personal information with third parties except as described in this privacy policy or with your consent.',
+    },
+    {
+      title: 'Data Security',
+      content: 'We take reasonable measures to help protect your personal information from loss, theft, misuse, unauthorized access, disclosure, alteration, and destruction.',
+    },
+    {
+      title: 'Your Rights',
+      content: 'You have the right to access, update, or delete your personal information at any time. Contact us if you wish to exercise these rights.',
+    },
+    {
+      title: 'Changes to This Policy',
+      content: 'We may update this privacy policy from time to time. We will notify you of any changes by posting the new policy on this page.',
+    },
+  ],
+};
+
+export const termsConfig: LegalPageConfig = {
+  title: 'Terms of Service',
+  sections: [
+    {
+      title: '1. Acceptance of Terms',
+      content: 'By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.',
+    },
+    {
+      title: '2. Use License',
+      content: 'Permission is granted to temporarily download one copy of the materials on our service for personal, non-commercial transitory viewing only.',
+    },
+    {
+      title: '3. Disclaimer',
+      content: 'The materials on our service are provided on an \'as is\' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.',
+    },
+    {
+      title: '4. Limitations',
+      content: 'In no event shall we or our suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our service.',
+    },
+    {
+      title: '5. Revisions',
+      content: 'We may revise these terms of service at any time without notice. By using this service you are agreeing to be bound by the then current version of these terms of service.',
+    },
+  ],
+};
+
+export const cookiesConfig: LegalPageConfig = {
+  title: 'Cookie Policy',
+  sections: [
+    {
+      title: 'What Are Cookies?',
+      content: 'Cookies are small text files that are placed on your device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.',
+    },
+    {
+      title: 'Types of Cookies We Use',
+      content: [
+        'Essential Cookies: These cookies are necessary for the website to function properly.',
+        'Performance Cookies: These cookies help us understand how visitors interact with our website.',
+        'Functionality Cookies: These cookies allow us to remember choices you make and provide enhanced features.',
+      ],
+    },
+    {
+      title: 'Managing Cookies',
+      content: 'Most web browsers allow you to control cookies through their settings. You can set your browser to refuse cookies or delete certain cookies. However, please note that if you disable cookies, some features of our website may not function properly.',
+    },
+    {
+      title: 'Third-Party Cookies',
+      content: 'We may use third-party services that also use cookies. These third parties have their own privacy policies, and we do not accept any responsibility or liability for their policies.',
+    },
+    {
+      title: 'Updates to This Policy',
+      content: 'We may update our Cookie Policy from time to time. Any changes will be posted on this page with an updated revision date.',
+    },
+  ],
+};
+
+export const securityConfig: LegalPageConfig = {
+  title: 'Security Policy',
+  sections: [
+    {
+      title: 'Our Commitment to Security',
+      content: 'We take the security of your data seriously. We implement industry-standard security measures to protect your personal information from unauthorized access, disclosure, alteration, and destruction.',
+    },
+    {
+      title: 'Data Encryption',
+      content: 'All data transmitted between your device and our servers is encrypted using industry-standard SSL/TLS protocols. Sensitive data stored in our databases is encrypted at rest using advanced encryption standards.',
+    },
+    {
+      title: 'Access Controls',
+      content: 'Access to user data is strictly limited to authorized personnel who require it to perform their job functions. We employ multi-factor authentication and regular access reviews to ensure that only authorized individuals can access sensitive information.',
+    },
+    {
+      title: 'Security Monitoring',
+      content: 'We continuously monitor our systems for potential security threats and vulnerabilities. Our security team actively tracks and responds to any suspicious activity or potential security incidents.',
+    },
+    {
+      title: 'Reporting Security Issues',
+      content: 'If you discover a security vulnerability or have concerns about our security practices, please report it to us immediately. We appreciate responsible disclosure and will work with you to address any legitimate security concerns.',
+    },
+    {
+      title: 'Regular Security Updates',
+      content: 'We regularly update our systems and software to ensure that known security vulnerabilities are patched promptly. Our infrastructure undergoes periodic security audits and penetration testing to identify and address potential weaknesses.',
+    },
+  ],
+};
+

package/src/pages/legal/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Legal pages exports
+ */
+
+export { LegalPage } from './LegalPage';
+export type { LegalPageProps } from './LegalPage';
+
+export {
+  PrivacyPage,
+  TermsPage,
+  CookiesPage,
+  SecurityPage,
+} from './pages';
+export type { LegalPageComponentProps } from './pages';
+
+export {
+  privacyConfig,
+  termsConfig,
+  cookiesConfig,
+  securityConfig,
+} from './configs';
+
+export type { LegalPageConfig, LegalPageSection } from './types';
+

package/src/pages/legal/pages.tsx

@@ -0,0 +1,58 @@
+/**
+ * Pre-built legal page components
+ *
+ * Ready-to-use page components with default configurations
+ * Can be customized by passing custom config
+ *
+ * Usage:
+ * ```tsx
+ * // app/legal/privacy/page.tsx
+ * import { PrivacyPage } from '@djangocfg/layouts/components/legal';
+ *
+ * export default PrivacyPage;
+ * ```
+ */
+
+'use client';
+
+import { LegalPage } from './LegalPage';
+import {
+  privacyConfig,
+  termsConfig,
+  cookiesConfig,
+  securityConfig,
+} from './configs';
+import type { LegalPageConfig } from './types';
+
+export interface LegalPageComponentProps {
+  config?: LegalPageConfig;
+}
+
+/**
+ * Privacy Policy Page
+ */
+export function PrivacyPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || privacyConfig} />;
+}
+
+/**
+ * Terms of Service Page
+ */
+export function TermsPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || termsConfig} />;
+}
+
+/**
+ * Cookie Policy Page
+ */
+export function CookiesPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || cookiesConfig} />;
+}
+
+/**
+ * Security Policy Page
+ */
+export function SecurityPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || securityConfig} />;
+}
+

package/src/pages/legal/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Legal page types
+ */
+
+export interface LegalPageSection {
+  title: string;
+  content: string | string[];
+}
+
+export interface LegalPageConfig {
+  title: string;
+  lastUpdated?: string | Date;
+  sections: LegalPageSection[];
+}
+

package/src/snippets/Chat/ChatWidget.tsx

@@ -17,7 +17,7 @@ import {
   Plus,
   List,
 } from 'lucide-react';
-import { useKnowbaseChatContext, useKnowbaseSessionsContext, type ChatSource } from '@djangocfg/api/cfg/contexts';
+import { useKnowbaseChatContext, useKnowbaseSessionsContext, type ChatSource } from '@djangocfg/layouts/contexts';
 import { Enums } from '@djangocfg/api/cfg/generated';
 import { chatLogger } from '../../utils/logger';
 import { useChatUI } from './ChatUIContext';

package/src/snippets/Chat/components/SessionList.tsx

@@ -17,7 +17,7 @@ import {
   Badge,
 } from '@djangocfg/ui';
 import { MessageSquare, Clock, Archive, Trash2, Loader2 } from 'lucide-react';
-import { useKnowbaseSessionsContext } from '@djangocfg/api/cfg/contexts';
+import { useKnowbaseSessionsContext } from '@djangocfg/layouts/contexts';
 import { useInfiniteSessions } from '../hooks/useInfiniteSessions';
 import type { SessionListProps } from '../types';
 

package/src/snippets/Chat/index.tsx

@@ -7,7 +7,7 @@
 'use client';
 
 import React from 'react';
-import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '@djangocfg/api/cfg/contexts';
+import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '@djangocfg/layouts/contexts';
 import { ChatUIProvider } from './ChatUIContext';
 import { ChatWidget } from './ChatWidget';
 import type { ChatWidgetProps } from './types';

package/src/snippets/Chat/types.ts

@@ -3,7 +3,13 @@
  * Type definitions for RAG-powered chat widget
  */
 
-import type { ChatMessage, ChatSource } from '@djangocfg/api/cfg/contexts';
+// Import types from Schemas namespace - explicitly exported and works reliably
+// Types are available via Schemas namespace even when direct exports have issues
+import type { Schemas } from '@djangocfg/api';
+
+// Extract types from Schemas namespace
+export type ChatMessage = Schemas.ChatMessage;
+export type ChatSource = Schemas.ChatSource;
 
 // ─────────────────────────────────────────────────────────────────────────
 // Extended Message Type (for UI with sources)
@@ -70,9 +76,5 @@ export interface SessionListProps {
   className?: string;
 }
 
-// ─────────────────────────────────────────────────────────────────────────
-// Re-export types from API
-// ─────────────────────────────────────────────────────────────────────────
 
-export type { ChatSource, ChatMessage } from '@djangocfg/api/cfg/contexts';
 

package/src/snippets/ContactForm/ContactForm.tsx

@@ -145,20 +145,32 @@ function ContactFormInner({
 
   // Watch form values and save to localStorage
   const watchedValues = useWatch({ control: form.control });
+  const prevDraftRef = React.useRef<FormDraft>(draft);
 
   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({
-        name: name || '',
-        email: email || '',
-        company: company || '',
-        subject: subject || '',
-        message: message || '',
-      });
+    const newDraft: FormDraft = {
+      name: name || '',
+      email: email || '',
+      company: company || '',
+      subject: subject || '',
+      message: message || '',
+    };
+
+    // Only update if draft actually changed to prevent infinite loop
+    const hasChanges = 
+      prevDraftRef.current.name !== newDraft.name ||
+      prevDraftRef.current.email !== newDraft.email ||
+      prevDraftRef.current.company !== newDraft.company ||
+      prevDraftRef.current.subject !== newDraft.subject ||
+      prevDraftRef.current.message !== newDraft.message;
+
+    if (hasChanges && (name || email || company || subject || message)) {
+      prevDraftRef.current = newDraft;
+      setDraft(newDraft);
     }
   }, [watchedValues, setDraft, isHydrated]);
 

package/src/utils/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './logger';
+export * from './og-image';