Files
daffy0208__ai-dev-standards/test-generators.cjs
T
daffy0208 e5da92f751 feat: Add Phase 3 design resources - complete aesthetic design system (75 resources)
Comprehensive design resources for building aesthetically pleasing, accessible websites.

## Phase 3 Overview: 75 New Resources
- 35 UI components (overlays, inputs, layouts, utilities)
- 12 integrations (media, icons, fonts, design tools)
- 11 tools (image optimization, color utilities, accessibility)
- 14 MCPs (AI design automation, Figma sync, documentation)
- 3 skills (figma-developer, asset-manager, prototype-designer)

## Phase 3.1: Image Management Suite
Integrations (3):
- Cloudinary: CDN with URL-based transformations, face detection
- Imgix: Real-time image processing via URL parameters
- Unsplash: Stock photo API with search and collections

Components (6):
- Image: Optimized lazy-loading with srcset/sizes, blur placeholder
- Gallery: Lightbox gallery with grid/masonry layout, keyboard navigation
- Carousel: Touch-enabled carousel with autoplay, indicators
- ImageUpload: Drag-and-drop uploader with preview and validation
- Avatar: User avatar with fallback initials and status indicator
- MediaViewer: Full-screen media viewer with zoom/pan

Tools (3):
- image-optimizer-tool: Sharp-based optimization (compression, resizing)
- responsive-image-generator-tool: Generate srcset and sizes attributes
- webp-converter-tool: Convert images to WebP format

## Phase 3.2: Icon & Font Systems
Integrations (5):
- Heroicons: 500+ icons by Tailwind team (outline/solid variants)
- Lucide: 1000+ beautiful open-source icons
- Font Awesome: Thousands of icons with multiple styles
- Google Fonts: 1400+ fonts with pairing suggestions
- Adobe Fonts: Premium web font service integration

Components (2):
- Icon: Universal icon component supporting all libraries
- IconPicker: Icon search and selection interface with previews

MCPs (2):
- icon-library-mcp: Icon search, management, and SVG generation
- font-optimizer-mcp: Font subsetting, optimization, and loading

Tools (2):
- font-pairing-tool: AI-powered font combination suggestions
- type-scale-generator-tool: Generate modular typography scales

## Phase 3.3-3.5: Advanced UI Components (35 components)
All with TypeScript, Tailwind CSS + CVA, WCAG 2.1 AA accessibility, full keyboard navigation.

Overlays & Dialogs (5):
- Tooltip: 4 placements, portal rendering, ARIA describedby
- Popover: Floating popover with click/hover triggers
- Accordion: Collapsible sections with single/multi-expand modes
- Drawer: Slide-out panel from 4 sides with focus trap
- Dialog: Accessible modal with backdrop and ESC handling

Advanced Inputs (5):
- Slider: Range slider with marks, tooltips, dual handles
- ColorPicker: HEX/RGB/HSL modes with presets and alpha
- DatePicker: Calendar picker with range selection, min/max
- TimePicker: 12/24hr formats with keyboard input
- FileUpload: Drag-and-drop with preview and validation

Feedback & Navigation (6):
- Progress: Linear/circular with determinate/indeterminate states
- Badge: Notification badge with dot/count variants
- Alert: Message alerts (info, success, warning, error)
- Breadcrumb: Breadcrumb navigation with custom separators
- Stepper: Step-by-step progress indicator
- Rating: Star rating with half-star support

Layout Components (10):
- Grid: CSS Grid wrapper with responsive columns
- Container: Max-width container with responsive padding
- Stack: Flexbox stack (vertical/horizontal) with spacing
- Spacer: Flexible spacing component
- Divider: Visual divider (horizontal/vertical)
- AspectRatio: Maintain aspect ratio wrapper
- Center: Center content horizontally and vertically
- Switch: Toggle switch with ARIA switch pattern
- Checkbox: Checkbox with indeterminate state
- Radio: Radio button with RadioGroup

Enhanced Existing (9):
- Pagination: Intelligent page number display with ellipsis
- Select: Enhanced with search and multi-select
- Tabs: Compound component with controlled/uncontrolled modes
- Table: Sortable with ARIA table semantics
- Skeleton: Loading placeholder (enhanced version)
- Button: Added loading states and variants
- Card: Enhanced with composable sections
- Input: Added password toggle and validation states
- Modal: Enhanced with focus trap and body scroll lock

## Phase 3.6: AI & Design Tool MCPs (7 MCPs)
- image-generator-mcp: DALL-E, Midjourney, Stable Diffusion integration
- svg-generator-mcp: Programmatic SVG generation with templates
- illustration-generator-mcp: AI-powered custom illustrations
- figma-sync-mcp: Figma-to-code with token extraction
- design-handoff-mcp: Automated design handoff workflows
- theme-builder-mcp: Generate complete themes from base colors
- dark-mode-converter-mcp: Light-to-dark palette transformation

