@auto-engineer/component-implementor-react 1.98.0 → 1.100.0

package/src/pipeline/steps/generate-story.ts

@@ -0,0 +1,17 @@
+import { writeFile } from 'node:fs/promises';
+import { generateStoryDeterministic } from '../../generate-story-deterministic';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function generateStoryStep(ctx: PipelineContext): Promise<StepResult> {
+  const storyCode = generateStoryDeterministic({
+    componentName: ctx.componentName,
+    componentImportPath: ctx.componentImportPath,
+    props: ctx.props,
+    storyVariants: ctx.storyVariants,
+  });
+
+  ctx.storyCode = storyCode;
+  await writeFile(ctx.storyPath, storyCode, 'utf-8');
+
+  return { success: true };
+}

package/src/pipeline/steps/generate-test.test.ts

@@ -0,0 +1,75 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('node:fs/promises', () => ({
+  writeFile: vi.fn(),
+}));
+
+import { writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import type { PipelineContext } from '../run-pipeline';
+import { generateTestStep } from './generate-test';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: {
+      structure: ['renders a button'],
+      rendering: [],
+      interaction: [],
+      styling: [],
+    },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    ...overrides,
+  };
+}
+
+describe('generateTestStep', () => {
+  it('generates test code and writes to testPath', async () => {
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nimport { render } from "@testing-library/react";\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx();
+    const result = await generateTestStep('mock-model' as never, ctx);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith(
+      '/project/src/MyButton.test.tsx',
+      'import { render } from "@testing-library/react";',
+      'utf-8',
+    );
+  });
+
+  it('passes existing component to prompt when in modify mode', async () => {
+    vi.mocked(generateText).mockResolvedValue({
+      text: 'test code',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx({ existingComponent: 'export function MyButton() {}', isModify: true });
+    await generateTestStep('mock-model' as never, ctx);
+
+    const call = vi.mocked(generateText).mock.calls[0][0];
+    expect(call.prompt).toContain('## Existing Component');
+    expect(call.prompt).toContain('export function MyButton() {}');
+  });
+});

package/src/pipeline/steps/generate-test.ts

@@ -0,0 +1,25 @@
+import { writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlock } from '../../extract-code-block';
+import { buildTestPrompt } from '../../prompt';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function generateTestStep(model: LanguageModel, ctx: PipelineContext): Promise<StepResult> {
+  const { system, prompt } = buildTestPrompt({
+    componentName: ctx.componentName,
+    specDeltas: ctx.specDeltas,
+    existingComponent: ctx.existingComponent,
+    projectSection: ctx.projectSection,
+  });
+
+  const { text } = await generateText({ model, system, prompt });
+  ctx.llmCalls++;
+
+  const testCode = extractCodeBlock(text);
+  ctx.testCode = testCode;
+
+  await writeFile(ctx.testPath, testCode, 'utf-8');
+
+  return { success: true };
+}

package/src/pipeline/steps/lint-fix-loop.test.ts

@@ -0,0 +1,155 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('node:fs/promises', () => ({
+  readFile: vi.fn(),
+  writeFile: vi.fn(),
+}));
+
+vi.mock('../../tools/lint-runner', () => ({
+  runLint: vi.fn(),
+  runLintFix: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import { runLint, runLintFix } from '../../tools/lint-runner';
+import type { PipelineContext } from '../run-pipeline';
+import { lintFixLoop } from './lint-fix-loop';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: { structure: [], rendering: [], interaction: [], styling: [] },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    componentCode: 'original component',
+    testCode: 'original test',
+    ...overrides,
+  };
+}
+
+describe('lintFixLoop', () => {
+  it('runs auto-fix first, then returns success if lint passes', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed code' as never);
+    vi.mocked(runLint).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(runLintFix).toHaveBeenCalledWith(
+      ['/project/src/MyButton.tsx', '/project/src/MyButton.test.tsx'],
+      '/project',
+    );
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM for remaining lint errors after auto-fix', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: false, errors: ['unfixable'] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed partial' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['remaining error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nlint-fixed component\n```\n```tsx\nlint-fixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('code' as never);
+    vi.mocked(runLint).mockReturnValue({ passed: false, errors: ['persistent lint error'] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill bad\n```\n```tsx\nstill bad test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Lint errors remain after 1 iterations'),
+    });
+  });
+
+  it('handles single code block response by updating only component', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['lint error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed component only\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.tsx', 'fixed component only', 'utf-8');
+    expect(writeFile).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns success when final check passes after last iteration', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when componentCode and testCode are undefined after readFile', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue(undefined as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop(
+      'mock-model' as never,
+      makeCtx({ componentCode: undefined, testCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

package/src/pipeline/steps/lint-fix-loop.ts

@@ -0,0 +1,59 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlocks } from '../../extract-code-block';
+import { buildLintFixPrompt } from '../../prompt';
+import { runLint, runLintFix } from '../../tools/lint-runner';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function lintFixLoop(
+  model: LanguageModel,
+  ctx: PipelineContext,
+  maxIterations: number,
+): Promise<StepResult> {
+  const filePaths = [ctx.componentPath, ctx.testPath];
+
+  runLintFix(filePaths, ctx.targetDir);
+
+  ctx.componentCode = await readFile(ctx.componentPath, 'utf-8');
+  ctx.testCode = await readFile(ctx.testPath, 'utf-8');
+
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runLint(filePaths, ctx.targetDir);
+
+    if (result.passed) {
+      return { success: true };
+    }
+
+    const { system, prompt } = buildLintFixPrompt({
+      componentCode: ctx.componentCode ?? '',
+      testCode: ctx.testCode ?? '',
+      errors: result.errors,
+    });
+
+    const { text } = await generateText({ model, system, prompt });
+    ctx.llmCalls++;
+    ctx.fixIterations++;
+
+    const blocks = extractCodeBlocks(text);
+    if (blocks.length >= 2) {
+      ctx.componentCode = blocks[0];
+      ctx.testCode = blocks[1];
+      await writeFile(ctx.componentPath, blocks[0], 'utf-8');
+      await writeFile(ctx.testPath, blocks[1], 'utf-8');
+    } else if (blocks.length === 1) {
+      ctx.componentCode = blocks[0];
+      await writeFile(ctx.componentPath, blocks[0], 'utf-8');
+    }
+  }
+
+  const finalResult = runLint(filePaths, ctx.targetDir);
+  if (finalResult.passed) {
+    return { success: true };
+  }
+
+  return {
+    success: false,
+    error: `Lint errors remain after ${maxIterations} iterations: ${finalResult.errors.slice(0, 3).join('; ')}`,
+  };
+}

package/src/pipeline/steps/story-fix-loop.test.ts

@@ -0,0 +1,123 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('node:fs/promises', () => ({
+  readFile: vi.fn(),
+  writeFile: vi.fn(),
+}));
+
+vi.mock('../../tools/type-checker', () => ({
+  runTypeCheck: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext } from '../run-pipeline';
+import { storyFixLoop } from './story-fix-loop';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: { structure: [], rendering: [], interaction: [], styling: [] },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    storyCode: 'original story',
+    componentCode: 'original component',
+    ...overrides,
+  };
+}
+
+describe('storyFixLoop', () => {
+  it('returns success immediately when story type-checks', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM to fix story type errors and writes fixed story', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error in story'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed story code\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.stories.tsx', 'fixed story code', 'utf-8');
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: false, errors: ['persistent story error'] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill broken story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+    vi.mocked(readFile).mockResolvedValue('still broken story' as never);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Story type errors remain after 1 iterations'),
+    });
+  });
+
+  it('returns success when final check passes after last iteration fix', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when storyCode and componentCode are undefined', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop(
+      'mock-model' as never,
+      makeCtx({ storyCode: undefined, componentCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

package/src/pipeline/steps/story-fix-loop.ts

@@ -0,0 +1,47 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlock } from '../../extract-code-block';
+import { buildStoryFixPrompt } from '../../prompt';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function storyFixLoop(
+  model: LanguageModel,
+  ctx: PipelineContext,
+  maxIterations: number,
+): Promise<StepResult> {
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runTypeCheck(ctx.targetDir, [ctx.storyPath]);
+
+    if (result.passed) {
+      return { success: true };
+    }
+
+    const { system, prompt } = buildStoryFixPrompt({
+      storyCode: ctx.storyCode ?? '',
+      componentCode: ctx.componentCode ?? '',
+      errors: result.errors,
+    });
+
+    const { text } = await generateText({ model, system, prompt });
+    ctx.llmCalls++;
+    ctx.fixIterations++;
+
+    const fixedStory = extractCodeBlock(text);
+    ctx.storyCode = fixedStory;
+    await writeFile(ctx.storyPath, fixedStory, 'utf-8');
+  }
+
+  const finalResult = runTypeCheck(ctx.targetDir, [ctx.storyPath]);
+  if (finalResult.passed) {
+    return { success: true };
+  }
+
+  ctx.storyCode = await readFile(ctx.storyPath, 'utf-8');
+
+  return {
+    success: false,
+    error: `Story type errors remain after ${maxIterations} iterations: ${finalResult.errors.join('; ')}`,
+  };
+}

package/src/pipeline/steps/storybook-test.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../tools/type-checker', () => ({
+  runTypeCheck: vi.fn(),
+}));
+
+vi.mock('../../tools/storybook-runner', () => ({
+  runStorybookTest: vi.fn(),
+}));
+
+import { runStorybookTest } from '../../tools/storybook-runner';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext } from '../run-pipeline';
+import { storybookTestStep } from './storybook-test';
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: { structure: [], rendering: [], interaction: [], styling: [] },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    ...overrides,
+  };
+}
+
+describe('storybookTestStep', () => {
+  it('returns success when type check passes and storybook cli disabled', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storybookTestStep(makeCtx(), false);
+
+    expect(result).toEqual({ success: true });
+    expect(runStorybookTest).not.toHaveBeenCalled();
+  });
+
+  it('returns failure when story type check fails', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({
+      passed: false,
+      errors: ['error in story'],
+    });
+
+    const result = await storybookTestStep(makeCtx(), false);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Story type errors'),
+    });
+  });
+
+  it('runs storybook CLI test when enabled and type check passes', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(runStorybookTest).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storybookTestStep(makeCtx(), true);
+
+    expect(result).toEqual({ success: true });
+    expect(runStorybookTest).toHaveBeenCalledWith('/project/src/MyButton.stories.tsx', '/project');
+  });
+
+  it('returns failure when storybook CLI test fails', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(runStorybookTest).mockReturnValue({
+      passed: false,
+      errors: ['Story failed'],
+    });
+
+    const result = await storybookTestStep(makeCtx(), true);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Storybook test failures'),
+    });
+  });
+});

package/src/pipeline/steps/storybook-test.ts

@@ -0,0 +1,27 @@
+import { runStorybookTest } from '../../tools/storybook-runner';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function storybookTestStep(ctx: PipelineContext, enableStorybookCli: boolean): Promise<StepResult> {
+  const typeResult = runTypeCheck(ctx.targetDir, [ctx.storyPath]);
+
+  if (!typeResult.passed) {
+    return {
+      success: false,
+      error: `Story type errors: ${typeResult.errors.join('; ')}`,
+    };
+  }
+
+  if (enableStorybookCli) {
+    const testResult = runStorybookTest(ctx.storyPath, ctx.targetDir);
+
+    if (!testResult.passed) {
+      return {
+        success: false,
+        error: `Storybook test failures: ${testResult.errors.join('; ')}`,
+      };
+    }
+  }
+
+  return { success: true };
+}