Skip to content

feat: Storybook stories for StatusBadge, StreamCard, StreamCreationForm - #534

Merged
Chuks-coderr merged 1 commit into
SoroStream:mainfrom
stonesjarvis3:feat/489-storybook-stories
Aug 31, 2026
Merged

feat: Storybook stories for StatusBadge, StreamCard, StreamCreationForm#534
Chuks-coderr merged 1 commit into
SoroStream:mainfrom
stonesjarvis3:feat/489-storybook-stories

Conversation

@stonesjarvis3

Copy link
Copy Markdown
Contributor

Summary

Adds comprehensive Storybook stories covering every variant and state of the three target components, enabling contributors to develop and review UI in isolation without running the full app.

Stories Added

UI/StatusBadge (15 stories)

  • All 6 lifecycle statuses: Active, Paused, Completed, Ended, Cancelled, Scheduled
  • Unknown/fallback gray badge
  • Compact variants for all statuses
  • AllStatuses and AllStatuses (compact) side-by-side overviews

UI/StreamCard (16 stories)

  • Status variants: Active, Paused, Completed, Cancelled, Scheduled
  • Loading skeleton state
  • Selected (bulk-checked) state with green border
  • Clone action + selection checkbox combined
  • Token variants: XLM, USDC, AQUA
  • Time-sensitive states: Expiring soon (1 h), Long-running stream
  • Edge cases: Zero flow rate, Minimal props (no timestamps)
  • Light/dark background comparison

UI/StreamCreationForm (15 stories)

  • Step 1 — Recipient (empty and pre-filled)
  • Step 2 — Amount & Duration (empty, pre-filled, USDC token)
  • Step 3 — Preview (standard and large deposit)
  • Step 4 — Confirm
  • Transaction overlays: Building, Signing, Submitting, Confirming, Done ✓, Error

Configuration Fixes

  • .storybook/tsconfig.json: Added explicit exclude override so the parent tsconfig's **/*.stories.* exclusion does not suppress story compilation
  • .storybook/main.ts: Intersected StorybookConfigVite from @storybook/builder-vite so the viteFinal hook is correctly typed

Verification

  • npx next lint --file components/StatusBadge.stories.tsx --file components/StreamCard.stories.tsx --file components/StreamCreationForm.stories.tsx → ✔ No ESLint warnings or errors
  • npx tsc --noEmit --project .storybook/tsconfig.json → 0 errors in story files (pre-existing errors in unrelated files are unchanged)
  • npx storybook build → succeeded, 46 stories compiled and emitted to storybook-static/

Closes #489

- .storybook/tsconfig.json: add explicit exclude to override the
  parent tsconfig's exclusion of *.stories.* files so tsc can
  type-check story files directly
- .storybook/main.ts: intersect StorybookConfigVite from
  @storybook/builder-vite so the viteFinal hook is properly typed

Stories verified: 46 stories built successfully across 3 components
(StatusBadge × 15, StreamCard × 16, StreamCreationForm × 15)

Closes SoroStream#489
@vercel

vercel Bot commented Aug 31, 2026

Copy link
Copy Markdown

@stonesjarvis3 is attempting to deploy a commit to the Chuks7 Team on Vercel.

A member of the Team first needs to authorize it.

@Chuks-coderr
Chuks-coderr merged commit f8ecb7e into SoroStream:main Aug 31, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Storybook stories for all stream card and form components

2 participants