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:
80
admin-ui/js/components/ds-badge.js
Normal file
80
admin-ui/js/components/ds-badge.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* DS Badge - Web Component
|
||||
*
|
||||
* Usage:
|
||||
* <ds-badge>Default</ds-badge>
|
||||
* <ds-badge variant="success">Active</ds-badge>
|
||||
* <ds-badge variant="warning" dot>Pending</ds-badge>
|
||||
*
|
||||
* Attributes:
|
||||
* - variant: default | secondary | outline | destructive | success | warning
|
||||
* - dot: boolean (shows status dot)
|
||||
*/
|
||||
|
||||
class DsBadge extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['variant', 'dot'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
// Cleanup for consistency with other components
|
||||
// This badge has no event listeners, but disconnectedCallback
|
||||
// is present for future extensibility and pattern consistency
|
||||
}
|
||||
|
||||
attributeChangedCallback() {
|
||||
if (this.shadowRoot.innerHTML) {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
get variant() {
|
||||
return this.getAttribute('variant') || 'default';
|
||||
}
|
||||
|
||||
get dot() {
|
||||
return this.hasAttribute('dot');
|
||||
}
|
||||
|
||||
getVariantClass() {
|
||||
const variants = {
|
||||
default: 'ds-badge--default',
|
||||
secondary: 'ds-badge--secondary',
|
||||
outline: 'ds-badge--outline',
|
||||
destructive: 'ds-badge--destructive',
|
||||
success: 'ds-badge--success',
|
||||
warning: 'ds-badge--warning'
|
||||
};
|
||||
return variants[this.variant] || variants.default;
|
||||
}
|
||||
|
||||
render() {
|
||||
const variantClass = this.getVariantClass();
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<span class="ds-badge ${variantClass}">
|
||||
${this.dot ? '<span class="ds-badge__dot"></span>' : ''}
|
||||
<slot></slot>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('ds-badge', DsBadge);
|
||||
|
||||
export default DsBadge;
|
||||
Reference in New Issue
Block a user