@auto-engineer/component-implementor-react 1.95.0 → 1.96.0

package/src/extract-code-block.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { extractCodeBlock } from './extract-code-block';
+import { extractCodeBlock, extractCodeBlocks } from './extract-code-block';
 
 describe('extractCodeBlock', () => {
   it('returns plain text unchanged', () => {
@@ -31,3 +31,35 @@ describe('extractCodeBlock', () => {
     expect(extractCodeBlock(input)).toBe('const x = 1;');
   });
 });
+
+describe('extractCodeBlocks', () => {
+  it('extracts multiple code blocks', () => {
+    const input = '```tsx\ncomponent code\n```\n\nsome text\n\n```tsx\nstory code\n```';
+    const blocks = extractCodeBlocks(input);
+    expect(blocks).toEqual(['component code', 'story code']);
+  });
+
+  it('extracts blocks with different language tags', () => {
+    const input = '```tsx\nfirst block\n```\n```ts\nsecond block\n```';
+    const blocks = extractCodeBlocks(input);
+    expect(blocks).toEqual(['first block', 'second block']);
+  });
+
+  it('extracts bare code blocks', () => {
+    const input = '```\nbare block\n```';
+    const blocks = extractCodeBlocks(input);
+    expect(blocks).toEqual(['bare block']);
+  });
+
+  it('falls back to full text when no code blocks found', () => {
+    const input = 'plain text content';
+    const blocks = extractCodeBlocks(input);
+    expect(blocks).toEqual(['plain text content']);
+  });
+
+  it('trims content within each block', () => {
+    const input = '```tsx\n  spaced content  \n```';
+    const blocks = extractCodeBlocks(input);
+    expect(blocks).toEqual(['spaced content']);
+  });
+});

package/src/extract-code-block.ts

@@ -4,3 +4,16 @@ export function extractCodeBlock(text: string): string {
     .replace(/```/g, '')
     .trim();
 }
+
+export function extractCodeBlocks(text: string): string[] {
+  const blocks: string[] = [];
+  const regex = /```(?:tsx?|typescript)?\n([\s\S]*?)```/g;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) !== null) {
+    blocks.push(match[1].trim());
+  }
+  if (blocks.length === 0) {
+    blocks.push(text.trim());
+  }
+  return blocks;
+}

package/src/generate-component.test.ts

@@ -32,29 +32,42 @@ describe('generateComponentFile', () => {
     const result = await generateComponentFile({
       componentName: 'Button',
       specDeltas,
-      testCode: 'import { render } from "@testing-library/react";',
     });
 
     expect(result).toBe('export function Button() { return <button />; }');
   });
 
-  it('includes spec deltas and test code in the prompt', async () => {
+  it('passes system prompt with methodology, rules, and checklist', async () => {
     const mockGenerateText = vi.mocked(generateText);
     mockGenerateText.mockResolvedValue({
       text: 'component code',
     } as Awaited<ReturnType<typeof generateText>>);
 
-    await generateComponentFile({
-      componentName: 'Button',
-      specDeltas,
-      testCode: 'describe("Button", () => {})',
-    });
+    await generateComponentFile({ componentName: 'Button', specDeltas });
+
+    const system = mockGenerateText.mock.calls[0][0].system as string;
+    expect(system).toContain('staff-level frontend engineer');
+    expect(system).toContain('METHODOLOGY');
+    expect(system).toContain('RULES');
+    expect(system).toContain('QUALITY CHECKLIST');
+    expect(system).toContain('Named exports');
+    expect(system).toContain('Tailwind CSS');
+    expect(system).toContain('ARIA roles');
+  });
+
+  it('includes spec deltas in the user prompt', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: 'component code',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await generateComponentFile({ componentName: 'Button', specDeltas });
 
     const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Spec Deltas');
     expect(prompt).toContain('## Structure');
     expect(prompt).toContain('renders a Button element');
-    expect(prompt).toContain('## Test File');
-    expect(prompt).toContain('describe("Button", () => {})');
+    expect(prompt).toContain('**Button**');
   });
 
   it('includes existing component code when provided', async () => {
@@ -66,7 +79,6 @@ describe('generateComponentFile', () => {
     await generateComponentFile({
       componentName: 'Button',
       specDeltas,
-      testCode: 'test code',
       existingComponent: 'export function Button() {}',
     });
 
@@ -74,20 +86,4 @@ describe('generateComponentFile', () => {
     expect(prompt).toContain('## Existing Component');
     expect(prompt).toContain('export function Button() {}');
   });
-
-  it('uses system prompt referencing React component generation', async () => {
-    const mockGenerateText = vi.mocked(generateText);
-    mockGenerateText.mockResolvedValue({
-      text: 'code',
-    } as Awaited<ReturnType<typeof generateText>>);
-
-    await generateComponentFile({
-      componentName: 'Button',
-      specDeltas,
-      testCode: 'test',
-    });
-
-    const system = mockGenerateText.mock.calls[0][0].system as string;
-    expect(system).toContain('React');
-  });
 });

package/src/generate-component.ts

@@ -1,57 +1,16 @@
 import { createModelFromEnv } from '@auto-engineer/model-factory';
 import { generateText } from 'ai';
 import { extractCodeBlock } from './extract-code-block';
+import { buildComponentPrompt, type ComponentPromptInput } from './prompt';
 
-type SpecDeltas = {
-  structure: string[];
-  rendering: string[];
-  interaction: string[];
-  styling: string[];
-};
-
-type GenerateComponentInput = {
-  componentName: string;
-  specDeltas: SpecDeltas;
-  testCode: string;
-  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: GenerateComponentInput): 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}\n\n## Test File\n\`\`\`tsx\n${input.testCode}\n\`\`\``;
-}
-
-const SYSTEM_PROMPT = `You are a React component expert. Write a React component (.tsx) that satisfies the spec and passes the provided test.
-
-Rules:
-- Use functional components with TypeScript
-- Export the component as a named export
-- Use Tailwind CSS classes for styling
-- The component must pass the provided test
-- Return ONLY the component file code, no commentary`;
+export type GenerateComponentInput = ComponentPromptInput;
 
 export async function generateComponentFile(input: GenerateComponentInput): Promise<string> {
+  const { system, prompt } = buildComponentPrompt(input);
   const { text } = await generateText({
     model: createModelFromEnv(),
-    system: SYSTEM_PROMPT,
-    prompt: buildPrompt(input),
+    system,
+    prompt,
   });
   return extractCodeBlock(text);
 }

package/src/generate-story.test.ts

@@ -32,44 +32,40 @@ describe('generateStoryFile', () => {
     const result = await generateStoryFile({
       componentName: 'Button',
       specDeltas,
-      componentCode: 'export function Button() { return <button />; }',
     });
 
     expect(result).toBe('import type { Meta } from "@storybook/react";');
   });
 
-  it('includes spec deltas and component code in the prompt', async () => {
+  it('passes system prompt with methodology, rules, and checklist', async () => {
     const mockGenerateText = vi.mocked(generateText);
     mockGenerateText.mockResolvedValue({
       text: 'story code',
     } as Awaited<ReturnType<typeof generateText>>);
 
-    await generateStoryFile({
-      componentName: 'Button',
-      specDeltas,
-      componentCode: 'export function Button() {}',
-    });
+    await generateStoryFile({ 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('## Component Code');
-    expect(prompt).toContain('export function Button() {}');
+    const system = mockGenerateText.mock.calls[0][0].system as string;
+    expect(system).toContain('design systems engineer');
+    expect(system).toContain('METHODOLOGY');
+    expect(system).toContain('RULES');
+    expect(system).toContain('QUALITY CHECKLIST');
+    expect(system).toContain('CSF3 format');
+    expect(system).toContain('Named import');
   });
 
-  it('uses system prompt referencing Storybook', async () => {
+  it('includes spec deltas in the user prompt but not component code', async () => {
     const mockGenerateText = vi.mocked(generateText);
     mockGenerateText.mockResolvedValue({
-      text: 'code',
+      text: 'story code',
     } as Awaited<ReturnType<typeof generateText>>);
 
-    await generateStoryFile({
-      componentName: 'Button',
-      specDeltas,
-      componentCode: 'code',
-    });
+    await generateStoryFile({ componentName: 'Button', specDeltas });
 
-    const system = mockGenerateText.mock.calls[0][0].system as string;
-    expect(system).toContain('Storybook');
+    const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Spec Deltas');
+    expect(prompt).toContain('## Structure');
+    expect(prompt).toContain('renders a Button element');
+    expect(prompt).not.toContain('## Component Code');
   });
 });

package/src/generate-story.ts

@@ -1,51 +1,16 @@
 import { createModelFromEnv } from '@auto-engineer/model-factory';
 import { generateText } from 'ai';
 import { extractCodeBlock } from './extract-code-block';
+import { buildStoryPrompt, type StoryPromptInput } from './prompt';
 
-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 type GenerateStoryInput = StoryPromptInput;
 
 export async function generateStoryFile(input: GenerateStoryInput): Promise<string> {
+  const { system, prompt } = buildStoryPrompt(input);
   const { text } = await generateText({
     model: createModelFromEnv(),
-    system: SYSTEM_PROMPT,
-    prompt: buildPrompt(input),
+    system,
+    prompt,
   });
   return extractCodeBlock(text);
 }

package/src/generate-test.test.ts

@@ -22,7 +22,8 @@ describe('generateTestFile', () => {
   afterEach(() => {
     vi.clearAllMocks();
   });
-  it('returns generated test code from AI with spec deltas in prompt', async () => {
+
+  it('returns generated test code from AI', async () => {
     const mockGenerateText = vi.mocked(generateText);
     mockGenerateText.mockResolvedValue({
       text: '```tsx\nimport { render } from "@testing-library/react";\n```',
@@ -34,14 +35,26 @@ describe('generateTestFile', () => {
     });
 
     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 () => {
+  it('passes system prompt with methodology, rules, and checklist', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: 'test code',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await generateTestFile({ componentName: 'Button', specDeltas });
+
+    const system = mockGenerateText.mock.calls[0][0].system as string;
+    expect(system).toContain('senior frontend engineer who specializes in testing');
+    expect(system).toContain('METHODOLOGY');
+    expect(system).toContain('RULES');
+    expect(system).toContain('QUALITY CHECKLIST');
+    expect(system).toContain('Semantic queries first');
+    expect(system).toContain('source of truth');
+  });
+
+  it('includes all spec delta sections in the user prompt', async () => {
     const mockGenerateText = vi.mocked(generateText);
     mockGenerateText.mockResolvedValue({
       text: 'test code',
@@ -50,6 +63,7 @@ describe('generateTestFile', () => {
     await generateTestFile({ componentName: 'Button', specDeltas });
 
     const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Spec Deltas');
     expect(prompt).toContain('## Structure');
     expect(prompt).toContain('renders a Button element');
     expect(prompt).toContain('## Rendering');
@@ -73,6 +87,7 @@ describe('generateTestFile', () => {
     });
 
     const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Existing Component');
     expect(prompt).toContain('export function Button() { return <button />; }');
   });
 });

package/src/generate-test.ts

@@ -1,55 +1,16 @@
 import { createModelFromEnv } from '@auto-engineer/model-factory';
 import { generateText } from 'ai';
 import { extractCodeBlock } from './extract-code-block';
+import { buildTestPrompt, type TestPromptInput } from './prompt';
 
-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 type GenerateTestInput = TestPromptInput;
 
 export async function generateTestFile(input: GenerateTestInput): Promise<string> {
+  const { system, prompt } = buildTestPrompt(input);
   const { text } = await generateText({
     model: createModelFromEnv(),
-    system: SYSTEM_PROMPT,
-    prompt: buildPrompt(input),
+    system,
+    prompt,
   });
   return extractCodeBlock(text);
 }

package/src/prompt.test.ts

@@ -0,0 +1,163 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildComponentPrompt,
+  buildReconcilerPrompt,
+  buildStoryPrompt,
+  buildTestPrompt,
+  componentPromptSections,
+  reconcilerPromptSections,
+  storyPromptSections,
+  testPromptSections,
+} from './prompt';
+
+const specDeltas = {
+  structure: ['renders a Card element'],
+  rendering: ['shows skeleton when loading'],
+  interaction: ['calls onSelect when clicked'],
+  styling: ['applies elevated style when raised=true'],
+};
+
+describe('prompt builders', () => {
+  describe('buildComponentPrompt', () => {
+    it('returns system and prompt', () => {
+      const result = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+    });
+
+    it('system prompt contains all sections', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      expect(system).toContain('YOUR INPUT');
+      expect(system).toContain('YOUR OUTPUT');
+      expect(system).toContain('METHODOLOGY');
+      expect(system).toContain('RULES');
+      expect(system).toContain('QUALITY CHECKLIST');
+    });
+
+    it('user prompt includes component name and spec deltas', () => {
+      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      expect(prompt).toContain('**Card**');
+      expect(prompt).toContain('renders a Card element');
+      expect(prompt).toContain('shows skeleton when loading');
+    });
+
+    it('user prompt includes existing component when provided', () => {
+      const { prompt } = buildComponentPrompt({
+        componentName: 'Card',
+        specDeltas,
+        existingComponent: 'export function Card() {}',
+      });
+      expect(prompt).toContain('## Existing Component');
+      expect(prompt).toContain('export function Card() {}');
+    });
+
+    it('user prompt omits existing component section when not provided', () => {
+      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      expect(prompt).not.toContain('## Existing Component');
+    });
+  });
+
+  describe('buildTestPrompt', () => {
+    it('system prompt establishes tests as source of truth', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas });
+      expect(system).toContain('source of truth');
+    });
+
+    it('user prompt includes spec deltas', () => {
+      const { prompt } = buildTestPrompt({ componentName: 'Card', specDeltas });
+      expect(prompt).toContain('## Spec Deltas');
+      expect(prompt).toContain('calls onSelect when clicked');
+    });
+
+    it('user prompt includes existing component as context', () => {
+      const { prompt } = buildTestPrompt({
+        componentName: 'Card',
+        specDeltas,
+        existingComponent: 'existing code',
+      });
+      expect(prompt).toContain('## Existing Component');
+      expect(prompt).toContain('existing code');
+    });
+  });
+
+  describe('buildStoryPrompt', () => {
+    it('system prompt covers CSF3 and story conventions', () => {
+      const { system } = buildStoryPrompt({ componentName: 'Card', specDeltas });
+      expect(system).toContain('CSF3');
+      expect(system).toContain('Meta');
+      expect(system).toContain('StoryObj');
+    });
+
+    it('user prompt includes spec deltas without component code', () => {
+      const { prompt } = buildStoryPrompt({ componentName: 'Card', specDeltas });
+      expect(prompt).toContain('## Spec Deltas');
+      expect(prompt).toContain('applies elevated style when raised=true');
+      expect(prompt).not.toContain('## Component Code');
+    });
+  });
+
+  describe('buildReconcilerPrompt', () => {
+    const reconcileInput = {
+      componentName: 'Card',
+      specDeltas,
+      componentCode: 'component source',
+      testCode: 'test source',
+      storyCode: 'story source',
+    };
+
+    it('system prompt establishes test immutability', () => {
+      const { system } = buildReconcilerPrompt(reconcileInput);
+      expect(system).toContain('Tests are immutable');
+      expect(system).toContain('source of truth');
+    });
+
+    it('user prompt includes all three code artifacts', () => {
+      const { prompt } = buildReconcilerPrompt(reconcileInput);
+      expect(prompt).toContain('## Component Code');
+      expect(prompt).toContain('component source');
+      expect(prompt).toContain('## Test File');
+      expect(prompt).toContain('test source');
+      expect(prompt).toContain('## Story File');
+      expect(prompt).toContain('story source');
+    });
+
+    it('user prompt includes existing component when provided', () => {
+      const { prompt } = buildReconcilerPrompt({
+        ...reconcileInput,
+        existingComponent: 'old code',
+      });
+      expect(prompt).toContain('## Existing Component');
+      expect(prompt).toContain('old code');
+    });
+  });
+
+  describe('exported prompt sections', () => {
+    it('component sections are all non-empty strings', () => {
+      for (const value of Object.values(componentPromptSections)) {
+        expect(typeof value).toBe('string');
+        expect(value.length).toBeGreaterThan(0);
+      }
+    });
+
+    it('test sections are all non-empty strings', () => {
+      for (const value of Object.values(testPromptSections)) {
+        expect(typeof value).toBe('string');
+        expect(value.length).toBeGreaterThan(0);
+      }
+    });
+
+    it('story sections are all non-empty strings', () => {
+      for (const value of Object.values(storyPromptSections)) {
+        expect(typeof value).toBe('string');
+        expect(value.length).toBeGreaterThan(0);
+      }
+    });
+
+    it('reconciler sections are all non-empty strings', () => {
+      for (const value of Object.values(reconcilerPromptSections)) {
+        expect(typeof value).toBe('string');
+        expect(value.length).toBeGreaterThan(0);
+      }
+    });
+  });
+});