@tpitre/story-ui 1.7.1 → 2.0.1

package/dist/story-generator/storyTracker.js

@@ -14,7 +14,9 @@ export class StoryTracker {
             if (fs.existsSync(this.mappingFile)) {
                 const data = JSON.parse(fs.readFileSync(this.mappingFile, 'utf-8'));
                 for (const mapping of data) {
-                    this.mappings.set(mapping.title.toLowerCase(), mapping);
+                    if (mapping && mapping.title && typeof mapping.title === 'string') {
+                        this.mappings.set(mapping.title.toLowerCase(), mapping);
+                    }
                 }
             }
         }
@@ -39,47 +41,56 @@ export class StoryTracker {
      * Find an existing story by title
      */
     findByTitle(title) {
+        if (!title || typeof title !== 'string') {
+            return undefined;
+        }
         // Normalize the title for comparison
         const normalizedTitle = title.toLowerCase().trim();
         // Try exact match first
         let mapping = this.mappings.get(normalizedTitle);
         if (mapping)
             return mapping;
-        // Try fuzzy matching for similar titles
-        for (const [key, value] of this.mappings) {
-            // Check if the key contains the normalized title or vice versa
-            if (key.includes(normalizedTitle) || normalizedTitle.includes(key)) {
-                return value;
-            }
-            // Check for very similar titles (e.g., "dashboard" vs "inventory dashboard")
-            const keywords = normalizedTitle.split(/\s+/);
-            const keyKeywords = key.split(/\s+/);
-            // If all keywords from the shorter title are in the longer one
-            const shortKeywords = keywords.length < keyKeywords.length ? keywords : keyKeywords;
-            const longKeywords = keywords.length < keyKeywords.length ? keyKeywords : keywords;
-            if (shortKeywords.every(word => longKeywords.includes(word))) {
-                return value;
-            }
-        }
+        // Don't do fuzzy matching for titles - only exact matches
+        // This prevents "Card" from matching "Card Layouts" or "Profile Card"
+        // Users expect new stories when they request variations
         return undefined;
     }
     /**
      * Find an existing story by prompt similarity
      */
     findByPrompt(prompt) {
+        if (!prompt || typeof prompt !== 'string') {
+            return undefined;
+        }
         const normalizedPrompt = prompt.toLowerCase().trim();
         // Remove common prefixes like "generate a", "create a", etc.
         const cleanPrompt = normalizedPrompt
             .replace(/^(generate|create|build|make|design|show|write|produce|construct|draft|compose|implement|add|render|display)\s+(a|an|the)?\s*/i, '')
             .trim();
+        // Extract key terms from the prompt
+        const promptKeywords = cleanPrompt.split(/\s+/).filter(word => word.length > 2);
         // Try to find by similar prompts
         for (const mapping of this.mappings.values()) {
+            if (!mapping || !mapping.prompt || typeof mapping.prompt !== 'string') {
+                continue;
+            }
             const mappingPrompt = mapping.prompt.toLowerCase()
                 .replace(/^(generate|create|build|make|design|show|write|produce|construct|draft|compose|implement|add|render|display)\s+(a|an|the)?\s*/i, '')
                 .trim();
+            // Exact match
             if (mappingPrompt === cleanPrompt) {
                 return mapping;
             }
+            // Fuzzy matching based on shared keywords
+            const mappingKeywords = mappingPrompt.split(/\s+/).filter(word => word.length > 2);
+            const sharedKeywords = promptKeywords.filter(word => mappingKeywords.includes(word));
+            // Only consider it similar if 90% or more keywords match AND at least 4 keywords
+            // 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)`);
+                return mapping;
+            }
         }
         return undefined;
     }
