@tpitre/story-ui 2.1.5 → 2.3.0

package/dist/story-generator/documentationLoader.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { glob } from 'glob';
+import { logger } from './logger.js';
 export class DocumentationLoader {
     constructor(projectRoot) {
         this.cache = null;
@@ -32,7 +33,7 @@ export class DocumentationLoader {
         if (this.cache && stats.mtimeMs <= this.lastModified) {
             return this.cache;
         }
-        console.log(`📚 Loading documentation from ${this.docsDir}`);
+        logger.log(`📚 Loading documentation from ${this.docsDir}`);
         const documentation = {
             sources: [],
             guidelines: [],
@@ -58,7 +59,7 @@ export class DocumentationLoader {
             allFiles.push(...matches);
         }
         const files = [...new Set(allFiles)]; // Remove duplicates
-        console.log(`📄 Found ${files.length} documentation files`);
+        logger.log(`📄 Found ${files.length} documentation files`);
         // Process each file
         for (const file of files) {
             // Skip README files as they are instructional, not design system documentation
@@ -82,7 +83,7 @@ export class DocumentationLoader {
         // Cache the results
         this.cache = documentation;
         this.lastModified = stats.mtimeMs;
-        console.log(`✅ Loaded documentation with ${documentation.guidelines.length} guidelines, ${Object.keys(documentation.tokens).length} token categories, ${Object.keys(documentation.patterns).length} patterns`);
+        logger.log(`✅ Loaded documentation with ${documentation.guidelines.length} guidelines, ${Object.keys(documentation.tokens).length} token categories, ${Object.keys(documentation.patterns).length} patterns`);
         return documentation;
     }
     /**

package/dist/story-generator/dynamicPackageDiscovery.d.ts

@@ -0,0 +1,97 @@
+export interface RealPackageComponent {
+    name: string;
+    isComponent: boolean;
+    type: 'function' | 'class' | 'object' | 'unknown';
+    __componentPath?: string;
+}
+export interface PackageExports {
+    components: RealPackageComponent[];
+    allExports: string[];
+    packageVersion: string;
+}
+/**
+ * Dynamically discovers what components are actually available in an installed package
+ */
+export declare class DynamicPackageDiscovery {
+    private packageName;
+    private projectRoot;
+    constructor(packageName: string, projectRoot?: string);
+    /**
+     * Get the real exports from the installed package
+     */
+    getRealPackageExports(): Promise<PackageExports | null>;
+    /**
+     * Require the package safely
+     */
+    private requirePackage;
+    /**
+     * Determine if an export is likely a React component
+     */
+    private isLikelyComponent;
+    /**
+     * Check if a name indicates a utility export (not a component)
+     */
+    private isUtilityExport;
+    /**
+     * Check if a function looks like a React component
+     */
+    private looksLikeReactComponent;
+    /**
+     * Check if an object has component-like properties
+     */
+    private hasComponentLikeProperties;
+    /**
+     * Get the type of an export
+     */
+    private getExportType;
+    /**
+     * Get only the component names that should be used for story generation
+     */
+    getAvailableComponentNames(): Promise<string[]>;
+    /**
+     * Validate that a list of component names are actually available
+     */
+    validateComponentNames(componentNames: string[]): Promise<{
+        valid: string[];
+        invalid: string[];
+        suggestions: Map<string, string>;
+    }>;
+    /**
+     * Find a similar component name
+     */
+    private findSimilarComponent;
+    /**
+     * Alternative discovery method when package imports fail due to CSS
+     * Analyzes package.json exports and TypeScript definitions
+     */
+    private discoverFromPackageStructure;
+    /**
+     * Scan package subdirectories for components (e.g., antd/button, chakra-ui/input)
+     */
+    private scanComponentSubdirectories;
+    /**
+     * Extract component names from TypeScript declaration content
+     */
+    private extractComponentsFromTypings;
+    /**
+     * Check if a name looks like a React component
+     */
+    private isComponentName;
+    /**
+     * Extract component exports from package.json exports field
+     */
+    private extractExportsFromPackageJson;
+    /**
+     * Extract component declarations from TypeScript definition files
+     */
+    private extractExportsFromTypeDefinitions;
+}
+/**
+ * Create a dynamic discovery instance for a package
+ */
+export declare function createDynamicDiscovery(packageName: string, projectRoot?: string): DynamicPackageDiscovery;
+/**
+ * Quick function to get available components for a package
+ */
+export declare function getPackageComponents(packageName: string, projectRoot?: string): Promise<string[]>;
+//# sourceMappingURL=dynamicPackageDiscovery.d.ts.map

package/dist/story-generator/dynamicPackageDiscovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamicPackageDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/dynamicPackageDiscovery.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,oBAAoB,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,uBAAuB;IAClC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;gBAEhB,WAAW,EAAE,MAAM,EAAE,WAAW,GAAE,MAAsB;IAKpE;;OAEG;IACG,qBAAqB,IAAI,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;IA0G7D;;OAEG;YACW,cAAc;IAiD5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA2BzB;;OAEG;IACH,OAAO,CAAC,eAAe;IA4BvB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAyB/B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IASlC;;OAEG;IACH,OAAO,CAAC,aAAa;IA6BrB;;OAEG;IACG,0BAA0B,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;IAYrD;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAyBF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IA2CpC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAiDnC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAoCpC;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyBrC;;OAEG;IACH,OAAO,CAAC,iCAAiC;CA+B1C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,uBAAuB,CAEzG;AAED;;GAEG;AACH,wBAAsB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAGvG"}

package/dist/story-generator/dynamicPackageDiscovery.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { createRequire } from 'module';
+import { logger } from './logger.js';
 /**
  * Dynamically discovers what components are actually available in an installed package
  */
@@ -29,7 +30,7 @@ export class DynamicPackageDiscovery {
             // Try to require the package and inspect its exports
             const packageExports = await this.requirePackage(this.packageName);
             if (!packageExports) {
-                console.log(`🔄 Could not directly import ${this.packageName}, falling back to structure analysis`);
+                logger.log(`🔄 Could not directly import ${this.packageName}, falling back to structure analysis`);
                 // Don't return null here - fall back to structure discovery
             }
             const components = [];
@@ -49,14 +50,14 @@ export class DynamicPackageDiscovery {
                 }
                 // Check if we found any actual components
                 const componentCount = components.filter(c => c.isComponent).length;
-                console.log(`📋 Found ${componentCount} components in main ${this.packageName} export`);
+                logger.log(`📋 Found ${componentCount} components in main ${this.packageName} export`);
                 // If no components found in main export, fall back to structure analysis
                 if (componentCount === 0) {
-                    console.log(`🔄 No components in main export, falling back to structure analysis for ${this.packageName}...`);
+                    logger.log(`🔄 No components in main export, falling back to structure analysis for ${this.packageName}...`);
                     const structureExports = this.discoverFromPackageStructure();
                     if (structureExports) {
                         const structureComponentNames = Object.keys(structureExports);
-                        console.log(`📁 Structure analysis found ${structureComponentNames.length} components`);
+                        logger.log(`📁 Structure analysis found ${structureComponentNames.length} components`);
                         // Replace with structure-discovered components
                         allExports = structureComponentNames;
                         components.length = 0; // Clear the array
@@ -75,7 +76,7 @@ export class DynamicPackageDiscovery {
             }
             else {
                 // Failed to import - fall back to structure analysis
-                console.log(`📁 Import failed, analyzing package structure for ${this.packageName}...`);
+                logger.log(`📁 Import failed, analyzing package structure for ${this.packageName}...`);
                 const structureExports = this.discoverFromPackageStructure();
                 if (structureExports) {
                     allExports = Object.keys(structureExports);
@@ -91,7 +92,7 @@ export class DynamicPackageDiscovery {
                     }
                 }
             }
-            console.log(`✅ Discovered ${components.filter(c => c.isComponent).length} components from ${this.packageName} v${packageVersion}`);
+            logger.log(`✅ Discovered ${components.filter(c => c.isComponent).length} components from ${this.packageName} v${packageVersion}`);
             return {
                 components,
                 allExports,
@@ -118,7 +119,11 @@ export class DynamicPackageDiscovery {
                 // Check if this is a CSS import error (common with compiled design systems)
                 const errorMessage = importError?.message || String(importError);
                 if (errorMessage.includes('.css:') || errorMessage.includes('Unexpected token')) {
-                    console.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                    logger.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                    return this.discoverFromPackageStructure();
+                }
+                if (errorMessage.includes('Invalid hook call') || errorMessage.includes('Hooks can only be called')) {
+                    logger.log(`🔄 ${packageName}: React hooks detected outside component context, using static analysis`);
                     return this.discoverFromPackageStructure();
                 }
                 // Fall back to require (for CommonJS)
@@ -129,17 +134,21 @@ export class DynamicPackageDiscovery {
             }
         }
         catch (error) {
-            // Check if this is a CSS import error 
+            // Check if this is a CSS import error
             const errorMessage = error?.message || String(error);
             if (errorMessage.includes('.css:') || errorMessage.includes('Unexpected token')) {
-                console.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
+                logger.log(`🔄 ${packageName}: CSS detected, using static analysis (normal for design systems)`);
                 return this.discoverFromPackageStructure();
             }
             if (errorMessage.includes('window is not defined')) {
-                console.log(`🔄 ${packageName}: Browser-only component, using static analysis`);
+                logger.log(`🔄 ${packageName}: Browser-only component, using static analysis`);
+                return this.discoverFromPackageStructure();
+            }
+            if (errorMessage.includes('Invalid hook call') || errorMessage.includes('Hooks can only be called')) {
+                logger.log(`🔄 ${packageName}: React hooks detected outside component context, using static analysis`);
                 return this.discoverFromPackageStructure();
             }
-            console.log(`📋 ${packageName}: Dynamic import failed, using static analysis`);
+            logger.log(`📋 ${packageName}: Dynamic import failed, using static analysis`);
             return this.discoverFromPackageStructure();
         }
     }
@@ -335,26 +344,26 @@ export class DynamicPackageDiscovery {
             const packagePath = path.join(this.projectRoot, 'node_modules', this.packageName);
             const packageJsonPath = path.join(packagePath, 'package.json');
             if (!fs.existsSync(packageJsonPath)) {
-                console.log(`📦 No package.json found for ${this.packageName}`);
+                logger.log(`📦 No package.json found for ${this.packageName}`);
                 return null;
             }
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
             const exports = {};
             // Method 1: Analyze package.json exports field
             if (packageJson.exports) {
-                console.log(`📋 Analyzing exports field in ${this.packageName}/package.json`);
+                logger.log(`📋 Analyzing exports field in ${this.packageName}/package.json`);
                 this.extractExportsFromPackageJson(packageJson.exports, exports);
             }
             // Method 2: Look for index.d.ts or main TypeScript declarations
             const typingsPath = packageJson.types || packageJson.typings || './dist/types/index.d.ts';
             const fullTypingsPath = path.join(packagePath, typingsPath);
             if (fs.existsSync(fullTypingsPath)) {
-                console.log(`📋 Analyzing TypeScript declarations for ${this.packageName}`);
+                logger.log(`📋 Analyzing TypeScript declarations for ${this.packageName}`);
                 this.extractExportsFromTypeDefinitions(fullTypingsPath, exports);
             }
             // Method 3: Scan for component subdirectories (for packages like Base Web)
             if (Object.keys(exports).length === 0) {
-                console.log(`📁 Scanning subdirectories for ${this.packageName} components...`);
+                logger.log(`📁 Scanning subdirectories for ${this.packageName} components...`);
                 this.scanComponentSubdirectories(packagePath, exports);
             }
             return Object.keys(exports).length > 0 ? exports : null;
@@ -369,9 +378,9 @@ export class DynamicPackageDiscovery {
      */
     scanComponentSubdirectories(packagePath, result) {
         try {
-            console.log(`🔍 Scanning ${packagePath} for component subdirectories...`);
+            logger.log(`🔍 Scanning ${packagePath} for component subdirectories...`);
             const entries = fs.readdirSync(packagePath, { withFileTypes: true });
-            console.log(`📁 Found ${entries.length} entries in ${packagePath}`);
+            logger.log(`📁 Found ${entries.length} entries in ${packagePath}`);
             let componentDirsFound = 0;
             for (const entry of entries) {
                 if (!entry.isDirectory())
@@ -388,7 +397,7 @@ export class DynamicPackageDiscovery {
                         // Look for component exports (functions/classes starting with uppercase)
                         const componentExports = this.extractComponentsFromTypings(typingsContent);
                         if (componentExports.length > 0) {
-                            console.log(`📦 Found ${componentExports.length} components in ${entry.name}/`);
+                            logger.log(`📦 Found ${componentExports.length} components in ${entry.name}/`);
                             // Add each component to the result
                             for (const componentName of componentExports) {
                                 // Create a mock export function for this component
@@ -404,8 +413,8 @@ export class DynamicPackageDiscovery {
                     }
                 }
             }
-            console.log(`✅ Scanned ${componentDirsFound} component directories for ${this.packageName}`);
-            console.log(`📦 Total components found in subdirectories: ${Object.keys(result).length}`);
+            logger.log(`✅ Scanned ${componentDirsFound} component directories for ${this.packageName}`);
+            logger.log(`📦 Total components found in subdirectories: ${Object.keys(result).length}`);
         }
         catch (error) {
             console.warn(`Failed to scan subdirectories for ${this.packageName}:`, error);
@@ -484,7 +493,7 @@ export class DynamicPackageDiscovery {
                     const componentName = key.replace('./', '').split('/').pop();
                     if (componentName && /^[A-Z]/.test(componentName)) {
                         result[componentName] = `Component_${componentName}`;
-                        console.log(`📍 Found component export: ${componentName}`);
+                        logger.log(`📍 Found component export: ${componentName}`);
                     }
                 }
             }
@@ -512,7 +521,7 @@ export class DynamicPackageDiscovery {
                     const componentName = match[1];
                     if (componentName && /^[A-Z]/.test(componentName)) {
                         result[componentName] = `Component_${componentName}`;
-                        console.log(`📍 Found component in .d.ts: ${componentName}`);
+                        logger.log(`📍 Found component in .d.ts: ${componentName}`);
                     }
                 }
             }

package/dist/story-generator/enhancedComponentDiscovery.d.ts

@@ -0,0 +1,125 @@
+import { DiscoveredComponent } from './componentDiscovery.js';
+import { StoryUIConfig } from '../story-ui.config.js';
+export interface ComponentSource {
+    type: 'npm' | 'local' | 'custom-elements' | 'typescript';
+    path: string;
+    patterns?: string[];
+}
+export interface EnhancedComponent extends DiscoveredComponent {
+    source: ComponentSource;
+    docUrl?: string;
+    examples?: string[];
+    dependencies?: string[];
+    isComposite?: boolean;
+}
+export declare class EnhancedComponentDiscovery {
+    private config;
+    private discoveredComponents;
+    private validateAvailableComponents;
+    constructor(config: StoryUIConfig);
+    /**
+     * Discover components from all available sources
+     * Priority: 1. Dynamic Discovery 2. Static Lists 3. Manual Config
+     */
+    discoverAll(): Promise<EnhancedComponent[]>;
+    /**
+     * Resolve naming conflicts between different sources
+     * Priority: Local > Manual Config > npm packages
+     */
+    private resolveComponentConflicts;
+    /**
+     * Log discovery summary for debugging
+     */
+    private logDiscoverySummary;
+    /**
+ * Get the project root directory from the config
+ */
+    private getProjectRoot;
+    /**
+     * Identify all potential component sources
+     */
+    private identifySources;
+    /**
+     * Auto-discovery removed - now handled by guided installation during init
+     * This function is kept for backward compatibility but does nothing
+     */
+    private addDesignSystemPackages;
+    /**
+     * Check if a package is likely to contain React components (not utilities, types, etc.)
+     */
+    private isLikelyComponentPackage;
+    /**
+   * Discover components from npm packages using dynamic runtime discovery
+   */
+    private discoverFromNpmPackage;
+    /**
+     * Get known components for popular design systems
+     * Returns a fallback list when dynamic discovery fails
+     */
+    private getKnownDesignSystemComponents;
+    /**
+     * Discover components from local files
+     */
+    private discoverFromLocalFiles;
+    /**
+     * Check if a file should be skipped (stories, tests, etc.)
+     */
+    private isNonComponentFile;
+    /**
+     * Check if a component should be skipped based on name or content
+     */
+    private shouldSkipComponent;
+    /**
+     * Find component files recursively
+     */
+    private findComponentFiles;
+    /**
+     * Extract component name from file
+     */
+    private extractComponentName;
+    /**
+     * Extract props from file content
+     */
+    private extractPropsFromFile;
+    /**
+     * Extract slots from content
+     */
+    private extractSlots;
+    /**
+     * Categorize component based on name and content
+     */
+    private categorizeComponent;
+    /**
+     * Discover from custom elements JSON
+     */
+    private discoverFromCustomElements;
+    /**
+     * Extract props from custom element declaration
+     */
+    private extractPropsFromDeclaration;
+    /**
+     * Discover from TypeScript definitions
+     */
+    private discoverFromTypeScript;
+    /**
+     * Apply manual component configurations
+     */
+    private applyManualConfigurations;
+    /**
+     * Validate that component names actually exist in the discovered package
+     */
+    validateComponentNames(componentNames: string[]): Promise<{
+        valid: string[];
+        invalid: string[];
+        suggestions: Map<string, string>;
+    }>;
+    /**
+     * Find a similar component name
+     */
+    private findSimilarComponent;
+    /**
+     * Get the available component names for validation
+     */
+    getAvailableComponentNames(): string[];
+}
+//# sourceMappingURL=enhancedComponentDiscovery.d.ts.map

package/dist/story-generator/enhancedComponentDiscovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhancedComponentDiscovery.d.ts","sourceRoot":"","sources":["../../story-generator/enhancedComponentDiscovery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,iBAAiB,GAAG,YAAY,CAAC;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,qBAAa,0BAA0B;IACrC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,oBAAoB,CAA6C;IACzE,OAAO,CAAC,2BAA2B,CAA0B;gBAEjD,MAAM,EAAE,aAAa;IAIjC;;;OAGG;IACG,WAAW,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;IA2CjD;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAyCjC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAWvB;;GAED;IACH,OAAO,CAAC,cAAc;IAmBtB;;OAEG;IACH,OAAO,CAAC,eAAe;IA6GvB;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAI/B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA6B9B;;KAEC;YACW,sBAAsB;IAsEpC;;;OAGG;IACH,OAAO,CAAC,8BAA8B;IAmJtC;;OAEG;YACW,sBAAsB;IAsCpC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAmB3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA6B1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA0B5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAiBpB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAkC3B;;OAEG;YACW,0BAA0B;IAmCxC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAcnC;;OAEG;YACW,sBAAsB;IAMpC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA4CjC;;OAEG;IACG,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAC9D,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAClC,CAAC;IAwCF;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAwC5B;;OAEG;IACH,0BAA0B,IAAI,MAAM,EAAE;CAMvC"}