@nyaruka/temba-components 0.129.2 → 0.129.4

package/src/flow/types.ts

@@ -0,0 +1,352 @@
+import { TemplateResult } from 'lit-html';
+import { Action } from '../store/flow-definition';
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: { [key: string]: string };
+}
+
+// Component attribute interfaces - these define what's allowed for each component type
+export interface TextInputAttributes {
+  type?: 'text' | 'email' | 'number' | 'url' | 'tel';
+  placeholder?: string;
+  clearable?: boolean;
+  maxlength?: number;
+  gsm?: boolean;
+  autogrow?: boolean;
+  textarea?: boolean;
+  submitOnEnter?: boolean;
+}
+
+export interface CompletionAttributes {
+  placeholder?: string;
+  clearable?: boolean;
+  maxlength?: number;
+  gsm?: boolean;
+  autogrow?: boolean;
+  textarea?: boolean;
+  expressions?: string;
+  counter?: string;
+  minHeight?: number;
+}
+
+export interface SelectAttributes {
+  placeholder?: string;
+  multi?: boolean;
+  searchable?: boolean;
+  tags?: boolean;
+  emails?: boolean;
+  clearable?: boolean;
+  endpoint?: string;
+  valueKey?: string;
+  nameKey?: string;
+  queryParam?: string;
+  maxItems?: number;
+  maxItemsText?: string;
+  expressions?: string;
+  options?: Array<{ name: string; value: any }>;
+  sorted?: boolean;
+  allowCreate?: boolean;
+  jsonValue?: boolean;
+  spaceSelect?: boolean;
+  infoText?: string;
+}
+
+export interface CheckboxAttributes {
+  label?: string;
+  size?: number;
+  disabled?: boolean;
+  animateChange?: string;
+}
+
+export interface SliderAttributes {
+  min?: number;
+  max?: number;
+  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
+
+// 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 NodeConfig {
+  type: string;
+  name?: string;
+  color?: string;
+  action?: ActionConfig;
+  router?: {
+    type: 'switch' | 'random';
+    defaultCategory?: string;
+    operand?: string;
+    configurable?: boolean; // can the rules be configured in the UI
+    rules?: {
+      type: 'has_number_between' | 'has_string' | 'has_value' | 'has_not_value';
+      arguments: string[];
+      categoryName: string;
+    }[];
+  };
+  properties?: { [key: string]: PropertyConfig };
+  toFormData?: (node: any) => any;
+  fromFormData?: (formData: any, originalNode: any) => any;
+}
+
+// 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
+  computeValue?: (
+    values: Record<string, any>,
+    currentValue: any,
+    originalValues?: Record<string, any>
+  ) => any;
+
+  // Validation properties
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  helpText?: string;
+
+  // Layout properties
+  maxWidth?: string; // CSS max-width value (e.g., '200px', '50%', '10rem')
+
+  // Conditional rendering
+  conditions?: {
+    visible?: (formData: Record<string, any>) => boolean;
+    disabled?: (formData: Record<string, any>) => boolean;
+  };
+}
+
+export interface TextFieldConfig extends BaseFieldConfig {
+  type: 'text';
+  placeholder?: string;
+}
+
+export interface TextareaFieldConfig extends BaseFieldConfig {
+  type: 'textarea';
+  placeholder?: string;
+  rows?: number;
+  minHeight?: number;
+}
+
+export interface SelectFieldConfig extends BaseFieldConfig {
+  type: 'select';
+  options: string[] | { value: string; label: string }[];
+  multi?: boolean;
+  searchable?: boolean;
+  tags?: boolean;
+  placeholder?: string;
+  maxItems?: number;
+  valueKey?: string;
+  nameKey?: string;
+  endpoint?: string;
+  emails?: boolean;
+}
+
+export interface KeyValueFieldConfig extends BaseFieldConfig {
+  type: 'key-value';
+  sortable?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  minRows?: number;
+}
+
+export interface ArrayFieldConfig extends BaseFieldConfig {
+  type: 'array';
+  itemConfig: Record<string, FieldConfig>;
+  sortable?: boolean;
+  minItems?: number;
+  maxItems?: number;
+  itemLabel?: string;
+  onItemChange?: (
+    itemIndex: number,
+    field: string,
+    value: any,
+    allItems: any[]
+  ) => any[];
+}
+
+export interface CheckboxFieldConfig extends BaseFieldConfig {
+  type: 'checkbox';
+  size?: number;
+  animateChange?: string;
+}
+
+export type FieldConfig =
+  | TextFieldConfig
+  | TextareaFieldConfig
+  | SelectFieldConfig
+  | KeyValueFieldConfig
+  | ArrayFieldConfig
+  | CheckboxFieldConfig;
+
+// Layout configurations for better form organization
+// Recursive layout system - any layout item can contain other layout items
+
+export interface FieldItemConfig {
+  type: 'field';
+  field: string; // field name to render
+}
+
+export interface RowLayoutConfig {
+  type: 'row';
+  items: LayoutItem[]; // can contain fields, groups, or other rows
+  gap?: string; // CSS gap value, defaults to '1rem'
+}
+
+export interface GroupLayoutConfig {
+  type: 'group';
+  label: string;
+  items: LayoutItem[]; // can contain fields, rows, or other groups
+  collapsible?: boolean;
+  collapsed?: boolean; // initial state if collapsible
+  helpText?: string;
+}
+
+export type LayoutItem =
+  | FieldItemConfig
+  | RowLayoutConfig
+  | GroupLayoutConfig
+  | string; // string is shorthand for field
+
+export interface ActionConfig {
+  name: string;
+  color: string;
+  evaluated?: string[];
+  render?: (node: any, action: any) => TemplateResult;
+
+  form?: Record<string, FieldConfig>;
+  layout?: LayoutItem[]; // optional layout configuration - array of layout items
+
+  // Action editor configuration (legacy)
+  // Form-level transformations
+  toFormData?: (action: Action) => any;
+  fromFormData?: (formData: any) => Action;
+
+  validate?: (action: Action) => ValidationResult;
+}
+
+export const COLORS = {
+  send: '#3498db',
+  update: '#01c1af',
+  broadcast: '#8e5ea7',
+  call: '#e68628',
+  create: '#df419f',
+  save: '#1a777c',
+  split: '#aaaaaa',
+  execute: '#666666',
+  wait: '#4d7dad',
+  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/flow/utils.ts

@@ -0,0 +1,76 @@
+import { html } from 'lit-html';
+import { NamedObject } from '../store/flow-definition';
+
+/**
+ * Renders a single line item with optional icon
+ */
+export const renderLineItem = (name: string, icon?: string) => {
+  return html`<div style="display:flex;items-align:center;">
+    ${icon
+      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
+      : null}
+    <div
+      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;"
+    >
+      ${name}
+    </div>
+  </div>`;
+};
+
+/**
+ * Renders a list of named objects with optional icon, showing up to 3 items
+ * with a "+X more" indicator if there are more items
+ */
+export const renderNamedObjects = (assets: NamedObject[], icon?: string) => {
+  return renderStringList(
+    assets.map((asset) => asset.name),
+    icon
+  );
+};
+
+/**
+ * Renders a list of strings with optional icon, showing up to 3 items
+ * with a "+X more" indicator if there are more items
+ */
+export const renderStringList = (items: string[], icon?: string) => {
+  const itemElements = [];
+  const maxDisplay = 3;
+
+  // Show up to 3 items, or all 4 if exactly 4 items
+  const displayCount =
+    items.length === 4 ? 4 : Math.min(maxDisplay, items.length);
+
+  for (let i = 0; i < displayCount; i++) {
+    const item = items[i];
+    itemElements.push(renderLineItem(item, icon));
+  }
+
+  // Add "+X more" if there are more than 3 items (and not exactly 4)
+  if (items.length > maxDisplay && items.length !== 4) {
+    const remainingCount = items.length - maxDisplay;
+    itemElements.push(html`<div
+      style="display:flex;items-align:center;margin-top:0.2em;"
+    >
+      ${icon
+        ? html`<div style="margin-right:0.4em; width: 1em;"></div>` // spacing placeholder
+        : null}
+      <div style="font-size:0.8em">+${remainingCount} more</div>
+    </div>`);
+  }
+  return itemElements;
+};
+
+// URN scheme mapping for user-friendly display
+export const urnSchemeMap: Record<string, string> = {
+  tel: 'Phone Number',
+  email: 'Email',
+  twitter: 'Twitter',
+  facebook: 'Facebook',
+  telegram: 'Telegram',
+  whatsapp: 'WhatsApp',
+  viber: 'Viber',
+  line: 'Line',
+  discord: 'Discord',
+  slack: 'Slack',
+  external: 'External ID'
+};

package/src/form/ArrayEditor.ts

@@ -0,0 +1,240 @@
+import { html, css, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { FieldConfig } from '../flow/types';
+import { BaseListEditor, ListItem } from './BaseListEditor';
+
+@customElement('temba-array-editor')
+export class TembaArrayEditor extends BaseListEditor<ListItem> {
+  @property({ type: Object })
+  itemConfig: Record<string, FieldConfig> = {};
+
+  @property({ type: String })
+  itemLabel = 'Item';
+
+  @property({ type: Function })
+  onItemChange?: (
+    itemIndex: number,
+    field: string,
+    value: any,
+    allItems: any[]
+  ) => any[];
+
+  constructor() {
+    super();
+    this._items = [];
+  }
+
+  // External API
+  @property({ type: Array })
+  get value(): any[] {
+    return [...this._items];
+  }
+
+  set value(newValue: any[]) {
+    this._items = newValue || [];
+    this.requestUpdate();
+  }
+
+  // Implement abstract methods
+  isEmptyItem(item: ListItem): boolean {
+    return Object.values(item).every(
+      (value) => value === undefined || value === null || value === ''
+    );
+  }
+
+  createEmptyItem(): ListItem {
+    return {};
+  }
+
+  protected handleFieldChange(
+    itemIndex: number,
+    fieldName: string,
+    newValue: any
+  ) {
+    let updatedItems: any[];
+
+    if (this.onItemChange) {
+      updatedItems = this.onItemChange(
+        itemIndex,
+        fieldName,
+        newValue,
+        this._items
+      );
+    } else {
+      updatedItems = [...this._items];
+      updatedItems[itemIndex] = {
+        ...updatedItems[itemIndex],
+        [fieldName]: newValue
+      };
+    }
+
+    this.updateValue(updatedItems);
+  }
+
+  private computeFieldValue(
+    itemIndex: number,
+    fieldName: string,
+    config: FieldConfig
+  ): any {
+    const item = this._items[itemIndex] || {};
+    const currentValue = item[fieldName];
+
+    if (config.computeValue) {
+      return config.computeValue(item, currentValue);
+    }
+
+    return currentValue;
+  }
+
+  private renderField(
+    itemIndex: number,
+    fieldName: string,
+    config: FieldConfig
+  ): 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':
+        return html`<temba-select
+          .value=${computedValue || ''}
+          .options=${config.options}
+          @change=${(e: any) =>
+            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
+        ></temba-select>`;
+
+      default:
+        return html`<span>Unsupported field type: ${config.type}</span>`;
+    }
+  }
+
+  renderItem(item: ListItem, index: number): TemplateResult {
+    const canRemove = this.canRemoveItem(index);
+
+    return html`
+      <div class="array-item">
+        <div class="item-header">
+          <span class="item-title">${this.itemLabel} ${index + 1}</span>
+          ${canRemove
+            ? html`
+                <button
+                  @click=${() => this.removeItem(index)}
+                  class="remove-btn"
+                >
+                  Remove
+                </button>
+              `
+            : ''}
+        </div>
+        <div class="item-fields">
+          ${Object.entries(this.itemConfig).map(
+            ([fieldName, config]) => html`
+              <div class="field">
+                <label>${config.label}${config.required ? ' *' : ''}</label>
+                ${this.renderField(index, fieldName, config)}
+              </div>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  protected getContainerClass(): string {
+    return 'array-editor';
+  }
+
+  protected renderAddButton(): TemplateResult {
+    return html`
+      <button class="add-btn" @click=${() => this.addItem()}>
+        Add ${this.itemLabel}
+      </button>
+    `;
+  }
+
+  static styles = css`
+    .array-editor {
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      padding: 16px;
+      background: #fafafa;
+    }
+
+    .array-item {
+      border: 1px solid #d0d0d0;
+      border-radius: 4px;
+      padding: 16px;
+      margin-bottom: 12px;
+      background: white;
+    }
+
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .item-title {
+      font-weight: 600;
+      color: #333;
+    }
+
+    .item-fields {
+      display: grid;
+      gap: 12px;
+    }
+
+    .field label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: 500;
+      color: #555;
+      font-size: 14px;
+    }
+
+    .add-btn,
+    .remove-btn {
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .add-btn:hover,
+    .remove-btn:hover {
+      background: #f8f8f8;
+    }
+
+    .remove-btn {
+      background: #fff5f5;
+      border-color: #fecaca;
+      color: #dc2626;
+    }
+
+    .remove-btn:hover {
+      background: #fef2f2;
+    }
+  `;
+}