task-master-neo-sdlc/src/core/neo/design-system/components.ts

Enhanced task management system with Neo SDLC agents and MCP tools for comprehensive, AI-driven software development lifecycle management.

import { KnowledgeGraph } from '../knowledge-graph';

export interface DesignToken {
  type: 'color' | 'typography' | 'spacing' | 'shadow';
  name: string;
  value: string;
}

export interface Component {
  id: string;
  type: 'atom' | 'molecule' | 'organism' | 'template' | 'page';
  name: string;
  description: string;
  tokens: DesignToken[];
  props: Record<string, any>;
  variants: string[];
  accessibility: {
    role: string;
    ariaProps: Record<string, string>;
  };
}

export class DesignSystem {
  private components: Map<string, Component> = new Map();
  private tokens: Map<string, DesignToken> = new Map();

  constructor(private knowledgeGraph: KnowledgeGraph) {}

  async addComponent(component: Component): Promise<void> {
    this.components.set(component.id, component);
    await this.knowledgeGraph.addNode({
      id: `component:${component.id}`,
      type: 'component',
      data: component
    });
  }

  async addToken(token: DesignToken): Promise<void> {
    this.tokens.set(token.name, token);
    await this.knowledgeGraph.addNode({
      id: `token:${token.name}`,
      type: 'design_token',
      data: token
    });
  }

  async getComponent(id: string): Promise<Component | undefined> {
    return this.components.get(id);
  }

  async getComponentsByType(type: Component['type']): Promise<Component[]> {
    return Array.from(this.components.values())
      .filter(component => component.type === type);
  }

  async validateComponent(component: Component): Promise<boolean> {
    // Validate required fields
    if (!component.id || !component.name || !component.type) {
      return false;
    }

    // Validate tokens exist
    for (const token of component.tokens) {
      if (!this.tokens.has(token.name)) {
        return false;
      }
    }

    // Validate accessibility
    if (!component.accessibility?.role) {
      return false;
    }

    return true;
  }

  async generateDocumentation(): Promise<string> {
    let docs = '# Design System Documentation\n\n';

    // Add tokens documentation
    docs += '## Design Tokens\n\n';
    for (const [name, token] of this.tokens) {
      docs += `### ${name}\n`;
      docs += `Type: ${token.type}\n`;
      docs += `Value: ${token.value}\n\n`;
    }

    // Add components documentation by type
    for (const type of ['atom', 'molecule', 'organism', 'template', 'page'] as const) {
      const components = await this.getComponentsByType(type);
      docs += `## ${type.charAt(0).toUpperCase() + type.slice(1)}s\n\n`;
      
      for (const component of components) {
        docs += `### ${component.name}\n`;
        docs += `${component.description}\n\n`;
        docs += '#### Props\n';
        docs += '```typescript\n';
        docs += JSON.stringify(component.props, null, 2);
        docs += '\n```\n\n';
      }
    }

    return docs;
  }
}