@tpitre/story-ui 2.1.5 → 2.3.0

package/dist/story-generator/enhancedComponentDiscovery.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { DynamicPackageDiscovery } from './dynamicPackageDiscovery.js';
+import { logger } from './logger.js';
 export class EnhancedComponentDiscovery {
     constructor(config) {
         this.discoveredComponents = new Map();
@@ -12,10 +13,10 @@ export class EnhancedComponentDiscovery {
      * Priority: 1. Dynamic Discovery 2. Static Lists 3. Manual Config
      */
     async discoverAll() {
-        console.log('🔍 Starting comprehensive component discovery...');
+        logger.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}`));
+        logger.log(`📁 Found ${sources.length} discovery sources:`, sources.map(s => `${s.type}:${s.path}`));
         for (const source of sources) {
             try {
                 switch (source.type) {
@@ -42,7 +43,7 @@ export class EnhancedComponentDiscovery {
         // 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`);
+        logger.log(`✅ Discovery complete: ${finalComponents.length} components found`);
         // Log summary by source type
         this.logDiscoverySummary(finalComponents);
         return finalComponents;
@@ -64,7 +65,7 @@ export class EnhancedComponentDiscovery {
         // 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)`);
+                logger.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) => {
@@ -82,7 +83,7 @@ export class EnhancedComponentDiscovery {
                 for (const loser of losers) {
                     this.discoveredComponents.delete(loser.name);
                 }
-                console.log(`✅ Kept ${winner.source.type} version of "${name}" from ${winner.source.path}`);
+                logger.log(`✅ Kept ${winner.source.type} version of "${name}" from ${winner.source.path}`);
             }
         }
     }
@@ -97,7 +98,7 @@ export class EnhancedComponentDiscovery {
             acc[sourceType]++;
             return acc;
         }, {});
