@tpitre/story-ui 2.1.5 → 2.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"framework-detector.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/framework-detector.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EACL,aAAa,EAGb,wBAAwB,EAEzB,MAAM,YAAY,CAAC;AAmGpB;;GAEG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAwC;IAC3D,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,mBAAmB,CAAgB;gBAE/B,WAAW,GAAE,MAAsB;IAI/C;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,wBAAwB,CAAC;IAkDjD;;OAEG;YACW,eAAe;IAwB7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAqBvB;;OAEG;IACH,OAAO,CAAC,eAAe;IA2BvB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAwD1B;;OAEG;IACH,YAAY,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO;CAchD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAGvF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAE5E"}

package/dist/story-generator/framework-adapters/framework-detector.js

@@ -0,0 +1,323 @@
+/**
+ * Framework Detection System
+ *
+ * Automatically detects the component framework and story framework
+ * used in a project by analyzing package.json, config files, and
+ * file patterns.
+ */
+import fs from 'fs';
+import path from 'path';
+import { logger } from '../logger.js';
+const FRAMEWORK_PATTERNS = [
+    // React
+    {
+        framework: 'react',
+        storyFramework: 'storybook-react',
+        packageIndicators: ['react', 'react-dom', '@storybook/react', '@storybook/react-vite', '@storybook/react-webpack5'],
+        configFiles: ['.storybook/main.js', '.storybook/main.ts', '.storybook/preview.js'],
+        filePatterns: ['*.jsx', '*.tsx', '*.stories.tsx', '*.stories.jsx'],
+        weight: 10,
+    },
+    // Vue 3
+    {
+        framework: 'vue',
+        storyFramework: 'storybook-vue3',
+        packageIndicators: ['vue', '@vue/runtime-core', '@storybook/vue3', '@storybook/vue3-vite'],
+        configFiles: ['vite.config.ts', 'vue.config.js', 'nuxt.config.ts'],
+        filePatterns: ['*.vue', '*.stories.ts'],
+        weight: 10,
+    },
+    // Angular
+    {
+        framework: 'angular',
+        storyFramework: 'storybook-angular',
+        packageIndicators: ['@angular/core', '@angular/common', '@storybook/angular'],
+        configFiles: ['angular.json', 'ng-package.json'],
+        filePatterns: ['*.component.ts', '*.stories.ts'],
+        weight: 10,
+    },
+    // Svelte
+    {
+        framework: 'svelte',
+        storyFramework: 'storybook-svelte',
+        packageIndicators: ['svelte', '@sveltejs/kit', '@storybook/svelte', '@storybook/svelte-vite'],
+        configFiles: ['svelte.config.js', 'svelte.config.ts'],
+        filePatterns: ['*.svelte', '*.stories.svelte'],
+        weight: 10,
+    },
+    // Web Components
+    {
+        framework: 'web-components',
+        storyFramework: 'storybook-web-components',
+        packageIndicators: ['lit', 'lit-element', 'lit-html', '@storybook/web-components', '@open-wc/testing'],
+        configFiles: ['web-dev-server.config.js', 'custom-elements.json'],
+        filePatterns: ['*.element.ts', '*.element.js'],
+        weight: 10,
+    },
+    // Solid
+    {
+        framework: 'solid',
+        storyFramework: 'storybook-react', // Uses React adapter with solid-js
+        packageIndicators: ['solid-js', '@solidjs/router'],
+        configFiles: ['vite.config.ts'],
+        filePatterns: ['*.tsx', '*.jsx'],
+        weight: 8,
+    },
+    // Qwik
+    {
+        framework: 'qwik',
+        storyFramework: 'custom',
+        packageIndicators: ['@builder.io/qwik', '@builder.io/qwik-city'],
+        configFiles: ['qwik.config.ts'],
+        filePatterns: ['*.tsx'],
+        weight: 8,
+    },
+    // Histoire (Vue alternative)
+    {
+        framework: 'vue',
+        storyFramework: 'histoire',
+        packageIndicators: ['histoire', '@histoire/plugin-vue'],
+        configFiles: ['histoire.config.ts', 'histoire.config.js'],
+        filePatterns: ['*.story.vue'],
+        weight: 12,
+    },
+    // Ladle (React alternative)
+    {
+        framework: 'react',
+        storyFramework: 'ladle',
+        packageIndicators: ['@ladle/react'],
+        configFiles: ['.ladle/config.mjs'],
+        filePatterns: ['*.stories.tsx'],
+        weight: 12,
+    },
+];
+/**
+ * Framework Detector Class
+ */
+export class FrameworkDetector {
+    constructor(projectRoot = process.cwd()) {
+        this.packageJson = null;
+        this.dependencies = {};
+        this.detectedConfigFiles = [];
+        this.projectRoot = projectRoot;
+    }
+    /**
+     * Detect frameworks used in the project
+     */
+    async detect() {
+        logger.debug('Starting framework detection', { projectRoot: this.projectRoot });
+        // Load package.json
+        await this.loadPackageJson();
+        // Scan for config files
+        this.scanConfigFiles();
+        // Score each framework pattern
+        const frameworkScores = this.scoreFrameworks();
+        // Sort by score descending
+        const sortedFrameworks = frameworkScores
+            .filter(f => f.score > 0)
+            .sort((a, b) => b.score - a.score);
+        // Convert to DetectedFramework objects
+        const detectedFrameworks = sortedFrameworks.map(f => ({
+            componentFramework: f.pattern.framework,
+            storyFramework: f.pattern.storyFramework,
+            version: this.getFrameworkVersion(f.pattern.framework),
+            config: this.getFrameworkConfig(f.pattern.framework),
+            confidence: Math.min(f.score / 30, 1), // Normalize to 0-1
+        }));
+        // Default to React if nothing detected
+        const defaultFramework = {
+            componentFramework: 'react',
+            storyFramework: 'storybook-react',
+            config: this.getFrameworkConfig('react'),
+            confidence: 0.5,
+        };
+        const primary = detectedFrameworks[0] || defaultFramework;
+        logger.info('Framework detection complete', {
+            primary: primary.componentFramework,
+            storyFramework: primary.storyFramework,
+            confidence: primary.confidence,
+        });
+        return {
+            frameworks: detectedFrameworks.length > 0 ? detectedFrameworks : [defaultFramework],
+            primary,
+            dependencies: this.dependencies,
+            configFiles: this.detectedConfigFiles,
+        };
+    }
+    /**
+     * Load and parse package.json
+     */
+    async loadPackageJson() {
+        const packagePath = path.join(this.projectRoot, 'package.json');
+        try {
+            if (fs.existsSync(packagePath)) {
+                const content = fs.readFileSync(packagePath, 'utf-8');
+                this.packageJson = JSON.parse(content);
+                // Merge all dependencies
+                this.dependencies = {
+                    ...(this.packageJson?.dependencies || {}),
+                    ...(this.packageJson?.devDependencies || {}),
+                    ...(this.packageJson?.peerDependencies || {}),
+                };
+                logger.debug('Loaded package.json', {
+                    dependencyCount: Object.keys(this.dependencies).length,
+                });
+            }
+        }
+        catch (error) {
+            logger.warn('Failed to load package.json', { error });
+        }
+    }
+    /**
+     * Scan for framework configuration files
+     */
+    scanConfigFiles() {
+        const allConfigFiles = new Set();
+        for (const pattern of FRAMEWORK_PATTERNS) {
+            for (const configFile of pattern.configFiles) {
+                allConfigFiles.add(configFile);
+            }
+        }
+        for (const configFile of allConfigFiles) {
+            const fullPath = path.join(this.projectRoot, configFile);
+            if (fs.existsSync(fullPath)) {
+                this.detectedConfigFiles.push(configFile);
+            }
+        }
+        logger.debug('Config files detected', {
+            configFiles: this.detectedConfigFiles,
+        });
+    }
+    /**
+     * Score each framework pattern based on evidence
+     */
+    scoreFrameworks() {
+        return FRAMEWORK_PATTERNS.map(pattern => {
+            let score = 0;
+            // Check package indicators
+            for (const pkg of pattern.packageIndicators) {
+                if (this.dependencies[pkg]) {
+                    score += pattern.weight;
+                    // Extra weight for Storybook packages
+                    if (pkg.startsWith('@storybook/')) {
+                        score += 5;
+                    }
+                }
+            }
+            // Check config files
+            for (const configFile of pattern.configFiles) {
+                if (this.detectedConfigFiles.includes(configFile)) {
+                    score += pattern.weight / 2;
+                }
+            }
+            return { pattern, score };
+        });
+    }
+    /**
+     * Get framework version from dependencies
+     */
+    getFrameworkVersion(framework) {
+        const versionMap = {
+            'react': ['react'],
+            'vue': ['vue'],
+            'angular': ['@angular/core'],
+            'svelte': ['svelte'],
+            'web-components': ['lit', 'lit-element'],
+            'solid': ['solid-js'],
+            'qwik': ['@builder.io/qwik'],
+        };
+        const packages = versionMap[framework] || [];
+        for (const pkg of packages) {
+            if (this.dependencies[pkg]) {
+                return this.dependencies[pkg].replace(/[\^~]/, '');
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Get framework-specific configuration
+     */
+    getFrameworkConfig(framework) {
+        const configs = {
+            'react': {
+                importStyle: 'named',
+                storyExtension: '.stories.tsx',
+                typescript: true,
+                jsx: true,
+                componentExtension: '.tsx',
+            },
+            'vue': {
+                importStyle: 'default',
+                storyExtension: '.stories.ts',
+                typescript: true,
+                jsx: false,
+                componentExtension: '.vue',
+            },
+            'angular': {
+                importStyle: 'named',
+                storyExtension: '.stories.ts',
+                typescript: true,
+                jsx: false,
+                componentExtension: '.component.ts',
+            },
+            'svelte': {
+                importStyle: 'default',
+                storyExtension: '.stories.svelte',
+                typescript: true,
+                jsx: false,
+                componentExtension: '.svelte',
+            },
+            'web-components': {
+                importStyle: 'named',
+                storyExtension: '.stories.ts',
+                typescript: true,
+                jsx: false,
+                componentExtension: '.ts',
+            },
+            'solid': {
+                importStyle: 'named',
+                storyExtension: '.stories.tsx',
+                typescript: true,
+                jsx: true,
+                componentExtension: '.tsx',
+            },
+            'qwik': {
+                importStyle: 'named',
+                storyExtension: '.stories.tsx',
+                typescript: true,
+                jsx: true,
+                componentExtension: '.tsx',
+            },
+        };
+        return configs[framework] || configs['react'];
+    }
+    /**
+     * Quick check for a specific framework
+     */
+    hasFramework(framework) {
+        const packageMap = {
+            'react': ['react', 'react-dom'],
+            'vue': ['vue'],
+            'angular': ['@angular/core'],
+            'svelte': ['svelte'],
+            'web-components': ['lit', 'lit-element', '@open-wc/testing'],
+            'solid': ['solid-js'],
+            'qwik': ['@builder.io/qwik'],
+        };
+        const packages = packageMap[framework] || [];
+        return packages.some(pkg => !!this.dependencies[pkg]);
+    }
+}
+/**
+ * Factory function for framework detection
+ */
+export function detectFramework(projectRoot) {
+    const detector = new FrameworkDetector(projectRoot);
+    return detector.detect();
+}
+/**
+ * Get framework detector instance
+ */
+export function getFrameworkDetector(projectRoot) {
+    return new FrameworkDetector(projectRoot);
+}

package/dist/story-generator/framework-adapters/index.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Framework Adapters Module
+ *
+ * Exports framework detection, adapters, and the adapter registry.
+ */
+export * from './types.js';
+export { FrameworkDetector, detectFramework, getFrameworkDetector, } from './framework-detector.js';
+export { BaseFrameworkAdapter } from './base-adapter.js';
+export { ReactAdapter, createReactAdapter } from './react-adapter.js';
+export { WebComponentsAdapter, createWebComponentsAdapter } from './web-components-adapter.js';
+export { VueAdapter, createVueAdapter } from './vue-adapter.js';
+export { AngularAdapter, createAngularAdapter } from './angular-adapter.js';
+export { SvelteAdapter, createSvelteAdapter } from './svelte-adapter.js';
+import { FrameworkType, FrameworkAdapter, DetectedFramework, FrameworkPrompt, StoryGenerationOptions } from './types.js';
+import { StoryUIConfig } from '../../story-ui.config.js';
+import { DiscoveredComponent } from '../componentDiscovery.js';
+/**
+ * Framework Adapter Registry
+ *
+ * Manages available framework adapters and provides
+ * automatic framework detection and adapter selection.
+ */
+declare class AdapterRegistry {
+    private adapters;
+    private defaultAdapter;
+    private detectedFramework;
+    constructor();
+    /**
+     * Register built-in framework adapters
+     */
+    private registerBuiltInAdapters;
+    /**
+     * Register a framework adapter
+     */
+    register(adapter: FrameworkAdapter): void;
+    /**
+     * Get adapter by framework type
+     */
+    get(type: FrameworkType): FrameworkAdapter | undefined;
+    /**
+     * Get all registered adapters
+     */
+    getAll(): FrameworkAdapter[];
+    /**
+     * Get available framework types
+     */
+    getAvailableTypes(): FrameworkType[];
+    /**
+     * Get available framework types (alias for getAvailableTypes)
+     */
+    getAvailableFrameworks(): FrameworkType[];
+    /**
+     * Get adapter by framework type (alias for get with default fallback)
+     */
+    getAdapter(type: FrameworkType): FrameworkAdapter;
+    /**
+     * Get the default adapter
+     */
+    getDefault(): FrameworkAdapter;
+    /**
+     * Set the default adapter
+     */
+    setDefault(type: FrameworkType): void;
+    /**
+     * Auto-detect framework and return appropriate adapter
+     */
+    autoDetect(projectRoot?: string): Promise<FrameworkAdapter>;
+    /**
+     * Get the last detected framework info
+     */
+    getDetectedFramework(): DetectedFramework | null;
+    /**
+     * Generate prompt using the appropriate adapter
+     */
+    generatePrompt(config: StoryUIConfig, components: DiscoveredComponent[], options?: StoryGenerationOptions): Promise<FrameworkPrompt>;
+}
+/**
+ * Get the global adapter registry instance
+ */
+export declare function getAdapterRegistry(): AdapterRegistry;
+/**
+ * Get adapter for a specific framework
+ */
+export declare function getAdapter(type: FrameworkType): FrameworkAdapter | undefined;
+/**
+ * Get the default adapter
+ */
+export declare function getDefaultAdapter(): FrameworkAdapter;
+/**
+ * Auto-detect framework and get appropriate adapter
+ */
+export declare function autoDetectAdapter(projectRoot?: string): Promise<FrameworkAdapter>;
+/**
+ * Generate framework-specific prompt
+ */
+export declare function generateFrameworkPrompt(config: StoryUIConfig, components: DiscoveredComponent[], options?: StoryGenerationOptions): Promise<FrameworkPrompt>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,YAAY,CAAC;AAG3B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;;;;GAKG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,iBAAiB,CAAkC;;IAU3D;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIzC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS;IAItD;;OAEG;IACH,MAAM,IAAI,gBAAgB,EAAE;IAI5B;;OAEG;IACH,iBAAiB,IAAI,aAAa,EAAE;IAIpC;;OAEG;IACH,sBAAsB,IAAI,aAAa,EAAE;IAIzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB;IAIjD;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAQrC;;OAEG;IACG,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAoBjE;;OAEG;IACH,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD;;OAEG;IACG,cAAc,CAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC;CA8B5B;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAE5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAEvF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC,CAE1B"}

package/dist/story-generator/framework-adapters/index.js

@@ -0,0 +1,198 @@
+/**
+ * Framework Adapters Module
+ *
+ * Exports framework detection, adapters, and the adapter registry.
+ */
+// Types
+export * from './types.js';
+// Framework Detection
+export { FrameworkDetector, detectFramework, getFrameworkDetector, } from './framework-detector.js';
+// Base Adapter
+export { BaseFrameworkAdapter } from './base-adapter.js';
+// Framework Adapters
+export { ReactAdapter, createReactAdapter } from './react-adapter.js';
+export { WebComponentsAdapter, createWebComponentsAdapter } from './web-components-adapter.js';
+export { VueAdapter, createVueAdapter } from './vue-adapter.js';
+export { AngularAdapter, createAngularAdapter } from './angular-adapter.js';
+export { SvelteAdapter, createSvelteAdapter } from './svelte-adapter.js';
+import { ReactAdapter } from './react-adapter.js';
+import { WebComponentsAdapter } from './web-components-adapter.js';
+import { VueAdapter } from './vue-adapter.js';
+import { AngularAdapter } from './angular-adapter.js';
+import { SvelteAdapter } from './svelte-adapter.js';
+import { detectFramework } from './framework-detector.js';
+import { logger } from '../logger.js';
+/**
+ * Framework Adapter Registry
+ *
+ * Manages available framework adapters and provides
+ * automatic framework detection and adapter selection.
+ */
+class AdapterRegistry {
+    constructor() {
+        this.adapters = new Map();
+        this.detectedFramework = null;
+        // Register built-in adapters
+        this.registerBuiltInAdapters();
+        // Default to React
+        this.defaultAdapter = this.adapters.get('react');
+    }
+    /**
+     * Register built-in framework adapters
+     */
+    registerBuiltInAdapters() {
+        this.register(new ReactAdapter());
+        this.register(new WebComponentsAdapter());
+        this.register(new VueAdapter());
+        this.register(new AngularAdapter());
+        this.register(new SvelteAdapter());
+        logger.debug('Registered framework adapters', {
+            adapters: Array.from(this.adapters.keys()),
+        });
+    }
+    /**
+     * Register a framework adapter
+     */
+    register(adapter) {
+        this.adapters.set(adapter.type, adapter);
+    }
+    /**
+     * Get adapter by framework type
+     */
+    get(type) {
+        return this.adapters.get(type);
+    }
+    /**
+     * Get all registered adapters
+     */
+    getAll() {
+        return Array.from(this.adapters.values());
+    }
+    /**
+     * Get available framework types
+     */
+    getAvailableTypes() {
+        return Array.from(this.adapters.keys());
+    }
+    /**
+     * Get available framework types (alias for getAvailableTypes)
+     */
+    getAvailableFrameworks() {
+        return this.getAvailableTypes();
+    }
+    /**
+     * Get adapter by framework type (alias for get with default fallback)
+     */
+    getAdapter(type) {
+        return this.adapters.get(type) || this.defaultAdapter;
+    }
+    /**
+     * Get the default adapter
+     */
+    getDefault() {
+        return this.defaultAdapter;
+    }
+    /**
+     * Set the default adapter
+     */
+    setDefault(type) {
+        const adapter = this.adapters.get(type);
+        if (adapter) {
+            this.defaultAdapter = adapter;
+            logger.debug('Set default framework adapter', { type });
+        }
+    }
+    /**
+     * Auto-detect framework and return appropriate adapter
+     */
+    async autoDetect(projectRoot) {
+        const result = await detectFramework(projectRoot);
+        this.detectedFramework = result.primary;
+        const adapter = this.adapters.get(result.primary.componentFramework);
+        if (adapter) {
+            logger.info('Auto-detected framework', {
+                framework: result.primary.componentFramework,
+                confidence: result.primary.confidence,
+            });
+            return adapter;
+        }
+        logger.warn('No adapter for detected framework, using default', {
+            detected: result.primary.componentFramework,
+            using: this.defaultAdapter.type,
+        });
+        return this.defaultAdapter;
+    }
+    /**
+     * Get the last detected framework info
+     */
+    getDetectedFramework() {
+        return this.detectedFramework;
+    }
+    /**
+     * Generate prompt using the appropriate adapter
+     */
+    async generatePrompt(config, components, options) {
+        // Determine which adapter to use
+        let adapter;
+        if (options?.framework) {
+            // Explicit framework specified
+            adapter = this.adapters.get(options.framework) || this.defaultAdapter;
+        }
+        else if (this.detectedFramework) {
+            // Use previously detected framework
+            adapter = this.adapters.get(this.detectedFramework.componentFramework) || this.defaultAdapter;
+        }
+        else {
+            // Auto-detect
+            adapter = await this.autoDetect();
+        }
+        logger.debug('Generating prompt with adapter', { adapter: adapter.type });
+        return {
+            systemPrompt: adapter.generateSystemPrompt(config, options),
+            componentReference: adapter.generateComponentReference(components, config),
+            layoutInstructions: '', // TODO: Implement layout instructions
+            examples: adapter.generateExamples(config),
+            sampleStory: adapter.generateSampleStory(config, components),
+            framework: this.detectedFramework || {
+                componentFramework: adapter.type,
+                storyFramework: adapter.supportedStoryFrameworks[0],
+                confidence: 1,
+            },
+        };
+    }
+}
+// Singleton registry instance
+let registryInstance = null;
+/**
+ * Get the global adapter registry instance
+ */
+export function getAdapterRegistry() {
+    if (!registryInstance) {
+        registryInstance = new AdapterRegistry();
+    }
+    return registryInstance;
+}
+/**
+ * Get adapter for a specific framework
+ */
+export function getAdapter(type) {
+    return getAdapterRegistry().get(type);
+}
+/**
+ * Get the default adapter
+ */
+export function getDefaultAdapter() {
+    return getAdapterRegistry().getDefault();
+}
+/**
+ * Auto-detect framework and get appropriate adapter
+ */
+export async function autoDetectAdapter(projectRoot) {
+    return getAdapterRegistry().autoDetect(projectRoot);
+}
+/**
+ * Generate framework-specific prompt
+ */
+export async function generateFrameworkPrompt(config, components, options) {
+    return getAdapterRegistry().generatePrompt(config, components, options);
+}

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

@@ -0,0 +1,40 @@
+/**
+ * React Framework Adapter
+ *
+ * Generates Storybook stories for React components.
+ * Supports CSF 3.0 format with TypeScript.
+ */
+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 ReactAdapter extends BaseFrameworkAdapter {
+    readonly type: FrameworkType;
+    readonly name = "React";
+    readonly supportedStoryFrameworks: StoryFramework[];
+    readonly defaultExtension = ".stories.tsx";
+    generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
+    /**
+     * FIX #2: Detect if the project uses Chakra UI v3
+     */
+    private isChakraUIProject;
+    generateExamples(config: StoryUIConfig): string;
+    generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
+    getStoryTemplate(options?: StoryGenerationOptions): string;
+    /**
+     * Post-process React stories
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Validate React story
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+}
+/**
+ * Factory function
+ */
+export declare function createReactAdapter(): ReactAdapter;
+//# sourceMappingURL=react-adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/react-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,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,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;IAgE/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"}