fix: add optional chaining for field properties in various field components

Author: hotlong

packages/fields/src/widgets/CurrencyField.tsx

@@ -18,8 +18,8 @@ function formatCurrency(value: number, currency: string = 'USD'): string {
 
 export function CurrencyField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
   const currencyField = field as any;
-  const currency = currencyField.currency || 'USD';
-  const precision = currencyField.precision ?? 2;
+  const currency = currencyField?.currency || 'USD';
+  const precision = currencyField?.precision ?? 2;
 
   if (readonly) {
     if (value == null) return <span className="text-sm">-</span>;
@@ -51,7 +51,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
           onChange(val as any);
         }}
         onBlur={handleBlur}
-        placeholder={field.placeholder || '0.00'}
+        placeholder={field?.placeholder || '0.00'}
         disabled={readonly}
         className={`pl-8 ${props.className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}

packages/fields/src/widgets/NumberField.tsx

@@ -8,7 +8,7 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
     return <span className="text-sm">{value ?? '-'}</span>;
   }
 
-  const precision = (field as unknown as NumberFieldMetadata).precision;
+  const precision = (field as unknown as NumberFieldMetadata)?.precision;
 
   return (
     <Input
@@ -18,7 +18,7 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
         const val = e.target.value;
         onChange(val === '' ? (null as any) : Number(val));
       }}
-      placeholder={field.placeholder}
+      placeholder={field?.placeholder}
       disabled={readonly}
       step={precision ? Math.pow(10, -precision) : 'any'}
       className={props.className}

packages/fields/src/widgets/PercentField.tsx

@@ -4,7 +4,7 @@ import { FieldWidgetProps } from './types';
 
 export function PercentField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
   const percentField = field as any;
-  const precision = percentField.precision ?? 2;
+  const precision = percentField?.precision ?? 2;
 
   if (readonly) {
     if (value == null) return <span className="text-sm">-</span>;
@@ -34,7 +34,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, .
         type="number"
         value={displayValue}
         onChange={handleChange}
-        placeholder={field.placeholder || '0'}
+        placeholder={field?.placeholder || '0'}
         disabled={readonly}
         className={`pr-8 ${props.className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}

packages/fields/src/widgets/RichTextField.tsx

@@ -19,8 +19,8 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
   }
 
   const richField = field as any;
-  const rows = richField.rows || 8;
-  const format = richField.format || 'markdown'; // 'markdown' or 'html'
+  const rows = richField?.rows || 8;
+  const format = richField?.format || 'markdown'; // 'markdown' or 'html'
 
   return (
     <div className="space-y-2">
@@ -31,7 +31,7 @@ export function RichTextField({ value, onChange, field, readonly, errorMessage,
       <Textarea
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field.placeholder || 'Enter text...'}
+        placeholder={field?.placeholder || 'Enter text...'}
         disabled={readonly}
         rows={rows}
         className={`font-mono text-sm ${props.className || ''}`}

packages/fields/src/widgets/TextAreaField.tsx

@@ -11,7 +11,7 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
     );
   }
 
-  const textareaField = field as any;
+  const textareaField = (field || (props as any).schema) as any;
   const rows = textareaField?.rows || 4;
   const maxLength = textareaField?.max_length;
 
@@ -20,7 +20,7 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
       <Textarea
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field.placeholder}
+        placeholder={textareaField?.placeholder}
         disabled={readonly}
         rows={rows}
         maxLength={maxLength}

packages/fields/src/widgets/TextField.tsx

@@ -4,19 +4,21 @@ import { TextareaFieldMetadata } from '@object-ui/types';
 import { FieldWidgetProps } from './types';
 
 export function TextField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+  const fieldData = field || (props as any).schema;
+
   if (readonly) {
     return <span className="text-sm">{value || '-'}</span>;
   }
 
   // Cast for rows property
-  const rows = (field as unknown as TextareaFieldMetadata)?.rows;
+  const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;
 
   if (rows && rows > 1) {
     return (
       <Textarea
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={field?.placeholder}
+        placeholder={fieldData?.placeholder}
         disabled={readonly}
         className={props.className}
       />
@@ -25,10 +27,10 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Input
-      type={field?.type === 'password' ? 'password' : 'text'}
+      type={fieldData?.type === 'password' ? 'password' : 'text'}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={field.placeholder}
+      placeholder={fieldData?.placeholder}
       disabled={readonly}
       className={props.className}
       {...props}