Skip to content

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

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

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

Conversation

@stonesjarvis3

Copy link
Copy Markdown
Contributor

Summary

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

What's changed

StatusBadge stories (StatusBadge.stories.tsx)

  • All 7 lifecycle status variants: Active, Paused, Completed, Ended, Cancelled, Scheduled, Unknown (fallback)
  • Compact size variants for dense layouts
  • AllStatuses and AllStatusesCompact showcase stories for visual regression

StreamCard stories (StreamCard.stories.tsx)

  • Active, Paused, Completed, Cancelled, Scheduled status states
  • Loading skeleton placeholder
  • Selected/bulk-select state with green border
  • WithCloneAction (clone button + selection checkbox)
  • USDC and AQUA token variants
  • ExpiringSoon (1 hour), LongRunning (1 year), ZeroFlowRate edge cases
  • MinimalProps (no timestamps)
  • LightBackground override

StreamCreationForm stories (StreamCreationForm.stories.tsx)

  • All 4 wizard steps: Recipient, Amount & Duration (blank + pre-filled), Preview (normal + large deposit), Confirm
  • USDC token variant on step 2
  • All 5 transaction overlay stages: Building, Signing, Submitting, Confirming, Done ✓
  • Transaction Error state

Bug fixes in StreamCreationForm.tsx

  • Added missing onBlur prop to SchedulingToggle
  • Corrected FlowRatePreview to receive amount as string (was number)
  • Corrected StreamCostCalculator and NetReceivedDisplay to use tokenSymbol prop (was token) and string amount

Testing

  • TypeScript: no errors in modified/new files (npx tsc --noEmit)
  • ESLint: clean on all 4 files (npx eslint components/*.stories.tsx components/StreamCreationForm.tsx)

closes #489

…onForm

- Add StatusBadge component and its stories covering all 7 status
  variants (Active, Paused, Completed, Ended, Cancelled, Scheduled,
  Unknown) in both normal and compact sizes, plus an all-statuses
  side-by-side showcase

- Add StreamCard stories covering Active, Paused, Completed, Cancelled,
  Scheduled, Loading skeleton, Selected/bulk-select, WithCloneAction,
  USDC/AQUA tokens, ExpiringSoon, LongRunning, ZeroFlowRate, MinimalProps,
  and light-background variants

- Add StreamCreationForm stories covering all 4 wizard steps (Recipient,
  Amount & Duration, Preview, Confirm) in blank and pre-filled variants,
  plus all 5 transaction overlay stages (Building, Signing, Submitting,
  Confirming, Done/Error)

- Fix TypeScript errors in StreamCreationForm.tsx:
  * Add missing onBlur prop to SchedulingToggle
  * Pass amount as string to FlowRatePreview (was number)
  * Use tokenSymbol prop name and string amount for StreamCostCalculator
    and NetReceivedDisplay (was token + number)

closes SoroStream#489
@vercel

vercel Bot commented Aug 27, 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 94f324d into SoroStream:main Aug 28, 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