EXAMPLES

import type { Text, NumberType, WebUrl } from '@wix/editor-react-types';

export function capitalize(text: Text): Text {
  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

export function truncate(text: Text, maxLength: NumberType = 50): Text {
  if (text.length <= maxLength) {
    return text;
  }
  return text.slice(0, maxLength - 3) + '...';
}

export async function fetchText(url: WebUrl): Promise<Text> {
  const response = await fetch(url);
  return await response.text();
}

export function logMessage(message: Text): void {
  console.log(`[app] ${message}`);
}

functions: {
  capitalize: {
    parameters: [
      {
        dataType: 'text',
        displayName: 'Text',
        description: 'The text to capitalize',
      },
    ],
    returns: {
      dataType: 'text',
    },
    async: false,
    displayName: 'Capitalize',
    description: 'Capitalizes the first letter and lowercases the rest',
  },
  truncate: {
    parameters: [
      {
        dataType: 'text',
        displayName: 'Text',
        description: 'The text to truncate',
      },
      {
        dataType: 'number',
        displayName: 'Max Length',
        description: 'Maximum number of characters',
        optional: true,
        defaultValue: 50,
      },
    ],
    returns: {
      dataType: 'text',
    },
    async: false,
    displayName: 'Truncate',
    description: 'Truncates text to a maximum length with ellipsis',
  },
  fetchText: {
    parameters: [
      {
        dataType: 'webUrl',
        displayName: 'URL',
        description: 'The URL to fetch text from',
      },
    ],
    returns: {
      dataType: 'text',
    },
    async: true,
    displayName: 'Fetch Text',
    description: 'Fetches text content from a URL',
  },
  logMessage: {
    parameters: [
      {
        dataType: 'text',
        displayName: 'Message',
        description: 'The message to log',
      },
    ],
    async: false,
    displayName: 'Log Message',
    description: 'Logs a message to the console',
  },
},

import type { Text, NumberType } from '@wix/editor-react-types';

interface Product {
  name: Text;
  price: NumberType;
  quantity: NumberType;
}

export function calculateTotal(products: Product[]): NumberType {
  return products.reduce((total, product) => {
    return total + product.price * product.quantity;
  }, 0);
}

export function formatPrice(
  amount: NumberType,
  currency: 'USD' | 'EUR' | 'GBP' = 'USD',
): Text {
  const symbols: Record<string, string> = { USD: '$', EUR: '€', GBP: '£' };
  return `${symbols[currency]}${amount.toFixed(2)}`;
}

export function formatUser(user: { firstName: Text; lastName: Text; age: NumberType }): Text {
  return `${user.firstName} ${user.lastName} (${user.age})`;
}

functions: {
  calculateTotal: {
    parameters: [
      {
        dataType: 'arrayItems',
        displayName: 'Products',
        description: 'List of products to total',
        arrayItems: {
          item: {
            dataType: 'data',
            data: {
              items: {
                name: {
                  dataType: 'text',
                  displayName: 'Product Name',
                },
                price: {
                  dataType: 'number',
                  displayName: 'Price',
                },
                quantity: {
                  dataType: 'number',
                  displayName: 'Quantity',
                },
              },
            },
          },
        },
      },
    ],
    returns: {
      dataType: 'number',
      displayName: 'Total',
    },
    async: false,
    displayName: 'Calculate Total',
    description: 'Calculates the total price for a list of products',
  },
  formatPrice: {
    parameters: [
      {
        dataType: 'number',
        displayName: 'Amount',
        description: 'The numeric amount to format',
      },
      {
        dataType: 'textEnum',
        displayName: 'Currency',
        description: 'The currency symbol to use',
        optional: true,
        defaultValue: 'USD',
        textEnum: {
          options: [
            { value: 'USD', displayName: 'US Dollar' },
            { value: 'EUR', displayName: 'Euro' },
            { value: 'GBP', displayName: 'British Pound' },
          ],
        },
      },
    ],
    returns: {
      dataType: 'text',
    },
    async: false,
    displayName: 'Format Price',
    description: 'Formats a number as a currency string',
  },
  formatUser: {
    parameters: [
      {
        dataType: 'data',
        displayName: 'User Data',
        description: 'The user object to format',
        data: {
          items: {
            firstName: {
              dataType: 'text',
              displayName: 'First Name',
            },
            lastName: {
              dataType: 'text',
              displayName: 'Last Name',
            },
            age: {
              dataType: 'number',
              displayName: 'Age',
            },
          },
        },
      },
    ],
    returns: {
      dataType: 'text',
    },
    async: false,
    displayName: 'Format User',
    description: 'Formats a user object as a display string',
  },
},

import type { Text } from '@wix/editor-react-types';

export function handleClick(event: PointerEvent): void {
  console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
}

export function handleKeyPress(event: KeyboardEvent): Text {
  return event.key;
}

export function onSearchChange(event: Event): Text {
  return (event.target as HTMLInputElement).value;
}

export function onToggleChange(event: Event): boolean {
  return (event.target as HTMLInputElement).checked;
}

functions: {
  handleClick: {
    parameters: [
      {
        domEvent: 'POINTER',
        displayName: 'Click Event',
      },
    ],
    async: false,
    displayName: 'Handle Click',
    description: 'Handles pointer click events',
  },
  handleKeyPress: {
    parameters: [
      {
        domEvent: 'KEYBOARD',
        displayName: 'Key Event',
      },
    ],
    returns: {
      dataType: 'text',
      displayName: 'Key Pressed',
    },
    async: false,
    displayName: 'Handle Key Press',
    description: 'Returns the key that was pressed',
  },
  onSearchChange: {
    parameters: [
      {
        domEvent: 'CHANGE',
        changeEvent: { inputType: 'text' },
        displayName: 'Search Input Change',
      },
    ],
    returns: {
      dataType: 'text',
      displayName: 'Search Value',
    },
    async: false,
    displayName: 'On Search Change',
    description: 'Handles text input change and returns the current value',
  },
  onToggleChange: {
    parameters: [
      {
        domEvent: 'CHANGE',
        changeEvent: { inputType: 'checkbox' },
        displayName: 'Toggle Change',
      },
    ],
    returns: {
      dataType: 'booleanValue',
      displayName: 'Toggle State',
    },
    async: false,
    displayName: 'On Toggle Change',
    description: 'Handles checkbox toggle and returns the checked state',
  },
},