@@ -87,6 +98,10 @@ export class StoryTracker {
      * Register a new or updated story
      */
     registerStory(mapping) {
+        if (!mapping || !mapping.title || typeof mapping.title !== 'string') {
+            console.warn('Invalid mapping provided to registerStory:', mapping);
+            return;
+        }
         const normalizedTitle = mapping.title.toLowerCase();
         // Check if we're updating an existing story
         const existing = this.findByTitle(mapping.title);
@@ -109,7 +124,7 @@ export class StoryTracker {
     removeStory(titleOrFileName) {
         // Try to find by title first
         const byTitle = this.findByTitle(titleOrFileName);
-        if (byTitle) {
+        if (byTitle && byTitle.title && typeof byTitle.title === 'string') {
             this.mappings.delete(byTitle.title.toLowerCase());
             this.saveMappings();
             return true;

package/dist/story-generator/storyValidator.js

@@ -0,0 +1,39 @@
+export function validateStory(storyContent) {
+    const errors = [];
+    const lines = storyContent.split('\n');
+    // These are warnings/suggestions rather than strict forbidden patterns
+    // Only flag truly problematic patterns that would break the story
+    const forbiddenPatterns = [
+        { pattern: /UNSAFE_style\s*=\s*\{/i, message: 'The `UNSAFE_style` prop is strictly forbidden. Do not use it for any reason.' },
+        { pattern: /UNSAFE_className\s*=\s*['"]/i, message: 'The `UNSAFE_className` prop is forbidden.' },
+        { pattern: /<Text\s+as\s*=\s*["']h[1-6]["']/i, message: 'Text component does not support heading elements (h1-h6) in the "as" prop. Use Heading component instead.' },
+        // Remove overly strict rules - divs, imgs, and inline styles are fine in moderation
+        // Only check for actual syntax errors or patterns that would break Storybook
+    ];
+    lines.forEach((line, index) => {
+        for (const { pattern, message } of forbiddenPatterns) {
+            if (pattern.test(line)) {
+                errors.push({
+                    message,
+                    line: index + 1,
+                });
+            }
+        }
+    });
+    // Check for truncated story (multiple closing tags on a single line followed by };)
+    const lastFewLines = lines.slice(-5).join('\n');
+    if (lastFewLines.match(/<\/\w+><\/\w+><\/\w+><\/\w+>.*\n\s*\};/)) {
+        errors.push({
+            message: 'Story appears to be truncated. Multiple closing tags found on a single line followed by abrupt ending.',
+            line: lines.length - 1,
+        });
+    }
+    // Check for proper story structure
+    if (!storyContent.includes('export default meta')) {
+        errors.push({
+            message: 'Story is missing required "export default meta" statement.',
+            line: 1,
+        });
+    }
+    return errors;
+}

package/dist/story-generator/universalDesignSystemAdapter.js

@@ -0,0 +1,209 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Universal adapter to make Story UI work with any React design system
+ */
+export class UniversalDesignSystemAdapter {
+    constructor(projectRoot = process.cwd()) {
+        this.detectedSystems = [];
+        this.projectRoot = projectRoot;
+    }
+    /**
+     * Auto-detect which design systems are available in the project
+     */
+    async detectDesignSystems() {
+        const packageJsonPath = path.join(this.projectRoot, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            console.log('📦 No package.json found for design system detection');
+            return [];
+        }
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const allDeps = {
+            ...packageJson.dependencies,
+            ...packageJson.devDependencies,
+            ...packageJson.peerDependencies
+        };
+        this.detectedSystems = [];
+        // Check for known design systems
+        this.checkForChakraUI(allDeps);
+        this.checkForAntDesign(allDeps);
+        this.checkForMantine(allDeps);
+        this.checkForGenericReactComponents(allDeps);
+        console.log(`🎨 Detected ${this.detectedSystems.length} design systems:`, this.detectedSystems.map(ds => ds.name));
+        return this.detectedSystems;
+    }
+    /**
+     * Generate optimal Story UI config for detected design systems
+     */
+    generateOptimalConfig() {
+        const primarySystem = this.getPrimaryDesignSystem();
+        if (!primarySystem) {
+            return this.getGenericReactConfig();
+        }
+        switch (primarySystem.type) {
+            case 'chakra-ui':
+                return this.getChakraUIConfig();
+            case 'antd':
+                return this.getAntDesignConfig();
+            case 'mantine':
+                return this.getMantineConfig();
+            default:
+                return this.getGenericReactConfig();
+        }
+    }
+    // Design system detection methods
+    checkForChakraUI(deps) {
+        if (deps['@chakra-ui/react']) {
+            this.detectedSystems.push({
+                name: 'Chakra UI',
+                type: 'chakra-ui',
+                scope: '@chakra-ui',
+                primaryPackage: '@chakra-ui/react',
+                commonComponents: ['Box', 'Flex', 'Grid', 'Stack', 'Text', 'Heading', 'Button', 'Input'],
+                layoutComponents: ['Box', 'Flex', 'Grid', 'Stack', 'HStack', 'VStack'],
+                formComponents: ['Input', 'Button', 'Select', 'Checkbox', 'Radio'],
+                importPatterns: {
+                    default: [],
+                    named: ['Box', 'Flex', 'Grid', 'Stack', 'Text', 'Heading', 'Button', 'Input']
+                },
+                designTokens: {
+                    spacing: 'spacing.*',
+                    colors: 'colors.*'
+                }
+            });
+        }
+    }
+    checkForAntDesign(deps) {
+        if (deps['antd']) {
+            this.detectedSystems.push({
+                name: 'Ant Design',
+                type: 'antd',
+                primaryPackage: 'antd',
+                commonComponents: ['Layout', 'Row', 'Col', 'Space', 'Typography', 'Button', 'Input'],
+                layoutComponents: ['Layout', 'Row', 'Col', 'Space'],
+                formComponents: ['Input', 'Button', 'Select', 'Checkbox', 'Radio'],
+                importPatterns: {
+                    default: [],
+                    named: ['Layout', 'Row', 'Col', 'Space', 'Typography', 'Button', 'Input']
+                }
+            });
+        }
+    }
+    checkForMantine(deps) {
+        if (deps['@mantine/core']) {
+            this.detectedSystems.push({
+                name: 'Mantine',
+                type: 'mantine',
+                scope: '@mantine',
+                primaryPackage: '@mantine/core',
+                commonComponents: ['Box', 'Flex', 'Grid', 'Stack', 'Text', 'Title', 'Button', 'TextInput'],
+                layoutComponents: ['Box', 'Flex', 'Grid', 'Stack'],
+                formComponents: ['TextInput', 'Button', 'Select', 'Checkbox', 'Radio'],
+                importPatterns: {
+                    default: [],
+                    named: ['Box', 'Flex', 'Grid', 'Stack', 'Text', 'Title', 'Button', 'TextInput']
+                }
+            });
+        }
+    }
+    checkForGenericReactComponents(deps) {
+        // Check for generic React component libraries
+        const genericLibraries = [
+            'react-bootstrap',
+            'semantic-ui-react',
+            'rebass',
+            'theme-ui',
+            'styled-components',
+            '@emotion/react'
+        ];
+        const foundGeneric = genericLibraries.filter(lib => deps[lib]);
+        if (foundGeneric.length > 0) {
+            this.detectedSystems.push({
+                name: 'Generic React Components',
+                type: 'generic',
+                primaryPackage: foundGeneric[0],
+                commonComponents: ['div', 'span', 'button', 'input', 'form'],
+                layoutComponents: ['div', 'section', 'main'],
+                formComponents: ['input', 'button', 'select', 'textarea'],
+                importPatterns: {
+                    default: [],
+                    named: []
+                }
+            });
+        }
+    }
+    // Configuration generators
+    getPrimaryDesignSystem() {
+        // Prioritize based on completeness and popularity
+        const priorities = ['chakra-ui', 'antd', 'mantine', 'generic'];
+        for (const priority of priorities) {
+            const system = this.detectedSystems.find(ds => ds.type === priority);
+            if (system)
+                return system;
+        }
+        return this.detectedSystems[0] || null;
+    }
+    getChakraUIConfig() {
+        return {
+            designSystemGuidelines: {
+                name: "Chakra UI",
+                preferredComponents: {
+                    layout: "@chakra-ui/react",
+                    buttons: "@chakra-ui/react",
+                    forms: "@chakra-ui/react"
+                }
+            },
+            layoutRules: {
+                multiColumnWrapper: "Grid",
+                columnComponent: "Box",
+                containerComponent: "Container"
+            }
+        };
+    }
+    getAntDesignConfig() {
+        return {
+            designSystemGuidelines: {
+                name: "Ant Design",
+                preferredComponents: {
+                    layout: "antd",
+                    buttons: "antd",
+                    forms: "antd"
+                }
+            },
+            layoutRules: {
+                multiColumnWrapper: "Row",
+                columnComponent: "Col",
+                containerComponent: "Layout"
+            }
+        };
+    }
+    getMantineConfig() {
+        return {
+            designSystemGuidelines: {
+                name: "Mantine",
+                preferredComponents: {
+                    layout: "@mantine/core",
+                    buttons: "@mantine/core",
+                    forms: "@mantine/core"
+                }
+            }
+        };
+    }
+    getGenericReactConfig() {
+        return {
+            designSystemGuidelines: {
+                name: "Generic React",
+                preferredComponents: {
+                    layout: "react",
+                    buttons: "react",
+                    forms: "react"
+                }
+            },
+            layoutRules: {
+                multiColumnWrapper: "div",
+                columnComponent: "div",
+                containerComponent: "div"
+            }
+        };
+    }
+}

package/dist/story-generator/validateStory.js

@@ -1,8 +1,9 @@
 import * as ts from 'typescript';
+import { isBlacklistedComponent, validateImports } from './componentBlacklist.js';
 /**
  * Validates TypeScript code syntax and attempts to fix common issues
  */
-export function validateStoryCode(code, fileName = 'story.tsx') {
+export function validateStoryCode(code, fileName = 'story.tsx', config) {
     const result = {
         isValid: true,
         errors: [],
@@ -47,8 +48,15 @@ export function validateStoryCode(code, fileName = 'story.tsx') {
             }
         }
         // Additional semantic checks
-        const semanticErrors = performSemanticChecks(sourceFile);
+        const semanticErrors = performSemanticChecks(sourceFile, config);
         result.errors.push(...semanticErrors);
+        // Check for React import
+        const hasJSX = code.includes('<') || code.includes('/>');
+        const hasReactImport = code.includes('import React from \'react\';');
+        if (hasJSX && !hasReactImport) {
+            result.errors.push('Missing React import - add "import React from \'react\';" at the top of the file');
+            result.isValid = false;
+        }
         if (result.errors.length > 0) {
             result.isValid = false;
             // Attempt to fix common issues
@@ -56,7 +64,7 @@ export function validateStoryCode(code, fileName = 'story.tsx') {
             if (fixedCode && fixedCode !== code) {
                 result.fixedCode = fixedCode;
                 // Re-validate the fixed code
-                const fixedValidation = validateStoryCode(fixedCode, fileName);
+                const fixedValidation = validateStoryCode(fixedCode, fileName, config);
                 if (fixedValidation.isValid) {
                     result.isValid = true;
                     result.warnings.push('Code was automatically fixed for syntax errors');
@@ -73,9 +81,50 @@ export function validateStoryCode(code, fileName = 'story.tsx') {
 /**
  * Performs additional semantic checks on the AST
  */
-function performSemanticChecks(sourceFile) {
+function performSemanticChecks(sourceFile, config) {
     const errors = [];
+    const availableComponents = new Set();
+    const importedComponents = new Set();
+    // If config is provided, collect available components
+    if (config && config.componentsToImport) {
+        config.componentsToImport.forEach((comp) => availableComponents.add(comp));
+    }
     function visit(node) {
+        // Check import statements for invalid components
+        if (ts.isImportDeclaration(node) && node.importClause && node.importClause.namedBindings) {
+            const moduleSpecifier = node.moduleSpecifier;
+            if (ts.isStringLiteral(moduleSpecifier)) {
+                const importPath = moduleSpecifier.text;
+                // Check if this is the main component library import
+                if (config && config.importPath && importPath === config.importPath) {
+                    if (ts.isNamedImports(node.importClause.namedBindings)) {
+                        node.importClause.namedBindings.elements.forEach(element => {
+                            const componentName = element.name.text;
+                            importedComponents.add(componentName);
+                            // Check if component exists in available components
+                            if (availableComponents.size > 0) {
+                                if (isBlacklistedComponent(componentName, availableComponents)) {
+                                    // This is a blacklisted component
+                                    const validation = validateImports([componentName], availableComponents);
+                                    const suggestions = validation.suggestions.get(componentName);
+                                    let errorMsg = `Import error: "${componentName}" is not a valid component from ${importPath}. This appears to be a story export name or made-up component.`;
+                                    if (suggestions && suggestions.length > 0) {
+                                        errorMsg += ` Use these components instead: ${suggestions.join(', ')}.`;
+                                    }
+                                    else {
+                                        errorMsg += ` Use basic components like Box, Stack, Text, Button instead.`;
+                                    }
+                                    errors.push(errorMsg);
+                                }
+                                else if (!availableComponents.has(componentName)) {
+                                    errors.push(`Import error: "${componentName}" is not available from ${importPath}. Available components include: ${Array.from(availableComponents).slice(0, 10).join(', ')}...`);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        }
         // Check for unclosed JSX elements
         if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
             // Additional JSX-specific checks could go here
@@ -94,6 +143,10 @@ function performSemanticChecks(sourceFile) {
  */
 function attemptAutoFix(code, errors) {
     let fixedCode = code;
+    // CRITICAL: Fix missing React import first (most important for JSX)
+    if (errors.some(e => e.includes('Missing React import'))) {
+        fixedCode = fixMissingReactImport(fixedCode);
+    }
     // First, check if the code appears to be truncated
     if (isCodeTruncated(fixedCode)) {
         fixedCode = fixTruncatedCode(fixedCode);
@@ -229,6 +282,27 @@ function fixUnterminatedStrings(code) {
     }
     return lines.join('\n');
 }
+/**
+ * Fixes missing React import for JSX
+ */
+function fixMissingReactImport(code) {
+    // Check if code has JSX but no React import
+    const hasJSX = code.includes('<') || code.includes('/>');
+    const hasReactImport = code.includes('import React') || code.includes('* as React');
+    if (hasJSX && !hasReactImport) {
+        // Find the first import statement or the beginning of the file
+        const firstImportIndex = code.indexOf('import');
+        if (firstImportIndex !== -1) {
+            // Insert React import before the first import
+            return code.slice(0, firstImportIndex) + "import React from 'react';\n" + code.slice(firstImportIndex);
+        }
+        else {
+            // No imports, add at the beginning
+            return "import React from 'react';\n" + code;
+        }
+    }
+    return code;
+}
 /**
  * Fixes unclosed JSX elements
  */
@@ -333,7 +407,7 @@ function findInsertPosition(code) {
 /**
  * Extracts and validates code blocks from AI responses
  */
-export function extractAndValidateCodeBlock(aiResponse) {
+export function extractAndValidateCodeBlock(aiResponse, config) {
     // Try multiple extraction methods
     const extractionMethods = [
         // Standard code blocks
@@ -366,7 +440,7 @@ export function extractAndValidateCodeBlock(aiResponse) {
         };
     }
     // Validate the extracted code
-    return validateStoryCode(extractedCode);
+    return validateStoryCode(extractedCode, 'story.tsx', config);
 }
 /**
  * Creates a fallback story template when generation fails
@@ -374,8 +448,9 @@ export function extractAndValidateCodeBlock(aiResponse) {
 export function createFallbackStory(prompt, config) {
     const title = prompt.length > 50 ? prompt.substring(0, 50) + '...' : prompt;
     const escapedTitle = title.replace(/"/g, '\\"');
+    const storybookFramework = config.storybookFramework || '@storybook/react';
     return `import React from 'react';
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '${storybookFramework}';
 
 // Fallback story generated due to AI generation error
 export default {

package/dist/story-ui.config.js

@@ -54,15 +54,22 @@ export const DEFAULT_CONFIG = {
         },
         prohibitedElements: []
     },
-    sampleStory: `import type { StoryObj } from '@storybook/react-webpack5';
+    sampleStory: `import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import { Card } from 'your-component-library';
 
-export default {
-  title: 'Layouts/Sample Layout',
+const meta = {
+  title: 'Generated/Sample Layout',
   component: Card,
-};
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default: StoryObj<typeof Card> = {
+export const Default: Story = {
   args: {
     children: (
       <Card>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "1.7.1",
-  "description": "AI-powered Storybook story generator for any React component library",
+  "version": "2.0.1",
+  "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,8 +24,7 @@
     "release": "semantic-release",
     "release:dry-run": "semantic-release --dry-run",
     "commit": "cz",
-    "prepare": "husky",
-    "push": "./scripts/push.sh"
+    "prepare": "husky"
   },
   "keywords": [
     "storybook",
@@ -36,7 +35,12 @@
     "design-system",
     "claude",
     "mcp",
-    "story-generation"
+    "story-generation",
+    "documentation",
+    "real-time",
+    "component-library",
+    "iteration",
+    "version-history"
   ],
   "author": "Story UI Contributors",
   "license": "MIT",
@@ -58,10 +62,10 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
-    "concurrently": "^8.2.0",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
+    "glob": "^11.0.3",
     "inquirer": "^9.2.0",
     "node-fetch": "^2.6.7",
     "typescript": "^5.8.3"
@@ -77,6 +81,7 @@
     "@semantic-release/release-notes-generator": "^14.0.1",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
+    "@types/glob": "^8.1.0",
     "@types/inquirer": "^9.0.0",
     "@types/node": "^20.4.2",
     "@types/node-fetch": "^2.6.12",

package/templates/StoryUI/StoryUIPanel.stories.tsx

@@ -1,28 +1,44 @@
 import React from 'react';
-import type { StoryFn, Meta } from '@storybook/react';
-import StoryUIPanel from './StoryUIPanel';
+import type { Meta, StoryObj } from '@storybook/react';
+import { StoryUIPanel } from './StoryUIPanel';
 
-export default {
+const meta = {
   title: 'Story UI/Story Generator',
   component: StoryUIPanel,
   parameters: {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: 'AI-powered story generator for creating complex UI layouts using your component library.'
+        component: `
+Story UI Panel connects to the MCP server running on your configured port.
+The port is determined by:
+1. VITE_STORY_UI_PORT environment variable (recommended)
+2. URL parameter: ?mcp-port=XXXX
+3. Default port: 4001
+
+This design system agnostic approach works with any component library.
+        `
       }
     }
-  }
-} as Meta<typeof StoryUIPanel>;
+  },
+} satisfies Meta<typeof StoryUIPanel>;
 
-const Template: StoryFn<typeof StoryUIPanel> = (args) => <StoryUIPanel {...args} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Use natural language prompts to generate Storybook stories with your components.'
+export const Default: Story = {
+  render: () => {
+    // Check for URL parameter override first
+    if (typeof window !== 'undefined') {
+      const urlParams = new URLSearchParams(window.location.search);
+      const mcpPortParam = urlParams.get('mcp-port');
+      
+      if (mcpPortParam) {
+        // Set the global variable that the panel will use
+        (window as any).STORY_UI_MCP_PORT = mcpPortParam;
+      }
     }
+
+    return <StoryUIPanel />;
   }
 };