@tpitre/story-ui 2.2.0 → 2.3.1

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

@@ -0,0 +1,336 @@
+/**
+ * Vue Framework Adapter
+ *
+ * Generates Storybook stories for Vue 3 components.
+ * Supports Composition API and Options API.
+ */
+import { BaseFrameworkAdapter } from './base-adapter.js';
+export class VueAdapter extends BaseFrameworkAdapter {
+    constructor() {
+        super(...arguments);
+        this.type = 'vue';
+        this.name = 'Vue';
+        this.supportedStoryFrameworks = [
+            'storybook-vue3',
+            'histoire',
+            '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 Vue 3 developer creating Storybook stories using CSF 3.0 format.
+Use ONLY the Vue components from the ${componentSystemName} listed below.
+
+MANDATORY IMPORTS - First lines of every story file:
+1. import type { Meta, StoryObj } from '@storybook/vue3';
+2. import { ComponentName } from '${config.importPath || 'your-library'}';
+
+VUE 3 STORY FORMAT:
+- Use Vue 3 Composition API style
+- Components can use render functions or template syntax
+- Props are passed via args
+- Events use v-on or @ shorthand
+
+STORY STRUCTURE (CSF 3.0):
+- Meta object with component, title, and parameters
+- Use render function for complex templates
+- Export named stories as StoryObj
+
+CRITICAL RULES:
+- Import components from the library, NOT .vue files
+- Use render functions for dynamic content
+- Slots use v-slot directive or # shorthand
+
+Example structure:
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Button } from 'your-library';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    label: 'Click me',
+  },
+};
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args };
+    },
+    template: \`
+      <Button v-bind="args">
+        <template #icon>
+          <span>★</span>
+        </template>
+        Click me
+      </Button>
+    \`,
+  }),
+};
+\`\`\`
+
+TEMPLATE VS RENDER FUNCTION:
+- Simple props: Use args directly
+- Slots/complex content: Use render function with template
+- Dynamic content: Use render function with setup()
+
+SLOT SYNTAX:
+- Default slot: Content between tags
+- Named slots: <template #name> or <template v-slot:name>
+- Scoped slots: <template #default="{ item }">
+
+EVENT HANDLING:
+- Use @event or v-on:event syntax
+- Use action argTypes to log events in Storybook
+
+${this.getCommonRules()}`;
+    }
+    generateExamples(config) {
+        const lib = config.importPath || 'your-library';
+        return `
+## Example Stories for Vue 3
+
+### Single Component Story
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Button } from 'your-library';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    label: 'Button',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { Button },
+    template: \`
+      <div style="display: flex; gap: 8px;">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+      </div>
+    \`,
+  }),
+};
+\`\`\`
+
+### With Slots
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Card, Button, Text } from '${lib}';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithSlots: Story = {
+  render: () => ({
+    components: { Card, Button, Text },
+    template: \`
+      <Card style="width: 300px">
+        <template #header>
+          <Text variant="heading">Card Title</Text>
+        </template>
+
+        <Text>This is the card content using the default slot.</Text>
+
+        <template #footer>
+          <Button variant="primary">Action</Button>
+        </template>
+      </Card>
+    \`,
+  }),
+};
+\`\`\`
+
+### With Reactive State
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
+import { Input } from '${lib}';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { Input },
+    setup() {
+      const value = ref('');
+      return { value };
+    },
+    template: \`
+      <div>
+        <Input v-model="value" placeholder="Type here..." />
+        <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/vue3';
+
+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>',
+  }),
+};
+`;
+        }
+        return `
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { ${firstComponent.name} } from '${lib}';
+
+const meta: Meta<typeof ${firstComponent.name}> = {
+  title: 'Components/${firstComponent.name}',
+  component: ${firstComponent.name},
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    getStoryTemplate(options) {
+        return `
+// {{componentName}}.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { {{componentName}} } from '{{importPath}}';
+
+const meta: Meta<typeof {{componentName}}> = {
+  title: '{{category}}/{{componentName}}',
+  component: {{componentName}},
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+`;
+    }
+    /**
+     * Post-process Vue 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 Vue 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 Vue story
+     */
+    validate(storyContent) {
+        const baseValidation = super.validate(storyContent);
+        const errors = [...baseValidation.errors];
+        // Vue-specific validations
+        if (!storyContent.includes('@storybook/vue3')) {
+            errors.push("Missing '@storybook/vue3' import");
+        }
+        if (storyContent.includes("import React from 'react'")) {
+            errors.push('React import found in Vue story');
+        }
+        // Check for JSX-style event handlers
+        if (/onClick=\{/.test(storyContent)) {
+            errors.push('Using JSX-style event handlers instead of Vue @event syntax');
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
+}
+/**
+ * Factory function
+ */
+export function createVueAdapter() {
+    return new VueAdapter();
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Web Components Framework Adapter
+ *
+ * Generates Storybook stories for Web Components (Lit, vanilla, etc.).
+ * Supports standard Web Components and Lit framework.
+ */
+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 WebComponentsAdapter extends BaseFrameworkAdapter {
+    readonly type: FrameworkType;
+    readonly name = "Web Components";
+    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;
+    /**
+     * Convert PascalCase to kebab-case
+     */
+    private toKebabCase;
+    /**
+     * Post-process Web Components stories
+     */
+    postProcess(storyContent: string): string;
+    /**
+     * Fix nested template literal escaping issues
+     *
+     * Problem: LLMs generate code like:
+     *   innerHTML: \`<sl-icon></sl-icon>\`
+     *
+     * This causes Babel syntax errors. The fix converts problematic patterns
+     * to use string concatenation instead of nested template literals.
+     */
+    private fixNestedTemplateLiterals;
+    /**
+     * Validate Web Components story
+     */
+    validate(storyContent: string): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Generate import statements for Web Components
+     */
+    generateImports(components: DiscoveredComponent[], config: StoryUIConfig): string;
+}
+/**
+ * Factory function
+ */
+export declare function createWebComponentsAdapter(): WebComponentsAdapter;
+//# sourceMappingURL=web-components-adapter.d.ts.map

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

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