@tpitre/story-ui 2.1.5 → 2.2.0

package/dist/story-generator/postProcessStory.js

@@ -1,19 +1,20 @@
+import { logger } from './logger.js';
 /**
  * Post-process generated stories to fix common issues
  * This module is completely design-system agnostic
  */
 export function postProcessStory(code, libraryPath) {
-    console.log(`🔧 Post-processing story for library: ${libraryPath}`);
+    logger.log(`🔧 Post-processing story for library: ${libraryPath}`);
     let processedCode = code;
     // Fix ANY component with children prop - ALWAYS convert to render function
     if (processedCode.includes('children: (')) {
-        console.log('🚨 Detected children prop in args - converting to render function');
+        logger.log('🚨 Detected children prop in args - converting to render function');
         processedCode = convertLayoutToRenderFunction(processedCode);
     }
     // Leave inline styles as-is - let the AI use the available components naturally
     // Post-processing should be design-system agnostic
     if (processedCode.includes('style={{')) {
-        console.log('ℹ️  Inline styles detected - keeping as-is for design system agnosticism');
+        logger.log('ℹ️  Inline styles detected - keeping as-is for design system agnosticism');
     }
     return processedCode;
 }
@@ -36,7 +37,7 @@ function convertLayoutToRenderFunction(code) {
             // Also fix the satisfies Meta type
             const metaWithType = `const meta = {${newMetaContent}} satisfies Meta;`;
             processedCode = code.replace(/const meta = {[^}]+} satisfies Meta(?:<[^>]+>)?;/s, metaWithType);
-            console.log('✅ Removed component from meta object');
+            logger.log('✅ Removed component from meta object');
         }
     }
     // Extract all stories with children prop
@@ -49,7 +50,7 @@ function convertLayoutToRenderFunction(code) {
         const newStory = `export const ${storyName}: Story = {\n  render: () => (\n${childrenContent}\n  )\n};`;
         // Replace the old story with the new one
         processedCode = processedCode.replace(match[0], newStory);
-        console.log(`✅ Converted ${storyName} from children prop to render function`);
+        logger.log(`✅ Converted ${storyName} from children prop to render function`);
     }
     return processedCode;
 }
