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
203
admin-ui/js/components/metrics/ds-frontpage.js
Normal file
203
admin-ui/js/components/metrics/ds-frontpage.js
Normal file
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* ds-frontpage.js
|
||||
* Front page component for team workdesks
|
||||
* Refactored: Shadow DOM, extracted styles, uses ds-metric-card
|
||||
*/
|
||||
|
||||
import contextStore from '../../stores/context-store.js';
|
||||
import './ds-metric-card.js'; // Import the new reusable component
|
||||
|
||||
export default class Frontpage extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' }); // Enable Shadow DOM
|
||||
this.state = {
|
||||
teamName: 'Team',
|
||||
metrics: {}
|
||||
};
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.setupEventListeners();
|
||||
|
||||
// Subscribe to context changes
|
||||
this.unsubscribe = contextStore.subscribe(({ state }) => {
|
||||
this.state.teamId = state.teamId;
|
||||
const teamNames = {
|
||||
'ui': 'UI Team',
|
||||
'ux': 'UX Team',
|
||||
'qa': 'QA Team',
|
||||
'admin': 'Admin'
|
||||
};
|
||||
this.state.teamName = teamNames[state.teamId] || 'Team';
|
||||
this.updateTeamName();
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.unsubscribe) this.unsubscribe();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
font-family: var(--vscode-font-family);
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
.container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.description {
|
||||
margin: 0 0 32px 0;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
font-size: 14px;
|
||||
}
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.quick-actions {
|
||||
background: var(--vscode-sidebar-background);
|
||||
border: 1px solid var(--vscode-widget-border);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
h2 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.action-btn {
|
||||
padding: 12px;
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
.action-btn:focus-visible {
|
||||
outline: 2px solid var(--vscode-focusBorder);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1 id="team-name">Team Dashboard</h1>
|
||||
<p class="description">
|
||||
Overview of design system adoption and metrics for your team
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Cards using reusable component -->
|
||||
<div class="metrics-grid">
|
||||
<ds-metric-card
|
||||
title="Adoption Rate"
|
||||
value="68%"
|
||||
subtitle="of team using DS"
|
||||
color="#4caf50">
|
||||
</ds-metric-card>
|
||||
|
||||
<ds-metric-card
|
||||
title="Components"
|
||||
value="45/65"
|
||||
subtitle="in use"
|
||||
color="#2196f3">
|
||||
</ds-metric-card>
|
||||
|
||||
<ds-metric-card
|
||||
title="Tokens"
|
||||
value="187"
|
||||
subtitle="managed"
|
||||
color="#ff9800">
|
||||
</ds-metric-card>
|
||||
|
||||
<ds-metric-card
|
||||
title="Last Update"
|
||||
value="2 hours"
|
||||
subtitle="ago"
|
||||
color="#9c27b0">
|
||||
</ds-metric-card>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions">
|
||||
<h2>Quick Actions</h2>
|
||||
<div class="actions-grid">
|
||||
<button class="action-btn" data-action="components" type="button">
|
||||
📦 View Components
|
||||
</button>
|
||||
<button class="action-btn" data-action="tokens" type="button">
|
||||
🎨 Manage Tokens
|
||||
</button>
|
||||
<button class="action-btn" data-action="icons" type="button">
|
||||
✨ View Icons
|
||||
</button>
|
||||
<button class="action-btn" data-action="jira" type="button">
|
||||
🐛 Jira Issues
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.updateTeamName();
|
||||
}
|
||||
|
||||
updateTeamName() {
|
||||
// Select from Shadow DOM
|
||||
const teamNameEl = this.shadowRoot.querySelector('#team-name');
|
||||
if (teamNameEl) {
|
||||
teamNameEl.textContent = `${this.state.teamName} Dashboard`;
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Listen within Shadow DOM
|
||||
const buttons = this.shadowRoot.querySelectorAll('.action-btn');
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const action = btn.dataset.action;
|
||||
this.handleQuickAction(action);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleQuickAction(action) {
|
||||
console.log(`Quick action triggered: ${action}`);
|
||||
// Events bubble out of Shadow DOM if composed: true
|
||||
this.dispatchEvent(new CustomEvent('quick-action', {
|
||||
detail: { action },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ds-frontpage', Frontpage);
|
||||
Reference in New Issue
Block a user