docs(ui): add stories for Recharging page

[cylewaitforit]

🔗 Linked issue

#2150

🧭 Context

This would enable a storybook mock page, storybook a11y checks, and chromatic visual regression tests for this page as documented by the storybook stories.

📚 Description

Adds stories for Recharging page.

Adds MSW and MSW storybook addon for mocking API calls on pages in Storybook. (Can be broken into separate PR if this feels too large.)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 12, 2026 11:54pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 12, 2026 11:54pm
npmx-lunaria	Ignored		Apr 12, 2026 11:54pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e3f78682-1b48-4adc-a3d6-7c7dbcc13b8a

📥 Commits

Reviewing files that changed from the base of the PR and between 202a15e and c9c0b1e.

📒 Files selected for processing (2)

• app/pages/about.stories.ts
• app/pages/recharging.stories.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/about.stories.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Integrated Mock Service Worker (MSW) to intercept and mock API requests in Storybook stories, enabling realistic component testing without external dependencies.
  • Added story variants for About and Recharging pages demonstrating component behaviour with and without mocked API data.

• Chores

  • Added MSW and MSW Storybook addon dependencies to the project.

Walkthrough

Adds MSW-based request mocking to Storybook: a service worker script, request handlers for two API endpoints, Storybook MSW initialization/loader, updated/new stories that opt into or disable mocks, and package/catalog configuration for MSW dependencies and tooling.

Changes

Cohort / File(s)	Summary
MSW Service Worker \.storybook/.public/mockServiceWorker.js	Adds the full MSW service worker script: client registration/keepalive, message handling (activate/mock/unregister), fetch interception (bypass rules, delegate to handlers), response creation/serialization, and lifecycle messaging to clients.
MSW Request Handlers \.storybook/handlers.ts	Introduces repoStatsHandler (GET /api/repo-stats) and contributorsHandler (GET /api/contributors) returning static mock JSON payloads.
Storybook Integration \.storybook/preview.ts	Initialises msw-storybook-addon via initialize() and registers mswLoader in Storybook preview loaders.
Story Files app/pages/about.stories.ts, app/pages/recharging.stories.ts	Registers contributorsHandler and repoStatsHandler as default MSW handlers for stories; adds story variants that disable MSW handlers at story-level (parameters.msw.handlers = []). Adds new recharging stories file.
Dependency & Config package.json, pnpm-workspace.yaml, knip.ts	Adds msw and msw-storybook-addon to devDependencies/catalogs and registers the MSW service-worker entry in Knip workspace config.

Sequence Diagram

sequenceDiagram
    participant Story as Story Instance
    participant Storybook as Storybook Runtime
    participant MSWLoader as MSW Loader
    participant SW as Service Worker
    participant Handlers as MSW Handlers
    participant AppNetwork as Browser Network

    Story->>Storybook: Load story (msw params)
    Storybook->>MSWLoader: Run mswLoader
    MSWLoader->>SW: Activate/register worker
    Story->>AppNetwork: Fetch /api/...
    AppNetwork->>SW: Request intercepted
    SW->>Handlers: Route request (mock or passthrough)
    Handlers-->>SW: Mocked Response
    SW-->>AppNetwork: Respond with mocked payload
    AppNetwork-->>Story: Story receives mock data

Loading

Possibly related PRs

• docs(ui): add stories for About page #2149 — Modifies the same app/pages/about.stories.ts; may overlap with added story variants and handler registration.
• feat: add storybook #1270 — Related Storybook configuration changes; both touch .storybook/preview.ts and MSW integration approach.

Suggested reviewers

• ghostdevv
• JReinhold

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs(ui): add stories for Recharging page' directly summarises the main change, which is adding Storybook stories for the Recharging page component.
Description check	✅ Passed	The description is related to the changeset, explaining the addition of Recharging page stories and MSW integration for API mocking in Storybook.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cylewaitforit]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[github-actions]

⚠️ Dependency Count

This PR adds 27 new dependencies (2271 → 2298), which exceeds the threshold of 15.

⚠️ Duplicate Dependencies (found: 4, threshold: 4)

