feat: add storybook by sacrosanctic · Pull Request #1270 · npmx-dev/npmx.dev

sacrosanctic · 2026-02-09T12:10:10Z

In this PR

setup storybook
outline how storybook will integrate with the project

todo

setup chromatic @JReinhold
mocks for nuxt modules

considerations

story scope and converage
storybook and vitest has redundant tests
define component boundaries

notes

features added by @yannbf

notes to self

LicenseDisplay - should handle the nullish case internally
DownloadAnalytics - should be multiple components
Button - full width block is not full width
Button - ariakeyshortcut is unused

vercel · 2026-02-09T12:10:20Z

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Feb 14, 2026 1:51am
npmx.dev	Ready	Preview, Comment	Feb 14, 2026 1:51am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 14, 2026 1:51am

codecov · 2026-02-09T12:12:50Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
1708	1	1707	6

View the top 1 failed test(s) by shortest run time

test/unit/a11y-component-coverage.spec.ts > a11y component test coverage > should have accessibility tests for all components (or be explicitly skipped)

Stack Traces | 0.0105s run time

AssertionError: Missing a11y tests for 81 component(s):
  - AppFooter.vue
  - AppHeader.vue
  - AppLogo.vue
  - BaseCard.vue
  - BlueskyPostEmbed.client.vue
  - BuildEnvironment.vue
  - Button/Base.vue
  - CallToAction.vue
  - Code/DirectoryListing.vue
  - Code/FileTree.vue
  - Code/MobileTreeDrawer.vue
  - Code/Viewer.vue
  - CollapsibleSection.vue
  - ColumnPicker.vue
  - Compare/ComparisonGrid.vue
  - Compare/FacetCard.vue
  - Compare/FacetRow.vue
  - Compare/FacetSelector.vue
  - Compare/LineChart.vue
  - Compare/PackageSelector.vue
  - Compare/ReplacementSuggestion.vue
  - DateTime.vue
  - DependencyPathPopup.vue
  - Filter/Chips.vue
  - Filter/Panel.vue
  - Header/AccountMenu.client.vue
  - Header/ConnectorModal.vue
  - Header/SearchBox.vue
  - Input/Base.vue
  - LicenseDisplay.vue
  - Link/Base.vue
  - LoadingSpinner.vue
  - Org/MembersPanel.vue
  - Org/OperationsQueue.vue
  - Org/TeamsPanel.vue
  - Package/AccessControls.vue
  - Package/Card.vue
  - Package/ChartModal.vue
  - Package/ClaimPackageModal.vue
  - Package/Compatibility.vue
  - Package/Dependencies.vue
  - Package/DeprecatedTree.vue
  - Package/InstallScripts.vue
  - Package/Keywords.vue
  - Package/List.vue
  - Package/ListControls.vue
  - Package/ListToolbar.vue
  - Package/Maintainers.vue
  - Package/ManagerSelect.vue
  - Package/MetricsBadges.vue
  - Package/Playgrounds.vue
  - Package/Replacement.vue
  - Package/Sidebar.vue
  - Package/Skeleton.vue
  - Package/SkillsCard.vue
  - Package/Table.vue
  - Package/TableRow.vue
  - Package/Versions.vue
  - Package/VulnerabilityTree.vue
  - PackageProvenanceSection.vue
  - PaginationControls.vue
  - ProvenanceBadge.vue
  - Readme.vue
  - ReadmeTocDropdown.vue
  - SearchProviderToggle.client.vue
  - SearchSuggestionCard.vue
  - Select/Base.vue
  - Select/Field.vue
  - Settings/AccentColorPicker.vue
  - Settings/BgThemePicker.vue
  - Settings/Toggle.client.vue
  - Tag/RadioButton.vue
  - Tag/Static.vue
  - Terminal/Execute.vue
  - Terminal/Install.vue
  - Tooltip/Announce.vue
  - Tooltip/App.vue
  - Tooltip/Base.vue
  - User/Avatar.vue
  - VersionSelector.vue
  - ViewModeToggle.vue

To fix: Add tests in test/nuxt/a11y.spec.ts or add to SKIPPED_COMPONENTS in test/unit/a11y-component-coverage.spec.ts with justification.: expected 81 to equal +0

- Expected
+ Received

- 0
+ 81

 ❯ test/unit/a11y-component-coverage.spec.ts:166:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:145:14
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:915:28
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1243:24
 ❯ runWithTimeout node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1209:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1653:42
 ❯ Traces.$ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@.../dist/chunks/traces.CCmnQaNT.js:142:29
 ❯ trace node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@.../dist/chunks/test.B8ej_ZHS.js:239:23
 ❯ runTest node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab_@types+node_310e5dad6395fccdf5f424a1dccab9b9/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1653:17

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

JReinhold

my suggestions here could potentially be a longer-term solution to the unsupported parts of nuxt.

package.json

nuxt.config.ts

JReinhold

great job! I didn't look too much into the stories themselves, but it looked good.

.storybook/README.md

sacrosanctic · 2026-02-12T05:15:28Z

great job! I didn't look too much into the stories themselves, but it looked good.

No worries, the stories will be iterative. I will be removing them so they can be discussed in their own PR.

Improve Storybook setup

coderabbitai

Actionable comments posted: 1

docs/content/2.guide/3.storybook.md

coderabbitai

Actionable comments posted: 1

docs/content/2.guide/3.storybook.md

…rybook

JReinhold

🏎️

cylewaitforit

Very much looking forward to this!

.github/workflows/chromatic.yml

.storybook/main.ts

.storybook/preview.ts

cylewaitforit · 2026-02-13T13:19:06Z

docs/content/2.guide/3.storybook.md