## Phase 3.7: Design Tool Integrations (4 integrations + 3 skills)
Integrations:
- Figma: Complete REST API client with token extraction
- Sketch: Sketch API integration for design assets
- Adobe XD: Adobe XD API for prototypes and specs
- Canva: Canva API for template and asset management

Skills:
- figma-developer: Figma-to-code workflows and automation
- asset-manager: Asset organization, optimization, brand libraries
- prototype-designer: Interactive prototypes and user testing

## Phase 3.8: Design Tools & Utilities (6 tools + 5 MCPs)
Tools:
- color-palette-generator-tool: Generate harmonious palettes with WCAG
- contrast-checker-tool: WCAG 2.1 AA/AAA contrast validation
- color-scheme-tool: Complementary, analogous, triadic schemes
- breakpoint-analyzer-tool: Analyze responsive breakpoints
- color-blindness-simulator-tool: Simulate deuteranopia, protanopia, tritanopia
- touch-target-validator-tool: Validate 44px minimum touch targets

MCPs:
- storybook-generator-mcp: Auto-generate Storybook stories
- props-documenter-mcp: Component props documentation
- typography-analyzer-mcp: Typography analysis and optimization
- asset-library-mcp: Design asset library management
- responsive-preview-mcp: Multi-device preview generation

## Registry Updates (Phase 3.9)
Updated all META registries with Phase 3 resources:
- component-registry.json: 35 → 70 components (+35)
- integration-registry.json: 13 → 25 integrations (+12)
- tool-registry.json: 13 → 24 tools (+11)
- mcp-registry.json: 34 → 48 MCPs (+14)
- skill-registry.json: 42 → 45 skills (+3)
- .claude/CLAUDE.md: Updated resource counts (150 → 216)
- README.md: Updated resource counts

New Categories:
- Components: media (6)
- Integrations: media-services (3), icon-libraries (3), font-services (2), design-tools (4)
- Tools: media-tools (3), design-tools (8)
- MCPs: design category expanded (2 → 16)

## Also Included
- 7 comprehensive playbooks (RAG, multi-agent, MCP dev, component dev, monitoring, performance, security)
- 4 observability tools (logger, metrics, tracer, error-tracker)
- 4 workflow orchestration components (task-queue, workflow-orchestrator, state-manager, event-bus)
- 3 MCP server handler components (tool-handler, resource-handler, prompt-handler)
- Phase 2 CLI components and tools (auth, forms, errors, feedback)

Total Resources: 216 (was 150)
All resources discoverable via CLI and relationship mapping system.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-27 22:47:53 +00:00

445 lines
13 KiB
JavaScript

