@scarlet-mesh/mcp-rhds
Version:
RHDS MCP Server - All-in-One Model Context Protocol server for Red Hat Design System components with manifest discovery, HTML validation, and developer tooling
179 lines (178 loc) • 9.27 kB
JavaScript
import { IdGeneratorService } from '../services/IdGeneratorService.js';
export class ResponseFormatter {
/**
* Formats the HTML result of a RHDS component creation.
* Includes component details, attributes used, and any warnings.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatComponentResult(html, component, attributes, warnings) {
let resultText = `**Created RHDS Component: ${component.tagName}**\n\n`;
resultText += '```html\n' + html + '\n```\n\n';
resultText += `**Component:** ${component.name}\n`;
resultText += `**Description:** ${component.description}\n`;
resultText += `**Documentation:** [${component.documentationUrl}](${component.documentationUrl})\n\n`;
if (warnings && warnings.length > 0) {
resultText += `**⚠️ Warnings:**\n${warnings.map(w => `- ${w}`).join('\n')}\n\n`;
}
resultText += `**Attributes used:**\n${Object.entries(attributes).map(([name, value]) => `- \`${name}\`: ${value}`).join('\n')}\n\n`;
if (component.slots.length > 0) {
resultText += `**Available slots:**\n${component.slots.map(slot => `- \`${slot.name}\`: ${slot.description || 'No description'}`).join('\n')}\n\n`;
}
return resultText;
}
/**
* Formats a RHDS component template result.
* Includes the template HTML, component details, required and optional attributes, accessibility requirements, and slots.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatTemplateResult(template, component, includeOptional) {
let resultText = `**RHDS Component Template: ${template.tagName}**\n\n`;
resultText += '```html\n' + template.template + '\n```\n\n';
resultText += `**Component:** ${template.name}\n`;
resultText += `**Tag:** ${template.tagName}\n\n`;
resultText += `**Required Attributes:**\n`;
if (Object.keys(template.requiredAttributes).length > 0) {
resultText += Object.entries(template.requiredAttributes)
.map(([name, value]) => `- \`${name}\`: ${value}`)
.join('\n') + '\n\n';
}
else {
resultText += '- None\n\n';
}
if (template.accessibilityRequirements.length > 0) {
resultText += `**Accessibility Attributes:**\n`;
resultText += template.accessibilityRequirements
.map(attr => `- \`${attr}\`: Required for accessibility`)
.join('\n') + '\n\n';
}
if (includeOptional && Object.keys(template.optionalAttributes).length > 0) {
resultText += `**Optional Attributes:**\n`;
resultText += Object.entries(template.optionalAttributes)
.map(([name, value]) => `- \`${name}\`: ${value}`)
.join('\n') + '\n\n';
}
if (template.slots.length > 0) {
resultText += `**Available Slots:**\n`;
resultText += template.slots
.map(slot => `- \`${slot}\``)
.join('\n') + '\n\n';
}
resultText += `**Documentation:** [${component.documentationUrl}](${component.documentationUrl})\n`;
return resultText;
}
/**
* Formats the validation result of RHDS components.
* Includes errors, warnings, suggestions, and overall validation status.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatValidationResult(result) {
if (result.isValid && result.warnings.length === 0) {
return `**RHDS Component Validation Passed!**\n\nYour components follow RHDS standards and conventions.`;
}
let resultText = `**RHDS Component Validation Results**\n\n`;
if (!result.isValid) {
resultText += `**Validation Failed** - ${result.errors.length} error(s) found\n\n`;
result.errors.forEach((error, index) => {
resultText += `**Error ${index + 1}:** ${error.message}\n`;
if (error.element)
resultText += `- Element: \`${error.element}\`\n`;
if (error.attribute)
resultText += `- Attribute: \`${error.attribute}\`\n`;
resultText += '\n';
});
}
else {
resultText += `**Validation Passed** with ${result.warnings.length} warning(s)\n\n`;
}
if (result.warnings.length > 0) {
resultText += `**Warnings:**\n\n`;
result.warnings.forEach((warning, index) => {
resultText += `**Warning ${index + 1}:** ${warning.message}\n`;
if (warning.element)
resultText += `- Element: \`${warning.element}\`\n`;
resultText += '\n';
});
}
if (result.suggestions.length > 0) {
resultText += `**Suggestions for Improvement:**\n\n`;
result.suggestions.forEach((suggestion, index) => {
resultText += `${index + 1}. ${suggestion}\n`;
});
}
return resultText;
}
/**
* Formats a list of RHDS components found in a package.
* Includes component details, required attributes, accessibility requirements, and documentation links.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatComponentList(components, packageName) {
let resultText = `**Available RHDS Components**\n\n`;
resultText += `**Package:** ${packageName}\n`;
resultText += `**Found:** ${components.length} component${components.length > 1 ? 's' : ''}\n\n`;
components.forEach((component, index) => {
resultText += `### ${index + 1}. ${component.tagName}\n`;
resultText += `**Name:** ${component.name}\n`;
resultText += `**Description:** ${component.description || 'No description available'}\n`;
if (component.requiredAttributes.length > 0) {
resultText += `**Required Attributes:** ${component.requiredAttributes.join(', ')}\n`;
}
if (component.accessibilityAttributes.length > 0) {
resultText += `**Accessibility:** ${component.accessibilityAttributes.join(', ')}\n`;
}
resultText += `**Attributes:** ${component.attributes.length} total\n`;
resultText += `**Slots:** ${component.slots.length}\n`;
resultText += `**Documentation:** [View Docs](${component.documentationUrl})\n\n`;
const idGenerator = new IdGeneratorService();
const exampleId = idGenerator.generateId(component.tagName.replace('rh-', ''), 'example');
resultText += `**Quick Example:**\n`;
resultText += `\`\`\`html\n<${component.tagName} id="${exampleId}">Content</${component.tagName}>\n\`\`\`\n\n`;
resultText += '---\n\n';
});
return resultText;
}
/**
* Formats the result of a RHDS component composition.
* Includes the generated HTML, component count, package name, and any auto-applied improvements.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatCompositionResult(html, componentCount, packageName, wrapperElement, suggestions) {
let resultText = `**Created RHDS Component Composition**\n\n`;
resultText += '```html\n' + html + '\n```\n\n';
resultText += `**Package:** ${packageName}\n`;
resultText += `**Components:** ${componentCount}\n`;
if (wrapperElement) {
resultText += `**Wrapper:** ${wrapperElement}\n`;
}
if (suggestions && suggestions.length > 0) {
resultText += `\n **Auto-applied improvements:**\n${suggestions.map(s => `- ${s}`).join('\n')}\n`;
}
return resultText;
}
/**
* Formats the result of an ID generation for a RHDS component.
* Includes the generated ID, component type, purpose, context, and validation results.
* Returns a formatted string suitable for display in a chat or documentation.
*/
static formatIdGenerationResult(id, componentType, purpose, context, validation) {
let resultText = `**Generated RHDS Component ID**\n\n`;
resultText += `**ID:** \`${id}\`\n\n`;
resultText += `**Component Type:** ${componentType}\n`;
resultText += `**Purpose:** ${purpose}\n`;
if (context)
resultText += `**Context:** ${context}\n`;
if (validation) {
if (validation.isValid) {
resultText += `\n**ID is valid** and follows RHDS naming conventions\n`;
}
else {
resultText += `\n**Validation Issues:**\n${validation.errors.map(err => `- ${err}`).join('\n')}\n`;
if (validation.suggestion) {
resultText += `\n**Suggested alternative:** \`${validation.suggestion}\`\n`;
}
}
}
resultText += `\n**Usage Example:**\n\`\`\`html\n<rh-${componentType} id="${id}">...</rh-${componentType}>\n\`\`\`\n`;
return resultText;
}
}