@cdc/core 4.25.8 → 4.25.10

package/components/EditorPanel/components/MarkupHighlightedTextField.tsx

@@ -0,0 +1,227 @@
+import React, { memo, useEffect, useState, useRef, useMemo } from 'react'
+import { useDebounce } from 'use-debounce'
+import { MarkupVariable } from '../../../types/MarkupVariable'
+
+type MarkupHighlightedTextFieldProps = {
+  className?: string
+  value: string | number
+  type?: 'text' | 'textarea'
+  label: string
+  placeholder?: string
+  fieldName?: string
+  section?: any
+  subsection?: any
+  updateField?: (section: any, subsection: any, fieldName: string, value: string) => void
+  markupVariables?: MarkupVariable[]
+  isEditor?: boolean
+}
+
+const MarkupHighlightedTextField: React.FC<MarkupHighlightedTextFieldProps> = memo((props) => {
+  const {
+    value: stateValue,
+    type = 'text',
+    label,
+    placeholder = '',
+    fieldName = '',
+    section = null,
+    subsection = null,
+    updateField,
+    markupVariables = [],
+    isEditor = false,
+    className = '',
+    ...attributes
+  } = props
+
+  const [value, setValue] = useState(String(stateValue))
+  const [debouncedValue] = useDebounce(value, 300) // Reduced debounce for faster response
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+  const highlightRef = useRef<HTMLDivElement>(null)
+
+  // Update field when debounced value changes
+  useEffect(() => {
+    if (stateValue !== debouncedValue && updateField) {
+      updateField(section, subsection, fieldName, debouncedValue)
+    }
+  }, [debouncedValue, section, subsection, fieldName, updateField, stateValue])
+
+  // Update local state when props change
+  useEffect(() => {
+    setValue(String(stateValue))
+  }, [stateValue])
+
+  // Get valid markup variable tags for highlighting (memoized)
+  const validTags = useMemo(() =>
+    markupVariables.map(variable => variable.tag).filter(Boolean),
+    [markupVariables]
+  )
+
+  // Memoized highlighting function to reduce recalculations
+  const highlightedContent = useMemo(() => {
+    if (!isEditor || validTags.length === 0) {
+      return value
+    }
+
+    // Escape HTML
+    const escapedText = value.replace(/[&<>"']/g, (match) => {
+      const escapeMap: { [key: string]: string } = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;'
+      }
+      return escapeMap[match]
+    })
+
+    // Highlight valid markup variables
+    return escapedText.replace(/\{\{([^}]+)\}\}/g, (match) => {
+      const isValid = validTags.includes(match)
+      const cssClass = isValid ? 'markup-variable-valid' : 'markup-variable-invalid'
+      return `<span class="${cssClass}">${match}</span>`
+    })
+  }, [value, validTags, isEditor])
+
+  // Optimized scroll sync
+  const handleScroll = useMemo(() => {
+    let rafId: number | null = null
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId)
+      rafId = requestAnimationFrame(() => {
+        if (inputRef.current && highlightRef.current) {
+          highlightRef.current.scrollTop = inputRef.current.scrollTop
+          highlightRef.current.scrollLeft = inputRef.current.scrollLeft
+        }
+      })
+    }
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.target.value)
+  }
+
+  const inputId = `${fieldName}-${section}-${subsection}`
+  const shouldShowHighlighting = isEditor && validTags.length > 0
+
+  // Optimized styles
+  const containerStyle = useMemo(() => ({
+    position: 'relative' as const,
+    display: 'block',
+    width: '100%',
+  }), [])
+
+  const inputStyle = useMemo(() => ({
+    width: '100%',
+    padding: '8px 12px',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    lineHeight: '1.4',
+    background: shouldShowHighlighting ? 'transparent' : '#fff',
+    color: shouldShowHighlighting ? 'transparent' : 'inherit',
+    caretColor: shouldShowHighlighting ? '#333' : 'inherit',
+    position: 'relative' as const,
+    zIndex: 2,
+    resize: type === 'textarea' ? 'vertical' as const : 'none' as const,
+  }), [shouldShowHighlighting, type])
+
+  const highlightStyle = useMemo(() => ({
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: '8px 12px',
+    margin: 0,
+    border: '1px solid transparent',
+    background: '#fff',
+    borderRadius: '4px',
+    color: '#333',
+    whiteSpace: type === 'textarea' ? 'pre-wrap' as const : 'pre' as const,
+    overflow: 'hidden',
+    pointerEvents: 'none' as const,
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    lineHeight: '1.4',
+    zIndex: 1,
+    wordWrap: 'break-word' as const,
+  }), [type])
+
+  const focusStyle = useMemo(() => ({
+    outline: 'none',
+    borderColor: '#0066cc',
+    boxShadow: '0 0 0 2px rgba(0, 102, 204, 0.2)',
+  }), [])
+
+  return (
+    <div className={`form-group ${className}`}>
+      <label htmlFor={inputId}>
+        <span className='edit-label'>{label}</span>
+        <div style={containerStyle}>
+          {/* Highlighting overlay */}
+          {shouldShowHighlighting && (
+            <div
+              ref={highlightRef}
+              style={highlightStyle}
+              dangerouslySetInnerHTML={{ __html: highlightedContent }}
+              className="markup-highlight-overlay"
+            />
+          )}
+
+          {/* Input field */}
+          {type === 'textarea' ? (
+            <textarea
+              ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+              id={inputId}
+              value={value}
+              onChange={handleChange}
+              onScroll={handleScroll}
+              placeholder={placeholder}
+              style={inputStyle}
+              onFocus={(e) => Object.assign(e.target.style, focusStyle)}
+              onBlur={(e) => Object.assign(e.target.style, inputStyle)}
+              {...attributes}
+            />
+          ) : (
+            <input
+              ref={inputRef as React.RefObject<HTMLInputElement>}
+              type="text"
+              id={inputId}
+              value={value}
+              onChange={handleChange}
+              onScroll={handleScroll}
+              placeholder={placeholder}
+              style={inputStyle}
+              onFocus={(e) => Object.assign(e.target.style, focusStyle)}
+              onBlur={(e) => Object.assign(e.target.style, inputStyle)}
+              {...attributes}
+            />
+          )}
+        </div>
+      </label>
+
+      <style jsx>{`
+        .markup-highlight-overlay .markup-variable-valid {
+          background-color: #e6f3ff;
+          color: #0066cc;
+          border-radius: 3px;
+          padding: 0px 2px;
+          font-weight: 500;
+        }
+
+        .markup-highlight-overlay .markup-variable-invalid {
+          background-color: #ffe6e6;
+          color: #cc0000;
+          border-radius: 3px;
+          padding: 0px 2px;
+          font-weight: 500;
+          text-decoration: underline wavy #cc0000;
+        }
+      `}</style>
+    </div>
+  )
+})
+
+MarkupHighlightedTextField.displayName = 'MarkupHighlightedTextField'
+
+export default MarkupHighlightedTextField

