@tpitre/story-ui 1.7.1 → 2.0.1

package/dist/story-generator/enhancedComponentDiscovery.js

@@ -1,15 +1,21 @@
 import fs from 'fs';
 import path from 'path';
+import { DynamicPackageDiscovery } from './dynamicPackageDiscovery.js';
 export class EnhancedComponentDiscovery {
     constructor(config) {
         this.discoveredComponents = new Map();
+        this.validateAvailableComponents = new Set();
         this.config = config;
     }
     /**
      * Discover components from all available sources
+     * Priority: 1. Dynamic Discovery 2. Static Lists 3. Manual Config
      */
     async discoverAll() {
+        console.log('🔍 Starting comprehensive component discovery...');
+        // Step 1: Discover from all sources
         const sources = this.identifySources();
+        console.log(`📁 Found ${sources.length} discovery sources:`, sources.map(s => `${s.type}:${s.path}`));
         for (const source of sources) {
             try {
                 switch (source.type) {
@@ -31,23 +37,129 @@ export class EnhancedComponentDiscovery {
                 console.warn(`Failed to discover from ${source.type} at ${source.path}:`, error);
             }
         }
-        // Apply any manual configurations
+        // Step 2: Apply manual configurations as override/fallback
         this.applyManualConfigurations();
-        return Array.from(this.discoveredComponents.values());
+        // Step 3: Resolve component conflicts and apply prioritization
+        this.resolveComponentConflicts();
+        const finalComponents = Array.from(this.discoveredComponents.values());
+        console.log(`✅ Discovery complete: ${finalComponents.length} components found`);
+        // Log summary by source type
+        this.logDiscoverySummary(finalComponents);
+        return finalComponents;
+    }
+    /**
+     * Resolve naming conflicts between different sources
+     * Priority: Local > Manual Config > npm packages
+     */
+    resolveComponentConflicts() {
+        const conflicts = new Map();
+        // Group components by name to find conflicts
+        for (const component of this.discoveredComponents.values()) {
+            const name = component.name;
+            if (!conflicts.has(name)) {
+                conflicts.set(name, []);
+            }
+            conflicts.get(name).push(component);
+        }
+        // Resolve conflicts using priority system
+        for (const [name, componentList] of conflicts) {
+            if (componentList.length > 1) {
+                console.log(`⚠️  Resolving conflict for component "${name}" (${componentList.length} versions found)`);
+                // Priority order: local > manual config > npm
+                const prioritized = componentList.sort((a, b) => {
+                    const getPriority = (comp) => {
+                        if (comp.source.type === 'local')
+                            return 1; // Highest priority
+                        if (comp.source.type === 'npm')
+                            return 2;
+                        return 3; // Lowest priority for others
+                    };
+                    return getPriority(a) - getPriority(b);
+                });
+                // Keep highest priority, remove others
+                const winner = prioritized[0];
+                const losers = prioritized.slice(1);
+                for (const loser of losers) {
+                    this.discoveredComponents.delete(loser.name);
+                }
+                console.log(`✅ Kept ${winner.source.type} version of "${name}" from ${winner.source.path}`);
+            }
+        }
+    }
+    /**
+     * Log discovery summary for debugging
+     */
+    logDiscoverySummary(components) {
+        const summary = components.reduce((acc, comp) => {
+            const sourceType = comp.source.type;
+            if (!acc[sourceType])
+                acc[sourceType] = 0;
+            acc[sourceType]++;
+            return acc;
+        }, {});
+        console.log('📊 Component discovery summary:', summary);
+    }
+    /**
+ * Get the project root directory from the config
+ */
+    getProjectRoot() {
+        // If generatedStoriesPath exists, use it to determine project root
+        if (this.config.generatedStoriesPath) {
+            // Go up from src/stories/generated to find project root
+            let currentPath = path.resolve(this.config.generatedStoriesPath);
+            // Keep going up until we find a package.json
+            while (currentPath !== path.dirname(currentPath)) {
+                if (fs.existsSync(path.join(currentPath, 'package.json'))) {
+                    return currentPath;
+                }
+                currentPath = path.dirname(currentPath);
+            }
+        }
+        // Fallback to current working directory
+        return process.cwd();
     }
     /**
      * Identify all potential component sources
      */
     identifySources() {
         const sources = [];
+        // Note: Auto-discovery removed - now using guided installation during init
         // Check for npm packages
+        // Always run dynamic discovery for design systems
         if (this.config.importPath && !this.config.importPath.startsWith('.')) {
             sources.push({
                 type: 'npm',
                 path: this.config.importPath
             });
         }
+        // Also discover from layout components if specified
+        if (this.config.layoutComponents && this.config.layoutComponents.length > 0) {
+            const layoutImportPaths = new Set();
+            for (const layoutComp of this.config.layoutComponents) {
+                if (layoutComp.importPath && !layoutComp.importPath.startsWith('.')) {
+                    layoutImportPaths.add(layoutComp.importPath);
+                }
+            }
+            for (const layoutPath of layoutImportPaths) {
+                sources.push({
+                    type: 'npm',
+                    path: layoutPath
+                });
+            }
+        }
+        // Check for design system preferred components
+        if (this.config.designSystemGuidelines?.preferredComponents) {
+            for (const [category, packagePath] of Object.entries(this.config.designSystemGuidelines.preferredComponents)) {
+                if (typeof packagePath === 'string' && !packagePath.startsWith('.')) {
+                    sources.push({
+                        type: 'npm',
+                        path: packagePath
+                    });
+                }
+            }
+        }
         // Check for local component directories
+        // 1. Manually configured componentsPath (highest priority)
         if (this.config.componentsPath && fs.existsSync(this.config.componentsPath)) {
             sources.push({
                 type: 'local',
@@ -55,8 +167,39 @@ export class EnhancedComponentDiscovery {
                 patterns: ['*.tsx', '*.jsx', '*.ts', '*.js']
             });
         }
+        // 2. Auto-discover common React component directories from project root
+        const projectRoot = this.getProjectRoot();
+        const commonComponentDirs = [
+            'src/components',
+            'src/ui',
+            'components',
+            'ui',
+            'src/lib/components',
+            'lib/components',
+            'src/shared/components',
+            'shared/components'
+        ];
+        for (const dir of commonComponentDirs) {
+            const fullPath = path.join(projectRoot, dir);
+            if (fs.existsSync(fullPath) && fullPath !== this.config.componentsPath) {
+                sources.push({
+                    type: 'local',
+                    path: fullPath,
+                    patterns: ['*.tsx', '*.jsx', '*.ts', '*.js']
+                });
+            }
+        }
+        // 3. Scan alongside stories in src/stories directory (co-located components)
+        const storiesDir = path.join(projectRoot, 'src/stories');
+        if (fs.existsSync(storiesDir)) {
+            sources.push({
+                type: 'local',
+                path: storiesDir,
+                patterns: ['*.tsx', '*.jsx'] // Only component files, not story files
+            });
+        }
         // Check for TypeScript definitions
-        const nodeModulesPath = path.join(process.cwd(), 'node_modules');
+        const nodeModulesPath = path.join(projectRoot, 'node_modules');
         if (this.config.importPath && fs.existsSync(nodeModulesPath)) {
             const packagePath = path.join(nodeModulesPath, this.config.importPath);
             const typesPath = path.join(nodeModulesPath, '@types', this.config.importPath.replace(/^@/, '').replace('/', '__'));
@@ -76,29 +219,57 @@ export class EnhancedComponentDiscovery {
         return sources;
     }
     /**
-     * Discover components from npm packages
+     * Auto-discovery removed - now handled by guided installation during init
+     * This function is kept for backward compatibility but does nothing
+     */
+    addDesignSystemPackages(sources) {
+        // Functionality moved to guided installation process
+    }
+    /**
+     * Check if a package is likely to contain React components (not utilities, types, etc.)
      */
+    isLikelyComponentPackage(packageName) {
+        const name = packageName.toLowerCase();
+        // Skip obvious utility packages
+        const utilityPatterns = [
+            'types',
+            'utils', 'util', 'utilities',
+            'helpers', 'constants', 'config',
+            'analytics', 'tracking', 'metrics',
+            'tokens', 'theme', 'styles', 'css',
+            'icons', 'icon', // Icons are usually too numerous and specific
+            'editor-', // Editor plugins are usually too specific
+            'smart-card', // Requires SmartCardProvider wrapper - too complex for simple stories
+            '-types', '-utils', '-constants',
+            'babel-', 'webpack-', 'rollup-', 'eslint-',
+            'test', 'mock', 'fixture', 'storybook',
+            'codemod', 'migration',
+            'build', 'dev', 'cli'
+        ];
+        // Skip if contains utility patterns
+        if (utilityPatterns.some(pattern => name.includes(pattern))) {
+            return false;
+        }
+        return true;
+    }
+    /**
+   * Discover components from npm packages using dynamic runtime discovery
+   */
     async discoverFromNpmPackage(source) {
-        const packagePath = path.join(process.cwd(), 'node_modules', source.path);
+        // Determine the project root from the generated stories path
+        const projectRoot = this.getProjectRoot();
+        const packagePath = path.join(projectRoot, 'node_modules', source.path);
         if (!fs.existsSync(packagePath)) {
+            console.warn(`Package ${source.path} not found in node_modules at ${packagePath}`);
             return;
         }
-        // Read package.json to find entry points
-        const packageJsonPath = path.join(packagePath, 'package.json');
-        if (fs.existsSync(packageJsonPath)) {
-            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-            // Try to find component exports
-            const possiblePaths = [
-                packageJson.main,
-                packageJson.module,
-                packageJson.exports?.['.'],
-                'index.js',
-                'index.ts',
-                'lib/index.js',
-                'dist/index.js',
-                'es/index.js'
-            ].filter(Boolean);
-            // For known design systems, use predefined component lists
+        console.log(`🔍 Dynamically discovering components from ${source.path}...`);
+        // Use dynamic discovery to get real exports
+        const dynamicDiscovery = new DynamicPackageDiscovery(source.path, projectRoot);
+        const packageExports = await dynamicDiscovery.getRealPackageExports();
+        if (!packageExports) {
+            console.log(`📋 ${source.path}: Using static component list (design system detected)`);
+            // Fallback to predefined components if dynamic discovery fails
             const knownComponents = this.getKnownDesignSystemComponents(source.path);
             if (knownComponents.length > 0) {
                 for (const comp of knownComponents) {
@@ -109,110 +280,41 @@ export class EnhancedComponentDiscovery {
                         category: comp.category || this.categorizeComponent(comp.name || '', comp.description || '')
                     });
                 }
-                return;
-            }
-            // Try dynamic import for modern packages
-            for (const entryPath of possiblePaths) {
-                const fullPath = path.join(packagePath, entryPath);
-                if (fs.existsSync(fullPath)) {
-                    try {
-                        // This is where we'd ideally do dynamic import, but for safety
-                        // we'll rely on known patterns and TypeScript definitions
-                        console.log(`Found entry point: ${fullPath}`);
-                    }
-                    catch (error) {
-                        // Silent fail - will try other methods
-                    }
-                }
             }
+            return;
+        }
+        // Process the real components found in the package
+        const realComponents = packageExports.components.filter(comp => comp.isComponent);
+        console.log(`✅ Found ${realComponents.length} real components in ${source.path} v${packageExports.packageVersion}`);
+        console.log(`📦 Available components: ${realComponents.map(c => c.name).join(', ')}`);
+        for (const realComp of realComponents) {
+            // Get enhanced metadata from predefined list if available
+            const knownComponents = this.getKnownDesignSystemComponents(source.path);
+            const knownComp = knownComponents.find(k => k.name === realComp.name);
+            this.discoveredComponents.set(realComp.name, {
+                name: realComp.name,
+                source,
+                filePath: '',
+                // Use known metadata if available, otherwise generate basic metadata
+                description: knownComp?.description || `${realComp.name} component`,
+                category: knownComp?.category || this.categorizeComponent(realComp.name, ''),
+                props: knownComp?.props || [],
+                slots: knownComp?.slots || [],
+                examples: knownComp?.examples || [],
+                __componentPath: realComp.__componentPath
+            });
         }
+        // Store the component names for validation
+        this.validateAvailableComponents = new Set(realComponents.map(c => c.name));
     }
     /**
      * Get known components for popular design systems
+     * Returns empty array to rely on dynamic discovery
      */
     getKnownDesignSystemComponents(packageName) {
-        const components = [];
-        switch (packageName) {
-            case 'antd':
-            case 'ant-design':
-                return [
-                    // Layout
-                    { name: 'Layout', category: 'layout', description: 'Main layout wrapper' },
-                    { name: 'Row', category: 'layout', description: 'Grid row for layouts' },
-                    { name: 'Col', category: 'layout', description: 'Grid column for layouts' },
-                    { name: 'Grid', category: 'layout', description: 'Grid layout component' },
-                    { name: 'Space', category: 'layout', description: 'Spacing component' },
-                    { name: 'Divider', category: 'layout', description: 'Divider line' },
-                    // Data Display
-                    { name: 'Table', category: 'content', description: 'Data table', props: ['dataSource', 'columns', 'pagination', 'loading'] },
-                    { name: 'Card', category: 'content', description: 'Card container', props: ['title', 'extra', 'loading', 'bordered'] },
-                    { name: 'Statistic', category: 'content', description: 'Statistical display', props: ['title', 'value', 'prefix', 'suffix'] },
-                    { name: 'List', category: 'content', description: 'List display', props: ['dataSource', 'renderItem', 'loading'] },
-                    { name: 'Badge', category: 'content', description: 'Badge for status', props: ['count', 'dot', 'status'] },
-                    { name: 'Tag', category: 'content', description: 'Tag label', props: ['color', 'closable', 'icon'] },
-                    { name: 'Avatar', category: 'content', description: 'User avatar', props: ['src', 'size', 'shape', 'icon'] },
-                    { name: 'Progress', category: 'content', description: 'Progress bar', props: ['percent', 'status', 'type'] },
-                    // Form
-                    { name: 'Form', category: 'form', description: 'Form container', props: ['layout', 'onFinish', 'initialValues'] },
-                    { name: 'Input', category: 'form', description: 'Text input', props: ['placeholder', 'value', 'onChange', 'size'] },
-                    { name: 'Select', category: 'form', description: 'Select dropdown', props: ['options', 'value', 'onChange', 'placeholder'] },
-                    { name: 'Button', category: 'form', description: 'Button', props: ['type', 'size', 'loading', 'icon', 'onClick'] },
-                    { name: 'Switch', category: 'form', description: 'Toggle switch', props: ['checked', 'onChange', 'size'] },
-                    { name: 'DatePicker', category: 'form', description: 'Date picker', props: ['value', 'onChange', 'format'] },
-                    // Feedback
-                    { name: 'Alert', category: 'feedback', description: 'Alert message', props: ['message', 'type', 'showIcon', 'closable'] },
-                    { name: 'Modal', category: 'feedback', description: 'Modal dialog', props: ['title', 'visible', 'onOk', 'onCancel'] },
-                    { name: 'Tooltip', category: 'feedback', description: 'Tooltip', props: ['title', 'placement'] },
-                    { name: 'Dropdown', category: 'feedback', description: 'Dropdown menu', props: ['menu', 'placement', 'trigger'] },
-                    // Navigation
-                    { name: 'Menu', category: 'navigation', description: 'Navigation menu', props: ['items', 'mode', 'selectedKeys'] },
-                    { name: 'Tabs', category: 'navigation', description: 'Tabbed navigation', props: ['items', 'activeKey', 'onChange'] },
-                    { name: 'Breadcrumb', category: 'navigation', description: 'Breadcrumb navigation', props: ['items'] },
-                    { name: 'Pagination', category: 'navigation', description: 'Pagination', props: ['current', 'total', 'pageSize', 'onChange'] }
-                ];
-            case '@mui/material':
-                return [
-                    // Layout
-                    { name: 'Box', category: 'layout', description: 'Basic layout box' },
-                    { name: 'Container', category: 'layout', description: 'Responsive container' },
-                    { name: 'Grid', category: 'layout', description: 'Grid layout', props: ['container', 'item', 'xs', 'sm', 'md', 'lg', 'xl'] },
-                    { name: 'Stack', category: 'layout', description: 'Stack layout' },
-                    // Surfaces
-                    { name: 'Card', category: 'content', description: 'Card surface' },
-                    { name: 'CardContent', category: 'content', description: 'Card content area' },
-                    { name: 'Paper', category: 'content', description: 'Paper surface' },
-                    // Data Display
-                    { name: 'Typography', category: 'content', description: 'Text typography', props: ['variant', 'component'] },
-                    { name: 'Table', category: 'content', description: 'Data table' },
-                    { name: 'Chip', category: 'content', description: 'Chip component' },
-                    // Inputs
-                    { name: 'Button', category: 'form', description: 'Button', props: ['variant', 'color', 'size'] },
-                    { name: 'TextField', category: 'form', description: 'Text input', props: ['label', 'variant', 'value', 'onChange'] },
-                    { name: 'Select', category: 'form', description: 'Select dropdown' },
-                    { name: 'Switch', category: 'form', description: 'Toggle switch' }
-                ];
-            case '@chakra-ui/react':
-                return [
-                    // Layout
-                    { name: 'Box', category: 'layout', description: 'Basic layout box' },
-                    { name: 'Flex', category: 'layout', description: 'Flexbox layout' },
-                    { name: 'Grid', category: 'layout', description: 'CSS Grid layout' },
-                    { name: 'SimpleGrid', category: 'layout', description: 'Simple grid layout', props: ['columns', 'spacing'] },
-                    { name: 'Stack', category: 'layout', description: 'Stack layout', props: ['direction', 'spacing'] },
-                    { name: 'HStack', category: 'layout', description: 'Horizontal stack' },
-                    { name: 'VStack', category: 'layout', description: 'Vertical stack' },
-                    // Content
-                    { name: 'Card', category: 'content', description: 'Card container' },
-                    { name: 'Text', category: 'content', description: 'Text component' },
-                    { name: 'Heading', category: 'content', description: 'Heading text' },
-                    { name: 'Badge', category: 'content', description: 'Badge component' },
-                    // Form
-                    { name: 'Button', category: 'form', description: 'Button', props: ['colorScheme', 'size', 'variant'] },
-                    { name: 'Input', category: 'form', description: 'Text input' },
-                    { name: 'Select', category: 'form', description: 'Select dropdown' }
-                ];
-        }
-        return components;
+        // Return empty array to rely purely on dynamic component discovery
+        // This ensures we test the actual package scanning capabilities
+        return [];
     }
     /**
      * Discover components from local files
@@ -223,9 +325,17 @@ export class EnhancedComponentDiscovery {
         }
         const files = this.findComponentFiles(source.path, source.patterns || ['*.tsx', '*.jsx']);
         for (const file of files) {
+            // Skip story files, test files, and other non-component files
+            if (this.isNonComponentFile(file)) {
+                continue;
+            }
             const content = fs.readFileSync(file, 'utf-8');
             const componentName = this.extractComponentName(file, content);
             if (componentName && !this.discoveredComponents.has(componentName)) {
+                // Skip Story UI components and other internal components
+                if (this.shouldSkipComponent(componentName, content)) {
+                    continue;
+                }
                 const props = this.extractPropsFromFile(content);
                 this.discoveredComponents.set(componentName, {
                     name: componentName,
@@ -240,6 +350,40 @@ export class EnhancedComponentDiscovery {
             }
         }
     }
+    /**
+     * Check if a file should be skipped (stories, tests, etc.)
+     */
+    isNonComponentFile(filePath) {
+        const fileName = path.basename(filePath);
+        const skipPatterns = [
+            /\.stories?\.(tsx?|jsx?)$/i, // Story files
+            /\.test\.(tsx?|jsx?)$/i, // Test files
+            /\.spec\.(tsx?|jsx?)$/i, // Spec files
+            /\.d\.ts$/i, // Type definition files
+            /index\.(tsx?|jsx?)$/i, // Index files (usually just exports)
+            /\.config\.(tsx?|jsx?)$/i, // Config files
+            /\.mock\.(tsx?|jsx?)$/i, // Mock files
+        ];
+        return skipPatterns.some(pattern => pattern.test(fileName));
+    }
+    /**
+     * Check if a component should be skipped based on name or content
+     */
+    shouldSkipComponent(componentName, content) {
+        // Skip Story UI components
+        if (componentName === 'StoryUIPanel' || componentName.startsWith('StoryUI')) {
+            return true;
+        }
+        // Skip components that look like story exports
+        if (componentName.endsWith('Story') || componentName.endsWith('Example') || componentName.endsWith('Demo')) {
+            return true;
+        }
+        // Skip if content indicates it's not a proper component (e.g., just exports)
+        if (content.includes('export default meta') || content.includes('satisfies Meta')) {
+            return true;
+        }
+        return false;
+    }
     /**
      * Find component files recursively
      */
@@ -329,6 +473,9 @@ export class EnhancedComponentDiscovery {
      * Categorize component based on name and content
      */
     categorizeComponent(name, content) {
+        if (!name || typeof name !== 'string') {
+            return 'other';
+        }
         const nameLower = name.toLowerCase();
         // Layout components
         if (/^(layout|grid|row|col|column|container|box|flex|stack|section|wrapper|panel)/.test(nameLower)) {
@@ -413,6 +560,7 @@ export class EnhancedComponentDiscovery {
      * Apply manual component configurations
      */
     applyManualConfigurations() {
+        // Add main components from config
         if (this.config.components && Array.isArray(this.config.components)) {
             for (const comp of this.config.components) {
                 const existing = this.discoveredComponents.get(comp.name);
@@ -431,5 +579,108 @@ export class EnhancedComponentDiscovery {
                 });
             }
         }
+        // Add layout components from config
+        if (this.config.layoutComponents && Array.isArray(this.config.layoutComponents)) {
+            for (const comp of this.config.layoutComponents) {
+                const existing = this.discoveredComponents.get(comp.name);
+                this.discoveredComponents.set(comp.name, {
+                    name: comp.name,
+                    filePath: '',
+                    props: comp.props || existing?.props || [],
+                    source: {
+                        type: 'custom-elements',
+                        path: 'manual-config'
+                    },
+                    description: comp.description || existing?.description || `${comp.name} component`,
+                    category: comp.category || existing?.category || this.categorizeComponent(comp.name, ''),
+                    slots: comp.slots || existing?.slots || [],
+                    examples: comp.examples || existing?.examples || []
+                });
+            }
+        }
+    }
+    /**
+     * Validate that component names actually exist in the discovered package
+     */
+    async validateComponentNames(componentNames) {
+        // If we have real component validation data, use it
+        if (this.validateAvailableComponents.size > 0) {
+            const valid = [];
+            const invalid = [];
+            const suggestions = new Map();
+            for (const componentName of componentNames) {
+                if (this.validateAvailableComponents.has(componentName)) {
+                    valid.push(componentName);
+                }
+                else {
+                    invalid.push(componentName);
+                    // Find a similar component
+                    const suggestion = this.findSimilarComponent(componentName, Array.from(this.validateAvailableComponents));
+                    if (suggestion) {
+                        suggestions.set(componentName, suggestion);
+                    }
+                }
+            }
+            return { valid, invalid, suggestions };
+        }
+        // Fallback to discovered components if no validation set
+        const discovered = Array.from(this.discoveredComponents.keys());
+        const valid = componentNames.filter(name => this.discoveredComponents.has(name));
+        const invalid = componentNames.filter(name => !this.discoveredComponents.has(name));
+        const suggestions = new Map();
+        for (const invalidName of invalid) {
+            const suggestion = this.findSimilarComponent(invalidName, discovered);
+            if (suggestion) {
+                suggestions.set(invalidName, suggestion);
+            }
+        }
+        return { valid, invalid, suggestions };
+    }
+    /**
+     * Find a similar component name
+     */
+    findSimilarComponent(targetName, availableComponents) {
+        if (!targetName || typeof targetName !== 'string') {
+            return null;
+        }
+        const targetLower = targetName.toLowerCase();
+        // Direct substring matches
+        for (const available of availableComponents) {
+            if (!available || typeof available !== 'string') {
+                continue;
+            }
+            const availableLower = available.toLowerCase();
+            if (availableLower.includes(targetLower) || targetLower.includes(availableLower)) {
+                return available;
+            }
+        }
+        // Special case mappings for common mistakes
+        const commonMappings = {
+            'stack': ['BlockStack', 'InlineStack', 'LegacyStack'],
+            'layout': ['Layout', 'Box'],
+            'container': ['Box', 'Layout'],
+            'grid': ['Grid', 'InlineGrid'],
+            'text': ['Text'],
+            'button': ['Button'],
+            'card': ['Card', 'LegacyCard']
+        };
+        const mapping = commonMappings[targetLower];
+        if (mapping) {
+            for (const suggestion of mapping) {
+                if (availableComponents.includes(suggestion)) {
+                    return suggestion;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Get the available component names for validation
+     */
+    getAvailableComponentNames() {
+        if (this.validateAvailableComponents.size > 0) {
+            return Array.from(this.validateAvailableComponents).sort();
+        }
+        return Array.from(this.discoveredComponents.keys()).sort();
     }
 }

package/dist/story-generator/generateStory.js

@@ -1,14 +1,18 @@
 import fs from 'fs';
 import path from 'path';
-import { STORY_UI_CONFIG } from '../story-ui.config.js';
 function slugify(str) {
     return str
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
         .replace(/^-+|-+$/g, '');
 }
-export function generateStory({ fileContents, fileName }) {
-    const outPath = path.join(STORY_UI_CONFIG.generatedStoriesPath, fileName);
+export function generateStory({ fileContents, fileName, config }) {
+    const outPath = path.join(config.generatedStoriesPath, fileName);
+    // Ensure the directory exists
+    const dir = path.dirname(outPath);
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
     fs.writeFileSync(outPath, fileContents, 'utf-8');
     return outPath;
 }