+const meta = {
+  component: Component,
+  // component scope configuration goes here
+} satisfies Meta<typeof Component>


suggestion(non-blocking): Could we use eslint-plugin-storybook's meta-satisfies-type rule to enforce this?

can be done in a separate PR

docs/content/2.guide/3.storybook.md

app/components/Button/Base.stories.ts

app/components/Input/Base.stories.ts

.storybook/preview.ts

cylewaitforit · 2026-02-14T02:18:00Z

nuxt.config.ts

  },

  experimental: {
-    entryImportMap: false,


Question(non-blocking): Were entryImportMap and typescriptPlugin removed intentionally?

vercel bot deployed to Preview – npmx.dev February 9, 2026 12:12 View deployment

JReinhold reviewed Feb 9, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

nuxt.config.ts Outdated Show resolved Hide resolved

nuxt.config.ts Outdated Show resolved Hide resolved

sacrosanctic force-pushed the storybook branch from f441ce8 to e726dde Compare February 9, 2026 14:05

vercel bot deployed to Preview – npmx.dev February 9, 2026 14:07 View deployment

sacrosanctic force-pushed the storybook branch from e726dde to eff116d Compare February 9, 2026 15:24

vercel bot deployed to Preview – npmx.dev February 9, 2026 15:26 View deployment

vercel bot deployed to Preview – docs.npmx.dev February 10, 2026 11:26 View deployment

vercel bot deployed to Preview – npmx.dev February 10, 2026 11:26 View deployment

sacrosanctic force-pushed the storybook branch from 1344552 to 4478f7e Compare February 10, 2026 15:54

vercel bot deployed to Preview – npmx.dev February 10, 2026 15:56 View deployment

JReinhold reviewed Feb 10, 2026

View reviewed changes

.storybook/README.md Outdated Show resolved Hide resolved

.storybook/README.md Outdated Show resolved Hide resolved

sacrosanctic force-pushed the storybook branch from 4478f7e to 4778120 Compare February 12, 2026 05:56

vercel bot deployed to Preview – npmx.dev February 12, 2026 05:58 View deployment

sacrosanctic added 14 commits February 12, 2026 14:04

init

5f73105

modify init

b55d819

nuxt+storybook integration workaround

ad5c030

stub nuxt modules

2c85494

add toolbar app settings

c09c374

add test dependency

7f67e4c

add story: og images

7ce2dde

add story: license

9412300

add story: DownloadAnalytics

439f5c9

add story: input

f2fa20f

Merge pull request #2 from sacrosanctic/improved-storybook-setup

bece123

Improve Storybook setup

README

9545569

nit

e0b4a22

keep 2 stories

812c3f5

coderabbitai bot reviewed Feb 12, 2026

View reviewed changes

docs/content/2.guide/3.storybook.md Outdated Show resolved Hide resolved

add Chromatic config, but disabled until Storybook builds properly

49c8ff3

vercel bot deployed to Preview – docs.npmx.dev February 13, 2026 08:06 View deployment

vercel bot deployed to Preview – npmx.dev February 13, 2026 08:06 View deployment

update md

88162a5

vercel bot deployed to Preview – docs.npmx.dev February 13, 2026 08:20 View deployment

vercel bot deployed to Preview – npmx.dev February 13, 2026 08:20 View deployment

coderabbitai bot reviewed Feb 13, 2026

View reviewed changes

docs/content/2.guide/3.storybook.md Outdated Show resolved Hide resolved

JReinhold added 2 commits February 13, 2026 09:24

add @storybook-vue/nuxt to ignored dependencies in knip

9d38bde

Merge branch 'storybook' of github.com:sacrosanctic/npmx.dev into sto…

16cd8f5

…rybook

JReinhold approved these changes Feb 13, 2026

View reviewed changes

vercel bot deployed to Preview – docs.npmx.dev February 13, 2026 08:26 View deployment

vercel bot deployed to Preview – npmx.dev February 13, 2026 08:26 View deployment

cylewaitforit reviewed Feb 13, 2026

View reviewed changes

.storybook/preview.ts Show resolved Hide resolved

sacrosanctic added 3 commits February 14, 2026 07:28

readme

f7d9e2b

.

596dde2

.

5704e5e

vercel bot deployed to Preview – npmx.dev February 14, 2026 01:28 View deployment

.

477859e

vercel bot deployed to Preview – npmx.dev February 14, 2026 01:34 View deployment

.

d206283

vercel bot deployed to Preview – docs.npmx.dev February 14, 2026 01:41 View deployment

vercel bot deployed to Preview – npmx.dev February 14, 2026 01:41 View deployment

sacrosanctic added 2 commits February 14, 2026 09:46

Merge remote-tracking branch 'upstream/main' into storybook

80c0e03

Merge remote-tracking branch 'upstream/main' into storybook

feba078

vercel bot deployed to Preview – docs.npmx.dev February 14, 2026 01:48 View deployment

[autofix.ci] apply automated fixes

c3975f4

vercel bot deployed to Preview – npmx.dev February 14, 2026 01:51 View deployment

cylewaitforit approved these changes Feb 14, 2026

View reviewed changes

Uh oh!

Conversation

sacrosanctic commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

In this PR

todo

considerations

notes

notes to self

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

JReinhold left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JReinhold left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sacrosanctic commented Feb 12, 2026

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!

JReinhold left a comment

Choose a reason for hiding this comment

Uh oh!

cylewaitforit left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cylewaitforit Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

sacrosanctic Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cylewaitforit Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sacrosanctic commented Feb 9, 2026 •

edited

Loading

vercel bot commented Feb 9, 2026 •

edited

Loading

codecov bot commented Feb 9, 2026 •

edited

Loading