package/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -0,0 +1,411 @@
+import React, { useState, useMemo } from 'react'
+import { MarkupVariable, MarkupCondition } from '../../../types/MarkupVariable'
+import Button from '../../elements/Button'
+import { TextField, Select, CheckBox } from '../Inputs'
+import Icon from '../../ui/Icon'
+import Accordion from '../../ui/Accordion'
+
+type MarkupVariablesEditorProps = {
+  /** Array of markup variable configurations */
+  markupVariables: MarkupVariable[]
+  /** Dataset to extract column names and values from */
+  data: any[]
+  /** Callback when variables are added, updated, or removed */
+  onChange: (variables: MarkupVariable[]) => void
+  /** Whether markup variables feature is enabled */
+  enableMarkupVariables?: boolean
+  /** Callback when enable/disable toggle changes */
+  onToggleEnable?: (enabled: boolean) => void
+}
+
+export type { MarkupVariablesEditorProps }
+
+/**
+ * Editor for creating and managing markup variables with {{variable-name}} syntax.
+ * Supports conditional filters, number formatting, and auto-generated tags.
+ */
+const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
+  markupVariables = [],
+  data = [],
+  onChange,
+  enableMarkupVariables = false,
+  onToggleEnable
+}) => {
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({})
+
+  // Ensure we always have a valid array
+  const safeMarkupVariables = markupVariables || []
+  const availableColumns = data.length > 0 ? Object.keys(data[0]) : []
+
+  // Validate a variable and return array of error messages
+  const validateVariable = React.useCallback((variable: MarkupVariable): string[] => {
+    const errors: string[] = []
+    if (!variable.name || variable.name.trim() === '') {
+      errors.push('Variable name is required')
+    }
+    if (!variable.tag || variable.tag.trim() === '') {
+      errors.push('Variable tag is required')
+    }
+    if (!variable.columnName || variable.columnName.trim() === '') {
+      errors.push('Data column is required')
+    }
+    // Validate conditions
+    variable.conditions?.forEach((condition, index) => {
+      if (!condition.columnName) {
+        errors.push(`Condition ${index + 1}: Column is required`)
+      }
+      if (!condition.value) {
+        errors.push(`Condition ${index + 1}: Value is required`)
+      }
+    })
+    return errors
+  }, [])
+
+  // Validate all variables on mount and when variables change
+  React.useEffect(() => {
+    const errors: Record<number, string[]> = {}
+    safeMarkupVariables.forEach((variable, index) => {
+      const variableErrors = validateVariable(variable)
+      if (variableErrors.length > 0) {
+        errors[index] = variableErrors
+      }
+    })
+    setValidationErrors(errors)
+  }, [safeMarkupVariables, validateVariable]) // Re-validate when variables change
+
+
+  const addVariable = () => {
+    const newVariable: MarkupVariable = {
+      name: '',
+      tag: '',
+      columnName: '',
+      conditions: [],
+      addCommas: false,
+      hideOnNull: false
+    }
+    const newVariables = [...safeMarkupVariables, newVariable]
+    onChange(newVariables)
+    const newIndex = safeMarkupVariables.length
+    setEditingIndex(newIndex)
+
+    // Immediately show validation errors for the new empty variable
+    const errors = validateVariable(newVariable)
+    setValidationErrors(prev => ({
+      ...prev,
+      [newIndex]: errors
+    }))
+  }
+
+  const updateVariable = (index: number, updates: Partial<MarkupVariable>) => {
+    const updated = safeMarkupVariables.map((variable, i) =>
+      i === index ? { ...variable, conditions: variable.conditions || [], ...updates } : variable
+    )
+    onChange(updated)
+
+    // Validate and update errors for this variable
+    const errors = validateVariable(updated[index])
+    setValidationErrors(prev => ({
+      ...prev,
+      [index]: errors
+    }))
+  }
+
+  const removeVariable = (index: number) => {
+    const updated = safeMarkupVariables.filter((_, i) => i !== index)
+    onChange(updated)
+    if (editingIndex === index) {
+      setEditingIndex(null)
+    }
+  }
+
+  const generateTag = (name: string) => {
+    if (!name) return ''
+    // Convert name to tag format: "My Variable" -> "{{my-variable}}"
+    return `{{${name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')}}}`
+  }
+
+  // Get unique values for a given column for condition dropdowns
+  const getColumnValues = useMemo(() => {
+    if (!data || data.length === 0) return {}
+
+    const columnValues: Record<string, (string | number)[]> = {}
+    availableColumns.forEach(column => {
+      const uniqueValues = Array.from(new Set(data.map(row => row[column])))
+        .filter(val => val !== null && val !== undefined && val !== '')
+      columnValues[column] = uniqueValues
+    })
+    return columnValues
+  }, [data, availableColumns])
+
+  const addCondition = (variableIndex: number) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const newCondition: MarkupCondition = {
+      columnName: '',
+      isOrIsNotEqualTo: 'is',
+      value: ''
+    }
+    const updatedConditions = [...(variable.conditions || []), newCondition]
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  const updateCondition = (variableIndex: number, conditionIndex: number, updates: Partial<MarkupCondition>) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const conditions = variable.conditions || []
+    const updatedConditions = conditions.map((condition, i) =>
+      i === conditionIndex ? { ...condition, ...updates } : condition
+    )
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  const removeCondition = (variableIndex: number, conditionIndex: number) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const updatedConditions = variable.conditions.filter((_, i) => i !== conditionIndex)
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  return (
+    <div className='markup-variables-editor'>
+      <div className='mb-3'>
+        <CheckBox
+          value={enableMarkupVariables}
+          fieldName='enableMarkupVariables'
+          label='Enable Markup Variables'
+          updateField={(_section, _subsection, _fieldName, value) => {
+            if (onToggleEnable) {
+              onToggleEnable(value)
+            }
+          }}
+        />
+      </div>
+
+      {enableMarkupVariables && (
+        <>
+          <div className='mb-3'>
+            <p className='text-sm text-gray-600'>
+              Use variables in your content with <code>{'{{variable-name}}'}</code> syntax.
+              Variables will be replaced with values from your data.
+            </p>
+          </div>
+
+          {safeMarkupVariables.length > 0 && (
+            <div className='variables-list mb-3'>
+              {safeMarkupVariables.map((variable, index) => variable ? (
+                <div key={index} className='variable-item p-3 border rounded mb-2' style={{ backgroundColor: '#fff' }}>
+                  <div className='d-flex justify-content-between align-items-start mb-2'>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontSize: '16px', fontWeight: 600, marginBottom: '4px' }}>
+                        {variable.name || 'Unnamed Variable'}
+                      </div>
+                      <div style={{ fontSize: '13px', color: '#6c757d', fontFamily: 'monospace', marginBottom: '4px' }}>
+                        {variable.tag}
+                      </div>
+                      <div style={{ fontSize: '13px', color: '#6c757d' }}>
+                        Column: <strong>{variable.columnName || 'Not selected'}</strong>
+                        {variable.conditions && variable.conditions.length > 0 && (
+                          <span> • {variable.conditions.length} condition{variable.conditions.length !== 1 ? 's' : ''}</span>
+                        )}
+                      </div>
+                      {validationErrors[index] && validationErrors[index].length > 0 && (
+                        <div style={{ fontSize: '12px', color: '#dc3545', marginTop: '8px' }}>
+                          <strong>⚠ Validation Errors:</strong>
+                          <ul style={{ margin: '4px 0 0 0', paddingLeft: '20px' }}>
+                            {validationErrors[index].map((error, errorIndex) => (
+                              <li key={errorIndex}>{error}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <div className='d-flex gap-2'>
+                      <Button
+                        className='btn-sm'
+                        onClick={() => setEditingIndex(editingIndex === index ? null : index)}
+                      >
+                        {editingIndex === index ? 'Close' : 'Edit'}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {editingIndex === index && (
+                    <div className='mt-3 pt-3 border-t'>
+                      <Accordion>
+                        <Accordion.Section title='Basic Settings'>
+                          <div className='mb-3'>
+                            <TextField
+                              value={variable.name}
+                              fieldName='name'
+                              label='Variable Name'
+                              placeholder='e.g., "State Name"'
+                              updateField={(section, subsection, fieldName, value) => {
+                                updateVariable(index, {
+                                  name: value,
+                                  tag: generateTag(value)
+                                })
+                              }}
+                            />
+                          </div>
+                          <div className='mb-3'>
+                            <label>
+                              <span className='edit-label column-heading'>Tag (auto-generated)</span>
+                              <input
+                                type='text'
+                                value={variable.tag}
+                                placeholder='{{variable-name}}'
+                                readOnly
+                                style={{ backgroundColor: '#e9ecef', cursor: 'not-allowed' }}
+                              />
+                            </label>
+                          </div>
+
+                          <div className='mb-3'>
+                            <Select
+                              value={variable.columnName}
+                              fieldName='columnName'
+                              label='Data Column'
+                              options={[
+                                { value: '', label: 'Select Column...' },
+                                ...availableColumns.map(col => ({ value: col, label: col }))
+                              ]}
+                              updateField={(_section, _subsection, _fieldName, value) => {
+                                updateVariable(index, { columnName: value })
+                              }}
+                            />
+                          </div>
+                        </Accordion.Section>
+
+                        <Accordion.Section title='Conditions'>
+                          <div className='text-sm text-gray-500 mb-2'>
+                            Add conditions to filter when this variable should display data
+                          </div>
+
+                          {variable.conditions && variable.conditions.length > 0 && (
+                            <div className='conditions-list mb-2'>
+                              {variable.conditions.map((condition, conditionIndex) => (
+                                <div key={`condition-${index}-${conditionIndex}`} className='condition-item p-2 border rounded mb-2' style={{ backgroundColor: '#f8f9fa' }}>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.columnName || ''}
+                                      fieldName={`condition-column-${index}-${conditionIndex}`}
+                                      label='Column'
+                                      options={[
+                                        { value: '', label: 'Select Column...' },
+                                        ...availableColumns.map(col => ({ value: col, label: col }))
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, newColumnName) => {
+                                        // Reset value when column changes
+                                        updateCondition(index, conditionIndex, {
+                                          columnName: newColumnName,
+                                          value: ''
+                                        })
+                                      }}
+                                    />
+                                  </div>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.isOrIsNotEqualTo || 'is'}
+                                      fieldName={`condition-operator-${index}-${conditionIndex}`}
+                                      label='Operator'
+                                      options={[
+                                        { value: 'is', label: 'is' },
+                                        { value: 'is not', label: 'is not' }
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, value) => {
+                                        updateCondition(index, conditionIndex, { isOrIsNotEqualTo: value as 'is' | 'is not' })
+                                      }}
+                                    />
+                                  </div>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.value || ''}
+                                      fieldName={`condition-value-${index}-${conditionIndex}`}
+                                      label='Value'
+                                      options={[
+                                        { value: '', label: 'Select Value...' },
+                                        ...(condition.columnName && getColumnValues[condition.columnName]
+                                          ? getColumnValues[condition.columnName].map(val => ({
+                                            value: String(val),
+                                            label: String(val)
+                                          }))
+                                          : [])
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, value) => {
+                                        updateCondition(index, conditionIndex, { value })
+                                      }}
+                                    />
+                                  </div>
+                                  <Button
+                                    className='btn-sm btn-danger'
+                                    onClick={() => removeCondition(index, conditionIndex)}
+                                  >
+                                    Remove Condition
+                                  </Button>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+
+                          <Button
+                            className='btn-sm'
+                            onClick={() => addCondition(index)}
+                          >
+                            <Icon display='plus' size={14} className='mr-1' />
+                            Add Condition
+                          </Button>
+                        </Accordion.Section>
+
+                        <Accordion.Section title='Formatting Options'>
+                          <div className='mb-3'>
+                            <CheckBox
+                              value={variable.addCommas || false}
+                              fieldName='addCommas'
+                              label='Format numbers with commas'
+                              updateField={(_section, _subsection, _fieldName, value) =>
+                                updateVariable(index, { addCommas: value })
+                              }
+                            />
+                          </div>
+
+                          <div className='mb-3'>
+                            <CheckBox
+                              value={variable.hideOnNull || false}
+                              fieldName='hideOnNull'
+                              label='Hide section when value is null'
+                              updateField={(_section, _subsection, _fieldName, value) =>
+                                updateVariable(index, { hideOnNull: value })
+                              }
+                            />
+                          </div>
+                        </Accordion.Section>
+                      </Accordion>
+
+                      <div className='mt-3 pt-3 border-t' style={{ textAlign: 'center' }}>
+                        <Button
+                          className='btn-sm btn-danger'
+                          onClick={() => {
+                            if (window.confirm(`Are you sure you want to delete the variable "${variable.name || 'Unnamed Variable'}"?`)) {
+                              removeVariable(index)
+                            }
+                          }}
+                        >
+                          Delete Variable
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : <></>)}
+            </div>
+          )}
+
+          <Button className='btn-primary' onClick={addVariable}>
+            <Icon display='plus' size={16} className='mr-2' />
+            Add Variable
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default MarkupVariablesEditor