Skip to content

feat(frontend): add Storybook for UI components#226

Open
Macnelson9 wants to merge 1 commit into
Dgetsylver:mainfrom
Macnelson9:feat/f9-storybook
Open

feat(frontend): add Storybook for UI components#226
Macnelson9 wants to merge 1 commit into
Dgetsylver:mainfrom
Macnelson9:feat/f9-storybook

Conversation

@Macnelson9

Copy link
Copy Markdown

Summary

  • Wires @storybook/html-vite to frontend/ with dark/light theme switcher via preview.ts
  • Adds 7 component stories under frontend/src/stories/:
    • HfBadge — safe / warning / critical / infinite states
    • LeverageSlider — default, high-leverage, expert mode, no-zones
    • PoolCard — Etherfuse, Fixed, frozen pool variants
    • AssetPicker — interactive tab bar with optional balance display
    • AprCard — supply / borrow / with-extras variants
    • Toast — success / info / error / stack variants
    • StatCard — health factor, total supply, loading skeleton, negative trend
  • Adds storybook and build-storybook scripts + devDependencies to frontend/package.json

Test plan

  • cd frontend && npm install && npm run storybook — Storybook opens at http://localhost:6006 with all 7 components visible across dark/light themes

Closes #76

🤖 Generated with Claude Code

Wires @storybook/html-vite to frontend/ with dark/light theme switcher.
Adds 7 component stories: HfBadge, LeverageSlider, PoolCard, AssetPicker,
AprCard, Toast, StatCard — covering all major states across dark/light themes.
Adds storybook + build-storybook scripts and devDependencies to
frontend/package.json.

Closes Dgetsylver#76

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Dgetsylver

Copy link
Copy Markdown
Owner

Blocker: frontend/package.json gains 5 Storybook devDeps but frontend/package-lock.json isn't updated — npm ci breaks for everyone. Commit the lockfile update.

Bigger question before this merges: the stories are hand-rolled HTML mockups with inline styles and CSS variables that don't exist in frontend/src/style.css (--color-surface vs the real --surface), so they document look-alikes rather than the actual UI and will drift immediately. Suggest either importing/reusing the real markup and stylesheet, or scoping this down to the components that can be rendered faithfully.

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.

F9: Storybook for UI components

2 participants