Epic: Set up Storybook infrastructure and demonstrate value

[talissoncosta]

Overview

Introduce Storybook as an optional development tool by setting up initial infrastructure and creating example stories that demonstrate its value for catching edge cases and improving component quality.

Context

Recent UI bugs (segment validation, whitespace handling, react-select edge cases) highlighted opportunities to catch component issues earlier in development. This epic establishes Storybook infrastructure and creates proof-of-concept stories to demonstrate its benefits.

Goals

• Set up Storybook infrastructure with minimal maintenance overhead
• Create stories for 3-5 key components that showcase different use cases
• Document simple patterns for adding new stories (make it easy for others)
• Demonstrate value through real examples (catching regressions, easier code review)
• (Optional) Integrate Chromatic for visual diffs and preview links

Approach

This is an opt-in initiative - not mandatory. The goal is to:

1. Make the tooling available
2. Show concrete benefits through examples
3. Build organic adoption as team members see the value

Success Criteria

• [ ] Storybook runs locally with simple setup (npm run storybook)
• [ ] 3-5 component stories demonstrating different patterns (edge cases, variants, interactive states)
• [ ] Documentation showing how to add a new story (< 5 minutes for simple component)
• [ ] At least one example of a bug/edge case that was caught or would have been caught by stories
• [ ] Team members know Storybook exists and how to use it if they choose to

Example Components for Initial Stories

• Needs a small audit

Dependencies

• Blocked by: Refactor project-components.js (see #6310 )

Non-Goals

• Mandating Storybook usage for all new components
• 100% component coverage
• Complex CI/CD integration (at this stage)

Related Work

• UI component audit
• TypeScript migration of base components