feat(storybook): add global GitHub source link to every story#239
Merged
Conversation
Adds a withGitHubSource decorator in preview.tsx that appends a small 'View source on GitHub' link below every story. The link is derived automatically from context.parameters.fileName (the absolute path to the stories file), strips everything before /src/, and replaces .stories.tsx with .tsx so it points to the component source file rather than the stories file itself. No per-story configuration needed -- works on every canvas and docs page. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds a global Storybook decorator that renders a “View source on GitHub” link beneath each story, aiming to provide a quick path from Storybook to the relevant source file in this repo.
Changes:
- Introduces a new
withGitHubSourceglobal decorator that derives a GitHub URL fromcontext.parameters.fileName. - Registers the decorator globally and orders it to render outside the existing brand wrapper.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying ui with
|
| Latest commit: |
3c782d5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3b612f74.ui-6d0.pages.dev |
| Branch Preview URL: | https://horner-storybook-github-sour.ui-6d0.pages.dev |
Member
Author
|
Thanks for the deploy confirmation -- the preview looks good! |
- Normalize Windows backslashes to forward slashes before any path operations so the link renders correctly on Windows dev machines. - Only strip '.stories' from the basename when it strictly matches 'Name.stories.(ts|tsx|js|jsx)' (no extra dot-segments). Non-standard names like AGGrid.enhanced.stories.tsx now safely link to the stories file itself rather than a non-existent component file. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Every story page in Storybook is a potential entry point for a developer who wants to dig into the source. Today there is no fast path from a Storybook page to the actual component file on GitHub -- you have to know the repo layout and navigate there yourself.
This adds a
withGitHubSourceglobal decorator in.storybook/preview.tsxthat automatically appends a small, low-opacity "View source on GitHub ↗" link below every story. The link is derived at runtime fromcontext.parameters.fileName(the absolute on-disk path Storybook already provides), so no per-story configuration is needed:/src/to get the repo-relative path..stories.tsxwith.tsxso the link points to the component source file, not the stories file.Works on every canvas tab and within each story preview in the docs tab, with zero changes to individual story files.