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
167
admin-ui/js/components/tools/ds-storybook-live-compare.js
Normal file
167
admin-ui/js/components/tools/ds-storybook-live-compare.js
Normal file
@@ -0,0 +1,167 @@
|
||||
/**
|
||||
* ds-storybook-live-compare.js
|
||||
* Side-by-side Storybook and Live Application comparison
|
||||
* UI Team Tool #2
|
||||
*/
|
||||
|
||||
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 DSStorybookLiveCompare extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.storybookUrl = '';
|
||||
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.storybookUrl = project.storybook_url || '';
|
||||
this.liveUrl = project.live_url || window.location.origin;
|
||||
} catch (error) {
|
||||
console.error('[DSStorybookLiveCompare] Failed to load project config:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
const storybookInput = this.querySelector('#storybook-url-input');
|
||||
const liveInput = this.querySelector('#live-url-input');
|
||||
const loadBtn = this.querySelector('#load-comparison-btn');
|
||||
|
||||
if (storybookInput) {
|
||||
storybookInput.value = this.storybookUrl;
|
||||
}
|
||||
|
||||
if (liveInput) {
|
||||
liveInput.value = this.liveUrl;
|
||||
}
|
||||
|
||||
if (loadBtn) {
|
||||
loadBtn.addEventListener('click', () => this.loadComparison());
|
||||
}
|
||||
|
||||
const comparisonContainer = this.querySelector('#comparison-container');
|
||||
if (comparisonContainer) {
|
||||
setupComparisonHandlers(comparisonContainer, {});
|
||||
}
|
||||
}
|
||||
|
||||
loadComparison() {
|
||||
const storybookInput = this.querySelector('#storybook-url-input');
|
||||
const liveInput = this.querySelector('#live-url-input');
|
||||
|
||||
this.storybookUrl = storybookInput?.value || '';
|
||||
this.liveUrl = liveInput?.value || '';
|
||||
|
||||
if (!this.storybookUrl || !this.liveUrl) {
|
||||
ComponentHelpers.showToast?.('Please enter both Storybook and Live application URLs', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
new URL(this.storybookUrl);
|
||||
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: 'Storybook (Design System)',
|
||||
rightTitle: 'Live Application',
|
||||
leftSrc: this.storybookUrl,
|
||||
rightSrc: this.liveUrl
|
||||
});
|
||||
|
||||
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;">Storybook vs Live Comparison</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 Component URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="storybook-url-input"
|
||||
placeholder="https://storybook.example.com/?path=/story/..."
|
||||
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 Application 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 Comparison
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 8px; font-size: 10px; color: var(--vscode-text-dim);">
|
||||
💡 Tip: Compare the same component in design system vs production to identify drift
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison View -->
|
||||
<div id="comparison-container" style="flex: 1; overflow: hidden;">
|
||||
${this.storybookUrl && this.liveUrl ? createComparisonView({
|
||||
leftTitle: 'Storybook (Design System)',
|
||||
rightTitle: 'Live Application',
|
||||
leftSrc: this.storybookUrl,
|
||||
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;">No Comparison Loaded</h3>
|
||||
<p style="font-size: 12px; color: var(--vscode-text-dim);">
|
||||
Enter Storybook and Live application URLs to compare design system vs implementation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ds-storybook-live-compare', DSStorybookLiveCompare);
|
||||
|
||||
export default DSStorybookLiveCompare;
|
||||
Reference in New Issue
Block a user