📦 Package	📋 Versions
h3	5 versions root@ @nuxt/fonts@0.14.0 fontless@0.2.1 unstorage@1.17.5 h3@1.15.11 root@ @nuxt/fonts@0.14.0 h3@1.15.8 h3@2.0.1-rc.11 h3@2.0.1-rc.16 h3@2.0.1-rc.20
glob	5 versions root@ @nuxt/test-utils@4.0.0 @vue/test-utils@2.4.6 js-beautify@1.15.4 glob@10.5.0 root@ @vite-pwa/nuxt@1.1.1 vite-plugin-pwa@1.2.0 workbox-build@7.4.0 glob@11.1.0 root@ @vueuse/nuxt@14.2.1 ... nitropack@2.13.3 @vercel/nft@1.5.0 glob@13.0.6 root@ vue-i18n-extract@2.0.7 dot-object@2.1.5 glob@7.2.3 root@ vue-i18n-extract@2.0.7 glob@8.1.0
@rolldown/pluginutils	5 versions root@ @vueuse/nuxt@14.2.1 ... rollup-plugin-visualizer@7.0.1 rolldown@1.0.0-rc.12 @rolldown/pluginutils@1.0.0-rc.12 root@ @vueuse/nuxt@14.2.1 nuxt@4.3.1 @nuxt/vite-builder@4.3.1 @vitejs/plugin-vue-jsx@5.1.5 @rolldown/pluginutils@1.0.0-rc.13 root@ @vueuse/nuxt@14.2.1 nuxt@4.3.1 @nuxt/vite-builder@4.3.1 @vitejs/plugin-vue@6.0.5 @rolldown/pluginutils@1.0.0-rc.2 root@ @nuxt/a11y@1.0.0-alpha.1 @nuxt/devtools-kit@3.2.4 vite@8.0.0-beta.18 rolldown@1.0.0-rc.8 @rolldown/pluginutils@1.0.0-rc.8 @rolldown/pluginutils@1.0.0-rc.9
@oxc-project/types	6 versions root@ @vueuse/nuxt@14.2.1 nuxt@4.3.1 oxc-parser@0.112.0 @oxc-project/types@0.112.0 root@ @nuxt/a11y@1.0.0-alpha.1 @nuxt/devtools-kit@3.2.4 vite@8.0.0-beta.18 rolldown@1.0.0-rc.8 @oxc-project/types@0.115.0 root@ knip@6.0.5 oxc-parser@0.120.0 @oxc-project/types@0.120.0 root@ @vueuse/nuxt@14.2.1 ... rollup-plugin-visualizer@7.0.1 rolldown@1.0.0-rc.12 @oxc-project/types@0.122.0 root@ vite-plus@0.1.16 @oxc-project/types@0.123.0 root@ @nuxtjs/i18n@10.2.3 oxc-parser@0.95.0 @oxc-project/types@0.95.0

💡 To find out what depends on a specific package, run: pnpm -r why example-package

📊 Dependency Size Changes

Warning

This PR adds 13 MB of new dependencies, which exceeds the threshold of 200 kB.

📦 Package	📏 Size
msw@2.13.2	5.3 MB
tldts@7.0.28	3.1 MB
@mswjs/interceptors@0.41.3	1.5 MB
graphql@16.13.2	1.4 MB
tough-cookie@6.0.1	755.4 kB
tldts-core@7.0.28	239.7 kB
headers-polyfill@4.0.3	133.8 kB
@inquirer/core@10.3.2	103 kB
rettime@0.10.1	71.1 kB
cookie@1.1.1	60.5 kB
strict-event-emitter@0.5.1	45.7 kB
@inquirer/figures@1.0.15	38.2 kB
@open-draft/deferred-promise@2.2.0	25.4 kB
@open-draft/logger@0.3.0	24.3 kB
outvariant@1.4.3	23.2 kB
msw-storybook-addon@2.0.7	22.9 kB
yoctocolors-cjs@2.1.3	11 kB
@open-draft/until@2.1.0	10.1 kB
@inquirer/confirm@5.1.21	9.5 kB
wrap-ansi@6.2.0	9.5 kB
@inquirer/type@3.0.10	9.4 kB
until-async@3.0.2	9.2 kB
@inquirer/ansi@1.0.2	8 kB
mute-stream@2.0.0	6.5 kB
is-node-process@1.2.0	6 kB
@types/statuses@2.0.6	4.9 kB
cli-width@4.1.0	4.8 kB

Total size change: 13 MB

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!