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
55
admin-ui/js/modules/admin/AdminModule.js
Normal file
55
admin-ui/js/modules/admin/AdminModule.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* AdminModule.js
|
||||
* Feature module for RBAC, user management, and system audit logs.
|
||||
*/
|
||||
|
||||
class AdminModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container { padding: 24px; color: var(--vscode-foreground); }
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.icon-large { font-size: 48px; margin-bottom: 16px; }
|
||||
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Administration</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">👤</div>
|
||||
<h3>Admin Module Under Construction</h3>
|
||||
<p>
|
||||
Manage users, permissions (RBAC), and view audit logs.
|
||||
Only available to users with administrative privileges.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-admin-module', AdminModule);
|
||||
export default AdminModule;
|
||||
55
admin-ui/js/modules/components/ComponentsModule.js
Normal file
55
admin-ui/js/modules/components/ComponentsModule.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* ComponentsModule.js
|
||||
* Feature module for the Component Registry, search, and status tracking.
|
||||
*/
|
||||
|
||||
class ComponentsModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container { padding: 24px; color: var(--vscode-foreground); }
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.icon-large { font-size: 48px; margin-bottom: 16px; }
|
||||
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Components</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">🧩</div>
|
||||
<h3>Components Registry Under Construction</h3>
|
||||
<p>
|
||||
View component status, health, and documentation links.
|
||||
This module will interface with the registry to show what is available in your design system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-components-module', ComponentsModule);
|
||||
export default ComponentsModule;
|
||||
55
admin-ui/js/modules/config/ConfigModule.js
Normal file
55
admin-ui/js/modules/config/ConfigModule.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* ConfigModule.js
|
||||
* Feature module for managing the 3-tier cascade configuration.
|
||||
*/
|
||||
|
||||
class ConfigModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container { padding: 24px; color: var(--vscode-foreground); }
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.icon-large { font-size: 48px; margin-bottom: 16px; }
|
||||
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Configuration</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">⚙️</div>
|
||||
<h3>Configuration Module Under Construction</h3>
|
||||
<p>
|
||||
Manage your 3-tier configuration cascade here (Base → Brand → Project).
|
||||
Future updates will include visual editors for JSON/YAML config files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-config-module', ConfigModule);
|
||||
export default ConfigModule;
|
||||
55
admin-ui/js/modules/discovery/DiscoveryModule.js
Normal file
55
admin-ui/js/modules/discovery/DiscoveryModule.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* DiscoveryModule.js
|
||||
* Feature module for scanning projects, activity logs, and analysis.
|
||||
*/
|
||||
|
||||
class DiscoveryModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container { padding: 24px; color: var(--vscode-foreground); }
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.icon-large { font-size: 48px; margin-bottom: 16px; }
|
||||
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Discovery</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">🔍</div>
|
||||
<h3>Discovery Module Under Construction</h3>
|
||||
<p>
|
||||
Run scanners, view codebase analytics, and monitor system activity.
|
||||
Integration with the scanner backend is coming in the next phase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-discovery-module', DiscoveryModule);
|
||||
export default DiscoveryModule;
|
||||
67
admin-ui/js/modules/projects/ProjectsModule.js
Normal file
67
admin-ui/js/modules/projects/ProjectsModule.js
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* ProjectsModule.js
|
||||
* Feature module for managing DSS projects, metadata, and selection.
|
||||
*/
|
||||
|
||||
class ProjectsModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container {
|
||||
padding: 24px;
|
||||
color: var(--vscode-foreground);
|
||||
}
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border, #3c3c3c);
|
||||
border-radius: 6px;
|
||||
background-color: var(--vscode-editor-background);
|
||||
margin-top: 24px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.icon-large {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Projects</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">📁</div>
|
||||
<h3>Projects Module Under Construction</h3>
|
||||
<p>
|
||||
This module will allow you to create new projects, edit project metadata,
|
||||
and manage access controls. Currently, use the selector in the top bar to switch contexts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-projects-module', ProjectsModule);
|
||||
export default ProjectsModule;
|
||||
55
admin-ui/js/modules/translations/TranslationsModule.js
Normal file
55
admin-ui/js/modules/translations/TranslationsModule.js
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* TranslationsModule.js
|
||||
* Feature module for managing Legacy → DSS token mappings (Principle #2).
|
||||
*/
|
||||
|
||||
class TranslationsModule extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<style>
|
||||
.module-container { padding: 24px; color: var(--vscode-foreground); }
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
border: 1px dashed var(--vscode-input-border);
|
||||
border-radius: 6px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.icon-large { font-size: 48px; margin-bottom: 16px; }
|
||||
h1 { font-size: 24px; font-weight: 500; margin-bottom: 8px; }
|
||||
p {
|
||||
color: var(--vscode-descriptionForeground);
|
||||
max-width: 500px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="module-container">
|
||||
<h1>Translation Dictionaries</h1>
|
||||
<div class="empty-state">
|
||||
<div class="icon-large">🔄</div>
|
||||
<h3>Translations Module Under Construction</h3>
|
||||
<p>
|
||||
<b>Core DSS Principle #2:</b> Map legacy design tokens to modern DSS tokens.
|
||||
This interface will allow creation and validation of translation dictionaries.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('dss-translations-module', TranslationsModule);
|
||||
export default TranslationsModule;
|
||||
Reference in New Issue
Block a user