@tpitre/story-ui 1.2.0 → 1.3.0

package/dist/mcp-server/routes/generateStory.js

@@ -6,6 +6,7 @@ import { buildClaudePrompt as buildFlexiblePrompt } from '../../story-generator/
 import { loadUserConfig, validateConfig } from '../../story-generator/configLoader.js';
 import { setupProductionGitignore } from '../../story-generator/productionGitignoreManager.js';
 import { getInMemoryStoryService } from '../../story-generator/inMemoryStoryService.js';
+import { extractAndValidateCodeBlock, createFallbackStory } from '../../story-generator/validateStory.js';
 const CLAUDE_API_URL = 'https://api.anthropic.com/v1/messages';
 const CLAUDE_MODEL = process.env.CLAUDE_MODEL || 'claude-sonnet-4-20250514';
 // Legacy constants - now using dynamic discovery
@@ -185,17 +186,43 @@ export async function generateStoryFromPrompt(req, res) {
         console.log('Claude prompt:', fullPrompt);
         const aiText = await callClaude(fullPrompt);
         console.log('Claude raw response:', aiText);
-        let fileContents = extractCodeBlock(aiText);
-        if (!fileContents) {
-            // Fallback: try to extract from first import statement onward
-            const importIdx = aiText.indexOf('import');
-            if (importIdx !== -1) {
-                fileContents = aiText.slice(importIdx).trim();
+        // Use the new robust validation system
+        const validationResult = extractAndValidateCodeBlock(aiText);
+        let fileContents;
+        let hasValidationWarnings = false;
+        if (!validationResult.isValid) {
+            console.error('Generated code validation failed:', validationResult.errors);
+            // If we have fixedCode, use it
+            if (validationResult.fixedCode) {
+                fileContents = validationResult.fixedCode;
+                hasValidationWarnings = true;
+                console.log('Using auto-fixed code with warnings:', validationResult.warnings);
+            }
+            else {
+                // Create fallback story
+                console.log('Creating fallback story due to validation failure');
+                fileContents = createFallbackStory(prompt, config);
+                hasValidationWarnings = true;
+            }
+        }
+        else {
+            // Extract the validated code
+            const codeMatch = aiText.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?\s*([\s\S]*?)\s*```/i);
+            if (codeMatch) {
+                fileContents = codeMatch[1].trim();
+            }
+            else {
+                const importIdx = aiText.indexOf('import');
+                fileContents = importIdx !== -1 ? aiText.slice(importIdx).trim() : aiText.trim();
+            }
+            if (validationResult.warnings.length > 0) {
+                hasValidationWarnings = true;
+                console.log('Validation warnings:', validationResult.warnings);
             }
         }
-        if (!fileContents || !fileContents.startsWith('import')) {
-            console.error('No valid code block or import found in Claude response. Skipping file write.');
-            return res.status(500).json({ error: 'Claude did not return a valid code block.' });
+        if (!fileContents) {
+            console.error('No valid code could be extracted or generated.');
+            return res.status(500).json({ error: 'Failed to generate valid TypeScript code.' });
         }
         // Generate title based on conversation context
         let aiTitle;
@@ -255,7 +282,12 @@ export async function generateStoryFromPrompt(req, res) {
                 story: fileContents,
                 environment: 'production',
                 storage: 'in-memory',
-                isUpdate
+                isUpdate,
+                validation: {
+                    hasWarnings: hasValidationWarnings,
+                    errors: validationResult.errors || [],
+                    warnings: validationResult.warnings || []
+                }
             });
         }
         else {
@@ -270,7 +302,12 @@ export async function generateStoryFromPrompt(req, res) {
                 story: fileContents,
                 environment: 'development',
                 storage: 'file-system',
-                isUpdate
+                isUpdate,
+                validation: {
+                    hasWarnings: hasValidationWarnings,
+                    errors: validationResult.errors || [],
+                    warnings: validationResult.warnings || []
+                }
             });
         }
     }

package/dist/story-generator/configLoader.js

@@ -28,13 +28,18 @@ export function loadUserConfig() {
                 console.log(`Loading Story UI config from: ${configPath}`);
                 // Read and evaluate the config file
                 const configContent = fs.readFileSync(configPath, 'utf-8');
-                // Simple evaluation for CommonJS modules
-                if (configContent.includes('module.exports')) {
+                // Handle both CommonJS and ES modules
+                if (configContent.includes('module.exports') || configContent.includes('export default')) {
                     // Create a temporary module context
                     const module = { exports: {} };
                     const exports = module.exports;
+                    // For ES modules, convert to CommonJS for evaluation
+                    let evalContent = configContent;
+                    if (configContent.includes('export default')) {
+                        evalContent = configContent.replace(/export\s+default\s+/, 'module.exports = ');
+                    }
                     // Evaluate the config file content
-                    eval(configContent);
+                    eval(evalContent);
                     const userConfig = module.exports;
                     const config = createStoryUIConfig(userConfig.default || userConfig);
                     // Cache the loaded config
@@ -82,13 +87,14 @@ export function validateConfig(config) {
     if (!config.componentsPath && !config.componentsMetadataPath && (!config.components || config.components.length === 0)) {
         errors.push('Either componentsPath, componentsMetadataPath, or a components array must be specified');
     }
-    if (config.componentsPath && !fs.existsSync(config.componentsPath)) {
+    // Only validate componentsPath if it's provided (not null/undefined)
+    if (config.componentsPath && config.componentsPath !== null && !fs.existsSync(config.componentsPath)) {
         errors.push(`Components path does not exist: ${config.componentsPath}`);
     }
     if (config.componentsMetadataPath && !fs.existsSync(config.componentsMetadataPath)) {
         errors.push(`Components metadata path does not exist: ${config.componentsMetadataPath}`);
     }
-    // Check import path
+    // Check import path - but allow actual library names like 'antd'
     if (!config.importPath || config.importPath === 'your-component-library' || config.importPath.trim() === '') {
         errors.push('importPath must be configured to point to your component library');
     }

package/dist/story-generator/validateStory.js

@@ -0,0 +1,262 @@
+import * as ts from 'typescript';
+/**
+ * Validates TypeScript code syntax and attempts to fix common issues
+ */
+export function validateStoryCode(code, fileName = 'story.tsx') {
+    const result = {
+        isValid: true,
+        errors: [],
+        warnings: []
+    };
+    try {
+        // Create a TypeScript source file
+        const sourceFile = ts.createSourceFile(fileName, code, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+        // Check for syntax errors using the program API
+        const compilerOptions = {
+            jsx: ts.JsxEmit.ReactJSX,
+            target: ts.ScriptTarget.Latest,
+            module: ts.ModuleKind.ESNext,
+            allowJs: true,
+            skipLibCheck: true
+        };
+        // Create a program to get diagnostics
+        const program = ts.createProgram([fileName], compilerOptions, {
+            getSourceFile: (name) => name === fileName ? sourceFile : undefined,
+            writeFile: () => { },
+            getCurrentDirectory: () => '',
+            getDirectories: () => [],
+            fileExists: (name) => name === fileName,
+            readFile: () => '',
+            getCanonicalFileName: (name) => name,
+            useCaseSensitiveFileNames: () => true,
+            getNewLine: () => '\n',
+            getDefaultLibFileName: () => 'lib.d.ts'
+        });
+        const syntaxErrors = program.getSyntacticDiagnostics(sourceFile);
+        if (syntaxErrors.length > 0) {
+            result.isValid = false;
+            for (const diagnostic of syntaxErrors) {
+                if (diagnostic.file && diagnostic.start !== undefined) {
+                    const position = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+                    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+                    result.errors.push(`Line ${position.line + 1}, Column ${position.character + 1}: ${message}`);
+                }
+                else {
+                    result.errors.push(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+                }
+            }
+        }
+        // Additional semantic checks
+        const semanticErrors = performSemanticChecks(sourceFile);
+        result.errors.push(...semanticErrors);
+        if (result.errors.length > 0) {
+            result.isValid = false;
+            // Attempt to fix common issues
+            const fixedCode = attemptAutoFix(code, result.errors);
+            if (fixedCode && fixedCode !== code) {
+                result.fixedCode = fixedCode;
+                // Re-validate the fixed code
+                const fixedValidation = validateStoryCode(fixedCode, fileName);
+                if (fixedValidation.isValid) {
+                    result.isValid = true;
+                    result.warnings.push('Code was automatically fixed for syntax errors');
+                }
+            }
+        }
+    }
+    catch (error) {
+        result.isValid = false;
+        result.errors.push(`Validation error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+    return result;
+}
+/**
+ * Performs additional semantic checks on the AST
+ */
+function performSemanticChecks(sourceFile) {
+    const errors = [];
+    function visit(node) {
+        // Check for unclosed JSX elements
+        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+            // Additional JSX-specific checks could go here
+        }
+        // Check for missing imports
+        if (ts.isIdentifier(node) && node.text && /^[A-Z]/.test(node.text)) {
+            // This is a potential component reference - would need more context to validate
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    return errors;
+}
+/**
+ * Attempts to automatically fix common syntax errors
+ */
+function attemptAutoFix(code, errors) {
+    let fixedCode = code;
+    // Fix common issues based on error patterns
+    for (const error of errors) {
+        if (error.includes('expected ","')) {
+            // Try to fix missing commas in object literals
+            fixedCode = fixMissingCommas(fixedCode);
+        }
+        if (error.includes('Unexpected token')) {
+            // Try to fix unexpected tokens
+            fixedCode = fixUnexpectedTokens(fixedCode);
+        }
+        if (error.includes('Unterminated string literal')) {
+            // Try to fix unterminated strings
+            fixedCode = fixUnterminatedStrings(fixedCode);
+        }
+        if (error.includes('JSX element') && error.includes('has no corresponding closing tag')) {
+            // Try to fix unclosed JSX elements
+            fixedCode = fixUnclosedJSX(fixedCode);
+        }
+    }
+    return fixedCode;
+}
+/**
+ * Fixes missing commas in object literals and function parameters
+ */
+function fixMissingCommas(code) {
+    // Common patterns where commas might be missing
+    const fixes = [
+        // Fix object property definitions
+        { pattern: /(\w+):\s*([^,}\n]+)\s*\n\s*(\w+):/g, replacement: '$1: $2,\n  $3:' },
+        // Fix array elements
+        { pattern: /(\w+)\s*\n\s*(\w+)/g, replacement: '$1,\n  $2' },
+        // Fix function parameters
+        { pattern: /(\w+:\s*\w+)\s*\n\s*(\w+:)/g, replacement: '$1,\n  $2' }
+    ];
+    let fixedCode = code;
+    for (const fix of fixes) {
+        fixedCode = fixedCode.replace(fix.pattern, fix.replacement);
+    }
+    return fixedCode;
+}
+/**
+ * Fixes unexpected token issues
+ */
+function fixUnexpectedTokens(code) {
+    let fixedCode = code;
+    // Fix common unexpected token issues
+    const fixes = [
+        // Fix missing semicolons
+        { pattern: /^(\s*)(export\s+\w+.*[^;])\s*$/gm, replacement: '$1$2;' },
+        // Fix missing quotes around strings
+        { pattern: /:\s*([^"'\s,}]+)\s*(,|\})/g, replacement: ': "$1"$2' },
+        // Fix trailing commas in objects
+        { pattern: /,(\s*\})/g, replacement: '$1' }
+    ];
+    for (const fix of fixes) {
+        fixedCode = fixedCode.replace(fix.pattern, fix.replacement);
+    }
+    return fixedCode;
+}
+/**
+ * Fixes unterminated string literals
+ */
+function fixUnterminatedStrings(code) {
+    let fixedCode = code;
+    // Find lines with unterminated strings and try to fix them
+    const lines = fixedCode.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Check for unterminated quotes
+        const singleQuoteCount = (line.match(/'/g) || []).length;
+        const doubleQuoteCount = (line.match(/"/g) || []).length;
+        if (singleQuoteCount % 2 !== 0) {
+            lines[i] = line + "'";
+        }
+        else if (doubleQuoteCount % 2 !== 0) {
+            lines[i] = line + '"';
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Fixes unclosed JSX elements
+ */
+function fixUnclosedJSX(code) {
+    let fixedCode = code;
+    // Simple heuristic to fix common JSX issues
+    const jsxOpenTags = fixedCode.match(/<[A-Z]\w*[^>]*>/g) || [];
+    const jsxCloseTags = fixedCode.match(/<\/[A-Z]\w*>/g) || [];
+    // If we have more opening tags than closing tags, try to balance them
+    if (jsxOpenTags.length > jsxCloseTags.length) {
+        // This is a very basic fix - in practice, you'd need more sophisticated parsing
+        // For now, we'll just add a warning
+    }
+    return fixedCode;
+}
+/**
+ * Extracts and validates code blocks from AI responses
+ */
+export function extractAndValidateCodeBlock(aiResponse) {
+    // Try multiple extraction methods
+    const extractionMethods = [
+        // Standard code blocks
+        (text) => {
+            const match = text.match(/```(?:tsx|jsx|typescript|ts|js|javascript)?\s*([\s\S]*?)\s*```/i);
+            return match ? match[1].trim() : null;
+        },
+        // Code starting with import
+        (text) => {
+            const importIndex = text.indexOf('import');
+            return importIndex !== -1 ? text.slice(importIndex).trim() : null;
+        },
+        // Code starting with export
+        (text) => {
+            const exportIndex = text.indexOf('export');
+            return exportIndex !== -1 ? text.slice(exportIndex).trim() : null;
+        }
+    ];
+    let extractedCode = null;
+    for (const method of extractionMethods) {
+        extractedCode = method(aiResponse);
+        if (extractedCode)
+            break;
+    }
+    if (!extractedCode) {
+        return {
+            isValid: false,
+            errors: ['No valid TypeScript code found in AI response'],
+            warnings: []
+        };
+    }
+    // Validate the extracted code
+    return validateStoryCode(extractedCode);
+}
+/**
+ * Creates a fallback story template when generation fails
+ */
+export function createFallbackStory(prompt, config) {
+    const title = prompt.length > 50 ? prompt.substring(0, 50) + '...' : prompt;
+    const escapedTitle = title.replace(/"/g, '\\"');
+    return `import React from 'react';
+import type { StoryObj } from '@storybook/react';
+
+// Fallback story generated due to AI generation error
+export default {
+  title: '${config.storyPrefix || 'Generated/'}${escapedTitle}',
+  component: () => (
+    <div style={{ padding: '2rem', textAlign: 'center', border: '2px dashed #ccc', borderRadius: '8px' }}>
+      <h2>Story Generation Error</h2>
+      <p>The AI-generated story contained syntax errors and could not be created.</p>
+      <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+      <p>Please try rephrasing your request or contact support.</p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export const Default: StoryObj = {
+  args: {}
+};`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "AI-powered Storybook story generator for any React component library",
   "type": "module",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/southleft/story-ui.git"
+    "url": "git+https://github.com/southleft/story-ui.git"
   },
   "bugs": {
     "url": "https://github.com/southleft/story-ui/issues"
@@ -62,7 +62,8 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "inquirer": "^9.2.0",
-    "node-fetch": "^2.6.7"
+    "node-fetch": "^2.6.7",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
@@ -82,8 +83,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^9.1.7",
     "semantic-release": "^24.2.0",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "ts-node": "^10.9.2"
   },
   "peerDependencies": {
     "@storybook/react": ">=6.0.0",

package/templates/StoryUI/StoryUIPanel.tsx

@@ -501,10 +501,45 @@ const StoryUIPanel: React.FC = () => {
 
       // Create user-friendly response message instead of showing raw markup
       let responseMessage: string;
+      let statusIcon = '✅';
+
+      // Check for validation issues
+      if (data.validation && data.validation.hasWarnings) {
+        statusIcon = '⚠️';
+        const warningCount = data.validation.warnings.length;
+        const errorCount = data.validation.errors.length;
+
+        if (errorCount > 0) {
+          statusIcon = '🔧';
+        }
+      }
+
       if (data.isUpdate) {
-        responseMessage = `✅ Updated your story: "${data.title}"\n\nI've made the requested changes while keeping the same layout structure. You can view the updated component in Storybook.`;
+        responseMessage = `${statusIcon} Updated your story: "${data.title}"\n\nI've made the requested changes while keeping the same layout structure. You can view the updated component in Storybook.`;
       } else {
-        responseMessage = `✅ Created new story: "${data.title}"\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup in the Docs tab.`;
+        responseMessage = `${statusIcon} Created new story: "${data.title}"\n\nI've generated the component with the requested features. You can view it in Storybook where you'll see both the rendered component and its markup in the Docs tab.`;
+      }
+
+      // Add validation information if there are issues
+      if (data.validation && data.validation.hasWarnings) {
+        responseMessage += '\n\n';
+
+        if (data.validation.errors.length > 0) {
+          responseMessage += `🔧 **Auto-fixed ${data.validation.errors.length} syntax error(s):**\n`;
+          responseMessage += data.validation.errors.slice(0, 3).map(error => `  • ${error}`).join('\n');
+          if (data.validation.errors.length > 3) {
+            responseMessage += `\n  • ... and ${data.validation.errors.length - 3} more`;
+          }
+          responseMessage += '\n';
+        }
+
+        if (data.validation.warnings.length > 0) {
+          responseMessage += `⚠️ **Warnings:**\n`;
+          responseMessage += data.validation.warnings.slice(0, 2).map(warning => `  • ${warning}`).join('\n');
+          if (data.validation.warnings.length > 2) {
+            responseMessage += `\n  • ... and ${data.validation.warnings.length - 2} more`;
+          }
+        }
       }
 
       const aiMsg = { role: 'ai' as const, content: responseMessage };

package/dist/test-storybooks/chakra-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/test-storybooks/custom-design-test/src/components/index.js

@@ -1,3 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Input } from './Input';

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../index.ts","../story-ui.config.loader.ts","../story-ui.config.ts","../cli/index.ts","../cli/setup.ts","../mcp-server/index.ts","../mcp-server/routes/claude.ts","../mcp-server/routes/components.ts","../mcp-server/routes/generatestory.ts","../mcp-server/routes/memorystories.ts","../mcp-server/routes/storysync.ts","../story-generator/componentdiscovery.ts","../story-generator/configloader.ts","../story-generator/generatestory.ts","../story-generator/gitignoremanager.ts","../story-generator/inmemorystoryservice.ts","../story-generator/productiongitignoremanager.ts","../story-generator/promptgenerator.ts","../story-generator/storysync.ts"],"version":"5.8.3"}