Set up Storybook for UI component development

[phertyameen]

Issue #53: Set up Storybook for UI component development

Category: Components
Repo: bridgelet (frontend + docs)

Description

Install and configure Storybook 8+ for the frontend/ directory. Create stories for: ClaimStatusCard, SendFormStep, ToastNotification, WalletAddressInput, and SkeletonLoader.

Acceptance Criteria

• Implementation complete
• Tests passing
• Docs updated
• Reviewed and merged

[Uche44]

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

Here's how I'd approach this problem:

I will set up Storybook 8+ for the frontend and create stories for the required components, covering their main states and variations. This will make UI development, testing, and review much easier.

I have experience working with React and Storybook, and I can deliver a clean setup with well-structured stories, documentation updates, and passing tests.

Let me handle this for you.

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

[Nimatstar]

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

Hi am afull stack developer can i work on this task

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

[talktosam2003]

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

please can i please work on this issue

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

[A6dulmalik]

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

Hi
I’d love to work on this task and contribute a solution for it.
I’ll review the requirements carefully and submit an implementation/update as soon as possible.
Thank you

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

[drips-wave]

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

🧑‍💻 @A6dulmalik: 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 🌊

[grantfox-oss]

🦊 GrantFox — @A6dulmalik has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #96)
2. Your PR will be reviewed by the bridgelet-org maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

This issue has been completed by @A6dulmalik as part of the Stellar Wave Program's 6th Wave 🥳

😎 @A6dulmalik: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.