@@ -58,7 +59,7 @@ function convertLayoutToRenderFunction(code) {
  */
 function convertAlertChildrenToExports(code) {
     // For now, return the code as-is
-    console.log('Alert conversion not yet implemented');
+    logger.log('Alert conversion not yet implemented');
     return code;
 }
 /**
@@ -66,6 +67,6 @@ function convertAlertChildrenToExports(code) {
  */
 function convertToastChildrenToExports(code) {
     // For now, return the code as-is
-    console.log('Toast conversion not yet implemented');
+    logger.log('Toast conversion not yet implemented');
     return code;
 }

package/dist/story-generator/productionGitignoreManager.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 /**
  * Production-ready gitignore manager that handles both development and server environments
  */
@@ -55,7 +56,7 @@ export class ProductionGitignoreManager {
      * Production environment: Use in-memory story generation
      */
     handleProductionEnvironment() {
-        console.log('🌐 Production environment detected - using in-memory story generation');
+        logger.log('🌐 Production environment detected - using in-memory story generation');
         // Validate that gitignore is already set up
         this.validateProductionSetup();
         // Set up temporary directory for story generation if needed
@@ -65,7 +66,7 @@ export class ProductionGitignoreManager {
      * Development environment: Full gitignore management
      */
     handleDevelopmentEnvironment() {
-        console.log('🔧 Development environment - setting up gitignore integration');
+        logger.log('🔧 Development environment - setting up gitignore integration');
         this.ensureGeneratedDirectoryExists();
         this.ensureGeneratedDirectoryIgnored();
         this.createGeneratedDirectoryReadme();
@@ -86,7 +87,7 @@ export class ProductionGitignoreManager {
             console.warn('   Run "npx story-ui setup-gitignore" in development to fix this.');
         }
         else {
-            console.log('✅ Production gitignore configuration validated');
+            logger.log('✅ Production gitignore configuration validated');
         }
     }
     /**
@@ -97,7 +98,7 @@ export class ProductionGitignoreManager {
             const tempDir = this.getProductionTempDirectory();
             if (!fs.existsSync(tempDir)) {
                 fs.mkdirSync(tempDir, { recursive: true });
-                console.log(`✅ Created temporary directory: ${tempDir}`);
+                logger.log(`✅ Created temporary directory: ${tempDir}`);
             }
         }
         catch (error) {
@@ -135,7 +136,7 @@ export class ProductionGitignoreManager {
         const generatedDir = this.config.generatedStoriesPath;
         if (!fs.existsSync(generatedDir)) {
             fs.mkdirSync(generatedDir, { recursive: true });
-            console.log(`✅ Created generated stories directory: ${generatedDir}`);
+            logger.log(`✅ Created generated stories directory: ${generatedDir}`);
         }
     }
     /**
@@ -156,7 +157,7 @@ export class ProductionGitignoreManager {
         // Check if the path is already ignored
         const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8');
         if (this.isPathIgnored(gitignoreContent, generatedPath)) {
-            console.log(`✅ Generated stories directory already ignored: ${generatedPath}`);
+            logger.log(`✅ Generated stories directory already ignored: ${generatedPath}`);
             return;
         }
         // Add the ignore rule
@@ -187,7 +188,7 @@ export class ProductionGitignoreManager {
     createGitignore(gitignorePath, generatedPath) {
         const content = this.generateGitignoreSection(generatedPath);
         fs.writeFileSync(gitignorePath, content);
-        console.log(`✅ Created .gitignore with Story UI generated directory: ${generatedPath}`);
+        logger.log(`✅ Created .gitignore with Story UI generated directory: ${generatedPath}`);
     }
     /**
      * Checks if the generated path is already ignored
@@ -214,7 +215,7 @@ export class ProductionGitignoreManager {
         const separator = existingContent.endsWith('\n') ? '\n' : '\n\n';
         const updatedContent = existingContent + separator + newSection;
         fs.writeFileSync(gitignorePath, updatedContent);
-        console.log(`✅ Added Story UI generated directory to .gitignore: ${generatedPath}`);
+        logger.log(`✅ Added Story UI generated directory to .gitignore: ${generatedPath}`);
     }
     /**
      * Generates the gitignore section for Story UI
@@ -260,7 +261,7 @@ Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Story
 `;
         try {
             fs.writeFileSync(readmePath, readmeContent);
-            console.log(`✅ Created README in generated directory`);
+            logger.log(`✅ Created README in generated directory`);
         }
         catch (error) {
             console.warn('⚠️  Could not create README in generated directory');
@@ -293,7 +294,7 @@ Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Story
                     }
                 }
                 if (cleanedCount > 0) {
-                    console.log(`🧹 Cleaned up ${cleanedCount} old generated stories from ${dir}`);
+                    logger.log(`🧹 Cleaned up ${cleanedCount} old generated stories from ${dir}`);
                 }
             }
             catch (error) {

package/dist/story-generator/storyTracker.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 export class StoryTracker {
     constructor(config) {
         this.mappingFile = path.join(path.dirname(config.generatedStoriesPath), '.story-mappings.json');
@@ -88,7 +89,7 @@ export class StoryTracker {
             // This prevents false positives like "card" matching "card layouts" vs "card animations"
             const similarityThreshold = Math.max(4, Math.floor(promptKeywords.length * 0.9));
             if (sharedKeywords.length >= similarityThreshold && promptKeywords.length >= 4) {
-                console.log(`🔄 Found similar story: "${mapping.title}" (${sharedKeywords.length}/${promptKeywords.length} keywords match)`);
+                logger.log(`🔄 Found similar story: "${mapping.title}" (${sharedKeywords.length}/${promptKeywords.length} keywords match)`);
                 return mapping;
             }
         }

package/dist/story-generator/universalDesignSystemAdapter.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { logger } from './logger.js';
 /**
  * Universal adapter to make Story UI work with any React design system
  */
@@ -14,7 +15,7 @@ export class UniversalDesignSystemAdapter {
     async detectDesignSystems() {
         const packageJsonPath = path.join(this.projectRoot, 'package.json');
         if (!fs.existsSync(packageJsonPath)) {
-            console.log('📦 No package.json found for design system detection');
+            logger.log('📦 No package.json found for design system detection');
             return [];
         }
         const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
@@ -29,7 +30,7 @@ export class UniversalDesignSystemAdapter {
         this.checkForAntDesign(allDeps);
         this.checkForMantine(allDeps);
         this.checkForGenericReactComponents(allDeps);
-        console.log(`🎨 Detected ${this.detectedSystems.length} design systems:`, this.detectedSystems.map(ds => ds.name));
+        logger.log(`🎨 Detected ${this.detectedSystems.length} design systems:`, this.detectedSystems.map(ds => ds.name));
         return this.detectedSystems;
     }
     /**

package/dist/story-generator/urlRedirectService.js

@@ -0,0 +1,140 @@
+import fs from 'fs';
+import path from 'path';
+import { logger } from './logger.js';
+export class UrlRedirectService {
+    constructor(storageDir) {
+        this.redirects = new Map();
+        this.redirectsPath = path.join(storageDir, '.story-ui', 'redirects.json');
+        this.loadRedirects();
+    }
+    ensureDirectoryExists() {
+        const dir = path.dirname(this.redirectsPath);
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+    }
+    loadRedirects() {
+        try {
+            if (fs.existsSync(this.redirectsPath)) {
+                const data = fs.readFileSync(this.redirectsPath, 'utf-8');
+                const redirectArray = JSON.parse(data);
+                this.redirects = new Map(redirectArray.map(r => [r.oldUrl, r]));
+                logger.log(`📍 Loaded ${this.redirects.size} URL redirects`);
+            }
+        }
+        catch (error) {
+            logger.log('⚠️  Failed to load redirects, starting fresh:', error);
+            this.redirects = new Map();
+        }
+    }
+    saveRedirects() {
+        try {
+            this.ensureDirectoryExists();
+            const redirectArray = Array.from(this.redirects.values());
+            fs.writeFileSync(this.redirectsPath, JSON.stringify(redirectArray, null, 2));
+            logger.log(`💾 Saved ${redirectArray.length} URL redirects`);
+        }
+        catch (error) {
+            logger.log('❌ Failed to save redirects:', error);
+        }
+    }
+    addRedirect(oldUrl, newUrl, oldTitle, newTitle, storyId) {
+        // Don't create a redirect if URLs are the same
+        if (oldUrl === newUrl) {
+            return;
+        }
+        const redirect = {
+            oldUrl,
+            newUrl,
+            oldTitle,
+            newTitle,
+            timestamp: new Date().toISOString(),
+            storyId
+        };
+        this.redirects.set(oldUrl, redirect);
+        // Also handle redirect chains (if A->B exists and we add B->C, update A->C)
+        for (const [url, existingRedirect] of this.redirects.entries()) {
+            if (existingRedirect.newUrl === oldUrl) {
+                existingRedirect.newUrl = newUrl;
+                existingRedirect.newTitle = newTitle;
+                logger.log(`🔄 Updated redirect chain: ${url} → ${newUrl}`);
+            }
+        }
+        this.saveRedirects();
+        logger.log(`➡️  Added redirect: ${oldUrl} → ${newUrl}`);
+    }
+    getRedirect(oldUrl) {
+        return this.redirects.get(oldUrl) || null;
+    }
+    getAllRedirects() {
+        return Array.from(this.redirects.values());
+    }
+    // Get a JavaScript snippet that can be injected into Storybook
+    getRedirectScript() {
+        const redirectMap = Object.fromEntries(Array.from(this.redirects.entries()).map(([oldUrl, redirect]) => [
+            oldUrl,
+            { newUrl: redirect.newUrl, message: `Story updated: "${redirect.oldTitle}" → "${redirect.newTitle}"` }
+        ]));
+        return `
+// Story UI URL Redirect Handler
+(function() {
+  const redirects = ${JSON.stringify(redirectMap, null, 2)};
+  
+  function checkForRedirect() {
+    const currentPath = window.location.pathname + window.location.search;
+    
+    for (const [oldUrl, redirect] of Object.entries(redirects)) {
+      if (currentPath.includes(oldUrl)) {
+        console.log('[Story UI] Redirecting from', oldUrl, 'to', redirect.newUrl);
+        
+        // Show a brief notification
+        const notification = document.createElement('div');
+        notification.style.cssText = \`
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          background: #1890ff;
+          color: white;
+          padding: 12px 20px;
+          border-radius: 4px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+          z-index: 9999;
+          font-family: sans-serif;
+          font-size: 14px;
+        \`;
+        notification.textContent = redirect.message;
+        document.body.appendChild(notification);
+        
+        // Redirect after a brief delay
+        setTimeout(() => {
+          window.location.href = redirect.newUrl;
+        }, 1500);
+        
+        // Remove notification after redirect
+        setTimeout(() => notification.remove(), 1400);
+        
+        return true;
+      }
+    }
+    return false;
+  }
+  
+  // Check on page load
+  if (window.location.pathname.includes('/story/')) {
+    checkForRedirect();
+  }
+  
+  // Also check when navigation occurs in single-page app
+  let lastPath = window.location.pathname;
+  setInterval(() => {
+    if (window.location.pathname !== lastPath) {
+      lastPath = window.location.pathname;
+      if (window.location.pathname.includes('/story/')) {
+        checkForRedirect();
+      }
+    }
+  }, 100);
+})();
+`;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",
@@ -18,6 +18,7 @@
   "scripts": {
     "build": "tsc",
     "start": "yarn build && node dist/mcp-server/index.js",
+    "mcp": "yarn build && node dist/mcp-server/mcp-stdio-server.js",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run build",
     "test": "echo \"Tests coming soon\" && exit 0",
@@ -60,6 +61,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@modelcontextprotocol/sdk": "^0.5.0",
+    "@mui/material": "^7.2.0",
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
     "cors": "^2.8.5",
@@ -68,7 +73,8 @@
     "glob": "^11.0.3",
     "inquirer": "^9.2.0",
     "node-fetch": "^2.6.7",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
@@ -107,5 +113,16 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "mcp": {
+    "name": "story-ui",
+    "description": "AI-powered Storybook story generator with dynamic component discovery",
+    "command": "node",
+    "args": [
+      "dist/mcp-server/mcp-stdio-server.js"
+    ],
+    "env": {
+      "NODE_ENV": "production"
+    }
   }
 }

package/templates/StoryUI/StoryUIPanel.tsx

@@ -93,19 +93,28 @@ const syncWithActualStories = async (): Promise<ChatSession[]> => {
     // Load existing chats
     const existingChats = loadChats();
 
-    // Create a map for quick lookup
+    // Create a map for quick lookup - using chat.id as the primary key
     const chatMap = new Map<string, ChatSession>();
     existingChats.forEach(chat => {
       chatMap.set(chat.id, chat);
-      if (chat.fileName) {
-        chatMap.set(chat.fileName, chat);
-      }
     });
 
     // Update or add memory stories
     memoryStories.forEach((story: any) => {
       const storyId = story.storyId || story.fileName;
-      const existingChat = chatMap.get(storyId) || chatMap.get(story.fileName);
+      
+      // Look for existing chat by ID or by matching fileName
+      let existingChat = chatMap.get(storyId);
+      
+      // If not found by ID, search by fileName
+      if (!existingChat && story.fileName) {
+        for (const [id, chat] of chatMap.entries()) {
+          if (chat.fileName === story.fileName) {
+            existingChat = chat;
+            break;
+          }
+        }
+      }
 
       if (existingChat) {
         // Update existing chat with latest info

package/templates/mcp-config-claude.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "story-ui": {
+      "command": "npx",
+      "args": ["@tpitre/story-ui", "mcp"],
+      "env": {
+        "CLAUDE_API_KEY": "your-claude-api-key-here"
+      }
+    }
+  }
+}

package/templates/mcp-example.md

@@ -0,0 +1,76 @@
+# Story UI MCP Example
+
+This example shows how to use Story UI with Claude Desktop via MCP.
+
+## Example Conversation
+
+**You:** Use Story UI to generate a hero section with a gradient background, a main title "Welcome to Our Platform", a subtitle "Build amazing experiences", and two buttons - "Get Started" (primary) and "Learn More" (secondary).
+
+**Claude (using Story UI MCP):** I'll help you create a hero section using Story UI. Let me generate that for you.
+
+*[Claude would then use the generate-story tool]*
+
+The story has been generated successfully! Here's what was created:
+
+**Title:** Hero Section with Gradient Background
+**ID:** hero-gradient-1234
+
+The generated story includes:
+- A hero section with a beautiful gradient background
+- Main title: "Welcome to Our Platform"
+- Subtitle: "Build amazing experiences"
+- Two buttons with proper styling:
+  - "Get Started" button with primary variant
+  - "Learn More" button with secondary variant
+
+You can now see this story in your Storybook instance under the "Generated" category.
+
+**You:** Can you show me what components are available for building layouts?
+
+**Claude:** Let me check what layout components are available in your design system.
+
+*[Claude would use the list-components tool with category filter]*
+
+I found the following layout components available:
+- Grid: Flexible grid system for responsive layouts
+- Container: Page container with max-width constraints
+- Row: Horizontal layout component
+- Column: Vertical layout component
+- Stack: Stacks children vertically or horizontally with spacing
+- Spacer: Adds space between components
+
+**You:** Great! Now modify the hero section to use a Grid with two columns - put the text content on the left and add an illustration placeholder on the right.
+
+**Claude:** I'll help you iterate on the existing hero section to add a two-column layout with the content on the left and space for an illustration on the right.
+
+*[Claude would use generate-story again with the iteration prompt]*
+
+The hero section has been updated! The story now features:
+- A Grid component with two equal columns
+- Left column: Contains the title, subtitle, and buttons
+- Right column: Includes a placeholder for an illustration
+- Responsive design that stacks on mobile devices
+
+The iteration preserved your existing content while restructuring it into the requested layout.
+
+## Common Workflows
+
+### 1. Component Discovery
+"What Button variants are available in my design system?"
+"Show me all form-related components"
+"What props does the Card component accept?"
+
+### 2. Story Generation
+"Create a login form with email, password, and remember me checkbox"
+"Build a pricing card with a featured badge"
+"Generate a navigation bar with logo and menu items"
+
+### 3. Story Management
+"List all stories I've created today"
+"Show me the story with ID abc-123"
+"Delete the old hero section story"
+
+### 4. Iterative Design
+"Add a dark mode variant to the current story"
+"Make the buttons larger and add icons"
+"Change the color scheme to use brand colors"