Storybook setup with stories for Stellar components

[truthixify]

Labels: Stellar Wave, stellar, dx, test, drips, help-wanted
Tier: M (2–4 days)
Type: dx / test

Context

The demo has 16+ React components, but no way to develop them in isolation. Want to tweak the Stellar Receive list rendering? You have to spin up the whole app, connect a wallet, get matches, and only then can you see your change. This is slow, fragile, and discourages UI work.

Storybook fixes this. It also doubles as visual regression testing.

Scope

1. Install Storybook 8 with the Vite + React preset.
2. Configure for Wraith's dark monochrome design system — load the same Tailwind theme as the demo.
3. Write stories for the key Stellar components:
   • StellarSend (with mocked wallet context, various amount/recipient states)
   • StellarReceive (variants: empty, 1 match, 10 matches, 50 matches, scan in progress, scan error)
   • Stealth match card (the inner item — focus + hover states, balance loading, balance error)
   • Wallet connect button (disconnected, connecting, connected, network mismatch)
   • Chain switcher dropdown (all 4 chains, with disabled states)
   • Copy button (idle, copying, copied)
4. Mocked contexts:
   • Build .storybook/decorators/ providing fake ChainContext, StealthKeysContext, StellarWalletContext for stories.
   • Each story configures its context state — no real wallet, no real RPC.
5. Visual regression CI — wire @storybook/test-runner or Chromatic. On every PR, snapshot all stories; fail on unexpected diff.

Constraints

• Stories live alongside the component (e.g., StellarSend.stories.tsx).
• No story should require a network request or wallet interaction.
• Each story has at least three variants (idle, loading, error) where applicable.

Acceptance criteria

• Storybook running locally (pnpm storybook).
• Stories for ≥ 6 Stellar-related components.
• Mocked contexts working cleanly.
• CI snapshot job (Chromatic or test-runner) running on PRs.
• Documented in CONTRIBUTING for future contributors.

Why this matters

UI quality is a function of iteration speed. The faster a contributor can see their change in 8 different states, the more states they'll fix. Storybook is the cheapest way to buy that speed.

Resources

• Storybook 8: https://storybook.js.org
• Chromatic: https://www.chromatic.com

[Kingvic300]

@Kingvic300 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kingvic300 to this issue.

[Kaycee276]

@Kaycee276 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hi maintainer, can i be assigned to this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kaycee276 to this issue.

[elijah4196]

@elijah4196 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I have experience working with modern frontend tools and UI component systems. I’d love to contribute by helping organize and document Stellar components properly using Storybook.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @elijah4196 to this issue.

[drips-wave]

Congratulations, @Kingvic300! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @Kingvic300: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[truthixify]

Resolved by #32 (merged into develop).