ui.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #ffffff;
      color: #18181b;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 16px;
    }

    .section {
      padding: 16px;

    }

    .section-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .section-title {
      font-size: 13px;
      font-weight: 600;
    }

    .section-subtitle {
      font-size: 12px;
      color: #71717a;
    }

    textarea {
      width: 100%;
      height: 128px;
      font-family: 'Geist Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 500;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid #e4e4e7;
      resize: vertical;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="text"] {
      width: 100%;
      font-family: 'Geist Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 500;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid #e4e4e7;
      margin-bottom: 12px;
      box-sizing: border-box;
    }

    .input-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 4px;
      color: #18181b;
    }

    .example {
      font-weight: 500;
      background-color: #f4f4f5;
      padding: 12px;
      border-radius: 6px;
    }

    .example-title {
      font-size: 12px;
      font-weight: 400;
      margin-bottom: 8px;
      color: #71717a;
    }

    pre {
      font-family: 'Geist Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
      font-size: 11px;
      color: #18181b;
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .buttons-container {
      position: sticky;
      bottom: 0;
      padding: 16px;
      background-color: white;
      z-index: 1;
      border-top: 1px solid #e4e4e7;
    }

    .button-row {
      display: flex;
      gap: 8px;
    }

    .action-button {
      background-color: #18181b;
      color: white;
      border: none;
      padding: 12px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      height: 40px;
      width: 100%;
    }

    .action-button:hover {
      background-color: #18181be6;
    }

    .action-button:disabled {
      background-color: #8b8b8b;
      cursor: not-allowed;
    }

    .secondary-button {
      background-color: white;
      color: #18181b;
      border: 1px solid #e4e4e7;
      padding: 12px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
    }

    .secondary-button:hover {
      background-color: #f4f4f5;
    }

    .mono {
      font-family: 'Geist Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
      font-size: 12px;
      font-weight: 500;
      color: #18181b;
    }

    .dummy-data-controls {
      margin-top: 12px;
    }

    .dummy-data-option {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }

    .dummy-data-option input[type="radio"] {
      margin-bottom: 2px;
      margin-right: 6px;
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #d6d6d9;
      outline: none;
      position: relative;
      cursor: pointer;
    }

    .dummy-data-option input[type="radio"]:checked {
      border: 1px solid #18181b;
    }

    .dummy-data-option input[type="radio"]:checked:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #18181b;
    }

    .dummy-data-option label {
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
    }

    .input-group {
      margin-top: 8px;
      margin-bottom: 12px;
    }

    .input-hint {
      font-size: 11px;
      color: #71717a;
      margin-top: 4px;
      margin-bottom: 8px;
    }

    .row-count {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    .row-count label {
      font-size: 12px;
      font-weight: 500;
      flex: 1;
    }

    .row-count input {
      width: 80px;
      padding: 6px;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid #e4e4e7;
    }

    .toggle-container {
      display: flex;
      margin: 16px 0;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #e4e4e7;
      padding: 1px;
      background-color: #f4f4f5;
      height: 36px;
    }

    .toggle-option {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 4px;
      color: #71717a;
      border: 1px solid transparent;
      box-sizing: border-box;
    }

    .toggle-option:hover {
      color: #18181b;
    }

    .toggle-option.active {
      background-color: #ffffff;
      color: #18181b;
      border-color: #d4d4d9;
    }

    .content-panel {
      display: none;
    }

    .content-panel.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="section">
      <div class="section-header">
        <span class="section-title">Bring your own data to the table</span>
        <span class="section-subtitle">Transform your tables with custom structured data.</span>
      </div>

      <!-- Toggle Switch -->
      <div class="toggle-container">
        <div class="toggle-option active" id="custom-data-toggle">Custom data</div>
        <div class="toggle-option" id="dummy-data-toggle">Dummy data</div>
      </div>

      <!-- Custom Data Panel -->
      <div class="content-panel active" id="custom-data-panel">
        <textarea id="jsonData" placeholder='Paste your JSON data here'></textarea>
        
        <div class="example">
          <div class="example-title">Example format:</div>
          <pre>[
  {
    "Name": "Mark Darnalds",
    "Department": "Design",
    "Email": "mark.darnalds@company.com",
    "Location": "London",
    "Access Level": "Admin",
    "Status": "Active"
  }
]</pre>
        </div>
      </div>
      
      <!-- Dummy Data Panel -->
      <div class="content-panel" id="dummy-data-panel">
        <div class="dummy-data-controls">
          <div class="dummy-data-option">
            <input type="radio" id="standard-data" name="dummy-data-type" value="standard" checked>
            <label for="standard-data">Standard data</label>
          </div>
          
          <div class="dummy-data-option">
            <input type="radio" id="custom-headers" name="dummy-data-type" value="custom">
            <label for="custom-headers">Custom headers</label>
          </div>
          
          <div id="custom-headers-input" class="input-group" style="display: none;">
            <label class="input-label" for="header-names">Enter column headers (comma-separated)</label>
            <input type="text" id="header-names" placeholder="Name, Email, Department, etc">
            
            <div class="example">
              <div class="example-title">Recognized header types:</div>
              <pre>Name, Email, Phone, Department, Location, Status, 
Date, Role, Team, Project, ID, Address, Company,
Title, Skill, Language, Price, Quantity, Rating</pre>
            </div>
          </div>
          
          <div class="row-count">
            <label for="row-count">Number of rows:</label>
            <input type="number" id="row-count" value="10" min="1" max="100">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="buttons-container">
    <button class="action-button" id="tabulateBtn">Tabulate</button>
  </div>
    
  <script>
    // Elements
    const jsonData = document.getElementById('jsonData');
    const tabulateBtn = document.getElementById('tabulateBtn');
    const standardDataOption = document.getElementById('standard-data');
    const customHeadersOption = document.getElementById('custom-headers');
    const customHeadersInput = document.getElementById('custom-headers-input');
    const headerNamesInput = document.getElementById('header-names');
    const rowCountInput = document.getElementById('row-count');
    
    // Toggle elements
    const customDataToggle = document.getElementById('custom-data-toggle');
    const dummyDataToggle = document.getElementById('dummy-data-toggle');
    const customDataPanel = document.getElementById('custom-data-panel');
    const dummyDataPanel = document.getElementById('dummy-data-panel');
    
    // Current mode
    let currentMode = 'custom'; // 'custom' or 'dummy'
    
    // Check if button should be enabled based on current mode
    function updateButtonState() {
      if (currentMode === 'custom') {
        // In custom mode, only enable if there's JSON data
        tabulateBtn.disabled = jsonData.value.trim() === '';
      } else {
        // In dummy mode, always enable
        tabulateBtn.disabled = false;
      }
    }
    
    // Initial button state
    updateButtonState();
    
    // Listen for changes to the JSON data textarea
    jsonData.addEventListener('input', updateButtonState);
    
    // Toggle between custom and dummy data
    customDataToggle.addEventListener('click', () => {
      customDataToggle.classList.add('active');
      dummyDataToggle.classList.remove('active');
      customDataPanel.classList.add('active');
      dummyDataPanel.classList.remove('active');
      currentMode = 'custom';
      updateButtonState(); // Update button state when mode changes
    });
    
    dummyDataToggle.addEventListener('click', () => {
      dummyDataToggle.classList.add('active');
      customDataToggle.classList.remove('active');
      dummyDataPanel.classList.add('active');
      customDataPanel.classList.remove('active');
      currentMode = 'dummy';
      updateButtonState(); // Update button state when mode changes
    });
  
    // Toggle custom headers input visibility
    standardDataOption.addEventListener('change', () => {
      customHeadersInput.style.display = 'none';
    });
    
    customHeadersOption.addEventListener('change', () => {
      customHeadersInput.style.display = 'block';
    });
  
    // Function to show loading state
    function setButtonLoading() {
      tabulateBtn.disabled = true;
      tabulateBtn.textContent = 'Tabulating...';
    }
    
    // Function to reset button
    function resetButton() {
      tabulateBtn.textContent = 'Tabulate';
      updateButtonState(); // Use the updateButtonState function to determine if it should be enabled
    }
  
    // Function to check if selection exists in Figma
    function checkSelectionAndNotify(callback) {
      // Send a message to check if there's a selection
      parent.postMessage({ 
        pluginMessage: { type: 'check-selection' } 
      }, '*');
      
      // Set up a one-time listener for the response
      window.addEventListener('message', function selectionListener(event) {
        const message = event.data.pluginMessage;
        if (message && message.type === 'selection-result') {
          window.removeEventListener('message', selectionListener);
          
          if (message.hasSelection) {
            // If selection exists, proceed with callback
            callback();
          } else {
            // Reset button if there's no selection
            resetButton();
          }
        }
      });
    }
  
    // Populate with custom data
    function populateWithCustomData() {
      const jsonInput = jsonData.value.trim();
      
      // Check if JSON input is empty (should not happen due to button disabling)
      if (!jsonInput) {
        parent.postMessage({ 
          pluginMessage: { 
            type: 'show-notification', 
            message: '🚨 Please paste JSON data first'
          } 
        }, '*');
        resetButton();
        return;
      }
      
      let data;
      try {
        // Parse JSON
        data = JSON.parse(jsonInput);
        
        // Check if data is an array and not empty
        if (!Array.isArray(data) || data.length === 0) {
          parent.postMessage({ 
            pluginMessage: { 
              type: 'show-notification', 
              message: '🚨 JSON must be an array of objects'
            } 
          }, '*');
          resetButton();
          return;
        }
        
        // Check if first item is an object
        if (typeof data[0] !== 'object' || data[0] === null) {
          parent.postMessage({ 
            pluginMessage: { 
              type: 'show-notification', 
              message: '🚨 JSON must contain objects with properties'
            } 
          }, '*');
          resetButton();
          return;
        }
        
        // If validation passes, check selection and populate
        checkSelectionAndNotify(() => {
          parent.postMessage({ 
            pluginMessage: { 
              type: 'populate-table', 
              data: data,
              format: 'objects'
            } 
          }, '*');
        });
        
      } catch (e) {
        // If parsing fails, show error via plugin notification
        parent.postMessage({ 
          pluginMessage: { 
            type: 'show-notification', 
            message: '🚨 Invalid JSON format. Please check your input.'
          } 
        }, '*');
        resetButton();
      }
    }
    
    // Generate and populate with dummy data
    function populateWithDummyData() {
      checkSelectionAndNotify(() => {
        // Get row count
        const rowCount = parseInt(rowCountInput.value, 10) || 10;
        
        // Check if using custom headers
        if (customHeadersOption.checked) {
          const headerNamesStr = headerNamesInput.value.trim();
          
          if (!headerNamesStr) {
            parent.postMessage({ 
              pluginMessage: { 
                type: 'show-notification', 
                message: '🚨 Please enter column headers'
              } 
            }, '*');
            resetButton();
            return;
          }
          
          // Parse headers (trim whitespace from each)
          const headers = headerNamesStr.split(',').map(header => header.trim());
          
          if (headers.length === 0) {
            parent.postMessage({ 
              pluginMessage: { 
                type: 'show-notification', 
                message: '🚨 Please enter valid column headers'
              } 
            }, '*');
            resetButton();
            return;
          }
          
          // Send headers to plugin
          parent.postMessage({ 
            pluginMessage: { 
              type: 'generate-custom-dummy-data', 
              headers: headers,
              rowCount: rowCount
            } 
          }, '*');
        } else {
          // Use standard dummy data
          parent.postMessage({ 
            pluginMessage: { 
              type: 'generate-dummy-data', 
              rowCount: rowCount,
              columnCount: 12  // Support up to 12 columns
            } 
          }, '*');
        }
      });
    }
    
    // Unified tabulate button handler
    tabulateBtn.addEventListener('click', () => {
      setButtonLoading();
      
      if (currentMode === 'custom') {
        populateWithCustomData();
      } else {
        populateWithDummyData();
      }
    });
    
    // Add a listener for messages from the plugin
    window.addEventListener('message', (event) => {
      const message = event.data.pluginMessage;
      if (message) {
        if (message.type === 'selection-result' && !message.hasSelection) {
          // Reset button if there's no selection
          resetButton();
        } else if (message.type === 'operation-complete') {
          // Reset button when operation is complete
          resetButton();
        }
      }
    });
    
    // Fun hover effect for the button
    tabulateBtn.addEventListener('mouseover', function() {
      if (!this.disabled) {
        this.textContent = '(╯°□°)╯︵ ┻━┻';
      }
    });
    
    tabulateBtn.addEventListener('mouseout', function() {
      if (!this.disabled) {
        this.textContent = 'Tabulate';
      }
    });
  </script>  
  
</body>
</html>