chore(ui): add some storybook entries

[leekeh]

🔗 Linked issue

fixes some of #1841

🧭 Context

If desired, I can scaffold the stories for the remaining components, but I'd like to know if this is the direction you want to take.

I also think that it could be nice to organize the components a bit more, to store some core UI components separate from specific features. This will also help with storybook organization, as it should mirror the repo structure.

📚 Description

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview	Aug 9, 2026 3:00pm
npmx.dev	Ready	Preview	Aug 9, 2026 3:00pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Aug 9, 2026 3:00pm

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Documentation
  • Added comprehensive Storybook examples and autodocs for interface components, including alerts, navigation, code viewing, loading states, pagination, progress, badges, cards, logos and skeletons.
  • Added scenarios covering default, empty, selected, loading, error, responsive and interactive states.
  • Improved Storybook theme switching to reflect the selected light or dark mode.

Walkthrough

Changes

Storybook now includes component stories, mock fixtures, decorators, controls, responsive examples, loading states, and autodocs metadata. The preview decorator applies the selected global theme class to the document root.

Storybook component coverage

Layer / File(s)	Summary
Global theme-class handling .storybook/preview.ts	The decorator maps the global theme value to light or dark, removes existing theme classes, and applies the selected class.
About and Brand component stories app/components/About/*, app/components/Brand/Customize.stories.ts	Added stories for governance members, logos, logo lists, and logo customisation.
Code navigation stories app/components/Code/DirectoryListing.stories.ts, app/components/Code/FileTree.stories.ts, app/components/Code/MobileTreeDrawer.stories.ts	Added mock trees, route data, responsive rendering, empty states, and selected-file states.
Code content and loading stories app/components/Code/Header.stories.ts, app/components/Code/Viewer.stories.ts, app/components/Code/SkeletonLoader.stories.ts	Added file, directory, markdown, binary, selected-line, highlighted-code, and loading stories.
Component state stories and autodocs app/components/Alert.stories.ts, app/components/BaseCard.stories.ts, app/components/CollapsibleSection.stories.ts, app/components/CopyToClipboardButton.stories.ts, app/components/Input/Base.stories.ts, app/components/Link/Link.stories.ts, app/components/LoadingSpinner.stories.ts, app/components/PaginationControls.stories.ts, app/components/ProgressBar.stories.ts, app/components/ProvenanceBadge.stories.ts, app/components/SkeletonBlock.stories.ts, app/components/SkeletonInline.stories.ts	Added component state stories, custom renders, controls, loading examples, and automatic documentation metadata. PaginationControls.stories.ts references watch without importing it.

Possibly related PRs

• npmx-dev/npmx.dev#2545: Both changes modify Storybook theme and colour-mode handling in .storybook/preview.ts.

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the main change: adding Storybook entries for the UI.
Description check	✅ Passed	The description relates to adding Storybook stories and references the associated issue and planned follow-up work.

✨ 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.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 127 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/PaginationControls.stories.ts	0.00%	18 Missing ⚠️
app/components/Code/Header.stories.ts	0.00%	9 Missing and 1 partial ⚠️
app/components/CollapsibleSection.stories.ts	0.00%	9 Missing ⚠️
app/components/About/LogoList.stories.ts	0.00%	7 Missing ⚠️
app/components/Code/Viewer.stories.ts	0.00%	7 Missing ⚠️
app/components/ProgressBar.stories.ts	0.00%	7 Missing ⚠️
app/components/BaseCard.stories.ts	0.00%	6 Missing ⚠️
app/components/Code/DirectoryListing.stories.ts	0.00%	6 Missing ⚠️
app/components/Code/FileTree.stories.ts	0.00%	6 Missing ⚠️
app/components/Code/MobileTreeDrawer.stories.ts	0.00%	6 Missing ⚠️
... and 10 more

📢 Thoughts on this report? Let us know!

[leekeh]

Question for reviewer: do we need to have code coverage for stories?

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.storybook/preview.ts:
- Around line 76-78: Update the theme application logic around themeClass so it
assigns the derived light/dark value to document.documentElement.dataset.theme,
matching the selectors in main.css. Remove the light/dark class removal and
addition unless another Storybook stylesheet explicitly requires those classes.

In `@app/components/PaginationControls.stories.ts`:
- Around line 16-33: Synchronize the local refs in the PaginationControls
story’s render setup with Storybook args after initialization. Add watchers for
args.mode, args.pageSize, and args.currentPage that update the corresponding
mode, pageSize, and currentPage refs when control-panel values change, while
preserving the existing v-model bindings.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fc7b6132-12f5-4301-8e0d-8b7b782bc038

📥 Commits

Reviewing files that changed from the base of the PR and between ea245cc and 90c7fc0.

📒 Files selected for processing (23)

• .storybook/preview.ts
• app/components/About/GovernanceList.stories.ts
• app/components/About/LogoImg.stories.ts
• app/components/About/LogoList.stories.ts
• app/components/Alert.stories.ts
• app/components/BaseCard.stories.ts
• app/components/Brand/Customize.stories.ts
• app/components/Code/DirectoryListing.stories.ts
• app/components/Code/FileTree.stories.ts
• app/components/Code/Header.stories.ts
• app/components/Code/MobileTreeDrawer.stories.ts
• app/components/Code/SkeletonLoader.stories.ts
• app/components/Code/Viewer.stories.ts
• app/components/CollapsibleSection.stories.ts
• app/components/CopyToClipboardButton.stories.ts
• app/components/Input/Base.stories.ts
• app/components/Link/Link.stories.ts
• app/components/LoadingSpinner.stories.ts
• app/components/PaginationControls.stories.ts
• app/components/ProgressBar.stories.ts
• app/components/ProvenanceBadge.stories.ts
• app/components/SkeletonBlock.stories.ts
• app/components/SkeletonInline.stories.ts

[serhalp]

Amazing, thank you for contributing!