feat: add storybook #1270

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

todo

stories

Input (most comprehensive, can be used as a template/example for to clone from)
LicenseDisplay
- missing tests (consider migrating from existing vitest tests)
- component should handle the nullish case internally
OG images
- Package
  - doesnt work because its fetching from a relative api that doesnt exist in storybook context
DownloadAnalytics
- all the stories seem to be except In modal
- this seems to be multiple components in one

notes

stories are co-located with the component
story grouping mirrors file-system
feature notes on toolbar, jsdocs, global settings (ref)
nuxt module mocks

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

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 3:56pm

2 Skipped Deployments

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

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

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
1551	1	1550	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.0101s run time

AssertionError: Missing a11y tests for 78 component(s):
  - AppFooter.vue
  - AppHeader.vue
  - AppLogo.vue
  - BaseCard.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
  - 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 78 to equal +0

- Expected
+ Received

- 0
+ 78

 ❯ test/unit/a11y-component-coverage.spec.ts:164: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

Improve Storybook setup

JReinhold

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

JReinhold · 2026-02-10T21:56:34Z

.storybook/README.md

+
+- **Accessibility tests** - Built-in a11y checks (link to example)
+- **Visual tests** - Compare JPG screenshots (link to example)
+- **Snapshot tests** - Compare HTML output (link to example)


Based on years of user feedback, I'd strongly advice against HTML snapshot testing. It usually ends up being mindlessly updating the snapshots again and again, without any real use. Visual tests are much better snapshots, as they are easier to review and more granular because the diff is on the pixel level and contains styling too.

JReinhold · 2026-02-10T21:59:14Z

.storybook/README.md

+- An edge case per story
+- Do not use `autodocs`
+
+# How to Use


this section reads to me like it's just a concise version of the Storybook docs, so I'm not sure it's valuable? The "Place a .stories.ts file next to your component" line is good, because you're establishing a convention. The import type { Meta, StoryObj } from '@nuxtjs/storybook' is also good because I would expect the LLM to trip up there a lot. but the rest might not be necessary?

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

init

f77919f

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 added 11 commits February 10, 2026 20:58

modify init

2f85193

nuxt+storybook integration workaround

9063d55

stub nuxt modules

bc318bd

add toolbar app settings

2909a50

add test dependency

0543e94

add story: og images

ac5c501

add story: license

927af6d

add story: DownloadAnalytics

7d2266b

add story: input

7cf2c33

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

f24ce4d

Improve Storybook setup

README

4478f7e

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add storybook #1270

feat: add storybook #1270

sacrosanctic commented Feb 9, 2026 •

edited

Loading

Uh oh!

vercel bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

JReinhold left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JReinhold left a comment

Uh oh!

JReinhold Feb 10, 2026

Uh oh!

JReinhold Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat: add storybook #1270

Are you sure you want to change the base?

feat: add storybook #1270

Conversation

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

Uh oh!

todo

stories

notes

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!

JReinhold Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

JReinhold Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sacrosanctic commented Feb 9, 2026 •

edited

Loading

vercel bot commented Feb 9, 2026 •

edited

Loading

codecov bot commented Feb 9, 2026 •

edited

Loading