Repository navigation
feat(storybook): add stories for Brand, ThemeToggle, ConnectWalletButton and StreamTimeline - #1001
Merged
Austinaminu2 merged 2 commits intoOct 16, 2026
Conversation
…ton and StreamTimeline
Add Storybook stories so each component's states can be reviewed in
isolation. Stories live next to their components, following the
convention in components/ui/badge.stories.tsx.
Brand (components/brand.stories.tsx)
- Default: logo mark with the FlowStar wordmark
- Small: logo mark only (showWordmark={false})
ThemeToggle (components/ThemeToggle.stories.tsx)
- Light / Dark: wrapped in the real next-themes ThemeProvider with the
matching defaultTheme. Each story uses its own storage key, cleared in
beforeEach, so it always opens in its own theme even after the
toggle has been clicked.
ConnectWalletButton (components/layout/connect-wallet-button.stories.tsx)
- Disconnected, Connected, Reconnecting: useWallet is mocked per story
with a full, type-checked wallet context value (connect, disconnect
and signTransaction are storybook/test fn() spies).
StreamTimeline (components/streams/stream-timeline.stories.tsx)
- Scheduled, Streaming, Completed, Cancelled: useStreamHistory is mocked
with representative on-chain events per state (newest first, as the
hook returns them), rendered inside the real NetworkProvider. The
Completed story has enough events to show the collapse toggle.
Storybook config (.storybook/preview.ts)
- Register module mocks for hooks/use-wallet and hooks/use-stream-history
via sb.mock(..., { spy: true }) (Storybook 9.1). The real
implementations stay in place unless a story overrides them, and no
component or app code changes.
Verification
- npx tsc --noEmit reports no errors.
- All 11 stories render without errors in a built Storybook, checked in
headless Chromium.
Closes FlowwStar#979
Closes FlowwStar#978
Closes FlowwStar#975
Closes FlowwStar#972
|
@Crypto-Oracle001 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds Storybook stories so these components' states can be reviewed in isolation. Each story file sits next to its component, following
components/ui/badge.stories.tsx.Brandcomponents/brand.stories.tsxThemeTogglecomponents/ThemeToggle.stories.tsxConnectWalletButtoncomponents/layout/connect-wallet-button.stories.tsxStreamTimelinecomponents/streams/stream-timeline.stories.tsxDetails
showWordmarkprop. Small is the logo mark only.next-themesThemeProviderwith the matchingdefaultTheme. Each story has its own storage key, cleared inbeforeEach, so it always opens in its own theme.useWalletis mocked per story with a full, type-checked wallet context value. The actions arefn()spies.useStreamHistoryis mocked with sample on-chain events for each state, rendered inside the realNetworkProvider. Completed has enough events to show the collapse toggle..storybook/preview.ts: registerssb.mock(import('../hooks/use-wallet.ts'), { spy: true })and the same foruse-stream-history(Storybook 9.1 module mocking). Without an override, the real implementations run. No component or app code changed.Verification
npx tsc --noEmitreports no errorsCloses #979
Closes #978
Closes #975
Closes #972