@tpitre/story-ui 4.7.0 → 4.8.0

package/dist/story-generator/framework-adapters/react-adapter.js

@@ -112,17 +112,54 @@ export const MyStory: Story = {
 IMPORTANT: Without ChakraProvider, you will see "useContext returned undefined" errors.
 `;
         }
+        // Build import instructions based on importStyle
+        const importPath = config.importPath || 'your-library';
+        const useIndividualImports = config.importStyle === 'individual';
+        let importInstructions;
+        let additionalImportRules;
+        if (useIndividualImports) {
+            importInstructions = `MANDATORY IMPORTS - First lines of every story file:
+1. import React from 'react';
+2. import type { Meta, StoryObj } from '@storybook/react';
+3. import { ComponentName } from '${importPath}/component-name';  // INDIVIDUAL FILE IMPORTS REQUIRED
+
+🚫 INDIVIDUAL FILE IMPORTS REQUIRED 🚫
+This library does NOT have a barrel export. Each component MUST be imported from its own file:
+- import { Button } from '${importPath}/button';
+- import { Card, CardHeader, CardContent } from '${importPath}/card';
+- import { Dialog, DialogTrigger, DialogContent } from '${importPath}/dialog';
+
+WRONG - DO NOT USE (will cause "Failed to fetch dynamically imported module" error):
+- import { Button, Card, Dialog } from '${importPath}';  // ❌ NO BARREL EXPORT EXISTS
+
+File naming convention:
+- Components are PascalCase: Button, AlertDialog, NavigationMenu
+- Files are kebab-case: button, alert-dialog, navigation-menu
+- Sub-components share files: CardHeader → card, DialogTrigger → dialog`;
+            additionalImportRules = `- 🚫 INDIVIDUAL IMPORTS REQUIRED: Each component from its own file
+- Sub-components share the same file (CardHeader, CardContent → '${importPath}/card')
+- File names use kebab-case (AlertDialog → alert-dialog)`;
+        }
+        else {
+            importInstructions = `MANDATORY IMPORTS - First lines of every story file:
+1. import React from 'react';
+2. import type { Meta, StoryObj } from '@storybook/react';
+3. import { ComponentName } from '${importPath}';`;
+            additionalImportRules = '';
+        }
+        // Build the example import based on importStyle
+        const exampleImport = useIndividualImports
+            ? `import { Button } from '${importPath}/button';`
+            : `import { Button } from '${importPath}';`;
         return `You are an expert React developer creating Storybook stories using CSF 3.0 format.
 Use ONLY the React components from the ${componentSystemName} listed below.
 
-MANDATORY IMPORTS - First lines of every story file:
-1. import React from 'react';
-2. import type { Meta, StoryObj } from '@storybook/react';
-3. import { ComponentName } from '${config.importPath || 'your-library'}';
+${importInstructions}
 
 ${typescript ? 'Use TypeScript with proper type annotations.' : 'Use JavaScript.'}
 ${chakraInstructions}
 COMPONENT IMPORT RULES:
+${additionalImportRules}
 - ONLY import components listed in the "Available Components" section
 - Use the EXACT import path shown after each component name
 - Components not in the list DO NOT EXIST
@@ -141,7 +178,7 @@ Example structure:
 \`\`\`tsx
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '${config.importPath || 'your-library'}';
+${exampleImport}
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -179,6 +216,19 @@ ${this.getCommonRules()}`;
     }
     generateExamples(config) {
         const lib = config.importPath || 'your-library';
+        const useIndividualImports = config.importStyle === 'individual';
+        // Generate import statements based on importStyle
+        let singleComponentImport;
+        let multiComponentImport;
+        if (useIndividualImports) {
+            singleComponentImport = `import { Button } from '${lib}/button';`;
+            multiComponentImport = `import { Card } from '${lib}/card';
+import { Button } from '${lib}/button';`;
+        }
+        else {
+            singleComponentImport = `import { Button } from '${lib}';`;
+            multiComponentImport = `import { Card, Button, Text } from '${lib}';`;
+        }
         return `
 ## Example Stories
 
@@ -186,7 +236,7 @@ ${this.getCommonRules()}`;
 \`\`\`tsx
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '${lib}';
+${singleComponentImport}
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -217,7 +267,7 @@ export const Primary: Story = {
 \`\`\`tsx
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Card, Button, Text } from '${lib}';
+${multiComponentImport}
 
 const meta: Meta = {
   title: 'Examples/Card Layout',
@@ -232,8 +282,8 @@ export const ProductCard: Story = {
   render: () => (
     <Card style={{ width: 300 }}>
       <img src="https://picsum.photos/300/200" alt="Product" />
-      <Text variant="heading">Product Name</Text>
-      <Text>$99.00</Text>
+      <div>Product Name</div>
+      <div>$99.00</div>
       <Button variant="primary">Add to Cart</Button>
     </Card>
   ),
@@ -243,6 +293,7 @@ export const ProductCard: Story = {
     }
     generateSampleStory(config, components) {
         const lib = config.importPath || 'your-library';
+        const useIndividualImports = config.importStyle === 'individual';
         const firstComponent = components[0];
         if (!firstComponent) {
             return `
@@ -262,10 +313,17 @@ export const Default: Story = {
 };
 `;
         }
+        // Convert PascalCase to kebab-case for individual imports
+        const kebabName = firstComponent.name
+            .replace(/([a-z])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+        const importStatement = useIndividualImports
+            ? `import { ${firstComponent.name} } from '${lib}/${kebabName}';`
+            : `import { ${firstComponent.name} } from '${lib}';`;
         return `
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ${firstComponent.name} } from '${lib}';
+${importStatement}
 
 const meta: Meta<typeof ${firstComponent.name}> = {
   title: 'Components/${firstComponent.name}',

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

@@ -30,10 +30,6 @@ export declare class WebComponentsAdapter extends BaseFrameworkAdapter {
     generateExamples(config: StoryUIConfig): string;
     generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
     getStoryTemplate(options?: StoryGenerationOptions): string;
-    /**
-     * Convert PascalCase to kebab-case
-     */
-    private toKebabCase;
     /**
      * Post-process Web Components stories
      */

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

@@ -1 +1 @@
-{"version":3,"file":"web-components-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/web-components-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,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,oBAAqB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAoB;IAChD,QAAQ,CAAC,IAAI,oBAAoB;IACjC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAoE1E;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA4FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0G/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA8CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAuCzC;;;;;;;;OAQG;IACH,OAAO,CAAC,yBAAyB;IAiCjC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAYV;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,oBAAoB,CAEjE"}
+{"version":3,"file":"web-components-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/web-components-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,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,oBAAqB,SAAQ,oBAAoB;IAC5D,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAoB;IAChD,QAAQ,CAAC,IAAI,oBAAoB;IACjC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAoE1E;;OAEG;IACH,OAAO,CAAC,eAAe;IAOvB,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA4FT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0G/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA8CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAwB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAuCzC;;;;;;;;OAQG;IACH,OAAO,CAAC,yBAAyB;IAiCjC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAYV;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,oBAAoB,CAEjE"}

package/dist/story-generator/framework-adapters/web-components-adapter.js

@@ -352,15 +352,7 @@ export const Default: Story = {
 };
 `;
     }
-    /**
-     * Convert PascalCase to kebab-case
-     */
-    toKebabCase(str) {
-        return str
-            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-            .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-            .toLowerCase();
-    }
+    // toKebabCase inherited from BaseFrameworkAdapter
     /**
      * Post-process Web Components stories
      */

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

@@ -1,3 +1,26 @@
+/**
+ * Interface for discovered component data
+ * This matches the DiscoveredComponent interface from componentDiscovery.ts
+ */
+export interface ComponentInfo {
+    name: string;
+    filePath: string;
+}
+/**
+ * Fix barrel imports to individual file imports
+ * DESIGN-SYSTEM AGNOSTIC: Uses actual component discovery data
+ *
+ * Converts: import { Button, Card, CardHeader } from '@/components/ui';
+ * To: import { Button } from '@/components/ui/button';
+ *     import { Card, CardHeader } from '@/components/ui/card';
+ *
+ * @param code - The generated story code
+ * @param importPath - The import path alias (e.g., '@/components/ui')
+ * @param importStyle - Import style ('individual' or 'barrel')
+ * @param componentsPath - Optional: Actual filesystem path (e.g., './src/components/ui')
+ * @param discoveredComponents - Optional: Array of discovered components with file paths
+ */
+export declare function fixBarrelImports(code: string, importPath: string, importStyle?: string, componentsPath?: string, discoveredComponents?: ComponentInfo[]): string;
 /**
  * Post-process generated stories to fix common issues
  * This module is completely design-system agnostic

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

@@ -1 +1 @@
-{"version":3,"file":"postProcessStory.d.ts","sourceRoot":"","sources":["../../story-generator/postProcessStory.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAkB1E"}
+{"version":3,"file":"postProcessStory.d.ts","sourceRoot":"","sources":["../../story-generator/postProcessStory.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAyDD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE,MAAM,EACvB,oBAAoB,CAAC,EAAE,aAAa,EAAE,GACrC,MAAM,CA2FR;AASD;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAkB1E"}

package/dist/story-generator/postProcessStory.js

@@ -1,4 +1,138 @@
 import { logger } from './logger.js';
+/**
+ * Convert PascalCase to kebab-case
+ * Used as fallback when component is not in discovery
+ */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Normalize a file path for comparison
+ * Removes leading ./ and trailing extensions
+ */
+function normalizePath(filePath) {
+    return filePath
+        .replace(/^\.\//, '') // Remove leading ./
+        .replace(/\.(tsx?|jsx?|vue|svelte)$/, ''); // Remove extension
+}
+/**
+ * Build a map of component names to their import paths
+ * Uses actual discovery data rather than hardcoded patterns
+ */
+function buildComponentToImportMap(discoveredComponents, componentsPath, importPath) {
+    const componentMap = new Map();
+    // Normalize the componentsPath for comparison
+    const normalizedComponentsPath = normalizePath(componentsPath);
+    for (const component of discoveredComponents) {
+        const normalizedFilePath = normalizePath(component.filePath);
+        // Check if this component is from our configured components path
+        if (normalizedFilePath.startsWith(normalizedComponentsPath)) {
+            // Extract the relative path after componentsPath
+            const relativePath = normalizedFilePath.slice(normalizedComponentsPath.length);
+            // Remove leading slash if present
+            const cleanRelativePath = relativePath.replace(/^\//, '');
+            // Build the import path
+            const componentImportPath = cleanRelativePath
+                ? `${importPath}/${cleanRelativePath}`
+                : importPath;
+            componentMap.set(component.name, componentImportPath);
+            logger.log(`[DISCOVERY] ${component.name} -> ${componentImportPath}`);
+        }
+    }
+    return componentMap;
+}
+/**
+ * Fix barrel imports to individual file imports
+ * DESIGN-SYSTEM AGNOSTIC: Uses actual component discovery data
+ *
+ * Converts: import { Button, Card, CardHeader } from '@/components/ui';
+ * To: import { Button } from '@/components/ui/button';
+ *     import { Card, CardHeader } from '@/components/ui/card';
+ *
+ * @param code - The generated story code
+ * @param importPath - The import path alias (e.g., '@/components/ui')
+ * @param importStyle - Import style ('individual' or 'barrel')
+ * @param componentsPath - Optional: Actual filesystem path (e.g., './src/components/ui')
+ * @param discoveredComponents - Optional: Array of discovered components with file paths
+ */
+export function fixBarrelImports(code, importPath, importStyle, componentsPath, discoveredComponents) {
+    // Early return if not using individual imports
+    if (importStyle !== 'individual') {
+        return code;
+    }
+    logger.log('🔧 Fixing barrel imports to individual file imports (design-system agnostic)');
+    logger.log(`[DEBUG] importPath: ${importPath}`);
+    logger.log(`[DEBUG] componentsPath: ${componentsPath || 'not provided'}`);
+    logger.log(`[DEBUG] discoveredComponents count: ${discoveredComponents?.length || 0}`);
+    // Build component to import path mapping from discovery data
+    let componentToImport = null;
+    if (componentsPath && discoveredComponents && discoveredComponents.length > 0) {
+        componentToImport = buildComponentToImportMap(discoveredComponents, componentsPath, importPath);
+        logger.log(`[DEBUG] Built component map with ${componentToImport.size} entries`);
+    }
+    // Match imports from the barrel path (without a subpath)
+    // e.g., import { Button, Card } from '@/components/ui';
+    const barrelImportRegex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${escapeRegExp(importPath)}['"];?`, 'g');
+    logger.log(`[DEBUG] regex pattern: ${barrelImportRegex.source}`);
+    let processedCode = code;
+    let match;
+    let foundMatches = false;
+    while ((match = barrelImportRegex.exec(code)) !== null) {
+        foundMatches = true;
+        const fullMatch = match[0];
+        const componentList = match[1];
+        logger.log(`[DEBUG] Found match: "${fullMatch}"`);
+        logger.log(`[DEBUG] Component list: "${componentList}"`);
+        // Parse component names
+        const components = componentList
+            .split(',')
+            .map(c => c.trim())
+            .filter(c => c.length > 0);
+        logger.log(`[DEBUG] Parsed components: ${components.join(', ')}`);
+        // Group components by their import path
+        const groupedByImportPath = new Map();
+        for (const component of components) {
+            let componentImportPath;
+            if (componentToImport && componentToImport.has(component)) {
+                // Use discovery-based mapping
+                componentImportPath = componentToImport.get(component);
+                logger.log(`[DISCOVERY] ${component} -> ${componentImportPath}`);
+            }
+            else {
+                // Fallback: Use simple PascalCase to kebab-case conversion
+                // This handles components not found in discovery
+                const fileName = toKebabCase(component);
+                componentImportPath = `${importPath}/${fileName}`;
+                logger.log(`[FALLBACK] ${component} -> ${componentImportPath} (not in discovery)`);
+            }
+            if (!groupedByImportPath.has(componentImportPath)) {
+                groupedByImportPath.set(componentImportPath, []);
+            }
+            groupedByImportPath.get(componentImportPath).push(component);
+        }
+        // Build individual imports
+        const individualImports = Array.from(groupedByImportPath.entries())
+            .map(([path, comps]) => {
+            return `import { ${comps.join(', ')} } from '${path}';`;
+        })
+            .join('\n');
+        logger.log(`[DEBUG] Replacement: "${individualImports}"`);
+        // Replace the barrel import with individual imports
+        processedCode = processedCode.replace(fullMatch, individualImports);
+        logger.log(`✅ Converted barrel import to ${groupedByImportPath.size} individual import(s)`);
+    }
+    if (!foundMatches) {
+        logger.log('[DEBUG] No barrel imports found to fix');
+    }
+    logger.log(`[DEBUG] First 500 chars of processed code: ${processedCode.substring(0, 500)}`);
+    return processedCode;
+}
+/**
+ * Escape special regex characters
+ */
+function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
 /**
  * Post-process generated stories to fix common issues
  * This module is completely design-system agnostic

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

@@ -1 +1 @@
-{"version":3,"file":"promptGenerator.d.ts","sourceRoot":"","sources":["../../story-generator/promptGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAEL,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAyOvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvF,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAcxG;AAqTD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CA6D1E;AA0MD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8JjB;AAED;;;GAGG;AACH,wBAAsB,4BAA4B,CAChD,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,oBAAoB,CAAC,CAqB/B;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAiHjB;AA4ED;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAIzF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAG9E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,EAAE,CAGxD"}
+{"version":3,"file":"promptGenerator.d.ts","sourceRoot":"","sources":["../../story-generator/promptGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAY,MAAM,yBAAyB,CAAC;AAIxE,OAAO,EAEL,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAyOvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvF,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAkBxG;AA6bD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CA6D1E;AAyND;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CAyKjB;AAED;;;GAGG;AACH,wBAAsB,4BAA4B,CAChD,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,oBAAoB,CAAC,CAqB/B;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,MAAM,CAAC,CA4HjB;AA4ED;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAIzF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAG9E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,EAAE,CAGxD"}

package/dist/story-generator/promptGenerator.js

@@ -169,6 +169,9 @@ export function generatePrompt(config, components) {
     const examples = generateExamples(config);
     const systemPrompt = generateSystemPrompt(config);
     const sampleStory = config.sampleStory || generateDefaultSampleStory(config, components);
+    // DEBUG: Log component reference to see import paths
+    console.log('[DEBUG] Import style:', config.importStyle);
+    console.log('[DEBUG] Sample component reference (first 500 chars):', componentReference.substring(0, 500));
     return {
         systemPrompt,
         componentReference,
@@ -306,6 +309,46 @@ CRITICAL IMPORT RULES:
 import type { Meta, StoryObj } from '${storybookFramework}';
 import { ComponentName } from '[your-import-path]';`;
     }
+    // Determine import style - individual file imports vs barrel imports
+    const useIndividualImports = config.importStyle === 'individual';
+    // Generate appropriate import instruction based on importStyle
+    let importInstructionText;
+    let importExampleText;
+    if (useIndividualImports) {
+        // Individual file imports - each component from its own file
+        importInstructionText = `║  IMPORT STYLE: INDIVIDUAL FILE IMPORTS                             ║
+╠════════════════════════════════════════════════════════════════════╣
+║  Each component MUST be imported from its own file:                ║
+║  import { Button } from '${importPath}/button';${' '.repeat(Math.max(0, 20 - importPath.length))}║
+║  import { Card, CardHeader } from '${importPath}/card';${' '.repeat(Math.max(0, 11 - importPath.length))}║
+║  import { Input } from '${importPath}/input';${' '.repeat(Math.max(0, 21 - importPath.length))}║
+╠════════════════════════════════════════════════════════════════════╣
+║  🚫 DO NOT use barrel imports like:                                ║
+║  import { Button, Card } from '${importPath}';${' '.repeat(Math.max(0, 18 - importPath.length))}║`;
+        importExampleText = `
+🔴 CRITICAL: INDIVIDUAL FILE IMPORTS REQUIRED 🔴
+This library does NOT have a barrel export (no index.ts). Each component MUST be imported from its own file!
+
+CORRECT import pattern:
+import { Button } from '${importPath}/button';
+import { Card, CardHeader, CardContent } from '${importPath}/card';
+import { Dialog, DialogContent, DialogTrigger } from '${importPath}/dialog';
+import { Input } from '${importPath}/input';
+
+WRONG - DO NOT USE (will cause "Failed to fetch dynamically imported module" error):
+import { Button, Card, Input } from '${importPath}';
+
+File naming convention:
+- Component names are PascalCase: Button, AlertDialog, NavigationMenu
+- File names are kebab-case: button, alert-dialog, navigation-menu
+- Sub-components share the same file: CardHeader, CardContent → card`;
+    }
+    else {
+        // Barrel imports - all components from single entry point (default)
+        importInstructionText = `║  ALL component imports MUST use:                                   ║
+║  import { ComponentName } from '${importPath}';${' '.repeat(Math.max(0, 32 - importPath.length))}║`;
+        importExampleText = '';
+    }
     return `
 ╔════════════════════════════════════════════════════════════════════╗
 ║                    🚨 MANDATORY LIBRARY CONSTRAINT 🚨                ║
@@ -314,8 +357,7 @@ import { ComponentName } from '[your-import-path]';`;
 ║  IMPORT PATH:      ${importPath.padEnd(46)}║
 ║  FRAMEWORK:        ${framework.padEnd(46)}║
 ╠════════════════════════════════════════════════════════════════════╣
-║  ALL component imports MUST use:                                   ║
-║  import { ComponentName } from '${importPath}';${' '.repeat(Math.max(0, 32 - importPath.length))}║
+${importInstructionText}
 ╠════════════════════════════════════════════════════════════════════╣
 ║  🚫 FORBIDDEN LIBRARIES - DO NOT USE:                              ║
 ║  - tamagui, @tamagui/core (NEVER USE)                              ║
@@ -323,7 +365,7 @@ import { ComponentName } from '[your-import-path]';`;
 ║  - @mui/material (unless configured)                               ║
 ║  - antd (unless configured)                                        ║
 ║  - Any library NOT matching: ${importPath.padEnd(36)}║
-╚════════════════════════════════════════════════════════════════════╝
+╚════════════════════════════════════════════════════════════════════╝${importExampleText}
 ${frameworkImportInstructions}
 
 🔴 CRITICAL RULE: NEVER use children in args for ANY component or layout. Always use render functions. 🔴
@@ -434,16 +476,104 @@ function generateComponentReference(components, config) {
     }
     return reference;
 }
+/**
+ * Convert PascalCase to kebab-case
+ */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Get the base component name (for sub-components like CardHeader, returns 'Card')
+ */
+function getBaseComponentName(componentName) {
+    // Common sub-component patterns in shadcn/ui and other design systems
+    const subComponentPatterns = [
+        /^(Card)(Header|Footer|Title|Action|Description|Content)$/,
+        /^(Dialog)(Close|Content|Description|Footer|Header|Overlay|Portal|Title|Trigger)$/,
+        /^(AlertDialog)(Portal|Overlay|Trigger|Content|Header|Footer|Title|Description|Action|Cancel)$/,
+        /^(DropdownMenu)(Portal|Trigger|Content|Group|Label|Item|CheckboxItem|RadioGroup|RadioItem|Separator|Shortcut|Sub|SubTrigger|SubContent)$/,
+        /^(ContextMenu)(Trigger|Content|Item|CheckboxItem|RadioItem|Label|Separator|Shortcut|Group|Portal|Sub|SubContent|SubTrigger|RadioGroup)$/,
+        /^(NavigationMenu)(List|Item|Content|Trigger|Link|Indicator|Viewport)$/,
+        /^(Select)(Content|Group|Item|Label|ScrollDownButton|ScrollUpButton|Separator|Trigger|Value)$/,
+        /^(Menubar)(Portal|Menu|Trigger|Content|Group|Separator|Label|Item|Shortcut|CheckboxItem|RadioGroup|RadioItem|Sub|SubTrigger|SubContent)$/,
+        /^(Accordion)(Item|Trigger|Content)$/,
+        /^(Tabs)(List|Trigger|Content)$/,
+        /^(Sheet)(Trigger|Close|Content|Header|Footer|Title|Description)$/,
+        /^(Avatar)(Image|Fallback)$/,
+        /^(Breadcrumb)(List|Item|Link|Page|Separator|Ellipsis)$/,
+        /^(Command)(Dialog|Input|List|Empty|Group|Item|Shortcut|Separator)$/,
+        /^(HoverCard)(Trigger|Content)$/,
+        /^(Popover)(Trigger|Content|Anchor)$/,
+        /^(Collapsible)(Trigger|Content)$/,
+        /^(Drawer)(Portal|Overlay|Trigger|Close|Content|Header|Footer|Title|Description)$/,
+        /^(RadioGroup)(Item)$/,
+        /^(ToggleGroup)(Item)$/,
+        /^(Tooltip)(Trigger|Content|Provider)$/,
+        /^(Table)(Header|Body|Footer|Head|Row|Cell|Caption)$/,
+        /^(InputOTP)(Group|Slot|Separator)$/,
+        /^(Resizable)(PanelGroup|Panel|Handle)$/,
+        /^(ScrollArea|ScrollBar)$/,
+        /^(Pagination)(Content|Link|Item|Previous|Next|Ellipsis)$/,
+        /^(Alert)(Title|Description)$/,
+    ];
+    for (const pattern of subComponentPatterns) {
+        const match = componentName.match(pattern);
+        if (match) {
+            return match[1];
+        }
+    }
+    return componentName;
+}
 /**
  * Formats a single component reference
  */
 function formatComponentReference(component, config) {
     let reference = `- ${component.name}`;
-    // Add import path information if available
+    // Add import path information
+    let importPath;
     if (component.__componentPath) {
-        reference += ` (import from '${component.__componentPath}')`;
+        importPath = component.__componentPath;
     }
-    if (component.props && component.props.length > 0) {
+    else if (config.importStyle === 'individual') {
+        // Generate individual import path based on component name
+        const basePath = config.importPath || 'unknown';
+        const baseComponentName = getBaseComponentName(component.name);
+        const kebabName = toKebabCase(baseComponentName);
+        importPath = `${basePath}/${kebabName}`;
+    }
+    else {
+        importPath = config.importPath || '';
+    }
+    if (importPath) {
+        reference += ` (import from '${importPath}')`;
+    }
+    // Use rich prop types if available, otherwise fall back to simple prop names
+    if (component.propTypes && component.propTypes.length > 0) {
+        reference += '\n    Props:';
+        for (const prop of component.propTypes) {
+            let propLine = `\n      - ${prop.name}`;
+            // Add type information
+            if (prop.type !== 'unknown') {
+                propLine += `: ${prop.type}`;
+            }
+            // Add options for select/radio types
+            if (prop.options && prop.options.length > 0) {
+                const optionsStr = prop.options.slice(0, 5).map(o => `"${o}"`).join(' | ');
+                propLine += ` [${optionsStr}${prop.options.length > 5 ? '...' : ''}]`;
+            }
+            // Add description
+            if (prop.description) {
+                propLine += ` - ${prop.description}`;
+            }
+            // Add default value
+            if (prop.defaultValue !== undefined) {
+                propLine += ` (default: ${JSON.stringify(prop.defaultValue)})`;
+            }
+            reference += propLine;
+        }
+    }
+    else if (component.props && component.props.length > 0) {
+        // Fall back to simple prop names
         reference += `: Props: ${component.props.join(', ')}`;
     }
     if (component.slots && component.slots.length > 0) {
@@ -608,6 +738,8 @@ function generateExamples(config) {
  */
 function generateImportStatements(config, components, componentNames) {
     const importMap = new Map();
+    // Check if individual file imports are configured (for libraries without barrel exports)
+    const useIndividualImports = config.importStyle === 'individual';
     for (const componentName of componentNames) {
         // Find the component in our discovered components to get its specific import path
         const component = components.find(c => c.name === componentName);
@@ -619,8 +751,20 @@ function generateImportStatements(config, components, componentNames) {
             }
             importMap.get(importPath).push(componentName);
         }
+        else if (useIndividualImports) {
+            // Generate individual file imports for libraries without barrel exports
+            // Group by base component: CardHeader, CardContent -> card.tsx
+            // This pattern works for React (shadcn/ui), Vue (PrimeVue), Angular (Material), Web Components (Shoelace)
+            const baseComponent = getBaseComponentName(componentName);
+            const fileName = toKebabCase(baseComponent);
+            const importPath = `${config.importPath}/${fileName}`;
+            if (!importMap.has(importPath)) {
+                importMap.set(importPath, []);
+            }
+            importMap.get(importPath).push(componentName);
+        }
         else {
-            // Fallback to the main package import path
+            // Use barrel import (default) - import all from single entry point
             if (!importMap.has(config.importPath)) {
                 importMap.set(config.importPath, []);
             }
@@ -629,8 +773,8 @@ function generateImportStatements(config, components, componentNames) {
     }
     // Generate import statements
     const importLines = [];
-    for (const [importPath, components] of importMap) {
-        importLines.push(`import { ${components.join(', ')} } from '${importPath}';`);
+    for (const [importPath, comps] of importMap) {
+        importLines.push(`import { ${comps.join(', ')} } from '${importPath}';`);
     }
     return importLines.join('\n');
 }
@@ -815,7 +959,12 @@ export async function buildClaudePrompt(userPrompt, config, components) {
         frameworkFirstLineRules = `🚨 FINAL CRITICAL REMINDERS 🚨
 Follow the framework-specific import patterns shown above.`;
     }
-    promptParts.push(`Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', frameworkFirstLineRules, '', 'OTHER CRITICAL RULES:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- Do NOT use prefixes like "Content/", "Components/", or any other section name', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- Check every import against the Available components list before using it', '- FORBIDDEN: Any component not explicitly listed in the Available components section', '- FORBIDDEN: Theme setup components (providers should be configured at the app level, not in individual stories)', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- Never create <img> tags without src attributes', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts that might exceed token limits', '- Ensure all JSX tags are properly closed', '- Story must be complete and syntactically valid', '- CRITICAL: Never put ANY content in args.children - always use render function', '- Use render functions for ALL layouts and component compositions', '- For layouts: DO NOT set component in meta', '- Only set component in meta when showcasing a SINGLE component', '- Use appropriate styling for the component library (design tokens, className, or inline styles as needed)', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
+    // Add import style specific rules
+    const importStyleRules = [];
+    if (config.importStyle === 'individual') {
+        importStyleRules.push(`- 🚫 INDIVIDUAL IMPORTS REQUIRED: Import each component from its own file (e.g., '${config.importPath}/button', NOT '${config.importPath}')`, `- Sub-components share files: CardHeader, CardContent → '${config.importPath}/card'`, '- File names use kebab-case: AlertDialog → alert-dialog, NavigationMenu → navigation-menu');
+    }
+    promptParts.push(`Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', frameworkFirstLineRules, '', 'OTHER CRITICAL RULES:', ...importStyleRules, '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- Do NOT use prefixes like "Content/", "Components/", or any other section name', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- Check every import against the Available components list before using it', '- FORBIDDEN: Any component not explicitly listed in the Available components section', '- FORBIDDEN: Theme setup components (providers should be configured at the app level, not in individual stories)', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- Never create <img> tags without src attributes', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts that might exceed token limits', '- Ensure all JSX tags are properly closed', '- Story must be complete and syntactically valid', '- CRITICAL: Never put ANY content in args.children - always use render function', '- Use render functions for ALL layouts and component compositions', '- For layouts: DO NOT set component in meta', '- Only set component in meta when showcasing a SINGLE component', '- Use appropriate styling for the component library (design tokens, className, or inline styles as needed)', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
     return promptParts.join('\n');
 }
 /**
@@ -913,7 +1062,12 @@ export async function buildFrameworkAwarePrompt(userPrompt, config, components,
         promptParts.push(`${frameworkType.toUpperCase()} SPECIFIC RULES:`);
         promptParts.push(...frameworkRules);
     }
-    promptParts.push('', `Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', 'CRITICAL REMINDERS:', '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts', '- Ensure all tags are properly closed and syntax is valid', '- Story must be complete and syntactically valid', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
+    // Add import style specific rules for framework-aware prompts
+    const importStyleRulesFramework = [];
+    if (config.importStyle === 'individual') {
+        importStyleRulesFramework.push(`- 🚫 INDIVIDUAL IMPORTS REQUIRED: Import each component from its own file (e.g., '${config.importPath}/button', NOT '${config.importPath}')`, `- Sub-components share files: CardHeader, CardContent → '${config.importPath}/card'`, '- File names use kebab-case: AlertDialog → alert-dialog, NavigationMenu → navigation-menu');
+    }
+    promptParts.push('', `Output a complete Storybook story file in TypeScript. Import components as shown in the sample template below. Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', '<rules>', 'CRITICAL REMINDERS:', ...importStyleRulesFramework, '- Story title MUST always start with "Generated/" (e.g., title: "Generated/Recipe Card")', '- ONLY import components that are listed in the "Available components" section', '- ALWAYS use the exact import path shown in parentheses after each component', '- NEVER use main package imports when specific subpath imports are shown', '- Do NOT import story exports - these are NOT real components', '- All images MUST have a src attribute with placeholder URLs (use https://picsum.photos/)', '- MUST use ES modules syntax: "export default meta;" NOT "module.exports = meta;"', '- The file MUST have a default export for the meta object', '- Keep the story concise and focused - avoid overly complex layouts', '- Ensure all tags are properly closed and syntax is valid', '- Story must be complete and syntactically valid', '</rules>', '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
     return promptParts.join('\n');
 }
 /**

package/dist/story-ui.config.d.ts

@@ -81,6 +81,22 @@ export interface StoryUIConfig {
     additionalImports?: AdditionalImport[];
     considerationsPath?: string;
     storybookFramework?: string;
+    /**
+     * Import style for generated stories:
+     * - 'barrel': Use barrel imports from a single entry point (e.g., `import { Button } from 'library'`)
+     * - 'individual': Use individual file imports (e.g., `import { Button } from 'library/button'`)
+     *
+     * Use 'individual' for libraries without barrel exports (index.ts), such as:
+     * - shadcn/ui, Radix Vue, PrimeVue (Vue)
+     * - Angular Material, PrimeNG (Angular)
+     * - Shoelace, Lion (Web Components)
+     *
+     * Use 'barrel' (default) for libraries with barrel exports, such as:
+     * - Chakra UI, Mantine, Ant Design (React)
+     * - Vuetify, Quasar (Vue)
+     * - Skeleton UI (Svelte)
+     */
+    importStyle?: 'barrel' | 'individual';
     designSystemGuidelines?: DesignSystemGuidelines;
     /** Icon imports configuration (auto-detected from package.json or manually configured) */
     iconImports?: IconImportsConfig;