docuseal/app/javascript/template_builder/default_field_highlight.js

/**
 * Default Field Name Highlighting
 *
 * This module provides utilities for detecting and highlighting fields with default names.
 * Default names follow the pattern "[Field Type] Field [Number]" (e.g., "Text Field 1", "Signature Field 2")
 * or "[Field Type] [Number]" for headings (e.g., "Heading 1", "Heading 2")
 */

/**
 * Regular expression to match default field names
 * Matches patterns like:
 * - "Text Field 1", "Text Field 2", etc.
 * - "Signature Field 1", "Signature Field 2", etc.
 * - "Heading 1", "Heading 2", etc.
 * - "Initials Field 1", "Initials Field 2", etc.
 * - "Date Field 1", "Date Field 2", etc.
 * - "Number Field 1", "Number Field 2", etc.
 * - "Image Field 1", "Image Field 2", etc.
 * - "File Field 1", "File Field 2", etc.
 * - "Select Field 1", "Select Field 2", etc.
 * - "Checkbox Field 1", "Checkbox Field 2", etc.
 * - "Multiple Field 1", "Multiple Field 2", etc.
 * - "Radio Field 1", "Radio Field 2", etc.
 * - "Cells Field 1", "Cells Field 2", etc.
 * - "Stamp Field 1", "Stamp Field 2", etc.
 * - "Payment Field 1", "Payment Field 2", etc.
 * - "Phone Field 1", "Phone Field 2", etc.
 * - "Verify ID Field 1", "Verify ID Field 2", etc.
 */
export const DEFAULT_FIELD_NAME_REGEX = /^(Text|Signature|Initials|Date|Number|Image|File|Select|Checkbox|Multiple|Radio|Cells|Stamp|Payment|Phone|Verify ID).*?\s+\d+$|^Heading\s+\d+$/i

/**
 * Check if a field name is a default name
 * @param {string} fieldName - The field name to check
 * @returns {boolean} True if the field name matches the default pattern
 */
export function isDefaultFieldName (fieldName) {
  if (!fieldName || typeof fieldName !== 'string' || fieldName.trim() === '') {
    return true
  }
  const isDefault = DEFAULT_FIELD_NAME_REGEX.test(fieldName)
  return isDefault
}

/**
 * Get the CSS classes for highlighting a default-named field
 * @returns {string} CSS classes for indigo highlighting
 */
export function getDefaultFieldHighlightClasses () {
  return '!border-indigo-500 !bg-indigo-100'
}

/**
 * Get the inline styles for highlighting a default-named field
 * @returns {Object} Inline styles for indigo highlighting
 */
export function getDefaultFieldHighlightStyles () {
  return {
    borderWidth: '3px',
    borderStyle: 'solid'
  }
}

/**
 * Get the tooltip message for default-named fields
 * @returns {string} Tooltip message explaining why the field is highlighted
 */
export function getDefaultFieldTooltipMessage () {
  return 'This field has a default name. Please rename it to something more descriptive for a better form filling experience.'
}

/**
 * Get the warning message for templates with default-named fields
 * @param {number} count - Number of fields with default names
 * @returns {string} Warning message
 */
export function getDefaultFieldWarningMessage (count) {
  if (count === 1) {
    return 'You have 1 field with a default name. Please rename it to something more descriptive for a better form filling experience.'
  }
  return `You have ${count} fields with default names. Please rename them to something more descriptive for a better form filling experience.`
}

/**
 * Count fields with default names
 * @param {Array} fields - Array of field objects
 * @returns {number} Count of fields with default names
 */
export function countDefaultFieldNames (fields) {
  if (!Array.isArray(fields)) {
    return 0
  }
  return fields.filter(field => isDefaultFieldName(field.name)).length
}

/**
 * Get all fields with default names
 * @param {Array} fields - Array of field objects
 * @returns {Array} Array of fields with default names
 */
export function getDefaultFieldNames (fields) {
  if (!Array.isArray(fields)) {
    return []
  }
  return fields.filter(field => isDefaultFieldName(field.name))
}