@tpitre/story-ui 2.2.0 → 2.3.1

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"}

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

@@ -0,0 +1,316 @@
+/**
+ * React Framework Adapter
+ *
+ * Generates Storybook stories for React components.
+ * Supports CSF 3.0 format with TypeScript.
+ */
+import { BaseFrameworkAdapter } from './base-adapter.js';
+export class ReactAdapter extends BaseFrameworkAdapter {
+    constructor() {
+        super(...arguments);
+        this.type = 'react';
+        this.name = 'React';
+        this.supportedStoryFrameworks = [
+            'storybook-react',
+            'ladle',
+            'chromatic',
+        ];
+        this.defaultExtension = '.stories.tsx';
+    }
+    generateSystemPrompt(config, options) {
+        if (config.systemPrompt) {
+            return config.systemPrompt;
+        }
+        const componentSystemName = config.componentPrefix
+            ? `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system`
+            : 'component library';
+        const typescript = options?.typescript !== false;
+        // FIX #2: Auto-detect Chakra UI v3 for provider requirements
+        const isChakraUI = this.isChakraUIProject(config);
+        let chakraInstructions = '';
+        if (isChakraUI) {
+            chakraInstructions = `
+
+CHAKRA UI v3 CONFIGURATION (CRITICAL):
+Chakra UI v3 requires ChakraProvider for proper theming and styling.
+
+OPTION 1 (Recommended): Configure in .storybook/preview.tsx (project-wide):
+\`\`\`tsx
+// .storybook/preview.tsx
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export const decorators = [
+  (Story) => (
+    <ChakraProvider value={defaultSystem}>
+      <Story />
+    </ChakraProvider>
+  ),
+];
+\`\`\`
+
+OPTION 2: Wrap individual stories (if preview.tsx not configured):
+\`\`\`tsx
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export const MyStory: Story = {
+  decorators: [
+    (Story) => (
+      <ChakraProvider value={defaultSystem}>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+};
+\`\`\`
+
+IMPORTANT: Without ChakraProvider, you will see "useContext returned undefined" errors.
+`;
+        }
+        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'}';
+
+${typescript ? 'Use TypeScript with proper type annotations.' : 'Use JavaScript.'}
+${chakraInstructions}
+COMPONENT IMPORT RULES:
+- 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
+
+STORY STRUCTURE (CSF 3.0):
+- Use ES modules: export default meta; NOT module.exports
+- Define Meta object with component, title, and parameters
+- Export named stories as StoryObj<typeof ComponentName>
+
+CRITICAL RULES:
+- NEVER pass children through args - use render functions instead
+- For layouts with multiple components, omit component from meta
+- Use render: (args) => <Component {...args} /> for custom rendering
+
+Example structure:
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '${config.importPath || 'your-library'}';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Click me' },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Button variant="primary">
+      <Icon /> Click me
+    </Button>
+  ),
+};
+\`\`\`
+
+${this.getCommonRules()}`;
+    }
+    /**
+     * FIX #2: Detect if the project uses Chakra UI v3
+     */
+    isChakraUIProject(config) {
+        const importPath = config.importPath || '';
+        return (importPath.includes('@chakra-ui') ||
+            importPath === 'chakra-ui' ||
+            config.componentPrefix === 'Chakra');
+    }
+    generateExamples(config) {
+        const lib = config.importPath || 'your-library';
+        return `
+## Example Stories
+
+### Single Component Story
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '${lib}';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: 'Button' },
+};
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Primary Button' },
+};
+\`\`\`
+
+### Layout Story (Multiple Components)
+\`\`\`tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, Button, Text } from '${lib}';
+
+const meta: Meta = {
+  title: 'Examples/Card Layout',
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+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>
+      <Button variant="primary">Add to Cart</Button>
+    </Card>
+  ),
+};
+\`\`\`
+`;
+    }
+    generateSampleStory(config, components) {
+        const lib = config.importPath || 'your-library';
+        const firstComponent = components[0];
+        if (!firstComponent) {
+            return `
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Examples/Sample',
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <div>Sample story content</div>,
+};
+`;
+        }
+        return `
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ${firstComponent.name} } from '${lib}';
+
+const meta: Meta<typeof ${firstComponent.name}> = {
+  title: 'Components/${firstComponent.name}',
+  component: ${firstComponent.name},
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    getStoryTemplate(options) {
+        const typescript = options?.typescript !== false;
+        const ext = typescript ? 'tsx' : 'jsx';
+        return `
+// {{componentName}}.stories.${ext}
+import React from 'react';
+${typescript ? "import type { Meta, StoryObj } from '@storybook/react';" : ''}
+import { {{componentName}} } from '{{importPath}}';
+
+const meta${typescript ? ': Meta<typeof {{componentName}}>' : ''} = {
+  title: '{{category}}/{{componentName}}',
+  component: {{componentName}},
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+};
+
+export default meta;
+${typescript ? 'type Story = StoryObj<typeof meta>;' : ''}
+
+export const Default${typescript ? ': Story' : ''} = {
+  args: {},
+};
+`;
+    }
+    /**
+     * Post-process React stories
+     */
+    postProcess(storyContent) {
+        let processed = super.postProcess(storyContent);
+        // Ensure React import is first
+        if (!processed.startsWith("import React from 'react'")) {
+            const lines = processed.split('\n');
+            const reactImportIndex = lines.findIndex(line => line.includes("import React from 'react'"));
+            if (reactImportIndex > 0) {
+                const reactImport = lines.splice(reactImportIndex, 1)[0];
+                lines.unshift(reactImport);
+                processed = lines.join('\n');
+            }
+        }
+        // Fix common issues
+        processed = processed
+            // Remove only EMPTY children in args (children: '' or children: "")
+            // The regex must require matching quotes to avoid removing valid children like children: 'Button'
+            .replace(/children:\s*['"]['"],?\s*/g, '')
+            // Fix double quotes in JSX
+            .replace(/class=/g, 'className=');
+        return processed;
+    }
+    /**
+     * Validate React story
+     */
+    validate(storyContent) {
+        const baseValidation = super.validate(storyContent);
+        const errors = [...baseValidation.errors];
+        // React-specific validations
+        if (!storyContent.includes("import React from 'react'")) {
+            errors.push("Missing 'import React from 'react'' statement");
+        }
+        if (!storyContent.includes('export default')) {
+            errors.push('Missing default export');
+        }
+        if (storyContent.includes('module.exports')) {
+            errors.push('Using CommonJS exports instead of ES modules');
+        }
+        // Check for children in args (common mistake)
+        if (/args:\s*{[^}]*children:\s*</.test(storyContent)) {
+            errors.push('JSX children should not be in args - use render function instead');
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
+}
+/**
+ * Factory function
+ */
+export function createReactAdapter() {
+    return new ReactAdapter();
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Svelte Framework Adapter
+ *
+ * Generates Storybook stories for Svelte components.
+ * Supports both Svelte 4 and Svelte 5 (runes).
+ */
+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 SvelteAdapter extends BaseFrameworkAdapter {
+    readonly type: FrameworkType;
+    readonly name = "Svelte";
+    readonly supportedStoryFrameworks: StoryFramework[];
+    readonly defaultExtension = ".stories.ts";
+    generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
+    generateExamples(config: StoryUIConfig): string;
+    generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
+    getStoryTemplate(options?: StoryGenerationOptions): string;
+    /**
+     * Post-process Svelte stories
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Validate Svelte story
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Generate imports for Svelte components
+     */
+    generateImports(components: DiscoveredComponent[], config: StoryUIConfig): string;
+}
+/**
+ * Factory function
+ */
+export declare function createSvelteAdapter(): SvelteAdapter;
+//# sourceMappingURL=svelte-adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-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,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAqGT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA0I/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;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;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}