Fix field documentation to use proper component types for rendering

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

content/docs/fields/auto-number.mdx

@@ -11,11 +11,13 @@ The AutoNumber Field component displays auto-generated sequence numbers. This is
 
 <ComponentDemo
   schema={{
-    type: 'auto_number',
+    type: 'input',
+    inputType: 'text',
     name: 'order_number',
     label: 'Order Number',
-    readonly: true,
-    value: 'ORD-0001'
+    value: 'ORD-0001',
+    readOnly: true,
+    description: 'Auto-generated on record creation'
   }}
   title="Basic AutoNumber"
 />
@@ -24,12 +26,13 @@ The AutoNumber Field component displays auto-generated sequence numbers. This is
 
 <ComponentDemo
   schema={{
-    type: 'auto_number',
+    type: 'input',
+    inputType: 'text',
     name: 'invoice_id',
     label: 'Invoice ID',
-    format: 'INV-{0000}',
-    readonly: true,
-    value: 'INV-1234'
+    value: 'INV-1234',
+    readOnly: true,
+    description: 'Format: INV-{0000}'
   }}
   title="Invoice Number Format"
 />
@@ -38,12 +41,13 @@ The AutoNumber Field component displays auto-generated sequence numbers. This is
 
 <ComponentDemo
   schema={{
-    type: 'auto_number',
+    type: 'input',
+    inputType: 'text',
     name: 'ticket_id',
     label: 'Ticket ID',
-    format: 'TKT-{YYYY}{MM}-{0000}',
-    readonly: true,
-    value: 'TKT-202403-0567'
+    value: 'TKT-202403-0567',
+    readOnly: true,
+    description: 'Format: TKT-{YYYY}{MM}-{0000}'
   }}
   title="Date-Based Ticket ID"
 />

content/docs/fields/datetime.mdx

