@djangocfg/layouts 1.2.38 → 1.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.38",
+  "version": "1.2.39",
   "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.39",
+    "@djangocfg/og-image": "^1.2.39",
+    "@djangocfg/ui": "^1.2.39",
     "@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.39",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

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-19T04:18:48.875Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.38"
+    "version": "1.2.39"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.38"
+    "version": "1.2.39"
   }
 ];
 

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>
+    ),
+  },
 ];