@auto-engineer/component-implementor-react 1.95.0

package/src/generate-story.ts

@@ -0,0 +1,51 @@
+import { createModelFromEnv } from '@auto-engineer/model-factory';
+import { generateText } from 'ai';
+import { extractCodeBlock } from './extract-code-block';
+
+type SpecDeltas = {
+  structure: string[];
+  rendering: string[];
+  interaction: string[];
+  styling: string[];
+};
+
+type GenerateStoryInput = {
+  componentName: string;
+  specDeltas: SpecDeltas;
+  componentCode: string;
+};
+
+function buildSpecSection(heading: string, items: string[]): string {
+  if (items.length === 0) return '';
+  return `## ${heading}\n${items.map((i) => `- ${i}`).join('\n')}`;
+}
+
+function buildPrompt(input: GenerateStoryInput): string {
+  const sections = [
+    buildSpecSection('Structure', input.specDeltas.structure),
+    buildSpecSection('Rendering', input.specDeltas.rendering),
+    buildSpecSection('Interaction', input.specDeltas.interaction),
+    buildSpecSection('Styling', input.specDeltas.styling),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+
+  return `Component: ${input.componentName}\n\n${sections}\n\n## Component Code\n\`\`\`tsx\n${input.componentCode}\n\`\`\``;
+}
+
+const SYSTEM_PROMPT = `You are a Storybook expert. Write a Storybook story file (.stories.tsx) for the described React component.
+
+Rules:
+- Use CSF3 format (export default meta, named story exports)
+- Import Meta and StoryObj from @storybook/react
+- Create stories that showcase different states from the spec
+- Return ONLY the story file code, no commentary`;
+
+export async function generateStoryFile(input: GenerateStoryInput): Promise<string> {
+  const { text } = await generateText({
+    model: createModelFromEnv(),
+    system: SYSTEM_PROMPT,
+    prompt: buildPrompt(input),
+  });
+  return extractCodeBlock(text);
+}

package/src/generate-test.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { generateTestFile } from './generate-test';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('@auto-engineer/model-factory', () => ({
+  createModelFromEnv: vi.fn(() => 'mock-model'),
+}));
+
+import { generateText } from 'ai';
+
+const specDeltas = {
+  structure: ['renders a Button element', 'accepts children prop'],
+  rendering: ['shows loading spinner when loading=true'],
+  interaction: ['calls onClick when clicked'],
+  styling: ['applies primary variant by default'],
+};
+
+describe('generateTestFile', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  it('returns generated test code from AI with spec deltas in prompt', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: '```tsx\nimport { render } from "@testing-library/react";\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    const result = await generateTestFile({
+      componentName: 'Button',
+      specDeltas,
+    });
+
+    expect(result).toBe('import { render } from "@testing-library/react";');
+    expect(mockGenerateText).toHaveBeenCalledWith({
+      model: 'mock-model',
+      system: expect.stringContaining('vitest'),
+      prompt: expect.stringContaining('renders a Button element'),
+    });
+  });
+
+  it('includes all spec delta sections in the prompt', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: 'test code',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await generateTestFile({ componentName: 'Button', specDeltas });
+
+    const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Structure');
+    expect(prompt).toContain('renders a Button element');
+    expect(prompt).toContain('## Rendering');
+    expect(prompt).toContain('shows loading spinner when loading=true');
+    expect(prompt).toContain('## Interaction');
+    expect(prompt).toContain('calls onClick when clicked');
+    expect(prompt).toContain('## Styling');
+    expect(prompt).toContain('applies primary variant by default');
+  });
+
+  it('includes existing component code as context when provided', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: 'test code',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await generateTestFile({
+      componentName: 'Button',
+      specDeltas,
+      existingComponent: 'export function Button() { return <button />; }',
+    });
+
+    const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('export function Button() { return <button />; }');
+  });
+});

package/src/generate-test.ts

@@ -0,0 +1,55 @@
+import { createModelFromEnv } from '@auto-engineer/model-factory';
+import { generateText } from 'ai';
+import { extractCodeBlock } from './extract-code-block';
+
+type SpecDeltas = {
+  structure: string[];
+  rendering: string[];
+  interaction: string[];
+  styling: string[];
+};
+
+type GenerateTestInput = {
+  componentName: string;
+  specDeltas: SpecDeltas;
+  existingComponent?: string;
+};
+
+function buildSpecSection(heading: string, items: string[]): string {
+  if (items.length === 0) return '';
+  return `## ${heading}\n${items.map((i) => `- ${i}`).join('\n')}`;
+}
+
+function buildPrompt(input: GenerateTestInput): string {
+  const sections = [
+    buildSpecSection('Structure', input.specDeltas.structure),
+    buildSpecSection('Rendering', input.specDeltas.rendering),
+    buildSpecSection('Interaction', input.specDeltas.interaction),
+    buildSpecSection('Styling', input.specDeltas.styling),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+
+  const existingContext = input.existingComponent
+    ? `\n\n## Existing Component\n\`\`\`tsx\n${input.existingComponent}\n\`\`\``
+    : '';
+
+  return `Component: ${input.componentName}\n\n${sections}${existingContext}`;
+}
+
+const SYSTEM_PROMPT = `You are a React testing expert. Write a vitest test file for the described component using @testing-library/react.
+
+Rules:
+- Import from vitest (describe, it, expect) and @testing-library/react (render, screen, fireEvent)
+- Use describe/it blocks
+- Test each specified behavior
+- Return ONLY the test file code, no commentary`;
+
+export async function generateTestFile(input: GenerateTestInput): Promise<string> {
+  const { text } = await generateText({
+    model: createModelFromEnv(),
+    system: SYSTEM_PROMPT,
+    prompt: buildPrompt(input),
+  });
+  return extractCodeBlock(text);
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+import { commandHandler as implementComponentHandler } from './commands/implement-component';
+
+export const COMMANDS = [implementComponentHandler];
+export { implementComponentHandler };
+export type {
+  ComponentImplementationFailedEvent,
+  ComponentImplementedEvent,
+  ImplementComponentCommand,
+  ImplementComponentEvents,
+} from './commands/implement-component';
+export { handleImplementComponent } from './commands/implement-component';

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "../message-bus" }]
+}

package/vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    passWithNoTests: true,
+    include: ['src/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*.ts'],
+      exclude: ['src/index.ts', 'src/**/*.test.ts'],
+      thresholds: { statements: 100, branches: 100, functions: 100, lines: 100 },
+    },
+  },
+});