@object-ui/react 0.5.0 → 3.0.0

package/src/components/form/FieldFactory.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import type { FormField } from '@objectstack/spec/ui';
+import { resolveI18nLabel } from '../../utils/i18n';
 
 /**
  * Extended form field with additional properties for complex widgets
@@ -58,6 +59,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   const widgetType = field.widget || 'text';
   const fieldName = field.field;
   const error = errors[fieldName];
+  
+  // Resolve I18nLabel values to plain strings
+  const fieldLabel = resolveI18nLabel(field.label);
+  const fieldPlaceholder = resolveI18nLabel(field.placeholder);
+  const fieldHelpText = resolveI18nLabel(field.helpText);
 
   // Helper function to handle multiple select value conversion
   const handleMultipleSelectValue = (value: any) => {
@@ -68,9 +74,8 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   };
 
   // Handle conditional visibility
-  // Note: visibleOn expression evaluation is not yet implemented
-  // Fields are always visible unless explicitly hidden
-  // Skip if explicitly hidden
+  // Fields are hidden when explicitly hidden or when visibleOn evaluates to false
+  // Note: dependsOn is handled at the FormSectionRenderer level
   if (field.hidden) {
     return null;
   }
@@ -78,15 +83,15 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
   // Common field wrapper
   const renderField = (input: React.ReactNode) => (
     <div className="space-y-2">
-      {field.label && (
+      {fieldLabel && (
         <label htmlFor={fieldName} className="block text-sm font-medium text-gray-700">
-          {field.label}
+          {fieldLabel}
           {field.required && <span className="text-red-500 ml-1">*</span>}
         </label>
       )}
       {input}
-      {field.helpText && (
-        <p className="text-sm text-gray-500">{field.helpText}</p>
+      {fieldHelpText && (
+        <p className="text-sm text-gray-500">{fieldHelpText}</p>
       )}
       {error && (
         <p className="text-sm text-red-600">{error.message as string}</p>
@@ -106,11 +111,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type={widgetType === 'string' ? 'text' : widgetType}
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -122,12 +127,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="number"
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           step={widgetType === 'integer' ? '1' : 'any'}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
             valueAsNumber: true,
           })}
         />
@@ -145,14 +150,14 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
             {...register(fieldName)}
           />
           <div className="flex-1">
-            {field.label && (
+            {fieldLabel && (
               <label htmlFor={fieldName} className="text-sm font-medium text-gray-700">
-                {field.label}
+                {fieldLabel}
                 {field.required && <span className="text-red-500 ml-1">*</span>}
               </label>
             )}
-            {field.helpText && (
-              <p className="text-sm text-gray-500 mt-1">{field.helpText}</p>
+            {fieldHelpText && (
+              <p className="text-sm text-gray-500 mt-1">{fieldHelpText}</p>
             )}
             {error && (
               <p className="text-sm text-red-600 mt-1">{error.message as string}</p>
@@ -165,12 +170,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
       return renderField(
         <textarea
           id={fieldName}
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           rows={4}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -184,11 +189,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
             setValueAs: handleMultipleSelectValue,
           })}
         >
-          {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
+          {!extendedField.multiple && <option value="">{fieldPlaceholder || 'Select an option'}</option>}
           {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
@@ -202,11 +207,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="date"
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -217,11 +222,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="datetime-local"
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -231,11 +236,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="time"
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -247,12 +252,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           <input
             id={fieldName}
             type="number"
-            placeholder={field.placeholder}
+            placeholder={fieldPlaceholder}
             disabled={disabled}
             step="0.01"
             className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
             {...register(fieldName, {
-              required: field.required ? `${field.label || fieldName} is required` : false,
+              required: field.required ? `${fieldLabel || fieldName} is required` : false,
               valueAsNumber: true,
             })}
           />
@@ -265,14 +270,14 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           <input
             id={fieldName}
             type="number"
-            placeholder={field.placeholder}
+            placeholder={fieldPlaceholder}
             disabled={disabled}
             step="0.01"
             min="0"
             max="100"
             className="w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
             {...register(fieldName, {
-              required: field.required ? `${field.label || fieldName} is required` : false,
+              required: field.required ? `${fieldLabel || fieldName} is required` : false,
               valueAsNumber: true,
             })}
           />
@@ -285,11 +290,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="tel"
-          placeholder={field.placeholder || '+1 (555) 000-0000'}
+          placeholder={fieldPlaceholder || '+1 (555) 000-0000'}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -298,12 +303,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
       return renderField(
         <textarea
           id={fieldName}
-          placeholder={field.placeholder || 'Enter markdown text...'}
+          placeholder={fieldPlaceholder || 'Enter markdown text...'}
           disabled={disabled}
           rows={8}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -312,12 +317,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
       return renderField(
         <textarea
           id={fieldName}
-          placeholder={field.placeholder || 'Enter HTML...'}
+          placeholder={fieldPlaceholder || 'Enter HTML...'}
           disabled={disabled}
           rows={8}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -332,7 +337,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           accept={extendedField.accept?.join(',')}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -347,7 +352,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           accept={extendedField.accept?.join(',') || 'image/*'}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );
@@ -391,11 +396,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
             setValueAs: handleMultipleSelectValue,
           })}
         >
-          {!extendedField.multiple && <option value="">{field.placeholder || 'Select an option'}</option>}
+          {!extendedField.multiple && <option value="">{fieldPlaceholder || 'Select an option'}</option>}
           {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
@@ -413,11 +418,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
           multiple={extendedField.multiple}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
             setValueAs: handleMultipleSelectValue,
           })}
         >
-          {!extendedField.multiple && <option value="">{field.placeholder || 'Select user'}</option>}
+          {!extendedField.multiple && <option value="">{fieldPlaceholder || 'Select user'}</option>}
           {extendedField.options?.map((option) => (
             <option key={option.value} value={option.value} disabled={option.disabled}>
               {option.label}
@@ -444,12 +449,12 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
       return renderField(
         <textarea
           id={fieldName}
-          placeholder={field.placeholder || 'Enter JSON object...'}
+          placeholder={fieldPlaceholder || 'Enter JSON object...'}
           disabled={disabled}
           rows={6}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
             validate: (value) => {
               if (!value) return true;
               try {
@@ -469,7 +474,7 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="text"
-          placeholder={field.placeholder || 'Vector data (read-only)'}
+          placeholder={fieldPlaceholder || 'Vector data (read-only)'}
           disabled={true}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600"
           {...register(fieldName)}
@@ -490,11 +495,11 @@ export const FieldFactory: React.FC<FieldFactoryProps> = ({
         <input
           id={fieldName}
           type="text"
-          placeholder={field.placeholder}
+          placeholder={fieldPlaceholder}
           disabled={disabled}
           className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
           {...register(fieldName, {
-            required: field.required ? `${field.label || fieldName} is required` : false,
+            required: field.required ? `${fieldLabel || fieldName} is required` : false,
           })}
         />
       );

package/src/components/form/FormRenderer.test.tsx

@@ -596,4 +596,149 @@ describe('FormRenderer', () => {
       expect(textarea.tagName).toBe('TEXTAREA');
     });
   });
+
+  // ==========================================================================
+  // FormField.dependsOn — conditional field visibility based on parent value
+  // ==========================================================================
+
+  describe('FormField.dependsOn', () => {
+    it('should hide fields with dependsOn when parent has no value', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Cascading Fields',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'country',
+                label: 'Country',
+                widget: 'text',
+              },
+              {
+                field: 'state',
+                label: 'State',
+                widget: 'text',
+                dependsOn: 'country',
+              },
+            ],
+          },
+        ],
+      };
+
+      render(<FormRenderer schema={schema} />);
+
+      // Parent field is always visible
+      expect(screen.getByLabelText('Country')).toBeInTheDocument();
+      // Dependent field is hidden when parent has no value
+      expect(screen.queryByLabelText('State')).not.toBeInTheDocument();
+    });
+
+    it('should show fields with dependsOn when parent has a value', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Cascading Fields',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'country',
+                label: 'Country',
+                widget: 'text',
+              },
+              {
+                field: 'state',
+                label: 'State',
+                widget: 'text',
+                dependsOn: 'country',
+              },
+            ],
+          },
+        ],
+      };
+
+      // When country has an initial value, state should be visible
+      render(<FormRenderer schema={schema} data={{ country: 'USA' }} />);
+
+      expect(screen.getByLabelText('Country')).toBeInTheDocument();
+      expect(screen.getByLabelText('State')).toBeInTheDocument();
+    });
+  });
+
+  // ==========================================================================
+  // FormField.visibleOn — expression-based visibility
+  // ==========================================================================
+
+  describe('FormField.visibleOn', () => {
+    it('should hide fields when visibleOn evaluates to false', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Conditional Fields',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'status',
+                label: 'Status',
+                widget: 'text',
+              },
+              {
+                field: 'price',
+                label: 'Price',
+                widget: 'currency',
+                visibleOn: "${data.status === 'active'}",
+              },
+            ],
+          },
+        ],
+      };
+
+      // Status is 'draft', so price should be hidden
+      render(<FormRenderer schema={schema} data={{ status: 'draft' }} />);
+
+      expect(screen.getByLabelText('Status')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Price')).not.toBeInTheDocument();
+    });
+
+    it('should show fields when visibleOn evaluates to true', () => {
+      const schema: FormView = {
+        type: 'simple',
+        sections: [
+          {
+            label: 'Conditional Fields',
+            collapsible: false,
+            collapsed: false,
+            columns: 1,
+            fields: [
+              {
+                field: 'status',
+                label: 'Status',
+                widget: 'text',
+              },
+              {
+                field: 'price',
+                label: 'Price',
+                widget: 'currency',
+                visibleOn: "${data.status === 'active'}",
+              },
+            ],
+          },
+        ],
+      };
+
+      // Status is 'active', so price should be visible
+      render(<FormRenderer schema={schema} data={{ status: 'active' }} />);
+
+      expect(screen.getByLabelText('Status')).toBeInTheDocument();
+      expect(screen.getByLabelText('Price')).toBeInTheDocument();
+    });
+  });
 });

package/src/components/form/FormRenderer.tsx

@@ -10,6 +10,8 @@ import React from 'react';
 import { useForm, FormProvider, UseFormReturn } from 'react-hook-form';
 import type { FormView, FormSection } from '@objectstack/spec/ui';
 import { FieldFactory } from './FieldFactory';
+import { ExpressionEvaluator } from '@object-ui/core';
+import { resolveI18nLabel } from '../../utils/i18n';
 
 export interface FormRendererProps {
   /**
@@ -137,6 +139,39 @@ const COL_SPAN = {
   4: 'col-span-4',
 } as const;
 
+/**
+ * Evaluate whether a field should be visible based on visibleOn expression
+ * and dependsOn parent field value.
+ */
+function evaluateFieldVisibility(
+  fieldConfig: any,
+  formValues: Record<string, any>,
+): boolean {
+  // If explicitly hidden, skip
+  if (fieldConfig.hidden) {
+    return false;
+  }
+
+  // Evaluate visibleOn expression
+  if (fieldConfig.visibleOn) {
+    try {
+      const evaluator = new ExpressionEvaluator({ data: formValues, form: formValues });
+      return evaluator.evaluateCondition(fieldConfig.visibleOn);
+    } catch {
+      // On error, default to visible
+      return true;
+    }
+  }
+
+  // Evaluate dependsOn: field is hidden if parent field has no value
+  if (fieldConfig.dependsOn) {
+    const parentValue = formValues[fieldConfig.dependsOn];
+    return parentValue !== undefined && parentValue !== null && parentValue !== '';
+  }
+
+  return true;
+}
+
 /**
  * Renders a form section with grid layout
  */
