@nyaruka/temba-components 0.129.8 → 0.129.9

package/src/flow/types.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { Action } from '../store/flow-definition';
+import { Action, Node } from '../store/flow-definition';
 
 export interface ValidationResult {
   valid: boolean;
@@ -65,39 +65,16 @@ export interface SliderAttributes {
   range?: boolean;
 }
 
-// Widget configuration using discriminated union for type safety
-export type WidgetConfig =
-  | { type: 'temba-textinput'; attributes?: TextInputAttributes }
-  | { type: 'temba-completion'; attributes?: CompletionAttributes }
-  | { type: 'temba-select'; attributes?: SelectAttributes }
-  | { type: 'temba-checkbox'; attributes?: CheckboxAttributes }
-  | { type: 'temba-slider'; attributes?: SliderAttributes }
-  | { type: string; attributes?: { [key: string]: any } }; // Generic fallback
+export interface FormData extends Record<string, any> {}
 
-// Property configuration with the clean structure you want
-export interface PropertyConfig {
-  // Form field metadata
-  label?: string;
-  helpText?: string;
-  required?: boolean;
-  maxLength?: number;
-  minLength?: number;
-  pattern?: string;
-
-  // Widget configuration
-  widget: WidgetConfig;
-
-  // Conditional behavior based on other field values
-  conditions?: {
-    // When to show this field
-    visible?: (formData: any) => boolean;
-
-    // When this field is disabled
-    disabled?: (formData: any) => boolean;
-  };
+export interface FormConfig {
+  form?: Record<string, FieldConfig>;
+  layout?: LayoutItem[];
+  sanitize?: (formData: FormData) => void;
+  validate?: (formData: FormData) => ValidationResult;
 }
 
-export interface NodeConfig {
+export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
   color?: string;
@@ -108,22 +85,28 @@ export interface NodeConfig {
     operand?: string;
     configurable?: boolean; // can the rules be configured in the UI
     rules?: {
-      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';
+      type:
+        | 'has_number_between'
+        | 'has_string'
+        | 'has_value'
+        | 'has_not_value'
+        | 'has_text';
       arguments: string[];
       categoryName: string;
     }[];
   };
-  properties?: { [key: string]: PropertyConfig };
-  toFormData?: (node: any) => any;
-  fromFormData?: (formData: any, originalNode: any) => any;
+
+  toFormData?: (node: Node) => FormData;
+  fromFormData?: (formData: FormData, originalNode: Node) => Node;
+  render?: (node: Node) => TemplateResult;
 }
 
 // New field configuration system for generic form generation
 export interface BaseFieldConfig {
   label?: string;
   required?: boolean;
-  evaluated?: boolean; // if this field supports expression evaluation
-  dependsOn?: string[]; // fields this field depends on
+  evaluated?: boolean;
+  dependsOn?: string[];
   computeValue?: (
     values: Record<string, any>,
     currentValue: any,
@@ -137,7 +120,7 @@ export interface BaseFieldConfig {
   helpText?: string;
 
   // Layout properties
-  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')
+  maxWidth?: string;
 
   // Conditional rendering
   conditions?: {
@@ -160,7 +143,7 @@ export interface TextareaFieldConfig extends BaseFieldConfig {
 
 export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
-  options: string[] | { value: string; label: string }[];
+  options?: string[] | { value: string; label: string }[];
   multi?: boolean;
   clearable?: boolean;
   searchable?: boolean;
@@ -171,7 +154,10 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   nameKey?: string;
   endpoint?: string;
   emails?: boolean;
+  getName?: (item: any) => string;
   flavor?: 'small' | 'large';
+  createArbitraryOption?: (input: string, options: any[]) => any;
+  allowCreate?: boolean;
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {
@@ -256,7 +242,7 @@ export type LayoutItem =
   | GroupLayoutConfig
   | string; // string is shorthand for field
 
-export interface ActionConfig {
+export interface ActionConfig extends FormConfig {
   name: string;
   color: string;
   evaluated?: string[];
@@ -265,13 +251,8 @@ export interface ActionConfig {
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
 
-  // Action editor configuration (legacy)
-  // Form-level transformations
-  sanitize?: (formData: any) => any;
   toFormData?: (action: Action) => any;
   fromFormData?: (formData: any) => Action;
-
-  validate?: (action: Action) => ValidationResult;
 }
 
 export const COLORS = {
@@ -287,85 +268,3 @@ export const COLORS = {
   add: '#309c42',
   remove: '#e74c3c'
 };
-
-// Default property type mappings
-export function getDefaultComponent(value: any): WidgetConfig['type'] {
-  if (typeof value === 'boolean') {
-    return 'temba-checkbox';
-  }
-  if (typeof value === 'number') {
-    return 'temba-textinput';
-  }
-  if (Array.isArray(value)) {
-    return 'temba-select'; // For arrays, use multi-select
-  }
-  // Default to text input for strings and unknown types
-  return 'temba-textinput';
-}
-
-// Get component properties for default mappings with proper typing
-export function getDefaultComponentProps(value: any): PropertyConfig {
-  if (typeof value === 'boolean') {
-    return {
-      widget: { type: 'temba-checkbox' }
-    };
-  }
-  if (typeof value === 'number') {
-    return {
-      widget: {
-        type: 'temba-textinput',
-        attributes: { type: 'number' }
-      }
-    };
-  }
-  if (Array.isArray(value)) {
-    if (value.length > 0 && typeof value[0] === 'string') {
-      return {
-        widget: {
-          type: 'temba-select',
-          attributes: { multi: true, tags: true }
-        }
-      };
-    }
-    return {
-      widget: {
-        type: 'temba-select',
-        attributes: { multi: true }
-      }
-    };
-  }
-  return {
-    widget: { type: 'temba-textinput' }
-  };
-}
-
-// Type guard functions for working with WidgetConfig
-export function isTextInputWidget(
-  config: WidgetConfig
-): config is { type: 'temba-textinput'; attributes?: TextInputAttributes } {
-  return config.type === 'temba-textinput';
-}
-
-export function isCompletionWidget(
-  config: WidgetConfig
-): config is { type: 'temba-completion'; attributes?: CompletionAttributes } {
-  return config.type === 'temba-completion';
-}
-
-export function isSelectWidget(
-  config: WidgetConfig
-): config is { type: 'temba-select'; attributes?: SelectAttributes } {
-  return config.type === 'temba-select';
-}
-
-export function isCheckboxWidget(
-  config: WidgetConfig
-): config is { type: 'temba-checkbox'; attributes?: CheckboxAttributes } {
-  return config.type === 'temba-checkbox';
-}
-
-export function isSliderWidget(
-  config: WidgetConfig
-): config is { type: 'slider'; attributes?: SliderAttributes } {
-  return config.type === 'temba-slider';
-}

package/src/form/ArrayEditor.ts

@@ -2,6 +2,7 @@ import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { FieldConfig, SelectFieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
+import { FieldRenderer } from './FieldRenderer';
 
 @customElement('temba-array-editor')
 export class TembaArrayEditor extends BaseListEditor<ListItem> {
@@ -132,87 +133,42 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
   ): TemplateResult {
     const computedValue = this.computeFieldValue(itemIndex, fieldName, config);
 
-    switch (config.type) {
-      case 'text':
-        return html`<temba-textinput
-          .value=${computedValue || ''}
-          .placeholder=${config.placeholder}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-textinput>`;
-
-      case 'textarea':
-        return html`<temba-textinput
-          .value=${computedValue || ''}
-          .placeholder=${config.placeholder}
-          textarea
-          .rows=${config.rows || 3}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-textinput>`;
-
-      case 'select': {
-        const selectConfig = config as SelectFieldConfig;
-        const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);
-
-        return html`<temba-select
-          class="form-control"
-          ?clearable="${selectConfig.clearable || false}"
-          ?searchable="${selectConfig.searchable || false}"
-          ?tags="${selectConfig.tags || false}"
-          ?multi="${selectConfig.multi || false}"
-          ?emails="${selectConfig.emails || false}"
-          placeholder="${selectConfig.placeholder || ''}"
-          maxItems="${selectConfig.maxItems || 0}"
-          valueKey="${selectConfig.valueKey || 'value'}"
-          nameKey="${selectConfig.nameKey || 'name'}"
-          endpoint="${selectConfig.endpoint || ''}"
-          value="${fieldValue || ''}"
-          flavor="small"
-          @change="${(e: Event) => {
-            const target = e.target as any;
-            let value: any;
-
-            // For temba-select, extract the correct value
-            if (target.tagName === 'TEMBA-SELECT') {
-              if (target.multi || target.emails || target.tags) {
-                value = target.values || [];
-              } else {
-                // Single select: extract value from first selected option
-                const values = target.values || [];
-                value =
-                  values.length > 0 && values[0]
-                    ? values[0].value !== undefined
-                      ? values[0].value
-                      : values[0]
-                    : '';
-              }
+    // Use FieldRenderer for consistent field rendering
+    return FieldRenderer.renderField(fieldName, config, computedValue, {
+      showLabel: false, // ArrayEditor doesn't show labels for individual fields
+      flavor: 'small', // ArrayEditor uses small flavor
+      extraClasses: 'form-control',
+      onChange: (e: Event) => {
+        let value: any;
+        const target = e.target as any;
+
+        // Handle different field types and their change events
+        if (config.type === 'select') {
+          // For temba-select, extract the correct value
+          if (target.tagName === 'TEMBA-SELECT') {
+            if (target.multi || target.emails || target.tags) {
+              value = target.values || [];
             } else {
-              value = target.value;
+              // Single select: extract value from first selected option
+              const values = target.values || [];
+              value =
+                values.length > 0 && values[0]
+                  ? values[0].value !== undefined
+                    ? values[0].value
+                    : values[0]
+                  : '';
             }
-
-            this.handleFieldChange(itemIndex, fieldName, value);
-          }}"
-        >
-          ${selectConfig.options?.map((option: any) => {
-            if (typeof option === 'string') {
-              return html`<temba-option
-                name="${option}"
-                value="${option}"
-              ></temba-option>`;
-            } else {
-              return html`<temba-option
-                name="${option.label || option.name}"
-                value="${option.value}"
-              ></temba-option>`;
-            }
-          })}
-        </temba-select>`;
+          } else {
+            value = target.value;
+          }
+        } else {
+          // For other field types, use the target value directly
+          value = target.value;
+        }
+
+        this.handleFieldChange(itemIndex, fieldName, value);
       }
-
-      default:
-        return html`<span>Unsupported field type: ${config.type}</span>`;
-    }
+    });
   }
 
   renderItem(item: ListItem, index: number): TemplateResult {
@@ -283,10 +239,6 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       flex: 1;
     }
 
-    .field:first-child {
-      flex: 0 0 140px; /* Fixed width for type dropdown */
-    }
-
     .field label {
       display: block;
       margin-bottom: 4px;