-        console.log('📊 Component discovery summary:', summary);
+        logger.log('📊 Component discovery summary:', summary);
     }
     /**
  * Get the project root directory from the config
@@ -259,17 +260,9 @@ export class EnhancedComponentDiscovery {
         // 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;
-        }
-        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
+        // Helper function to load known components as fallback
+        const loadFallbackComponents = () => {
+            logger.log(`📋 ${source.path}: Using static component list (design system detected)`);
             const knownComponents = this.getKnownDesignSystemComponents(source.path);
             if (knownComponents.length > 0) {
                 for (const comp of knownComponents) {
@@ -280,13 +273,28 @@ export class EnhancedComponentDiscovery {
                         category: comp.category || this.categorizeComponent(comp.name || '', comp.description || '')
                     });
                 }
+                logger.log(`✅ Loaded ${knownComponents.length} known components for ${source.path}`);
             }
+        };
+        if (!fs.existsSync(packagePath)) {
+            console.warn(`Package ${source.path} not found in node_modules at ${packagePath}`);
+            // Use fallback component list when package is not installed (e.g., in production)
+            loadFallbackComponents();
+            return;
+        }
+        logger.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) {
+            // Fallback to predefined components if dynamic discovery fails
+            loadFallbackComponents();
             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(', ')}`);
+        logger.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);
@@ -309,11 +317,144 @@ export class EnhancedComponentDiscovery {
     }
     /**
      * Get known components for popular design systems
-     * Returns empty array to rely on dynamic discovery
+     * Returns a fallback list when dynamic discovery fails
      */
     getKnownDesignSystemComponents(packageName) {
-        // Return empty array to rely purely on dynamic component discovery
-        // This ensures we test the actual package scanning capabilities
+        // Chakra UI fallback components
+        if (packageName === '@chakra-ui/react') {
+            const basicComponents = [
+                // Layout
+                'Box', 'Flex', 'Grid', 'Stack', 'HStack', 'VStack', 'Container', 'Center', 'Square', 'Circle',
+                'SimpleGrid', 'Wrap', 'WrapItem', 'AspectRatio', 'Spacer', 'Divider',
+                // Typography
+                'Text', 'Heading', 'Badge', 'Code', 'Kbd', 'Mark',
+                // Forms
+                'Button', 'IconButton', 'Input', 'InputGroup', 'InputLeftElement', 'InputRightElement',
+                'Textarea', 'Select', 'Checkbox', 'Radio', 'RadioGroup', 'Switch', 'Slider',
+                'FormControl', 'FormLabel', 'FormHelperText', 'FormErrorMessage',
+                // Feedback
+                'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription', 'Progress', 'Skeleton', 'Spinner',
+                'Toast', 'useToast', 'CircularProgress', 'CircularProgressLabel',
+                // Data Display
+                'Avatar', 'AvatarGroup', 'Card', 'CardHeader', 'CardBody', 'CardFooter',
+                'Image', 'Badge', 'Stat', 'StatLabel', 'StatNumber', 'StatHelpText', 'StatArrow',
+                'Table', 'Thead', 'Tbody', 'Tfoot', 'Tr', 'Th', 'Td', 'TableCaption',
+                // Navigation
+                'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbLink', 'Link', 'LinkBox', 'LinkOverlay',
+                'Tabs', 'TabList', 'TabPanels', 'Tab', 'TabPanel',
+                // Overlay
+                'Modal', 'ModalOverlay', 'ModalContent', 'ModalHeader', 'ModalFooter', 'ModalBody', 'ModalCloseButton',
+                'Drawer', 'DrawerBody', 'DrawerFooter', 'DrawerHeader', 'DrawerOverlay', 'DrawerContent', 'DrawerCloseButton',
+                'Menu', 'MenuButton', 'MenuList', 'MenuItem', 'MenuItemOption', 'MenuGroup', 'MenuOptionGroup', 'MenuDivider',
+                'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverHeader', 'PopoverBody', 'PopoverFooter', 'PopoverArrow', 'PopoverCloseButton',
+                'Tooltip', 'AlertDialog', 'AlertDialogBody', 'AlertDialogFooter', 'AlertDialogHeader', 'AlertDialogContent', 'AlertDialogOverlay',
+                // Disclosure
+                'Accordion', 'AccordionItem', 'AccordionButton', 'AccordionPanel', 'AccordionIcon',
+                'VisuallyHidden', 'Show', 'Hide', 'Collapse',
+                // Media
+                'Icon', 'CloseButton'
+            ];
+            return basicComponents.map(name => ({
+                name,
+                description: `${name} component from Chakra UI`,
+                category: this.categorizeComponent(name, '')
+            }));
+        }
+        // Mantine fallback components
+        if (packageName === '@mantine/core') {
+            const mantineComponents = [
+                // Layout
+                'Container', 'SimpleGrid', 'Grid', 'Group', 'Stack', 'Flex', 'Center', 'Space', 'Divider',
+                'AspectRatio', 'Box', 'AppShell', 'MediaQuery', 'Paper',
+                // Typography
+                'Text', 'Title', 'Anchor', 'Blockquote', 'Code', 'Highlight', 'Mark', 'List',
+                // Buttons & Actions
+                'Button', 'ActionIcon', 'CopyButton', 'FileButton', 'UnstyledButton', 'CloseButton',
+                // Inputs
+                'TextInput', 'NumberInput', 'PasswordInput', 'Textarea', 'Select', 'MultiSelect',
+                'Autocomplete', 'Checkbox', 'Switch', 'Radio', 'Slider', 'RangeSlider', 'Rating',
+                'SegmentedControl', 'ColorInput', 'ColorPicker', 'FileInput', 'JsonInput', 'PinInput',
+                'Chip', 'TransferList', 'NativeSelect',
+                // Navigation
+                'Anchor', 'Breadcrumbs', 'Burger', 'NavLink', 'Pagination', 'Stepper', 'Tabs',
+                // Data Display
+                'Accordion', 'Avatar', 'Badge', 'Card', 'Image', 'BackgroundImage', 'Indicator',
+                'Kbd', 'Spoiler', 'Table', 'ThemeIcon', 'Timeline', 'ColorSwatch',
+                // Overlays
+                'Dialog', 'Drawer', 'Modal', 'LoadingOverlay', 'Popover', 'Tooltip', 'Menu',
+                'HoverCard', 'Affix', 'Overlay',
+                // Feedback
+                'Alert', 'Loader', 'Notification', 'Progress', 'RingProgress', 'Skeleton',
+                // Misc
+                'Portal', 'Transition', 'ScrollArea', 'FocusTrap', 'Input', 'InputWrapper',
+                // Dates (from @mantine/dates)
+                'Calendar', 'DateInput', 'DatePicker', 'DateTimePicker', 'MonthPicker', 'YearPicker'
+            ];
+            return mantineComponents.map(name => ({
+                name,
+                description: `${name} component from Mantine`,
+                category: this.categorizeComponent(name, '')
+            }));
+        }
+        // Material UI fallback components
+        if (packageName === '@mui/material') {
+            const muiComponents = [
+                // Inputs
+                'Autocomplete', 'Button', 'ButtonGroup', 'Checkbox', 'Fab', 'Radio', 'RadioGroup',
+                'Rating', 'Select', 'Slider', 'Switch', 'TextField', 'ToggleButton', 'ToggleButtonGroup',
+                // Data Display
+                'Avatar', 'AvatarGroup', 'Badge', 'Chip', 'Divider', 'Icon', 'List', 'ListItem',
+                'ListItemText', 'ListItemIcon', 'ListItemButton', 'Table', 'TableBody', 'TableCell',
+                'TableContainer', 'TableHead', 'TableRow', 'Tooltip', 'Typography',
+                // Feedback
+                'Alert', 'AlertTitle', 'Backdrop', 'CircularProgress', 'Dialog', 'DialogActions',
+                'DialogContent', 'DialogContentText', 'DialogTitle', 'LinearProgress', 'Skeleton', 'Snackbar',
+                // Surfaces
+                'Accordion', 'AccordionActions', 'AccordionDetails', 'AccordionSummary', 'AppBar',
+                'Card', 'CardActions', 'CardContent', 'CardHeader', 'CardMedia', 'Paper', 'Toolbar',
+                // Navigation
+                'BottomNavigation', 'BottomNavigationAction', 'Breadcrumbs', 'Drawer', 'Link',
+                'Menu', 'MenuItem', 'MenuList', 'Pagination', 'SpeedDial', 'SpeedDialAction',
+                'SpeedDialIcon', 'Stepper', 'Step', 'StepLabel', 'Tabs', 'Tab',
+                // Layout
+                'Box', 'Container', 'Grid', 'Stack', 'ImageList', 'ImageListItem',
+                // Utils
+                'ClickAwayListener', 'Modal', 'NoSsr', 'Popover', 'Popper', 'Portal', 'Collapse', 'Fade', 'Grow', 'Slide', 'Zoom'
+            ];
+            return muiComponents.map(name => ({
+                name,
+                description: `${name} component from Material UI`,
+                category: this.categorizeComponent(name, '')
+            }));
+        }
+        // Ant Design fallback components
+        if (packageName === 'antd') {
+            const antdComponents = [
+                // General
+                'Button', 'FloatButton', 'Icon', 'Typography', 'Text', 'Title', 'Paragraph', 'Link',
+                // Layout
+                'Divider', 'Flex', 'Grid', 'Row', 'Col', 'Layout', 'Header', 'Footer', 'Sider', 'Content', 'Space',
+                // Navigation
+                'Anchor', 'Breadcrumb', 'Dropdown', 'Menu', 'Pagination', 'Steps',
+                // Data Entry
+                'AutoComplete', 'Cascader', 'Checkbox', 'ColorPicker', 'DatePicker', 'Form',
+                'Input', 'InputNumber', 'Mentions', 'Radio', 'Rate', 'Select', 'Slider',
+                'Switch', 'TimePicker', 'Transfer', 'TreeSelect', 'Upload',
+                // Data Display
+                'Avatar', 'Badge', 'Calendar', 'Card', 'Carousel', 'Collapse', 'Descriptions',
+                'Empty', 'Image', 'List', 'Popover', 'QRCode', 'Segmented', 'Statistic',
+                'Table', 'Tabs', 'Tag', 'Timeline', 'Tooltip', 'Tour', 'Tree',
+                // Feedback
+                'Alert', 'Drawer', 'Message', 'Modal', 'Notification', 'Popconfirm', 'Progress',
+                'Result', 'Skeleton', 'Spin', 'Watermark'
+            ];
+            return antdComponents.map(name => ({
+                name,
+                description: `${name} component from Ant Design`,
+                category: this.categorizeComponent(name, '')
+            }));
+        }
+        // Default: return empty array
         return [];
     }
     /**

package/dist/story-generator/framework-adapters/angular-adapter.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Angular Framework Adapter
+ *
+ * Generates Storybook stories for Angular components.
+ * Supports standalone components and module-based components.
+ */
+import { FrameworkType, StoryFramework, StoryGenerationOptions } from './types.js';
+import { BaseFrameworkAdapter } from './base-adapter.js';
+import { StoryUIConfig } from '../../story-ui.config.js';
+import { DiscoveredComponent } from '../componentDiscovery.js';
+export declare class AngularAdapter extends BaseFrameworkAdapter {
+    readonly type: FrameworkType;
+    readonly name = "Angular";
+    readonly supportedStoryFrameworks: StoryFramework[];
+    readonly defaultExtension = ".stories.ts";
+    generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
+    generateExamples(config: StoryUIConfig): string;
+    generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
+    getStoryTemplate(options?: StoryGenerationOptions): string;
+    /**
+     * Convert PascalCase to kebab-case for selectors
+     */
+    private toKebabCase;
+    /**
+     * Post-process Angular stories
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Validate Angular story
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+}
+/**
+ * Factory function
+ */
+export declare function createAngularAdapter(): AngularAdapter;
+//# sourceMappingURL=angular-adapter.d.ts.map

package/dist/story-generator/framework-adapters/angular-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA0HT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA+J/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}