Summary
There are currently no interactive component previews. Adding Storybook stories makes it easy for contributors and consumers to explore components without setting up a full app.
Implementation Steps
- Install Storybook:
npx storybook@latest init — choose the Vite + React builder. Discuss the dependency additions in this issue before merging.
- Create stories under
src/components/**/*.stories.tsx (co-located with components).
- Required stories:
ConnectWalletButton — Default, Connecting, Connected states.
CopyableAddress — Truncated, Full.
AssetDisplay — Native XLM, Custom asset with issuer shown.
AssetBalanceList — Empty, Multiple assets.
TransactionStatusBadge — Pending, Success, Failed.
TransactionHistory — Loading, Empty, Populated.
SendPaymentForm — Default.
- Add a
storybook and build-storybook script to package.json.
- Update
CONTRIBUTING.md with instructions for running Storybook locally.
Definition of Done
Summary
There are currently no interactive component previews. Adding Storybook stories makes it easy for contributors and consumers to explore components without setting up a full app.
Implementation Steps
npx storybook@latest init— choose the Vite + React builder. Discuss the dependency additions in this issue before merging.src/components/**/*.stories.tsx(co-located with components).ConnectWalletButton— Default, Connecting, Connected states.CopyableAddress— Truncated, Full.AssetDisplay— Native XLM, Custom asset with issuer shown.AssetBalanceList— Empty, Multiple assets.TransactionStatusBadge— Pending, Success, Failed.TransactionHistory— Loading, Empty, Populated.SendPaymentForm— Default.storybookandbuild-storybookscript topackage.json.CONTRIBUTING.mdwith instructions for running Storybook locally.Definition of Done
npm run storybook).CONTRIBUTING.mdupdated.