Storybook: Add link to component folder on GitHub, retire Storysource #45727
Conversation
This file contains 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
mirka
added
[Type] Developer Documentation
|
|
|
Size Change: 0 B Total Size: 1.29 MB ℹ️ View Unchanged
|
|
Thanks for the ping. @ciampo I like the idea to link to the source file and I see that the link "Story" was removed from the Canvas tab
@mirka Where would I need to look to see the new link? PS: We need to find a way to explain all the little icons on the storybook. |
You'd need to build this PR locally on your machine, reinstall node dependencies and rebuild Storybook — once Storybook has compiled on your machine, you should be able to run it locally and click on the icon that Lena showed in the "screenshots" section of this PR's description. In case you're not able to run Storybook locally from this PR, you won't be able to test for those changes — that's unfortunately a limitation that we have currently, sorry about that! |
|
Hang on. I was able to make a local build. I see that little icon. It does work. Thanks for setting me straight. 🥳 @ciampo I had hoped to find a more prominent link to the source code. 🤣 If possible, it would be helpful to have the link go to the Readme section of the component. It seems there is a pattern on the anchors, somewhat...
If's not a blocker for a merge though |
|
Thanks for giving this a look, @bph!
My thoughts exactly. As a start, I added some setup so we can insert the icons in the main intro page:
So we'll be able to add explanations for all the other debug tools. Though, they are indeed debug tools that are mostly only useful for first-party devs building components in the Gutenberg repo.
Same, I'd have wanted to make it a GitHub icon, because that is much more obvious. The plugin that I'm using doesn't support custom icons yet, so maybe we'll suggest an upstream enhancement.
The main point of this link is for viewing source code, so I think it would be better for it to not jump down to the readme. As context, we are working towards making the Storybook Docs view good enough for all components so nobody would want to go to the readme file (for example this component is pretty complete). |
That works well.
Then I agree.
Although, I love things being pretty and all, this is great and serves the purpose. |
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.
Closes #45095
What?
Adds a View Source Repository button in the top right that links to the component's folder on GitHub.
Also retires the half-broken Storysource addon, and updates the intro docs.
Why?
The Storysource addon (a.k.a. the Story panel) hasn't been working for TypeScript stories, so we had an inconsistent experience where JS stories would look great in the Story panel, while TS stories were stuck on a permanent loading screen.
As an alternative to the Story panel, I propose we add a link to the source folder on GitHub. In some ways this is better than just the story source, since we can see the component code as well.
How?
For the moment I am using an addon called Source Link. It would be a pain to have to manually define the component path for each story file, so I wrote a Babel loader to inject the path strings automatically at build time. For any exceptions, we can still override this by manually setting the story file's default export to contain
parameters: { sourceLink: 'custom/path-to-component' }.Testing Instructions
npm run storybook:dev?path=/story/docs-introduction--page.Screenshots or screencast