Skip to content

feat: add some storybook entries - #3141

Open
leekeh wants to merge 6 commits into
npmx-dev:mainfrom
leekeh:feat/storybook-entries
Open

feat: add some storybook entries#3141
leekeh wants to merge 6 commits into
npmx-dev:mainfrom
leekeh:feat/storybook-entries

Conversation

@leekeh

@leekeh leekeh commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

🔗 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

vercel Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview Aug 5, 2026 12:55pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Aug 5, 2026 12:55pm
npmx-lunaria Ignored Ignored Aug 5, 2026 12:55pm

Request Review

@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d351436-12c2-418a-a5f8-c500d90ec678

📥 Commits

Reviewing files that changed from the base of the PR and between 535a26f and c7a145f.

📒 Files selected for processing (1)
  • app/components/PaginationControls.stories.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/components/PaginationControls.stories.ts

📝 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


Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title identifies Storybook changes but uses the vague phrase "some storybook entries" and does not describe the scope clearly. Use a specific title, such as "feat: add Storybook stories for UI components".
✅ Passed checks (3 passed)
Check name Status Explanation
Description check ✅ Passed The description relates to the changes by stating that the pull request adds Storybook entries for components and addresses part of issue #1841.
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.
✨ 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.

@leekeh

leekeh commented Aug 5, 2026

Copy link
Copy Markdown
Contributor Author

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread .storybook/preview.ts
Comment thread app/components/PaginationControls.stories.ts
leekeh and others added 2 commits August 5, 2026 14:50
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant