Skip to content

docs(ui): add brandImage and favicon to storybook theme#1836

Merged
danielroe merged 1 commit intonpmx-dev:mainfrom
cylewaitforit:custom-npmx-storybook-logo
Mar 2, 2026
Merged

docs(ui): add brandImage and favicon to storybook theme#1836
danielroe merged 1 commit intonpmx-dev:mainfrom
cylewaitforit:custom-npmx-storybook-logo

Conversation

@cylewaitforit
Copy link
Copy Markdown
Contributor

@cylewaitforit cylewaitforit commented Mar 2, 2026 •
edited
Loading

🔗 Linked issue

Closes: #1834

🧭 Context

This adds a custom npmx logo to the npmx storybook.

📚 Description

  • Created an npmx storybook logo
  • Created an npmx storybook favicon
  • Added manager.ts to configure custom theme for brandImage and brandTitle
  • Include public dir for logo and favicon
Before After
Screenshot From 2026-03-02 09-07-55 Screenshot From 2026-03-02 09-03-41

Preview Storybook in Chromatic

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Mar 2, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Mar 2, 2026 3:03pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Mar 2, 2026 3:03pm
npmx-lunaria Ignored Ignored Mar 2, 2026 3:03pm

Request Review

@cylewaitforit cylewaitforit changed the title Custom npmx storybook logo docs(ui): add brandImage and favicon to storybook theme Mar 2, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 2, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The changes involve configuring Storybook to support custom branding and static asset serving. The .storybook/main.ts file has been modified to include a staticDirs entry pointing to the ./.public directory, allowing static assets to be served from that location. A new .storybook/manager.ts file has been introduced that configures a custom theme for Storybook, setting a brand title of "npmx Storybook" and a brand image path of "/npmx-storybook.svg", which is then applied to Storybook through the addon configuration API.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The PR implementation aligns with issue #1834's objective to add custom npmx branding to Storybook whilst maintaining Storybook brand elements through the custom theme configuration.
Out of Scope Changes check ✅ Passed All changes in the PR are directly related to implementing custom Storybook branding as specified in issue #1834; no out-of-scope modifications were identified.
Description check ✅ Passed The pull request description clearly relates to the changeset, describing the addition of custom npmx branding to Storybook including logo, favicon, and theme configuration.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

@danielroe danielroe added this pull request to the merge queue Mar 2, 2026
Merged via the queue into npmx-dev:main with commit ae1c62d Mar 2, 2026
19 of 20 checks passed
@codecov
Copy link
Copy Markdown

codecov Bot commented Mar 2, 2026

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 coderabbitai Bot mentioned this pull request Mar 17, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielroe danielroe danielroe approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Custom npmx logo for Storybook

2 participants

@cylewaitforit @danielroe