#!/usr/bin/env node
/**
* Generator Test Suite
* Tests all code generators to ensure they produce valid, working code
*/
const fs = require('fs-extra')
const path = require('path')
const ComponentGenerator = require('./CLI/generators/component-generator')
const McpGenerator = require('./CLI/generators/mcp-generator')
const IntegrationGenerator = require('./CLI/generators/integration-generator')
const ToolGenerator = require('./CLI/generators/tool-generator')
// Test results
const testResults = {
component: { passed: 0, failed: 0, tests: [] },
mcp: { passed: 0, failed: 0, tests: [] },
integration: { passed: 0, failed: 0, tests: [] },
tool: { passed: 0, failed: 0, tests: [] }
}
// Test output directory
const TEST_OUTPUT_DIR = path.join(__dirname, 'test-output')
/**
* Setup test environment
*/
async function setup() {
console.log('Setting up test environment...\n')
await fs.ensureDir(TEST_OUTPUT_DIR)
await fs.emptyDir(TEST_OUTPUT_DIR)
}
/**
* Cleanup test environment
*/
async function cleanup() {
console.log('\nCleaning up...')
// Keep test output for inspection
// await fs.remove(TEST_OUTPUT_DIR)
}
/**
* Test Component Generator
*/
async function testComponentGenerator() {
console.log('==================================================')
console.log('Testing Component Generator')
console.log('==================================================\n')
const generator = new ComponentGenerator()
// Test 1: Generate basic component with props
try {
console.log('Test 1: Generate TestButton with props...')
const files = await generator.generate({
name: 'TestButton',
props: {
label: 'string',
onClick: 'function'
},
withTests: true,
withStorybook: false
})
// Verify files
const expectedFiles = [
'components/TestButton/TestButton.tsx',
'components/TestButton/index.ts',
'components/TestButton/TestButton.test.tsx'
]
for (const file of files) {
console.log(` ✓ Generated: ${file.path}`)
// Write to test output
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
await fs.ensureDir(path.dirname(outputPath))
await fs.writeFile(outputPath, file.content)
// Verify file has content
if (!file.content || file.content.length === 0) {
throw new Error(`File ${file.path} has no content`)
}
// Verify TypeScript syntax (basic check)
if (file.path.endsWith('.tsx') || file.path.endsWith('.ts')) {
if (!file.content.includes('import') && !file.content.includes('export')) {
throw new Error(`File ${file.path} appears to be missing imports/exports`)
}
}
}
// Check for specific fixes
const testFile = files.find(f => f.path.includes('.test.tsx'))
if (!testFile.content.includes('renders without crashing')) {
throw new Error('Test file missing basic test case')
}
testResults.component.passed++
testResults.component.tests.push({
name: 'Generate TestButton with props',
status: 'PASS',
files: files.map(f => f.path)
})
console.log(' ✓ Test 1 PASSED\n')
} catch (error) {
testResults.component.failed++
testResults.component.tests.push({
name: 'Generate TestButton with props',
status: 'FAIL',
error: error.message
})
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
}
}
/**
* Test MCP Generator
*/
async function testMcpGenerator() {
console.log('==================================================')
console.log('Testing MCP Generator')
console.log('==================================================\n')
const generator = new McpGenerator()
// Test 1: Generate MCP with tools
try {
console.log('Test 1: Generate testvalidation MCP...')
const files = await generator.generate({
name: 'testvalidation',
description: 'Test validation MCP server',
features: ['tools', 'resources']
})
// Verify files
const expectedFiles = [
'MCP-SERVERS/testvalidation-mcp/index.js',
'MCP-SERVERS/testvalidation-mcp/package.json',
'MCP-SERVERS/testvalidation-mcp/README.md',
'MCP-SERVERS/testvalidation-mcp/.env.example'
]
for (const file of files) {
console.log(` ✓ Generated: ${file.path}`)
// Write to test output
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
await fs.ensureDir(path.dirname(outputPath))
await fs.writeFile(outputPath, file.content)
// Verify file has content
if (!file.content || file.content.length === 0) {
throw new Error(`File ${file.path} has no content`)
}
}
// Check for Phase 1 & 2 fixes
const indexFile = files.find(f => f.path.includes('index.js'))
if (!indexFile.content.includes('args ?? {}')) {
throw new Error('Missing fix for handling missing arguments')
}
const packageFile = files.find(f => f.path.includes('package.json'))
const pkg = JSON.parse(packageFile.content)
if (!pkg.bin) {
throw new Error('package.json missing bin field')
}
testResults.mcp.passed++
testResults.mcp.tests.push({
name: 'Generate testvalidation MCP',
status: 'PASS',
files: files.map(f => f.path)
})
console.log(' ✓ Test 1 PASSED\n')
} catch (error) {
testResults.mcp.failed++
testResults.mcp.tests.push({
name: 'Generate testvalidation MCP',
status: 'FAIL',
error: error.message
})
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
}
}
/**
* Test Integration Generator
*/
async function testIntegrationGenerator() {
console.log('==================================================')
console.log('Testing Integration Generator')
console.log('==================================================\n')
const generator = new IntegrationGenerator()
// Test 1: Generate integration with types and env
try {
console.log('Test 1: Generate testapi integration...')
const files = await generator.generate({
name: 'testapi',
provider: 'custom',
withAuth: false,
withTypes: true,
withEnv: true
})
for (const file of files) {
console.log(` ✓ Generated: ${file.path}`)
// Write to test output
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
await fs.ensureDir(path.dirname(outputPath))
await fs.writeFile(outputPath, file.content)
// Verify file has content
if (!file.content || file.content.length === 0) {
throw new Error(`File ${file.path} has no content`)
}
}
// Check for Phase 1 & 2 fixes
const clientFile = files.find(f => f.path.includes('-client.ts'))
if (!clientFile.content.includes('response.status === 204')) {
throw new Error('Missing fix for handling 204 responses')
}
if (!clientFile.content.includes('Headers instance to plain object')) {
throw new Error('Missing fix for Headers instance handling')
}
const indexFile = files.find(f => f.path.endsWith('index.ts'))
if (!indexFile.content.includes('export type * from')) {
throw new Error('Missing type exports in index file')
}
testResults.integration.passed++
testResults.integration.tests.push({
name: 'Generate testapi integration',
status: 'PASS',
files: files.map(f => f.path)
})
console.log(' ✓ Test 1 PASSED\n')
} catch (error) {
testResults.integration.failed++
testResults.integration.tests.push({
name: 'Generate testapi integration',
status: 'FAIL',
error: error.message
})
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
}
}
/**
* Test Tool Generator
*/
async function testToolGenerator() {
console.log('==================================================')
console.log('Testing Tool Generator')
console.log('==================================================\n')
const generator = new ToolGenerator()
// Test 1: Generate LangChain tool
try {
console.log('Test 1: Generate testsearch LangChain tool...')
const files = await generator.generate({
name: 'testsearch',
framework: 'langchain',
category: 'search'
})
for (const file of files) {
console.log(` ✓ Generated: ${file.path}`)
// Write to test output
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
await fs.ensureDir(path.dirname(outputPath))
await fs.writeFile(outputPath, file.content)
// Verify file has content
if (!file.content || file.content.length === 0) {
throw new Error(`File ${file.path} has no content`)
}
}
// Verify correct extension
const toolFile = files.find(f => f.path.includes('-tool'))
if (!toolFile.path.endsWith('.ts')) {
throw new Error('LangChain tool should have .ts extension')
}
testResults.tool.passed++
testResults.tool.tests.push({
name: 'Generate testsearch LangChain tool',
status: 'PASS',
files: files.map(f => f.path)
})
console.log(' ✓ Test 1 PASSED\n')
} catch (error) {
testResults.tool.failed++
testResults.tool.tests.push({
name: 'Generate testsearch LangChain tool',
status: 'FAIL',
error: error.message
})
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
}
// Test 2: Generate CrewAI tool
try {
console.log('Test 2: Generate testcrew CrewAI tool...')
const files = await generator.generate({
name: 'testcrew',
framework: 'crewai',
category: 'custom'
})
for (const file of files) {
console.log(` ✓ Generated: ${file.path}`)
// Write to test output
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
await fs.ensureDir(path.dirname(outputPath))
await fs.writeFile(outputPath, file.content)
// Verify file has content
if (!file.content || file.content.length === 0) {
throw new Error(`File ${file.path} has no content`)
}
}
// Verify correct extension
const toolFile = files.find(f => f.path.includes('-tool.py'))
if (!toolFile) {
throw new Error('CrewAI tool should have .py extension')
}
// Check for datetime import (Phase 2 fix)
if (!toolFile.content.includes('from datetime import datetime')) {
throw new Error('CrewAI tool missing datetime import')
}
testResults.tool.passed++
testResults.tool.tests.push({
name: 'Generate testcrew CrewAI tool',
status: 'PASS',
files: files.map(f => f.path)
})
console.log(' ✓ Test 2 PASSED\n')
} catch (error) {
testResults.tool.failed++
testResults.tool.tests.push({
name: 'Generate testcrew CrewAI tool',
status: 'FAIL',
error: error.message
})
console.log(` ✗ Test 2 FAILED: ${error.message}\n`)
}
}
/**
* Print test results
*/
function printResults() {
console.log('\n==================================================')
console.log('TEST RESULTS SUMMARY')
console.log('==================================================\n')
const categories = ['component', 'mcp', 'integration', 'tool']
let totalPassed = 0
let totalFailed = 0
for (const category of categories) {
const results = testResults[category]
totalPassed += results.passed
totalFailed += results.failed
const status = results.failed === 0 ? '✓ PASS' : '✗ FAIL'
console.log(`${category.toUpperCase()} Generator: ${status}`)
console.log(` Passed: ${results.passed}`)
console.log(` Failed: ${results.failed}`)
// Show individual test results
for (const test of results.tests) {
if (test.status === 'FAIL') {
console.log(` ✗ ${test.name}: ${test.error}`)
} else {
console.log(` ✓ ${test.name}`)
}
}
console.log()
}
console.log('--------------------------------------------------')
console.log(`Total Tests: ${totalPassed + totalFailed}`)
console.log(`Passed: ${totalPassed}`)
console.log(`Failed: ${totalFailed}`)
console.log('--------------------------------------------------\n')
console.log(`Test output saved to: ${TEST_OUTPUT_DIR}\n`)
if (totalFailed > 0) {
console.log('❌ Some tests failed. Please review the errors above.\n')
process.exit(1)
} else {
console.log('✅ All tests passed!\n')
process.exit(0)
}
}
/**
* Main test runner
*/
async function main() {
console.log('\n')
console.log('╔════════════════════════════════════════════════╗')
console.log('║ ║')
console.log('║ Generator Validation Test Suite ║')
console.log('║ ║')
console.log('╚════════════════════════════════════════════════╝')
console.log('\n')
try {
await setup()
await testComponentGenerator()
await testMcpGenerator()
await testIntegrationGenerator()
await testToolGenerator()
printResults()
} catch (error) {
console.error('Fatal error:', error)
process.exit(1)
} finally {
await cleanup()
}
}
// Run tests
main()