@tpitre/story-ui 2.1.5 → 2.3.0

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

@@ -0,0 +1,427 @@
+/**
+ * Angular Framework Adapter
+ *
+ * Generates Storybook stories for Angular components.
+ * Supports standalone components and module-based components.
+ */
+import { BaseFrameworkAdapter } from './base-adapter.js';
+export class AngularAdapter extends BaseFrameworkAdapter {
+    constructor() {
+        super(...arguments);
+        this.type = 'angular';
+        this.name = 'Angular';
+        this.supportedStoryFrameworks = [
+            'storybook-angular',
+            'chromatic',
+        ];
+        this.defaultExtension = '.stories.ts';
+    }
+    generateSystemPrompt(config, options) {
+        if (config.systemPrompt) {
+            return config.systemPrompt;
+        }
+        const componentSystemName = config.componentPrefix
+            ? `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system`
+            : 'component library';
+        return `You are an expert Angular developer creating Storybook stories using CSF 3.0 format.
+Use ONLY the Angular components from the ${componentSystemName} listed below.
+
+MANDATORY IMPORTS - First lines of every story file:
+1. import type { Meta, StoryObj } from '@storybook/angular';
+2. import { ComponentName } from '${config.importPath || 'your-library'}';
+
+ANGULAR STORY FORMAT:
+- Use moduleMetadata for imports and providers
+- Components can be standalone or module-based
+- Use applicationConfig for standalone components
+
+STORY STRUCTURE (CSF 3.0):
+- Meta object with component, title, and decorators
+- Use render function for template customization
+- Export named stories as StoryObj
+
+CRITICAL RULES:
+- Import modules/components in moduleMetadata or applicationConfig
+- Use Angular template syntax in render functions
+- Event bindings use (event) syntax
+
+Example structure (Standalone Components):
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, argsToTemplate } from '@storybook/angular';
+import { ButtonComponent } from 'your-library';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Components/Button',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    label: 'Click me',
+  },
+};
+
+export const WithContent: Story = {
+  render: (args) => ({
+    props: args,
+    template: \`
+      <app-button [variant]="variant">
+        <span class="icon">★</span>
+        Click me
+      </app-button>
+    \`,
+  }),
+};
+\`\`\`
+
+Example structure (Module-based Components):
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ButtonModule } from 'your-library';
+
+const meta: Meta = {
+  title: 'Components/Button',
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonModule],
+    }),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {
+  render: (args) => ({
+    props: args,
+    template: \`<app-button [variant]="variant">Click me</app-button>\`,
+  }),
+};
+\`\`\`
+
+ANGULAR TEMPLATE SYNTAX:
+- Property binding: [property]="value"
+- Event binding: (event)="handler($event)"
+- Two-way binding: [(ngModel)]="value"
+- Structural directives: *ngIf, *ngFor, *ngSwitch
+
+CONTENT PROJECTION (ng-content):
+- Default slot: Content between tags
+- Named slots: Use ngProjectAs or select attribute
+
+${this.getCommonRules()}`;
+    }
+    generateExamples(config) {
+        const lib = config.importPath || 'your-library';
+        return `
+## Example Stories for Angular
+
+### Standalone Component
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { ButtonComponent } from 'your-library';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Components/Button',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+  ],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+export const Default: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    label: 'Button',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => ({
+    template: \`
+      <div style="display: flex; gap: 8px;">
+        <app-button variant="primary">Primary</app-button>
+        <app-button variant="secondary">Secondary</app-button>
+        <app-button variant="ghost">Ghost</app-button>
+      </div>
+    \`,
+  }),
+};
+\`\`\`
+
+### Module-based Component
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CardModule, ButtonModule } from '${lib}';
+
+const meta: Meta = {
+  title: 'Components/Card',
+  decorators: [
+    moduleMetadata({
+      imports: [CardModule, ButtonModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const ProductCard: Story = {
+  render: () => ({
+    template: \`
+      <app-card style="width: 300px">
+        <img appCardImage src="https://picsum.photos/300/200" alt="Product">
+        <h3 appCardTitle>Product Name</h3>
+        <p appCardContent>$99.00</p>
+        <app-button appCardAction variant="primary">Add to Cart</app-button>
+      </app-card>
+    \`,
+  }),
+};
+\`\`\`
+
+### With Event Handling
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { ButtonComponent } from 'your-library';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'Components/Button',
+  component: ButtonComponent,
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+export const WithClick: Story = {
+  render: () => ({
+    props: {
+      onClick: action('button-click'),
+    },
+    template: \`
+      <app-button (click)="onClick($event)" variant="primary">
+        Click me
+      </app-button>
+    \`,
+  }),
+};
+\`\`\`
+
+### With Forms
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputModule } from '${lib}';
+
+const meta: Meta = {
+  title: 'Components/Input',
+  decorators: [
+    moduleMetadata({
+      imports: [FormsModule, ReactiveFormsModule, InputModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const WithNgModel: Story = {
+  render: () => ({
+    props: {
+      value: '',
+    },
+    template: \`
+      <div>
+        <app-input [(ngModel)]="value" placeholder="Type here..."></app-input>
+        <p>Value: {{ value }}</p>
+      </div>
+    \`,
+  }),
+};
+\`\`\`
+`;
+    }
+    generateSampleStory(config, components) {
+        const lib = config.importPath || 'your-library';
+        const firstComponent = components[0];
+        if (!firstComponent) {
+            return `
+import type { Meta, StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'Examples/Sample',
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => ({
+    template: '<div>Sample story content</div>',
+  }),
+};
+`;
+        }
+        // Convert PascalCase to kebab-case for selector
+        const selector = this.toKebabCase(firstComponent.name);
+        return `
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { ${firstComponent.name}Component } from '${lib}';
+
+const meta: Meta<${firstComponent.name}Component> = {
+  title: 'Components/${firstComponent.name}',
+  component: ${firstComponent.name}Component,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+  ],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<${firstComponent.name}Component>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    getStoryTemplate(options) {
+        return `
+// {{componentName}}.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { {{componentName}}Component } from '{{importPath}}';
+
+const meta: Meta<{{componentName}}Component> = {
+  title: '{{category}}/{{componentName}}',
+  component: {{componentName}}Component,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [],
+    }),
+  ],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<{{componentName}}Component>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    /**
+     * 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();
+    }
+    /**
+     * Post-process Angular stories
+     */
+    postProcess(storyContent) {
+        let processed = super.postProcess(storyContent);
+        // Remove React imports if present
+        processed = processed.replace(/import React from ['"]react['"];?\n?/g, '');
+        // Fix JSX to Angular template syntax
+        processed = processed
+            // Fix className to class
+            .replace(/className=/g, 'class=')
+            // Fix onClick to (click)
+            .replace(/onClick=/g, '(click)=')
+            .replace(/onChange=/g, '(change)=')
+            .replace(/onInput=/g, '(input)=');
+        return processed;
+    }
+    /**
+     * Validate Angular story
+     */
+    validate(storyContent) {
+        const baseValidation = super.validate(storyContent);
+        const errors = [...baseValidation.errors];
+        // Angular-specific validations
+        if (!storyContent.includes('@storybook/angular')) {
+            errors.push("Missing '@storybook/angular' import");
+        }
+        if (storyContent.includes("import React from 'react'")) {
+            errors.push('React import found in Angular story');
+        }
+        // Check for neither moduleMetadata nor applicationConfig
+        if (!storyContent.includes('moduleMetadata') &&
+            !storyContent.includes('applicationConfig') &&
+            !storyContent.includes('component:')) {
+            errors.push('Missing moduleMetadata or applicationConfig decorator');
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
+}
+/**
+ * Factory function
+ */
+export function createAngularAdapter() {
+    return new AngularAdapter();
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Base Framework Adapter
+ *
+ * Abstract base class that provides common functionality for all
+ * framework-specific adapters. Subclasses implement framework-specific
+ * prompt generation and story templates.
+ */
+import { FrameworkType, StoryFramework, FrameworkAdapter, StoryGenerationOptions } from './types.js';
+import { StoryUIConfig } from '../../story-ui.config.js';
+import { DiscoveredComponent } from '../componentDiscovery.js';
+/**
+ * Abstract Base Framework Adapter
+ */
+export declare abstract class BaseFrameworkAdapter implements FrameworkAdapter {
+    abstract readonly type: FrameworkType;
+    abstract readonly name: string;
+    abstract readonly supportedStoryFrameworks: StoryFramework[];
+    abstract readonly defaultExtension: string;
+    /**
+     * Generate the system prompt for this framework
+     */
+    abstract generateSystemPrompt(config: StoryUIConfig, options?: StoryGenerationOptions): string;
+    /**
+     * Generate component reference documentation
+     */
+    generateComponentReference(components: DiscoveredComponent[], config: StoryUIConfig): string;
+    /**
+     * Format a single component entry
+     */
+    protected formatComponentEntry(component: DiscoveredComponent, config: StoryUIConfig): string;
+    /**
+     * Get the import path for a component
+     */
+    protected getImportPath(component: DiscoveredComponent, config: StoryUIConfig): string;
+    /**
+     * Group components by their category
+     */
+    protected groupComponentsByPackage(components: DiscoveredComponent[]): Record<string, DiscoveredComponent[]>;
+    /**
+     * Generate example stories - framework specific
+     */
+    abstract generateExamples(config: StoryUIConfig): string;
+    /**
+     * Generate a sample story template - framework specific
+     */
+    abstract generateSampleStory(config: StoryUIConfig, components: DiscoveredComponent[]): string;
+    /**
+     * Generate import statements for components
+     */
+    generateImports(components: DiscoveredComponent[], config: StoryUIConfig): string;
+    /**
+     * Post-process generated story content
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Validate generated story syntax
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Get the story file template - framework specific
+     */
+    abstract getStoryTemplate(options?: StoryGenerationOptions): string;
+    /**
+     * Log adapter activity
+     */
+    protected log(message: string, data?: Record<string, unknown>): void;
+    /**
+     * Get common story structure rules
+     */
+    protected getCommonRules(): string;
+}
+//# sourceMappingURL=base-adapter.d.ts.map

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

@@ -0,0 +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;;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;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAQzC;;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;CAoBnC"}

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

@@ -0,0 +1,147 @@
+/**
+ * Base Framework Adapter
+ *
+ * Abstract base class that provides common functionality for all
+ * framework-specific adapters. Subclasses implement framework-specific
+ * prompt generation and story templates.
+ */
+import { logger } from '../logger.js';
+/**
+ * Abstract Base Framework Adapter
+ */
+export class BaseFrameworkAdapter {
+    /**
+     * Generate component reference documentation
+     */
+    generateComponentReference(components, config) {
+        if (components.length === 0) {
+            return 'No components discovered.';
+        }
+        const groupedComponents = this.groupComponentsByPackage(components);
+        const sections = [];
+        for (const [packageName, pkgComponents] of Object.entries(groupedComponents)) {
+            const componentList = pkgComponents
+                .map(comp => this.formatComponentEntry(comp, config))
+                .join('\n');
+            sections.push(`## ${packageName}\n${componentList}`);
+        }
+        return `# Available Components\n\n${sections.join('\n\n')}`;
+    }
+    /**
+     * Format a single component entry
+     */
+    formatComponentEntry(component, config) {
+        const importPath = this.getImportPath(component, config);
+        let entry = `- **${component.name}** (import from '${importPath}')`;
+        if (component.props && component.props.length > 0) {
+            const propsList = component.props
+                .slice(0, 5) // Limit to first 5 props
+                .join(', ');
+            entry += `\n  Props: ${propsList}${component.props.length > 5 ? '...' : ''}`;
+        }
+        if (component.description) {
+            entry += `\n  ${component.description}`;
+        }
+        return entry;
+    }
+    /**
+     * Get the import path for a component
+     */
+    getImportPath(component, config) {
+        // Use component's __componentPath if available
+        if (component.__componentPath) {
+            return component.__componentPath;
+        }
+        // Fall back to import path from config
+        return config.importPath || 'unknown';
+    }
+    /**
+     * Group components by their category
+     */
+    groupComponentsByPackage(components) {
+        const grouped = {};
+        for (const component of components) {
+            const category = component.category || 'other';
+            if (!grouped[category]) {
+                grouped[category] = [];
+            }
+            grouped[category].push(component);
+        }
+        return grouped;
+    }
+    /**
+     * Generate import statements for components
+     */
+    generateImports(components, config) {
+        const importsByPath = new Map();
+        for (const component of components) {
+            const importPath = this.getImportPath(component, config);
+            if (!importsByPath.has(importPath)) {
+                importsByPath.set(importPath, new Set());
+            }
+            importsByPath.get(importPath).add(component.name);
+        }
+        const imports = [];
+        for (const [path, names] of importsByPath) {
+            const namedImports = Array.from(names).sort().join(', ');
+            imports.push(`import { ${namedImports} } from '${path}';`);
+        }
+        return imports.join('\n');
+    }
+    /**
+     * Post-process generated story content
+     */
+    postProcess(storyContent) {
+        // Default implementation - can be overridden by subclasses
+        return storyContent
+            .trim()
+            .replace(/\r\n/g, '\n')
+            .replace(/\n{3,}/g, '\n\n');
+    }
+    /**
+     * Validate generated story syntax
+     */
+    validate(storyContent) {
+        const errors = [];
+        if (!storyContent || storyContent.trim().length === 0) {
+            errors.push('Story content is empty');
+        }
+        // Check for common issues
+        if (!storyContent.includes('export')) {
+            errors.push('Story missing exports');
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
+    /**
+     * Log adapter activity
+     */
+    log(message, data) {
+        logger.debug(`[${this.name}Adapter] ${message}`, data);
+    }
+    /**
+     * Get common story structure rules
+     */
+    getCommonRules() {
+        return `
+GENERAL RULES:
+- Follow the component library's design patterns
+- Use meaningful story names that describe the variant
+- Include multiple stories showing different states/variants
+- Ensure accessibility by using proper ARIA attributes
+- Use realistic placeholder content
+
+IMAGE RULES:
+- Use Lorem Picsum for placeholder images: https://picsum.photos/[width]/[height]
+- Always include alt text for images
+- Example: https://picsum.photos/400/300?random=1
+
+SPACING RULES:
+- Use the design system's spacing tokens when available
+- Maintain consistent margins and padding
+- Follow the layout grid system if present
+`;
+    }
+}

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

@@ -0,0 +1,55 @@
+/**
+ * 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 { FrameworkType, FrameworkDetectionResult } from './types.js';
+/**
+ * Framework Detector Class
+ */
+export declare class FrameworkDetector {
+    private projectRoot;
+    private packageJson;
+    private dependencies;
+    private detectedConfigFiles;
+    constructor(projectRoot?: string);
+    /**
+     * Detect frameworks used in the project
+     */
+    detect(): Promise<FrameworkDetectionResult>;
+    /**
+     * Load and parse package.json
+     */
+    private loadPackageJson;
+    /**
+     * Scan for framework configuration files
+     */
+    private scanConfigFiles;
+    /**
+     * Score each framework pattern based on evidence
+     */
+    private scoreFrameworks;
+    /**
+     * Get framework version from dependencies
+     */
+    private getFrameworkVersion;
+    /**
+     * Get framework-specific configuration
+     */
+    private getFrameworkConfig;
+    /**
+     * Quick check for a specific framework
+     */
+    hasFramework(framework: FrameworkType): boolean;
+}
+/**
+ * Factory function for framework detection
+ */
+export declare function detectFramework(projectRoot?: string): Promise<FrameworkDetectionResult>;
+/**
+ * Get framework detector instance
+ */
+export declare function getFrameworkDetector(projectRoot?: string): FrameworkDetector;
+//# sourceMappingURL=framework-detector.d.ts.map