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
303
admin-ui/js/components/tools/ds-figma-extract-quick.js
Normal file
303
admin-ui/js/components/tools/ds-figma-extract-quick.js
Normal file
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* ds-figma-extract-quick.js
|
||||
* One-click Figma token extraction tool
|
||||
* MVP2: Extract design tokens directly from Figma file
|
||||
*/
|
||||
|
||||
import contextStore from '../../stores/context-store.js';
|
||||
|
||||
export default class FigmaExtractQuick extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.figmaUrl = '';
|
||||
this.extractionProgress = 0;
|
||||
this.extractedTokens = [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<div style="padding: 24px; height: 100%; overflow-y: auto;">
|
||||
<div style="margin-bottom: 24px;">
|
||||
<h1 style="margin: 0 0 8px 0; font-size: 24px;">Figma Token Extraction</h1>
|
||||
<p style="margin: 0; color: var(--vscode-text-dim);">
|
||||
Extract design tokens directly from your Figma file
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Input Section -->
|
||||
<div style="background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px; margin-bottom: 24px;">
|
||||
<div style="margin-bottom: 12px;">
|
||||
<label style="display: block; font-size: 12px; font-weight: 500; margin-bottom: 8px;">
|
||||
Figma File URL or Key
|
||||
</label>
|
||||
<input
|
||||
id="figma-url-input"
|
||||
type="text"
|
||||
placeholder="https://figma.com/file/xxx/Design-Tokens or file-key"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--vscode-input-border);
|
||||
background: var(--vscode-input-background);
|
||||
color: var(--vscode-foreground);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
|
||||
<button id="extract-btn" style="
|
||||
padding: 8px 16px;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
">🚀 Extract Tokens</button>
|
||||
|
||||
<button id="export-btn" style="
|
||||
padding: 8px 16px;
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
">📥 Import to Project</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Section -->
|
||||
<div id="progress-container" style="display: none; margin-bottom: 24px;">
|
||||
<div style="margin-bottom: 8px; font-size: 12px; color: var(--vscode-text-dim);">
|
||||
Extracting tokens... <span id="progress-percent">0%</span>
|
||||
</div>
|
||||
<div style="
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--vscode-bg);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
">
|
||||
<div id="progress-bar" style="
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: #0066CC;
|
||||
transition: width 0.3s ease;
|
||||
"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div id="results-container" style="display: none; background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
|
||||
<h3 style="margin: 0 0 12px 0; font-size: 14px;">✓ Extraction Complete</h3>
|
||||
<div id="token-summary" style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
">
|
||||
<!-- Summary cards will be inserted here -->
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--vscode-border);">
|
||||
<div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 8px;">
|
||||
Extracted Tokens:
|
||||
</div>
|
||||
<pre id="token-preview" style="
|
||||
background: var(--vscode-bg);
|
||||
padding: 12px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
margin: 0;
|
||||
color: #CE9178;
|
||||
">{}</pre>
|
||||
</div>
|
||||
|
||||
<button id="copy-tokens-btn" style="
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
">📋 Copy JSON</button>
|
||||
</div>
|
||||
|
||||
<!-- Instructions Section -->
|
||||
<div style="background: var(--vscode-notificationsErrorIcon); opacity: 0.1; border: 1px solid var(--vscode-border); border-radius: 4px; padding: 12px;">
|
||||
<div style="font-size: 12px; color: var(--vscode-text-dim);">
|
||||
<strong>How to extract:</strong>
|
||||
<ol style="margin: 8px 0 0 20px; padding: 0;">
|
||||
<li>Open your Figma Design Tokens file</li>
|
||||
<li>Copy the file URL or key from browser</li>
|
||||
<li>Paste it above and click "Extract Tokens"</li>
|
||||
<li>Review and import to your project</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
const extractBtn = this.querySelector('#extract-btn');
|
||||
const exportBtn = this.querySelector('#export-btn');
|
||||
const copyBtn = this.querySelector('#copy-tokens-btn');
|
||||
const input = this.querySelector('#figma-url-input');
|
||||
|
||||
if (extractBtn) {
|
||||
extractBtn.addEventListener('click', () => this.extractTokens());
|
||||
}
|
||||
|
||||
if (exportBtn) {
|
||||
exportBtn.addEventListener('click', () => this.importTokens());
|
||||
}
|
||||
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener('click', () => this.copyTokensToClipboard());
|
||||
}
|
||||
|
||||
if (input) {
|
||||
input.addEventListener('change', (e) => {
|
||||
this.figmaUrl = e.target.value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async extractTokens() {
|
||||
const url = this.figmaUrl.trim();
|
||||
|
||||
if (!url) {
|
||||
alert('Please enter a Figma file URL or key');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate Figma URL or key format
|
||||
const isFigmaUrl = url.includes('figma.com');
|
||||
const isFigmaKey = /^[a-zA-Z0-9]{20,}$/.test(url);
|
||||
|
||||
if (!isFigmaUrl && !isFigmaKey) {
|
||||
alert('Invalid Figma URL or key format. Please provide a valid Figma file URL or file key.');
|
||||
return;
|
||||
}
|
||||
|
||||
const progressContainer = this.querySelector('#progress-container');
|
||||
const resultsContainer = this.querySelector('#results-container');
|
||||
|
||||
progressContainer.style.display = 'block';
|
||||
resultsContainer.style.display = 'none';
|
||||
|
||||
// Simulate token extraction process
|
||||
this.extractedTokens = this.generateMockTokens();
|
||||
|
||||
for (let i = 0; i <= 100; i += 10) {
|
||||
this.extractionProgress = i;
|
||||
this.querySelector('#progress-percent').textContent = i + '%';
|
||||
this.querySelector('#progress-bar').style.width = i + '%';
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
}
|
||||
|
||||
this.showResults();
|
||||
}
|
||||
|
||||
generateMockTokens() {
|
||||
return {
|
||||
colors: {
|
||||
primary: { value: '#0066CC', description: 'Primary brand color' },
|
||||
secondary: { value: '#4CAF50', description: 'Secondary brand color' },
|
||||
error: { value: '#F44336', description: 'Error/danger color' },
|
||||
warning: { value: '#FF9800', description: 'Warning color' },
|
||||
success: { value: '#4CAF50', description: 'Success color' }
|
||||
},
|
||||
spacing: {
|
||||
xs: { value: '4px', description: 'Extra small spacing' },
|
||||
sm: { value: '8px', description: 'Small spacing' },
|
||||
md: { value: '16px', description: 'Medium spacing' },
|
||||
lg: { value: '24px', description: 'Large spacing' },
|
||||
xl: { value: '32px', description: 'Extra large spacing' }
|
||||
},
|
||||
typography: {
|
||||
heading: { value: 'Poppins, sans-serif', description: 'Heading font' },
|
||||
body: { value: 'Inter, sans-serif', description: 'Body font' },
|
||||
mono: { value: 'Courier New, monospace', description: 'Monospace font' }
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
showResults() {
|
||||
const progressContainer = this.querySelector('#progress-container');
|
||||
const resultsContainer = this.querySelector('#results-container');
|
||||
progressContainer.style.display = 'none';
|
||||
resultsContainer.style.display = 'block';
|
||||
|
||||
// Create summary cards
|
||||
const summary = this.querySelector('#token-summary');
|
||||
const categories = Object.keys(this.extractedTokens);
|
||||
summary.innerHTML = categories.map(cat => `
|
||||
<div style="
|
||||
background: var(--vscode-bg);
|
||||
padding: 12px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
">
|
||||
<div style="font-size: 18px; font-weight: 600; color: #0066CC;">
|
||||
${Object.keys(this.extractedTokens[cat]).length}
|
||||
</div>
|
||||
<div style="font-size: 11px; color: var(--vscode-text-dim); text-transform: capitalize;">
|
||||
${cat}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Show preview
|
||||
this.querySelector('#token-preview').textContent = JSON.stringify(this.extractedTokens, null, 2);
|
||||
}
|
||||
|
||||
copyTokensToClipboard() {
|
||||
const json = JSON.stringify(this.extractedTokens, null, 2);
|
||||
navigator.clipboard.writeText(json).then(() => {
|
||||
const btn = this.querySelector('#copy-tokens-btn');
|
||||
const original = btn.textContent;
|
||||
btn.textContent = '✓ Copied to clipboard';
|
||||
setTimeout(() => {
|
||||
btn.textContent = original;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
importTokens() {
|
||||
const json = JSON.stringify(this.extractedTokens, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'figma-tokens.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
// Also dispatch event for integration with project
|
||||
this.dispatchEvent(new CustomEvent('tokens-extracted', {
|
||||
detail: { tokens: this.extractedTokens },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ds-figma-extract-quick', FigmaExtractQuick);
|
||||
Reference in New Issue
Block a user