CompleteComponent Library

CLI Components

A React component library built in 2 iterations.

2
Iterations
119
Tests

Test Growth

v1████████████████████119Unit pass, E2E fail (not in checklist)
v2████████████████████119Fixed prompt, full success

Try It

$ play cli-componentsOpen in new tab →

The Prompt

Prompt
# CLI Components - Ralph Wiggum Prompt

## Your Mission

Implement 4 React components that pass all unit and E2E tests. The components must follow CLI/terminal aesthetic styling.

## Success Criteria

Run these commands:

```bash
npm test           # All unit tests must pass
npm run test:e2e   # All E2E tests must pass (runs in real browser)
npm run typecheck  # No TypeScript errors
npm run build      # Must build successfully
```

When ALL FOUR pass, output: **RALPH_WIGGUM_COMPLETE**

**IMPORTANT:** Unit tests run in jsdom (simulated browser), E2E tests run in real Chrome. Code that passes unit tests may fail in real browsers. If E2E fails with errors like "Illegal invocation", your code has browser compatibility issues.

## Components to Implement

1. **TypingEffect** - Animated terminal-style typing with blinking cursor
2. **ProgressBar** - Accessible progress indicator with color variants
3. **Collapsible** - Expandable content section with keyboard nav
4. **CopyButton** - Copy to clipboard with success/error feedback

## Common Pitfalls

1. Forgetting cleanup: Always clear intervals/timeouts in useEffect cleanup
2. Missing test IDs: Tests rely on exact data-testid values
3. Timer function context (CRITICAL): In browsers, setInterval/setTimeout must be called directly, NOT stored in variables:

```javascript
// BAD - fails in browser with "Illegal invocation"
const mySetInterval = setInterval;
mySetInterval(() => {}, 100);

// GOOD - works everywhere
setInterval(() => {}, 100);
```

The Journey

I wanted to test if the methodology could build a component library. Four React components: TypingEffect, ProgressBar, Collapsible, and CopyButton. CLI aesthetic styling, touch-friendly, accessible.

The first attempt looked successful. 97 unit tests passed, typecheck clean, build successful. Ralph output RALPH_WIGGUM_COMPLETE.

Then I ran the E2E tests manually. 18 out of 22 failed. The components worked in jsdom but crashed in real Chrome with 'Illegal invocation' errors.

The problem was twofold. First, E2E tests weren't in the explicit success criteria checklist, so Ralph never ran them. Second, there was a scaffolding bug (Playwright's baseURL didn't match Vite's base path).

The timer crash was interesting. Ralph's code stored setInterval in a variable before calling it. This works in jsdom but fails in browsers because DOM methods need their original context.

For the second attempt, I reset the components to stubs, fixed the Playwright config (our bug), and updated the prompt. Added E2E to the success criteria, added a warning about jsdom vs browser differences, and documented the timer pitfall explicitly.

Ralph succeeded on the second attempt. All 119 tests passed. The lesson: success criteria must be exhaustive, and known environment differences need to be called out in the prompt.

Lessons Learned

  • Success criteria must be exhaustive (E2E not in checklist = not run)
  • Scaffolding must be verified before running Ralph
  • jsdom and real browsers behave differently (timer context)
  • Document known environment differences in the prompt pitfalls