Feat/liberary

[nafiuishaaq]

Storybook Setup Complete! 🎉

We've successfully created a complete Storybook environment for the stellarflow-frontend project with all the requested features:

✅ Core Storybook Configuration

• Created .storybook/main.ts with Next.js framework support and accessibility addon
• Created .storybook/preview.tsx with global CSS imports, dark theme defaults, and accessibility configurations
• Added Storybook scripts to package.json: npm run storybook (dev mode) and npm run build-storybook (static build)

closes #566

✅ Component Story Files Created

1. Badges: AddressBadge.stories.tsx
   • Documents all props: address, showCopyButton, showAvatar, truncateLength
   • Includes variants for all use cases
   • Accessibility documentation included

closes #520

2. Modals: OptimizedDialog.stories.tsx

   • Comprehensive documentation of the base modal component
   • All size variants (sm/md/lg/xl)
   • Accessibility features documented (ESC key, focus management, ARIA attributes)
   • Interactive state handling

3. Buttons: WalletConnectButton.stories.tsx

   • Shows all states: disconnected, checking, connected
   • Documents the dynamic import optimization
   • Dark theme compatible rendering

closes #534

4. Tables: RelayerStatusTable.stories.tsx
   • Performance optimizations documented (memoized rows)
   • All status variants (Online/Offline/Syncing)
   • Empty state and various load scenarios
   • Responsive design showcase

✅ GitHub Pages CI/CD Deployment

Created .github/workflows/deploy-storybook.yml that:

• Automatically builds and deploys Storybook to GitHub Pages on every push to main
• Supports manual deployment via workflow_dispatch
• Uses official GitHub Actions for reliable deployment
• Manages concurrency to prevent deployment conflicts

✅ All Requirements Met

• ✓ Story files for buttons, modals, badges, and tables
• ✓ Component props fully documented with controls
• ✓ Accessibility features documented and tested via a11y addon
• ✓ All variants and themes showcased
• ✓ GitHub Pages CI/CD pipeline configured for automatic deployment

The Storybook environment is now ready to use. Run npm run storybook to start the development server and explore all your components interactively!

closes #543

[drips-wave]

@nafiuishaaq 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! 🚀

Learn more about application limits