docs(ui): add stories for Brand page by cylewaitforit · Pull Request #2468 · npmx-dev/npmx.dev

cylewaitforit · 2026-04-10T21:42:08Z

🔗 Linked issue

🧭 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 Brand page.

Fixes storybook dev server not working with #component imports.

vercel · 2026-04-10T21:42:15Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 10, 2026 10:47pm

2 Skipped Deployments

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

codecov · 2026-04-10T21:44:55Z

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!

coderabbitai · 2026-04-10T22:00:24Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 61f48329-fcc1-4a93-b591-07556c055767

📥 Commits

Reviewing files that changed from the base of the PR and between 8df8629 and 0979d00.

📒 Files selected for processing (1)

.storybook/main.ts

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

.storybook/main.ts

📝 Walkthrough

Walkthrough

Adds a Vite pre-plugin storybook-nuxt-components that resolves #components to a virtual module by synchronously reading and parsing Nuxt’s generated components.d.ts (resolving the Nuxt build directory via Vite aliases), re-exports matched components, registers components.d.ts with Vite’s watcher, and errors when the build dir cannot be resolved or no exports are found. Replaces a raw-HTML transformIndexHtml mutation with a handler that returns structured injection directives to prepend a script. Wraps the vue-docgen-plugin transform hook to catch errors, console.warn them, and return undefined. Adds app/pages/brand.stories.ts exporting a typed meta default and a Default story using the shared pageDecorator and fullscreen layout.

Possibly related PRs

docs(ui): add stories for Privacy page #2319: Introduced the shared pageDecorator used by the new Brand story.
docs(ui): add ButtonGroup stories to storybook #1964: Previously modified .storybook/main.ts to adjust vue-docgen-plugin transform/error-handling logic.
docs(ui): add dark theme for storybook docs v2 #2172: Changed .storybook/main.ts handling of transformIndexHtml injection (structured tag directives vs raw HTML mutation).

Suggested reviewers

ghostdevv
JReinhold
alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is directly related to the changeset, describing the addition of Brand page stories and a fix for Storybook's `#component` imports issue.

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

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

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

.storybook/main.ts (1)
23-165: Consider splitting viteFinal into smaller helpers.

viteFinal now handles three distinct responsibilities in one place. Extracting plugin factories (for storybook-nuxt-components, storybook-v10-compat, and docgen wrapping) would improve readability and reduce future regression risk.
Refactor sketch
 async viteFinal(newConfig) {
   newConfig.plugins ??= []
-  // ...large inlined plugin setup and patching...
+  newConfig.plugins.unshift(createNuxtComponentsVirtualPlugin(newConfig))
+  newConfig.plugins.push(createStorybookV10CompatPlugin())
+  newConfig.plugins.push(createIgnoreInternalsPlugin())
+  wrapVueDocgenPlugin(newConfig.plugins)
   return newConfig
 }
As per coding guidelines, "Keep functions focused and manageable (generally under 50 lines)".

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c98aa88c-fd1d-4195-bf72-158ea2b85ab1

📥 Commits

Reviewing files that changed from the base of the PR and between 0164064 and 5b95ff0.

📒 Files selected for processing (2)

.storybook/main.ts
app/pages/brand.stories.ts

.storybook/main.ts

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

.storybook/main.ts (1)

65-76: Consider keeping the components.d.ts parser in one place.

This declaration-shape regex now exists here and in test/unit/a11y-component-coverage.spec.ts:80-100. Pulling it into a tiny shared helper would keep the Storybook shim and the coverage test aligned if the generated components.d.ts format ever shifts.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 50f1d2c3-9548-4f52-9fb9-618c94185763

📥 Commits

Reviewing files that changed from the base of the PR and between 5b95ff0 and 11651c8.

📒 Files selected for processing (1)

.storybook/main.ts

.storybook/main.ts

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 18cddd22-8250-4f66-a659-29466fb26c32

📥 Commits

Reviewing files that changed from the base of the PR and between 11651c8 and 8df8629.

📒 Files selected for processing (1)

.storybook/main.ts

.storybook/main.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

ghostdevv · 2026-04-12T02:01:11Z

.storybook/main.ts

+    // Fix: nuxt:components:imports-alias relies on internal Nuxt state that is
+    // cleaned up after nuxt.close() in @storybook-vue/nuxt's loadNuxtViteConfig.
+    // When that state is gone, `import X from '#components'` is left unresolved
+    // and Vite 8 falls through to package-subpath resolution, which fails with
+    // "Missing '#components' specifier in 'nuxt' package".
+    // This plugin intercepts #components first and serves a virtual module built
+    // from the components.d.ts written during the same Nuxt boot.
+    // Resolve the Nuxt build dir from Vite's alias map, which can be either a
+    // plain-object (Record<string, string>) or Vite's resolved array form
+    // (readonly Alias[] where find is string | RegExp). We must handle both
+    // without casting to Record<string, string>, which would be unsound for the
+    // array form.


I feel like everytime we add new stories for pages we have to patch storybook 😆 worth it though!

also I think this is the thing that has been stopping me from being able to run storybook locally, so will try again later 🫡

Yeah, I'm hopeful that some of these are resolved when there is a SB v10 version for @storybook-vue/nuxt but might need to upstream some of these or at least open some issues for them if not.

docs(ui): add stories for Brand page

5b95ff0

vercel bot deployed to Preview – npmx.dev April 10, 2026 21:44 View deployment

cylewaitforit marked this pull request as ready for review April 10, 2026 21:56

coderabbitai bot reviewed Apr 10, 2026

View reviewed changes

.storybook/main.ts Outdated Show resolved Hide resolved

fix: normalize path

11651c8

vercel bot deployed to Preview – npmx.dev April 10, 2026 22:09 View deployment

coderabbitai bot reviewed Apr 10, 2026

View reviewed changes

.storybook/main.ts Outdated Show resolved Hide resolved

fix: throw if no #build

8df8629

vercel bot deployed to Preview – npmx.dev April 10, 2026 22:34 View deployment

coderabbitai bot reviewed Apr 10, 2026

View reviewed changes

.storybook/main.ts Show resolved Hide resolved

Update .storybook/main.ts

0979d00

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

vercel bot deployed to Preview – npmx.dev April 10, 2026 22:47 View deployment

ghostdevv approved these changes Apr 12, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Apr 12, 2026

Merged via the queue into npmx-dev:main with commit 51bc902 Apr 12, 2026
20 checks passed

github-actions bot mentioned this pull request Apr 12, 2026

chore: release v0.9.0 #2428

Open

Uh oh!

Conversation

cylewaitforit commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 10, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostdevv Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

ghostdevv Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

cylewaitforit Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cylewaitforit commented Apr 10, 2026 •

edited

Loading

vercel bot commented Apr 10, 2026 •

edited

Loading

coderabbitai bot commented Apr 10, 2026 •

edited

Loading