docs(ui): add stories for Settings 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 Settings page.

Removes conditional logic for '@nuxtjs/color-mode' when using storybook and moves __NUXT_COLOR_MODE__ mocking to the preview-head file. This both reduces the workarounds for storybook in the nuxt config as well as prevents the storybook from crashing when a theme was selected on the Settings page in the storybook.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 16, 2026 2:39pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 16, 2026 2:39pm
npmx-lunaria	Ignored		Apr 16, 2026 2:39pm

[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: e3717ecf-984e-452b-a75d-0ae2a1640ae6

📥 Commits

Reviewing files that changed from the base of the PR and between 2cf56e8 and d57a7bf.

📒 Files selected for processing (1)

• nuxt.config.ts

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

• nuxt.config.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Improved colour-mode support via a consistent global stub for preview environments.

• Storybook

  • Added interactive Settings page stories, including English and French variants, translation-helper scenarios, and an example that selects the npm data source.
  • Added a mock i18n status endpoint used by stories to show per-locale translation progress and edit links.

• Tests

  • Stories include interactive plays to validate key UI flows.

Walkthrough

Adds Storybook stories for the Settings page, a new MSW handler exposing i18n status at /lunaria/status.json, moves Nuxt color-mode global stubbing into Storybook head HTML, and makes @nuxtjs/color-mode unconditional in Nuxt config.

Changes

Cohort / File(s)	Summary
Storybook MSW handler .storybook/handlers.ts	Added i18nStatusHandler that intercepts GET /lunaria/status.json and returns generatedAt, sourceLocale summary and per-locale completion metrics and GitHub edit/history URLs.
Storybook head / preview .storybook/preview-head.html, .storybook/preview.ts	Added inline script in preview-head.html to define window.__NUXT_COLOR_MODE__. Removed the Nuxt color-mode stub from preview.ts (preview.ts otherwise unchanged).
Settings page stories app/pages/settings.stories.ts	New Storybook module registering Settings stories (Default, NpmRegistryDataSource with a play interaction, NonEnglishTranslationHelper, WithoutTranslationHelper). Clears npmx-settings localStorage per story and configures MSW handlers per-story where needed.
Nuxt configuration nuxt.config.ts	Moved @nuxtjs/color-mode out of the Storybook-only conditional so it is always included; @nuxt/fonts remains conditional on isStorybook.

Sequence Diagram(s)

sequenceDiagram
    participant Storybook
    participant Head as preview-head.html
    participant MSW
    participant Settings as Settings component
    Storybook->>Head: load page (head script runs)
    Head-->>Storybook: window.__NUXT_COLOR_MODE__ defined
    Storybook->>Settings: mount Settings story (decorators apply)
    Settings->>MSW: GET /lunaria/status.json
    MSW-->>Settings: 200 JSON (generatedAt, sourceLocale, locales...)
    Settings->>Storybook: render UI (translation helper / locale metrics)

Loading

Possibly related PRs

• test: remove color-mode stub #1287: Related changes to __NUXT_COLOR_MODE__ global stubbing across test/Storybook setups.
• docs(ui): add stories for Privacy page #2319: Adds pageDecorator used by the new settings.stories.ts.
• docs(ui): add stories for Recharging page #2496: Adds MSW route handler exports and Storybook MSW patterns similar to the new i18nStatusHandler.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs(ui): add stories for Settings page' directly and accurately summarizes the main change in the changeset—adding Storybook stories for the Settings page.
Description check	✅ Passed	The description is directly related to the changeset, providing context about why Stories were added, explaining the conditional logic removal for '@nuxtjs/color-mode', and detailing the NUXT_COLOR_MODE mocking relocation.

_{✏️ 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.}

[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!

[ghostdevv]

[cylewaitforit]

We also have to load those in the preview-head file at the moment. So we have them, just not from @nuxt/fonts.

Would be great to not have any special carve outs for storybook in the nuxt config eventually.

[ghostdevv]

100%