@tpitre/story-ui 4.7.0 → 4.8.0

package/dist/story-generator/enhancedComponentDiscovery.js

@@ -654,11 +654,22 @@ export class EnhancedComponentDiscovery {
                 if (this.shouldSkipComponent(componentName, content)) {
                     continue;
                 }
-                const props = this.extractPropsFromFile(content);
+                let props = this.extractPropsFromFile(content);
+                // Always check co-located story file for additional props (argTypes, args)
+                // Story files often define props that aren't in the component source (e.g., disabled, children)
+                const storyProps = this.extractPropsFromStoryFile(file);
+                for (const prop of storyProps) {
+                    if (!props.includes(prop)) {
+                        props.push(prop);
+                    }
+                }
+                // Extract rich prop type information from story file argTypes
+                const propTypes = this.extractRichPropsFromStoryFile(file);
                 this.discoveredComponents.set(componentName, {
                     name: componentName,
                     filePath: file,
                     props,
+                    propTypes: propTypes.length > 0 ? propTypes : undefined,
                     source,
                     description: `${componentName} component`,
                     category: this.categorizeComponent(componentName, content),
@@ -765,6 +776,11 @@ export class EnhancedComponentDiscovery {
     }
     /**
      * Extract props from file content
+     * Supports multiple patterns:
+     * - TypeScript interfaces (interface ButtonProps { variant: ... })
+     * - PropTypes (Component.propTypes = { variant: ... })
+     * - Function parameter destructuring ({ className, variant, ...props }: Props)
+     * - VariantProps from class-variance-authority
      */
     extractPropsFromFile(content) {
         const props = [];
@@ -786,8 +802,452 @@ export class EnhancedComponentDiscovery {
                 props.push(match[1]);
             }
         }
+        // Extract from function parameter destructuring
+        // Matches patterns like:
+        //   function Component({ prop1, prop2, ...rest }: Props)
+        //   const Component = ({ prop1, prop2 }: Props) =>
+        //   export function Component({ prop1, prop2 }: React.ComponentProps<"div">)
+        const destructuringProps = this.extractDestructuredProps(content);
+        for (const prop of destructuringProps) {
+            if (!props.includes(prop)) {
+                props.push(prop);
+            }
+        }
+        // Extract from VariantProps (class-variance-authority pattern)
+        // Matches: VariantProps<typeof buttonVariants>
+        const variantPropsMatch = content.match(/VariantProps<typeof\s+(\w+)>/);
+        if (variantPropsMatch) {
+            const variantsName = variantPropsMatch[1];
+            // Look for the cva definition to extract variant names
+            const cvaMatch = content.match(new RegExp(`${variantsName}\\s*=\\s*cva\\([^,]+,\\s*{\\s*variants:\\s*{([^}]+(?:{[^}]*}[^}]*)*)}`));
+            if (cvaMatch) {
+                const variantsContent = cvaMatch[1];
+                // Extract variant property names (e.g., variant, size)
+                const variantMatches = variantsContent.matchAll(/^\s*(\w+)\s*:\s*{/gm);
+                for (const match of variantMatches) {
+                    if (!props.includes(match[1])) {
+                        props.push(match[1]);
+                    }
+                }
+            }
+        }
+        return props;
+    }
+    /**
+     * Extract props from function parameter destructuring patterns
+     * Works with React, Vue <script setup>, and other frameworks
+     */
+    extractDestructuredProps(content) {
+        const props = [];
+        // Pattern 1: function Component({ prop1, prop2, ...rest }: Type)
+        // Pattern 2: const Component = ({ prop1, prop2 }: Type) =>
+        // Pattern 3: export function Component({ prop1, prop2 }: Type)
+        const functionPatterns = [
+            // function Name({ destructured }: Type)
+            /(?:export\s+)?(?:default\s+)?function\s+[A-Z]\w*\s*\(\s*\{\s*([^}]+)\s*\}\s*:/g,
+            // const Name = ({ destructured }: Type) =>
+            /(?:export\s+)?const\s+[A-Z]\w*\s*=\s*\(\s*\{\s*([^}]+)\s*\}\s*:/g,
+            // const Name: FC<Props> = ({ destructured }) =>
+            /(?:export\s+)?const\s+[A-Z]\w*\s*:\s*\w+(?:<[^>]+>)?\s*=\s*\(\s*\{\s*([^}]+)\s*\}\s*\)/g,
+        ];
+        for (const pattern of functionPatterns) {
+            let match;
+            while ((match = pattern.exec(content)) !== null) {
+                const destructuredContent = match[1];
+                // Extract individual prop names, ignoring spread operator (...rest)
+                const propMatches = destructuredContent.matchAll(/(?:^|,)\s*(?!\.\.\.)([\w]+)(?:\s*=\s*[^,}]+)?(?=\s*[,}]|$)/g);
+                for (const propMatch of propMatches) {
+                    const propName = propMatch[1].trim();
+                    // Skip common internal props and rest patterns
+                    if (propName && !['ref', 'props', 'rest'].includes(propName) && !props.includes(propName)) {
+                        props.push(propName);
+                    }
+                }
+            }
+        }
         return props;
     }