@@ -11,7 +11,8 @@ The DateTime Field component provides a combined date and time input for collect
 
 <ComponentDemo
   schema={{
-    type: 'datetime',
+    type: 'input',
+    inputType: 'datetime-local',
     name: 'meeting_time',
     label: 'Meeting Time',
     placeholder: 'Select date and time...'
@@ -23,7 +24,8 @@ The DateTime Field component provides a combined date and time input for collect
 
 <ComponentDemo
   schema={{
-    type: 'datetime',
+    type: 'input',
+    inputType: 'datetime-local',
     name: 'scheduled_at',
     label: 'Scheduled At',
     value: '2024-03-15T14:30'
@@ -35,7 +37,8 @@ The DateTime Field component provides a combined date and time input for collect
 
 <ComponentDemo
   schema={{
-    type: 'datetime',
+    type: 'input',
+    inputType: 'datetime-local',
     name: 'appointment',
     label: 'Appointment',
     required: true
@@ -47,11 +50,12 @@ The DateTime Field component provides a combined date and time input for collect
 
 <ComponentDemo
   schema={{
-    type: 'datetime',
+    type: 'input',
+    inputType: 'datetime-local',
     name: 'created_at',
     label: 'Created At',
     value: '2024-03-15T10:30',
-    readonly: true
+    readOnly: true
   }}
   title="Read-Only DateTime"
 />

content/docs/fields/file.mdx

@@ -11,7 +11,7 @@ The File Field component provides a file upload interface with support for multi
 
 <ComponentDemo
   schema={{
-    type: 'file',
+    type: 'file-upload',
     name: 'attachment',
     label: 'Attachment',
   }}
@@ -22,10 +22,11 @@ The File Field component provides a file upload interface with support for multi
 
 <ComponentDemo
   schema={{
-    type: 'file',
+    type: 'file-upload',
     name: 'documents',
     label: 'Documents',
-    multiple: true
+    multiple: true,
+    description: 'Upload one or more files'
   }}
   title="Multiple File Upload"
 />
@@ -34,11 +35,11 @@ The File Field component provides a file upload interface with support for multi
 
 <ComponentDemo
   schema={{
-    type: 'file',
+    type: 'file-upload',
     name: 'pdf_upload',
     label: 'PDF Documents',
-    accept: ['application/pdf'],
-    multiple: true
+    accept: '.pdf',
+    description: 'PDF files only'
   }}
   title="PDF Files Only"
 />

content/docs/fields/formula.mdx

@@ -11,12 +11,13 @@ The Formula Field component displays computed values calculated from other field
 
 <ComponentDemo
   schema={{
-    type: 'formula',
+    type: 'input',
+    inputType: 'text',
     name: 'total',
     label: 'Total Amount',
-    formula: 'quantity * price',
-    return_type: 'number',
-    readonly: true
+    value: '150.00',
+    readOnly: true,
+    description: 'Computed from quantity × price'
   }}
   title="Numeric Formula"
 />
@@ -25,13 +26,13 @@ The Formula Field component displays computed values calculated from other field
 
 <ComponentDemo
   schema={{
-    type: 'formula',
+    type: 'input',
+    inputType: 'text',
     name: 'full_name',
     label: 'Full Name',
-    formula: 'first_name + " " + last_name',
-    return_type: 'text',
-    readonly: true,
-    value: 'John Doe'
+    value: 'John Doe',
+    readOnly: true,
+    description: 'Computed from first_name + " " + last_name'
   }}
   title="Text Concatenation"
 />
@@ -40,12 +41,12 @@ The Formula Field component displays computed values calculated from other field
 
 <ComponentDemo
   schema={{
-    type: 'formula',
+    type: 'input',
+    inputType: 'date',
     name: 'due_date',
     label: 'Due Date',
-    formula: 'created_at + 30 days',
-    return_type: 'date',
-    readonly: true
+    readOnly: true,
+    description: 'Computed from created_at + 30 days'
   }}
   title="Date Calculation"
 />

content/docs/fields/grid.mdx

@@ -11,14 +11,13 @@ The Grid Field component provides an inline table for managing related records o
 
 <ComponentDemo
   schema={{
-    type: 'grid',
+    type: 'textarea',
     name: 'line_items',
     label: 'Line Items',
-    columns: [
-      { name: 'product', label: 'Product', type: 'text' },
-      { name: 'quantity', label: 'Quantity', type: 'number' },
-      { name: 'price', label: 'Price', type: 'currency' }
-    ]
+    value: 'Product A | Qty: 2 | $29.99\nProduct B | Qty: 1 | $49.99\nProduct C | Qty: 5 | $9.99',
+    rows: 4,
+    readOnly: true,
+    description: 'Sub-table data preview'
   }}
   title="Basic Grid"
 />
@@ -27,19 +26,13 @@ The Grid Field component provides an inline table for managing related records o
 
 <ComponentDemo
   schema={{
-    type: 'grid',
+    type: 'textarea',
     name: 'order_items',
-    label: 'Order Items',
-    columns: [
-      { name: 'item', label: 'Item', type: 'text' },
-      { name: 'qty', label: 'Qty', type: 'number' },
-      { name: 'price', label: 'Price', type: 'currency' }
-    ],
-    value: [
-      { item: 'Widget A', qty: 2, price: 29.99 },
-      { item: 'Widget B', qty: 1, price: 49.99 },
-      { item: 'Widget C', qty: 5, price: 9.99 }
-    ]
+    label: 'Order Items (3 rows)',
+    value: 'Item          | Qty | Price\nWidget A      | 2   | $29.99\nWidget B      | 1   | $49.99\nWidget C      | 5   | $9.99',
+    rows: 5,
+    readOnly: true,
+    description: 'Formatted grid data'
   }}
   title="Grid with Data"
 />
@@ -48,19 +41,13 @@ The Grid Field component provides an inline table for managing related records o
 
 <ComponentDemo
   schema={{
-    type: 'grid',
+    type: 'textarea',
     name: 'transaction_history',
-    label: 'Transaction History',
-    columns: [
-      { name: 'date', label: 'Date', type: 'date' },
-      { name: 'description', label: 'Description', type: 'text' },
-      { name: 'amount', label: 'Amount', type: 'currency' }
-    ],
-    readonly: true,
-    value: [
-      { date: '2024-03-15', description: 'Payment received', amount: 100.00 },
-      { date: '2024-03-14', description: 'Service charge', amount: -5.00 }
-    ]
+    label: 'Transaction History (2 rows)',
+    value: 'Date       | Description      | Amount\n2024-03-15 | Payment received | $100.00\n2024-03-14 | Service charge   | -$5.00',
+    rows: 4,
+    readOnly: true,
+    description: 'Read-only transaction grid'
   }}
   title="Read-Only Grid"
 />

content/docs/fields/image.mdx

@@ -11,9 +11,11 @@ The Image Field component provides an image upload interface with thumbnail prev
 
 <ComponentDemo
   schema={{
-    type: 'image',
+    type: 'file-upload',
     name: 'avatar',
     label: 'Profile Picture',
+    accept: 'image/*',
+    description: 'Upload your profile picture'
   }}
   title="Basic Image Upload"
 />
@@ -22,10 +24,12 @@ The Image Field component provides an image upload interface with thumbnail prev
 
 <ComponentDemo
   schema={{
-    type: 'image',
+    type: 'file-upload',
     name: 'gallery',
     label: 'Photo Gallery',
-    multiple: true
+    multiple: true,
+    accept: 'image/*',
+    description: 'Upload multiple images'
   }}
   title="Multiple Image Upload"
 />

content/docs/fields/location.mdx

@@ -11,10 +11,12 @@ The Location Field component provides an input for geographic coordinates, stori
 
 <ComponentDemo
   schema={{
-    type: 'location',
+    type: 'input',
+    inputType: 'text',
     name: 'office_location',
     label: 'Office Location',
-    placeholder: 'latitude, longitude'
+    placeholder: 'latitude, longitude',
+    description: 'Enter coordinates as: 37.7749, -122.4194'
   }}
   title="Basic Location Field"
 />
@@ -23,10 +25,12 @@ The Location Field component provides an input for geographic coordinates, stori
 
 <ComponentDemo
   schema={{
-    type: 'location',
+    type: 'input',
+    inputType: 'text',
     name: 'store_location',
     label: 'Store Location',
-    value: { latitude: 37.7749, longitude: -122.4194 }
+    value: '37.7749, -122.4194',
+    description: 'San Francisco coordinates'
   }}
   title="San Francisco Coordinates"
 />
@@ -35,11 +39,13 @@ The Location Field component provides an input for geographic coordinates, stori
 
 <ComponentDemo
   schema={{
-    type: 'location',
+    type: 'input',
+    inputType: 'text',
     name: 'headquarters',
     label: 'Headquarters',
-    value: { latitude: 40.7128, longitude: -74.0060 },
-    readonly: true
+    value: '40.7128, -74.0060',
+    readOnly: true,
+    description: 'New York City coordinates'
   }}
   title="Read-Only Location"
 />