@djangocfg/layouts 1.2.38 → 1.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.38",
+  "version": "1.2.40",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.38",
-    "@djangocfg/og-image": "^1.2.38",
-    "@djangocfg/ui": "^1.2.38",
+    "@djangocfg/api": "^1.2.40",
+    "@djangocfg/og-image": "^1.2.40",
+    "@djangocfg/ui": "^1.2.40",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.38",
+    "@djangocfg/typescript-config": "^1.2.40",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -37,7 +37,7 @@ import { PagePreloader } from './layouts/AdminLayout/components';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
-import type { ValidationErrorConfig } from '../../validation';
+import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../validation';
 
 // Dynamic import for AdminLayout to prevent SSR hydration issues
 const AdminLayout = dynamic(
@@ -78,11 +78,20 @@ export interface AppLayoutProps {
    */
   showPackageVersions?: boolean;
   /**
-   * Configuration for validation error tracking
-   * @default { enableToast: true, maxErrors: 50 }
-   * @example validationConfig={{ enableToast: false }}
+   * Validation error tracking configuration
+   * @default { enabled: true, showToast: true, maxErrors: 50 }
    */
-  validationConfig?: Partial<ValidationErrorConfig>;
+  validation?: Partial<ValidationErrorConfig>;
+  /**
+   * CORS error tracking configuration
+   * @default { enabled: true, showToast: true }
+   */
+  cors?: Partial<CORSErrorConfig>;
+  /**
+   * Network error tracking configuration
+   * @default { enabled: false }
+   */
+  network?: Partial<NetworkErrorConfig>;
 }
 
 /**
@@ -255,7 +264,7 @@ function LayoutRouter({
  * </AppLayout>
  * ```
  */
-export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validationConfig }: AppLayoutProps) {
+export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validation, cors, network }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -298,7 +307,7 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
         }} />
       )}
 
-      <CoreProviders config={config} validationConfig={validationConfig}>
+      <CoreProviders config={config} validation={validation} cors={cors} network={network}>
         {appContent}
       </CoreProviders>
     </>

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-18T03:21:56.291Z
+ * Last updated: 2025-11-19T06:16:37.244Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.38"
+    "version": "1.2.40"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.38"
+    "version": "1.2.40"
   }
 ];
 

package/src/layouts/AppLayout/providers/CoreProviders.tsx

@@ -9,18 +9,32 @@
 import React, { ReactNode } from 'react';
 import { ThemeProvider, Toaster } from '@djangocfg/ui';
 import { AuthProvider } from '../../../auth';
-import { ValidationErrorProvider } from '../../../validation';
+import { ErrorTrackingProvider } from '../../../validation';
 import type { AppLayoutConfig } from '../types';
-import type { ValidationErrorConfig } from '../../../validation';
+import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../../validation';
 
 export interface CoreProvidersProps {
   children: ReactNode;
   config: AppLayoutConfig;
   /**
-   * Configuration for validation error tracking
-   * @default { enableToast: true, maxErrors: 50 }
+   * Validation error tracking configuration
+   * @default { enabled: true, showToast: true, maxErrors: 50 }
    */
-  validationConfig?: Partial<ValidationErrorConfig>;
+  validation?: Partial<ValidationErrorConfig>;
+  /**
+   * CORS error tracking configuration
+   * @default { enabled: true, showToast: true }
+   */
+  cors?: Partial<CORSErrorConfig>;
+  /**
+   * Network error tracking configuration
+   * @default { enabled: false }
+   */
+  network?: Partial<NetworkErrorConfig>;
+  /**
+   * Custom error handler for all error types
+   */
+  onError?: (error: any) => boolean | void;
 }
 
 /**
@@ -29,10 +43,10 @@ export interface CoreProvidersProps {
  * Provides:
  * - ThemeProvider (dark/light mode)
  * - AuthProvider (authentication)
- * - ValidationErrorProvider (Zod validation error tracking)
+ * - ErrorTrackingProvider (validation, CORS & network error tracking)
  * - Toaster (notifications)
  */