+    /**
+     * Extract props from co-located story file (e.g., Button.stories.tsx)
+     * This is a fallback for components like shadcn/ui that don't use interface Props patterns
+     */
+    extractPropsFromStoryFile(componentPath) {
+        const props = [];
+        // Construct story file path: button.tsx -> button.stories.tsx
+        const dir = path.dirname(componentPath);
+        const ext = path.extname(componentPath);
+        const name = path.basename(componentPath, ext);
+        // Try different story file naming conventions
+        const storyPaths = [
+            path.join(dir, `${name}.stories.tsx`),
+            path.join(dir, `${name}.stories.ts`),
+            path.join(dir, `${name}.story.tsx`),
+            path.join(dir, `${name}.story.ts`),
+        ];
+        let storyContent = '';
+        for (const storyPath of storyPaths) {
+            if (fs.existsSync(storyPath)) {
+                try {
+                    storyContent = fs.readFileSync(storyPath, 'utf-8');
+                    break;
+                }
+                catch {
+                    continue;
+                }
+            }
+        }
+        if (!storyContent) {
+            return props;
+        }
+        // Extract from argTypes: { propName: { control: ..., options: ... } }
+        // Only match prop names followed by `: {` to avoid picking up nested properties like control, options
+        const argTypesMatch = storyContent.match(/argTypes\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/);
+        if (argTypesMatch) {
+            // Match prop names followed by `: {` which indicates argType config object
+            const propMatches = argTypesMatch[1].matchAll(/(\w+)\s*:\s*\{/g);
+            for (const match of propMatches) {
+                // Skip common argTypes meta-properties that shouldn't be props
+                const metaProps = ['control', 'options', 'description', 'table', 'type', 'defaultValue', 'if', 'mapping'];
+                if (!metaProps.includes(match[1]) && !props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
+        // Extract from args: { propName: value }
+        const argsMatches = storyContent.matchAll(/args\s*:\s*\{([^}]+)\}/g);
+        for (const argsMatch of argsMatches) {
+            const argContent = argsMatch[1];
+            const propMatches = argContent.matchAll(/^\s*(\w+)\s*:/gm);
+            for (const match of propMatches) {
+                if (!props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
+        // Extract from render function parameters if they use destructuring
+        // e.g., render: ({ variant, size }) => ...
+        const renderMatches = storyContent.matchAll(/render\s*:\s*\(\s*\{\s*([^}]+)\s*\}\s*\)/g);
+        for (const renderMatch of renderMatches) {
+            const paramContent = renderMatch[1];
+            const propMatches = paramContent.matchAll(/(\w+)(?:\s*,|\s*$)/g);
+            for (const match of propMatches) {
+                if (!props.includes(match[1])) {
+                    props.push(match[1]);
+                }
+            }
+        }
+        return props;
+    }
+    /**
+     * Extract rich prop type information from story file argTypes
+     * Framework-agnostic: works with any Storybook project (React, Vue, Angular, Svelte, etc.)
+     */
+    extractRichPropsFromStoryFile(componentPath) {
+        const propTypes = [];
+        // Construct story file path: button.tsx -> button.stories.tsx
+        const dir = path.dirname(componentPath);
+        const ext = path.extname(componentPath);
+        const name = path.basename(componentPath, ext);
+        // Try different story file naming conventions
+        const storyPaths = [
+            path.join(dir, `${name}.stories.tsx`),
+            path.join(dir, `${name}.stories.ts`),
+            path.join(dir, `${name}.story.tsx`),
+            path.join(dir, `${name}.story.ts`),
+        ];
+        let storyContent = '';
+        for (const storyPath of storyPaths) {
+            if (fs.existsSync(storyPath)) {
+                try {
+                    storyContent = fs.readFileSync(storyPath, 'utf-8');
+                    break;
+                }
+                catch {
+                    continue;
+                }
+            }
+        }
+        if (!storyContent) {
+            return propTypes;
+        }
+        // Parse argTypes block using brace counting for reliable extraction
+        // This handles nested objects properly (e.g., control: { type: 'select' })
+        const argTypesContent = this.extractArgTypesBlock(storyContent);
+        if (argTypesContent) {
+            // Match each prop definition: propName: { ... }
+            // This regex handles nested objects properly
+            const propPattern = /(\w+)\s*:\s*\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}/g;
+            let propMatch;
+            while ((propMatch = propPattern.exec(argTypesContent)) !== null) {
+                const propName = propMatch[1];
+                const propConfig = propMatch[2];
+                // Skip meta-properties that aren't actual props
+                const metaProps = ['control', 'options', 'description', 'table', 'type', 'defaultValue', 'if', 'mapping'];
+                if (metaProps.includes(propName)) {
+                    continue;
+                }
+                // Extract control type
+                let controlType = 'unknown';
+                const controlMatch = propConfig.match(/control\s*:\s*['"]?([\w-]+)['"]?/);
+                const controlObjMatch = propConfig.match(/control\s*:\s*\{\s*type\s*:\s*['"]?([\w-]+)['"]?/);
+                if (controlObjMatch) {
+                    controlType = controlObjMatch[1];
+                }
+                else if (controlMatch) {
+                    controlType = controlMatch[1];
+                }
+                // Map control types to our type system
+                const typeMapping = {
+                    'select': 'select',
+                    'radio': 'radio',
+                    'inline-radio': 'radio',
+                    'boolean': 'boolean',
+                    'number': 'number',
+                    'range': 'number',
+                    'text': 'string',
+                    'color': 'string',
+                    'date': 'string',
+                    'object': 'object',
+                    'array': 'array',
+                    'file': 'object',
+                };
+                const type = typeMapping[controlType] || 'unknown';
+                // Extract options array
+                let options;
+                const optionsMatch = propConfig.match(/options\s*:\s*\[([\s\S]*?)\]/);
+                if (optionsMatch) {
+                    // Parse the options array, handling both quoted and unquoted values
+                    const optionsContent = optionsMatch[1];
+                    options = optionsContent
+                        .split(',')
+                        .map(opt => opt.trim().replace(/^['"]|['"]$/g, ''))
+                        .filter(opt => opt.length > 0);
+                }
+                // Extract description
+                let description;
+                const descMatch = propConfig.match(/description\s*:\s*['"`]([\s\S]*?)['"`]/);
+                if (descMatch) {
+                    description = descMatch[1];
+                }
+                // Extract defaultValue
+                let defaultValue;
+                const defaultMatch = propConfig.match(/defaultValue\s*:\s*(['"][\s\S]*?['"]|[\w]+)/);
+                if (defaultMatch) {
+                    const rawValue = defaultMatch[1].replace(/^['"]|['"]$/g, '');
+                    if (rawValue === 'true')
+                        defaultValue = true;
+                    else if (rawValue === 'false')
+                        defaultValue = false;
+                    else if (!isNaN(Number(rawValue)))
+                        defaultValue = Number(rawValue);
+                    else
+                        defaultValue = rawValue;
+                }
+                propTypes.push({
+                    name: propName,
+                    type,
+                    options,
+                    description,
+                    defaultValue,
+                    control: controlType,
+                });
+            }
+        }
+        // Also check for props in args that might not be in argTypes
+        // Use smarter type inference based on value and prop name patterns
+        const argsMatches = storyContent.matchAll(/args\s*:\s*\{([^}]+)\}/g);
+        for (const argsMatch of argsMatches) {
+            const argsContent = argsMatch[1];
+            // Match prop: value pairs
+            const propValueMatches = argsContent.matchAll(/(\w+)\s*:\s*([^,\n]+)/g);
+            for (const match of propValueMatches) {
+                const propName = match[1];
+                const rawValue = match[2].trim();
+                // Only add if not already in propTypes
+                if (!propTypes.find(p => p.name === propName)) {
+                    // Infer type from value
+                    let inferredType = 'unknown';
+                    let description;
+                    // Check value-based inference
+                    if (rawValue === 'true' || rawValue === 'false') {
+                        inferredType = 'boolean';
+                    }
+                    else if (/^['"`]/.test(rawValue)) {
+                        inferredType = 'string';
+                    }
+                    else if (!isNaN(Number(rawValue)) && rawValue !== '') {
+                        inferredType = 'number';
+                    }
+                    else if (rawValue.startsWith('[')) {
+                        inferredType = 'array';
+                    }
+                    else if (rawValue.startsWith('{')) {
+                        inferredType = 'object';
+                    }
+                    // Check name-based inference for common patterns
+                    const booleanPatterns = ['disabled', 'checked', 'defaultChecked', 'open', 'defaultOpen',
+                        'selected', 'expanded', 'collapsed', 'visible', 'hidden', 'loading', 'error',
+                        'required', 'readonly', 'readOnly', 'active', 'pressed', 'indeterminate',
+                        'asChild', 'modal', 'loop', 'autoFocus', 'closeOnEscape', 'closeOnOutsideClick'];
+                    if (booleanPatterns.some(p => propName.toLowerCase().includes(p.toLowerCase()))) {
+                        inferredType = 'boolean';
+                        description = `Whether the component is ${propName.replace(/^(default|is|has)/, '').toLowerCase()}`;
+                    }
+                    // Name patterns for strings
+                    const stringPatterns = ['placeholder', 'label', 'title', 'description', 'name', 'id',
+                        'className', 'style', 'href', 'src', 'alt', 'value', 'defaultValue'];
+                    if (stringPatterns.some(p => propName.toLowerCase() === p.toLowerCase())) {
+                        if (inferredType === 'unknown')
+                            inferredType = 'string';
+                    }
+                    propTypes.push({
+                        name: propName,
+                        type: inferredType,
+                        description,
+                    });
+                }
+            }
+        }
+        // Phase 3: Scan story code for prop values to infer select types
+        // This catches variants used in JSX/render functions even without argTypes
+        this.inferSelectTypesFromStoryCode(storyContent, propTypes);
+        // Phase 4: Generate better descriptions for common props
+        this.enhancePropDescriptions(propTypes);
+        return propTypes;
+    }
+    /**
+     * Scan story code for prop usage patterns to infer select types
+     * Looks for patterns like: variant="destructive", size='lg', type={value}
+     */
+    inferSelectTypesFromStoryCode(storyContent, propTypes) {
+        // Common props that are typically selects with limited options
+        const selectCandidates = ['variant', 'size', 'type', 'color', 'align', 'position',
+            'orientation', 'side', 'status', 'state', 'mode', 'theme', 'intent', 'severity'];
+        for (const propName of selectCandidates) {
+            const existingProp = propTypes.find(p => p.name === propName);
+            // Skip if already typed as select with options
+            if (existingProp?.type === 'select' && existingProp.options?.length) {
+                continue;
+            }
+            // Find all values used for this prop in JSX and args
+            const values = new Set();
+            // Pattern 1: JSX attribute - propName="value" or propName='value'
+            const jsxPattern = new RegExp(`${propName}=["']([^"']+)["']`, 'g');
+            let match;
+            while ((match = jsxPattern.exec(storyContent)) !== null) {
+                values.add(match[1]);
+            }
+            // Pattern 2: args object - propName: 'value' or propName: "value"
+            const argsPattern = new RegExp(`${propName}\\s*:\\s*["']([^"']+)["']`, 'g');
+            while ((match = argsPattern.exec(storyContent)) !== null) {
+                values.add(match[1]);
+            }
+            // If we found multiple unique values, it's definitely a select
+            if (values.size >= 2) {
+                const options = Array.from(values).sort();
+                if (existingProp) {
+                    // Upgrade existing prop to select
+                    existingProp.type = 'select';
+                    existingProp.options = options;
+                }
+                else {
+                    // Add new prop as select
+                    propTypes.push({
+                        name: propName,
+                        type: 'select',
+                        options,
+                    });
+                }
+            }
+            else if (values.size === 1) {
+                // Single non-default value found - likely a select with default + this value
+                const foundValue = Array.from(values)[0];
+                if (foundValue !== 'default') {
+                    const options = ['default', foundValue];
+                    if (existingProp) {
+                        // Upgrade existing prop to select
+                        existingProp.type = 'select';
+                        existingProp.options = options;
+                    }
+                    else {
+                        propTypes.push({
+                            name: propName,
+                            type: 'select',
+                            options,
+                        });
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Generate better descriptions for common props when not provided
+     */
+    enhancePropDescriptions(propTypes) {
+        const descriptionTemplates = {
+            variant: 'Visual style variant of the component',
+            size: 'Size of the component',
+            disabled: 'Whether the component is disabled',
+            checked: 'Whether the component is checked',
+            defaultChecked: 'Default checked state',
+            open: 'Whether the component is open',
+            defaultOpen: 'Default open state',
+            selected: 'Whether the item is selected',
+            expanded: 'Whether the component is expanded',
+            loading: 'Whether the component is in loading state',
+            error: 'Whether the component is in error state',
+            required: 'Whether the field is required',
+            readOnly: 'Whether the component is read-only',
+            placeholder: 'Placeholder text when empty',
+            label: 'Label text for the component',
+            title: 'Title of the component',
+            description: 'Description text',
+            children: 'Content to render inside the component',
+            className: 'Additional CSS classes',
+            asChild: 'Render as child element for composition',
+            orientation: 'Layout orientation (horizontal/vertical)',
+            align: 'Content alignment',
+            side: 'Side where the component appears',
+            position: 'Position of the component',
+            type: 'Type of the component',
+            color: 'Color variant',
+            intent: 'Intent/purpose variant (info, success, warning, error)',
+            severity: 'Severity level',
+            status: 'Current status',
+            state: 'Current state',
+            mode: 'Operating mode',
+            theme: 'Theme variant',
+        };
+        for (const prop of propTypes) {
+            // Only enhance if description is missing or generic
+            if (!prop.description || prop.description.endsWith(' property')) {
+                const template = descriptionTemplates[prop.name];
+                if (template) {
+                    prop.description = template;
+                }
+            }
+        }
+    }
+    /**
+     * Extract the content of the argTypes block using brace counting
+     * This handles nested objects more reliably than regex
+     */
+    extractArgTypesBlock(content) {
+        const startMatch = content.match(/argTypes\s*:\s*\{/);
+        if (!startMatch || startMatch.index === undefined)
+            return null;
+        const startIndex = startMatch.index + startMatch[0].length;
+        let braceCount = 1;
+        let endIndex = startIndex;
+        for (let i = startIndex; i < content.length && braceCount > 0; i++) {
+            if (content[i] === '{')
+                braceCount++;
+            if (content[i] === '}')
+                braceCount--;
+            endIndex = i;
+        }
+        return content.substring(startIndex, endIndex);
+    }
     /**
      * Extract slots from content
      */

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

@@ -26,10 +26,6 @@ export declare class AngularAdapter extends BaseFrameworkAdapter {
     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
      */

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

@@ -1 +1 @@
-{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-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,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;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAmD1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAuJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAsL/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;CA+CrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}
+{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-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,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;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAmD1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAuJT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAsL/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA8B1D;;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;CA+CrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}

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

@@ -474,15 +474,7 @@ export const Default: Story = {
 };
 `;
     }
-    /**
-     * Convert PascalCase to kebab-case for selectors
-     */
-    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 Angular stories
      */

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

@@ -42,6 +42,14 @@ export declare abstract class BaseFrameworkAdapter implements FrameworkAdapter {
      * Get the import path for a component
      */
     protected getImportPath(component: DiscoveredComponent, config: StoryUIConfig): string;
+    /**
+     * Convert PascalCase to kebab-case
+     */
+    protected toKebabCase(str: string): string;
+    /**
+     * Get the base component name (for sub-components like CardHeader, returns 'Card')
+     */
+    protected getBaseComponentName(componentName: string): string;
     /**
      * Group components by their category
      */

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

@@ -1 +1 @@
-{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,wBAAwB,IAAI,MAAM,EAAE;IAE7C;;;OAGG;IACH,QAAQ,CAAC,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAEnF;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAUT;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CA2DnC"}
+{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,wBAAwB,IAAI,MAAM,EAAE;IAE7C;;;OAGG;IACH,QAAQ,CAAC,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAEnF;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAuBT;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAI1C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM;IAsE7D;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CA2DnC"}

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

@@ -52,8 +52,95 @@ export class BaseFrameworkAdapter {
         if (component.__componentPath) {
             return component.__componentPath;
         }
-        // Fall back to import path from config
-        return config.importPath || 'unknown';
+        const basePath = config.importPath || 'unknown';
+        // If using individual imports, convert component name to kebab-case file path
+        if (config.importStyle === 'individual') {
+            // Find the base component name (for sub-components like CardHeader, use Card)
+            const baseComponentName = this.getBaseComponentName(component.name);
+            const kebabName = this.toKebabCase(baseComponentName);
+            const result = `${basePath}/${kebabName}`;
+            console.log(`[DEBUG] getImportPath: ${component.name} -> ${result} (importStyle=${config.importStyle})`);
+            return result;
+        }
+        console.log(`[DEBUG] getImportPath: ${component.name} -> ${basePath} (importStyle=${config.importStyle})`);
+        // Fall back to import path from config (barrel import)
+        return basePath;
+    }
+    /**
+     * Convert PascalCase to kebab-case
+     */
+    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')
+     */
+    getBaseComponentName(componentName) {
+        // Common sub-component patterns in shadcn/ui and other design systems
+        const subComponentPatterns = [
+            // Card sub-components
+            /^(Card)(Header|Footer|Title|Action|Description|Content)$/,
+            // Dialog sub-components
+            /^(Dialog)(Close|Content|Description|Footer|Header|Overlay|Portal|Title|Trigger)$/,
+            // Alert Dialog sub-components
+            /^(AlertDialog)(Portal|Overlay|Trigger|Content|Header|Footer|Title|Description|Action|Cancel)$/,
+            // Dropdown Menu sub-components
+            /^(DropdownMenu)(Portal|Trigger|Content|Group|Label|Item|CheckboxItem|RadioGroup|RadioItem|Separator|Shortcut|Sub|SubTrigger|SubContent)$/,
+            // Context Menu sub-components
+            /^(ContextMenu)(Trigger|Content|Item|CheckboxItem|RadioItem|Label|Separator|Shortcut|Group|Portal|Sub|SubContent|SubTrigger|RadioGroup)$/,
+            // Navigation Menu sub-components
+            /^(NavigationMenu)(List|Item|Content|Trigger|Link|Indicator|Viewport)$/,
+            // Select sub-components
+            /^(Select)(Content|Group|Item|Label|ScrollDownButton|ScrollUpButton|Separator|Trigger|Value)$/,
+            // Menubar sub-components
+            /^(Menubar)(Portal|Menu|Trigger|Content|Group|Separator|Label|Item|Shortcut|CheckboxItem|RadioGroup|RadioItem|Sub|SubTrigger|SubContent)$/,
+            // Accordion sub-components
+            /^(Accordion)(Item|Trigger|Content)$/,
+            // Tabs sub-components
+            /^(Tabs)(List|Trigger|Content)$/,
+            // Sheet sub-components
+            /^(Sheet)(Trigger|Close|Content|Header|Footer|Title|Description)$/,
+            // Avatar sub-components
+            /^(Avatar)(Image|Fallback)$/,
+            // Breadcrumb sub-components
+            /^(Breadcrumb)(List|Item|Link|Page|Separator|Ellipsis)$/,
+            // Command sub-components
+            /^(Command)(Dialog|Input|List|Empty|Group|Item|Shortcut|Separator)$/,
+            // Hover Card sub-components
+            /^(HoverCard)(Trigger|Content)$/,
+            // Popover sub-components
+            /^(Popover)(Trigger|Content|Anchor)$/,
+            // Collapsible sub-components
+            /^(Collapsible)(Trigger|Content)$/,
+            // Drawer sub-components
+            /^(Drawer)(Portal|Overlay|Trigger|Close|Content|Header|Footer|Title|Description)$/,
+            // Radio Group sub-components
+            /^(RadioGroup)(Item)$/,
+            // Toggle Group sub-components
+            /^(ToggleGroup)(Item)$/,
+            // Tooltip sub-components
+            /^(Tooltip)(Trigger|Content|Provider)$/,
+            // Table sub-components
+            /^(Table)(Header|Body|Footer|Head|Row|Cell|Caption)$/,
+            // Input OTP sub-components
+            /^(InputOTP)(Group|Slot|Separator)$/,
+            // Resizable sub-components
+            /^(Resizable)(PanelGroup|Panel|Handle)$/,
+            // Scroll Area sub-components
+            /^(ScrollArea|ScrollBar)$/,
+            // Pagination sub-components
+            /^(Pagination)(Content|Link|Item|Previous|Next|Ellipsis)$/,
+            // Alert sub-components
+            /^(Alert)(Title|Description)$/,
+        ];
+        for (const pattern of subComponentPatterns) {
+            const match = componentName.match(pattern);
+            if (match) {
+                return match[1]; // Return the base component name
+            }
+        }
+        // No match found, return original name
+        return componentName;
     }
     /**
      * Group components by their category

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

@@ -1 +1 @@
-{"version":3,"file":"react-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/react-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,YAAa,SAAQ,oBAAoB;IACpD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAW;IACvC,QAAQ,CAAC,IAAI,WAAW;IACxB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,kBAAkB;IAE3C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAyC1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA+GT;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAkE/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA0B1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA4BzC;;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,kBAAkB,IAAI,YAAY,CAEjD"}
+{"version":3,"file":"react-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/react-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,YAAa,SAAQ,oBAAoB;IACpD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAW;IACvC,QAAQ,CAAC,IAAI,WAAW;IACxB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAIjD;IACF,QAAQ,CAAC,gBAAgB,kBAAkB;IAE3C;;OAEG;IACH,wBAAwB,IAAI,MAAM,EAAE;IAIpC;;;OAGG;IACH,6BAA6B,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE;IAyC1E,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAuJT;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAgF/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAsDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA0B1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IA4BzC;;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,kBAAkB,IAAI,YAAY,CAEjD"}