Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
201
admin-ui/js/components/tools/ds-figma-live-compare.js
Normal file
201
admin-ui/js/components/tools/ds-figma-live-compare.js
Normal file
@@ -0,0 +1,201 @@
|
||||
/**
|
||||
* ds-figma-live-compare.js
|
||||
* Side-by-side Figma and Live Application comparison for QA validation
|
||||
* QA 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 DSFigmaLiveCompare extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.figmaUrl = '';
|
||||
this.liveUrl = '';
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
const project = await apiClient.getProject(context.project_id);
|
||||
this.figmaUrl = project.figma_qa_file || project.figma_ui_file || '';
|
||||
this.liveUrl = project.live_url || window.location.origin;
|
||||
} catch (error) {
|
||||
console.error('[DSFigmaLiveCompare] Failed to load project config:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
const figmaInput = this.querySelector('#figma-url-input');
|
||||
const liveInput = this.querySelector('#live-url-input');
|
||||
const loadBtn = this.querySelector('#load-comparison-btn');
|
||||
const screenshotBtn = this.querySelector('#take-screenshot-btn');
|
||||
|
||||
if (figmaInput) {
|
||||
figmaInput.value = this.figmaUrl;
|
||||
}
|
||||
|
||||
if (liveInput) {
|
||||
liveInput.value = this.liveUrl;
|
||||
}
|
||||
|
||||
if (loadBtn) {
|
||||
loadBtn.addEventListener('click', () => this.loadComparison());
|
||||
}
|
||||
|
||||
if (screenshotBtn) {
|
||||
screenshotBtn.addEventListener('click', () => this.takeScreenshots());
|
||||
}
|
||||
|
||||
const comparisonContainer = this.querySelector('#comparison-container');
|
||||
if (comparisonContainer) {
|
||||
setupComparisonHandlers(comparisonContainer, {});
|
||||
}
|
||||
}
|
||||
|
||||
loadComparison() {
|
||||
const figmaInput = this.querySelector('#figma-url-input');
|
||||
const liveInput = this.querySelector('#live-url-input');
|
||||
|
||||
this.figmaUrl = figmaInput?.value || '';
|
||||
this.liveUrl = liveInput?.value || '';
|
||||
|
||||
if (!this.figmaUrl || !this.liveUrl) {
|
||||
ComponentHelpers.showToast?.('Please enter both Figma and Live URLs', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
new URL(this.figmaUrl);
|
||||
new URL(this.liveUrl);
|
||||
} catch (error) {
|
||||
ComponentHelpers.showToast?.('Invalid URL format', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const comparisonContainer = this.querySelector('#comparison-container');
|
||||
if (comparisonContainer) {
|
||||
comparisonContainer.innerHTML = createComparisonView({
|
||||
leftTitle: 'Figma Design',
|
||||
rightTitle: 'Live Application',
|
||||
leftSrc: this.figmaUrl,
|
||||
rightSrc: this.liveUrl
|
||||
});
|
||||
|
||||
setupComparisonHandlers(comparisonContainer, {});
|
||||
ComponentHelpers.showToast?.('Comparison loaded', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
async takeScreenshots() {
|
||||
ComponentHelpers.showToast?.('Taking screenshots...', 'info');
|
||||
|
||||
try {
|
||||
// Take screenshot of live application via MCP (using authenticated API client)
|
||||
const context = contextStore.getMCPContext();
|
||||
await apiClient.request('POST', '/qa/screenshot-compare', {
|
||||
projectId: context.project_id,
|
||||
figmaUrl: this.figmaUrl,
|
||||
liveUrl: this.liveUrl
|
||||
});
|
||||
|
||||
ComponentHelpers.showToast?.('Screenshots saved to gallery', 'success');
|
||||
|
||||
// Switch to screenshot gallery
|
||||
const panel = document.querySelector('ds-panel');
|
||||
if (panel) {
|
||||
panel.switchTab('screenshots');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DSFigmaLiveCompare] Screenshot failed:', error);
|
||||
ComponentHelpers.showToast?.(`Screenshot failed: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
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;">Figma vs Live QA Comparison</h3>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr auto 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);">
|
||||
Figma Design URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="figma-url-input"
|
||||
placeholder="https://figma.com/file/..."
|
||||
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);">
|
||||
Live Component URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="live-url-input"
|
||||
placeholder="https://app.example.com/..."
|
||||
class="input"
|
||||
style="width: 100%; font-size: 11px;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button id="load-comparison-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
|
||||
🔍 Load
|
||||
</button>
|
||||
|
||||
<button id="take-screenshot-btn" class="button" style="font-size: 11px; padding: 6px 16px;">
|
||||
📸 Screenshot
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 8px; font-size: 10px; color: var(--vscode-text-dim);">
|
||||
💡 Compare design specifications with live implementation for QA validation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison View -->
|
||||
<div id="comparison-container" style="flex: 1; overflow: hidden;">
|
||||
${this.figmaUrl && this.liveUrl ? createComparisonView({
|
||||
leftTitle: 'Figma Design',
|
||||
rightTitle: 'Live Application',
|
||||
leftSrc: this.figmaUrl,
|
||||
rightSrc: this.liveUrl
|
||||
}) : `
|
||||
<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;">QA Comparison Tool</h3>
|
||||
<p style="font-size: 12px; color: var(--vscode-text-dim);">
|
||||
Enter Figma design and live application URLs to validate implementation against specifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ds-figma-live-compare', DSFigmaLiveCompare);
|
||||
|
||||
export default DSFigmaLiveCompare;
|
||||
Reference in New Issue
Block a user