dss/admin-ui/js/components/tools/ds-storybook-figma-compare.js

/**
 * ds-storybook-figma-compare.js
 * Side-by-side Storybook and Figma component comparison
 * UI Team Tool #1
 */

import { createComparisonView, setupComparisonHandlers } from '../../utils/tool-templates.js';
import { ComponentHelpers } from '../../utils/component-helpers.js';
import contextStore from '../../stores/context-store.js';
import apiClient from '../../services/api-client.js';

class DSStorybookFigmaCompare extends HTMLElement {
  constructor() {
    super();
    this.storybookUrl = '';
    this.figmaUrl = '';
    this.selectedComponent = null;
  }

  async connectedCallback() {
    await this.loadProjectConfig();
    this.render();
    this.setupEventListeners();
  }

  async loadProjectConfig() {
    try {
      const context = contextStore.getMCPContext();
      if (!context.project_id) {
        throw new Error('No project selected');
      }

      // Fetch project configuration to get Storybook URL and Figma file
      const project = await apiClient.getProject(context.project_id);
      this.storybookUrl = project.storybook_url || '';
      this.figmaUrl = project.figma_ui_file || '';
    } catch (error) {
      console.error('[DSStorybookFigmaCompare] Failed to load project config:', error);
    }
  }

  setupEventListeners() {
    const storybookInput = this.querySelector('#storybook-url-input');
    const figmaInput = this.querySelector('#figma-url-input');
    const loadBtn = this.querySelector('#load-comparison-btn');

    if (storybookInput) {
      storybookInput.value = this.storybookUrl;
    }

    if (figmaInput) {
      figmaInput.value = this.figmaUrl;
    }

    if (loadBtn) {
      loadBtn.addEventListener('click', () => this.loadComparison());
    }

    // Setup comparison handlers (sync scroll, zoom, etc.)
    const comparisonContainer = this.querySelector('#comparison-container');
    if (comparisonContainer) {
      setupComparisonHandlers(comparisonContainer, {});
    }
  }

  loadComparison() {
    const storybookInput = this.querySelector('#storybook-url-input');
    const figmaInput = this.querySelector('#figma-url-input');

    this.storybookUrl = storybookInput?.value || '';
    this.figmaUrl = figmaInput?.value || '';

    if (!this.storybookUrl || !this.figmaUrl) {
      ComponentHelpers.showToast?.('Please enter both Storybook and Figma URLs', 'error');
      return;
    }

    // Validate URLs
    try {
      new URL(this.storybookUrl);
      new URL(this.figmaUrl);
    } catch (error) {
      ComponentHelpers.showToast?.('Invalid URL format', 'error');
      return;
    }

    // Update comparison view
    const comparisonContainer = this.querySelector('#comparison-container');
    if (comparisonContainer) {
      comparisonContainer.innerHTML = createComparisonView({
        leftTitle: 'Storybook',
        rightTitle: 'Figma',
        leftSrc: this.storybookUrl,
        rightSrc: this.figmaUrl
      });

      // Re-setup handlers after re-render
      setupComparisonHandlers(comparisonContainer, {});

      ComponentHelpers.showToast?.('Comparison loaded', 'success');
    }
  }

  render() {
    this.innerHTML = `
      <div style="display: flex; flex-direction: column; height: 100%;">
        <!-- Configuration Panel -->
        <div style="padding: 16px; border-bottom: 1px solid var(--vscode-border); background: var(--vscode-sidebar);">
          <h3 style="font-size: 12px; font-weight: 600; margin-bottom: 12px;">Component Comparison Configuration</h3>

          <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;">
            <div>
              <label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: var(--vscode-text-dim);">
                Storybook URL
              </label>
              <input
                type="url"
                id="storybook-url-input"
                placeholder="https://storybook.example.com/..."
                class="input"
                style="width: 100%; font-size: 11px;"
              />
            </div>

            <div>
              <label style="display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; color: var(--vscode-text-dim);">
                Figma URL
              </label>
              <input
                type="url"
                id="figma-url-input"
                placeholder="https://figma.com/file/..."
                class="input"
                style="width: 100%; font-size: 11px;"
              />
            </div>

            <button id="load-comparison-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
              🔍 Load Comparison
            </button>
          </div>

          <div style="margin-top: 8px; font-size: 10px; color: var(--vscode-text-dim);">
            💡 Tip: Navigate to the same component in both Storybook and Figma for accurate comparison
          </div>
        </div>

        <!-- Comparison View -->
        <div id="comparison-container" style="flex: 1; overflow: hidden;">
          ${this.storybookUrl && this.figmaUrl ? createComparisonView({
            leftTitle: 'Storybook',
            rightTitle: 'Figma',
            leftSrc: this.storybookUrl,
            rightSrc: this.figmaUrl
          }) : `
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 48px;">
              <div>
                <div style="font-size: 48px; margin-bottom: 16px;">🔍</div>
                <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">No Comparison Loaded</h3>
                <p style="font-size: 12px; color: var(--vscode-text-dim);">
                  Enter Storybook and Figma URLs above to start comparing components
                </p>
              </div>
            </div>
          `}
        </div>
      </div>
    `;
  }
}

customElements.define('ds-storybook-figma-compare', DSStorybookFigmaCompare);

export default DSStorybookFigmaCompare;