@@ -150,6 +185,20 @@ const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
   // Determine grid columns based on section.columns
   const gridCols = GRID_COLS[section.columns || 1];
 
+  // Collect whether there are any conditional fields
+  const hasConditionalFields = React.useMemo(() => {
+    return section.fields.some((field) => {
+      if (typeof field === 'string') return false;
+      return !!field.dependsOn || !!field.visibleOn;
+    });
+  }, [section.fields]);
+
+  // Watch form values for conditional field evaluation
+  // Only watch when there are fields with dependsOn or visibleOn to avoid
+  // unnecessary re-renders in forms without conditional fields.
+  const allFormValues = methods.watch();
+  const formValues = hasConditionalFields ? allFormValues : undefined;
+
   const handleToggleCollapse = () => {
     if (section.collapsible) {
       setIsCollapsed(!isCollapsed);
@@ -165,7 +214,7 @@ const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
           }`}
           onClick={handleToggleCollapse}
         >
-          <h3 className="text-lg font-semibold">{section.label}</h3>
+          <h3 className="text-lg font-semibold">{resolveI18nLabel(section.label)}</h3>
           {section.collapsible && (
             <span className="text-sm text-gray-500">
               {isCollapsed ? '▶' : '▼'}
@@ -181,8 +230,8 @@ const FormSectionRenderer: React.FC<FormSectionRendererProps> = ({
             const fieldName = typeof field === 'string' ? field : field.field;
             const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
 
-            // Skip hidden fields
-            if (fieldConfig.hidden) {
+            // Evaluate visibility: static hidden, visibleOn expression, dependsOn parent
+            if (!evaluateFieldVisibility(fieldConfig, formValues || {})) {
               return null;
             }