-export function CoreProviders({ children, config, validationConfig }: CoreProvidersProps) {
+export function CoreProviders({ children, config, validation, cors, network, onError }: CoreProvidersProps) {
   return (
     <ThemeProvider>
       <AuthProvider
@@ -45,9 +59,14 @@ export function CoreProviders({ children, config, validationConfig }: CoreProvid
           },
         }}
       >
-        <ValidationErrorProvider config={validationConfig}>
+        <ErrorTrackingProvider
+          validation={validation}
+          cors={cors}
+          network={network}
+          onError={onError}
+        >
           {children}
-        </ValidationErrorProvider>
+        </ErrorTrackingProvider>
       </AuthProvider>
 
       {/* Global toast notifications */}

package/src/layouts/UILayout/config/components/forms.config.tsx

@@ -33,6 +33,7 @@ import {
   FormMessage,
   Field,
 } from '@djangocfg/ui';
+import { JsonSchemaForm } from '@djangocfg/ui/tools';
 import type { ComponentConfig } from './types';
 
 export const FORM_COMPONENTS: ComponentConfig[] = [
@@ -463,4 +464,122 @@ function MyForm() {
       </div>
     ),
   },
+  {
+    name: 'JsonSchemaForm',
+    category: 'forms',
+    description: 'Automatic form generator from JSON Schema with validation, custom widgets, and full type safety',
+    importPath: "import { JsonSchemaForm } from '@djangocfg/ui/tools';",
+    example: `// Basic usage
+const schema = {
+  type: 'object',
+  required: ['name', 'email'],
+  properties: {
+    name: {
+      type: 'string',
+      title: 'Full Name',
+      minLength: 2
+    },
+    email: {
+      type: 'string',
+      title: 'Email',
+      format: 'email'
+    },
+    age: {
+      type: 'number',
+      title: 'Age',
+      minimum: 18
+    },
+    subscribe: {
+      type: 'boolean',
+      title: 'Subscribe to newsletter'
+    }
+  }
+};
+
+<JsonSchemaForm
+  schema={schema}
+  onSubmit={(data) => console.log(data.formData)}
+  liveValidate={false}
+/>
+
+// With UI Schema for customization
+const uiSchema = {
+  subscribe: {
+    'ui:widget': 'SwitchWidget'
+  }
+};
+
+<JsonSchemaForm
+  schema={schema}
+  uiSchema={uiSchema}
+  formData={initialData}
+  onChange={(data) => setFormData(data.formData)}
+  onSubmit={handleSubmit}
+/>`,
+    preview: (
+      <div className="space-y-4">
+        <JsonSchemaForm
+          schema={{
+            type: 'object',
+            required: ['name', 'email'],
+            properties: {
+              name: {
+                type: 'string',
+                title: 'Full Name',
+                description: 'Enter your first and last name',
+                minLength: 2
+              },
+              email: {
+                type: 'string',
+                title: 'Email Address',
+                format: 'email'
+              },
+              role: {
+                type: 'string',
+                title: 'Role',
+                enum: ['developer', 'designer', 'manager', 'other'],
+                default: 'developer'
+              },
+              experience: {
+                type: 'number',
+                title: 'Years of Experience',
+                minimum: 0,
+                maximum: 50,
+                default: 5
+              },
+              subscribe: {
+                type: 'boolean',
+                title: 'Subscribe to newsletter',
+                default: false
+              }
+            }
+          }}
+          uiSchema={{
+            subscribe: {
+              'ui:widget': 'SwitchWidget'
+            }
+          }}
+          onSubmit={(data) => {
+            console.log('Form submitted:', data.formData);
+            alert('Form submitted! Check console for data.');
+          }}
+          liveValidate={false}
+          showErrorList="top"
+        />
+
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm font-medium mb-2">Features:</p>
+          <ul className="space-y-1 text-sm text-muted-foreground">
+            <li>• Automatic form generation from JSON Schema 7</li>
+            <li>• Built-in validation with ajv8</li>
+            <li>• Custom widgets (Switch, Select, Textarea, etc.)</li>
+            <li>• Custom templates for fields, objects, arrays</li>
+            <li>• Live validation support</li>
+            <li>• Full TypeScript support</li>
+            <li>• Radix UI components integration</li>
+          </ul>
+        </div>
+      </div>
+    ),
+  },
 ];