Self documented Storybook (A.K.A Addon Stories) #2885
Conversation
Codecov Report
@@ Coverage Diff @@
## master #2885 +/- ##
=========================================
Coverage ? 37.23%
=========================================
Files ? 435
Lines ? 9328
Branches ? 899
=========================================
Hits ? 3473
Misses ? 5302
Partials ? 553
Continue to review full report at Codecov.
|
|
Awesome!!! Suggestion: addon-source? Addon-sourcecode? |
|
|
|
"addon-storysource" makes me happy =) |
|
It looks much better with the syntax highlighting =)
|
|
I have a crazy idea: what if we add CodeMirror? |
|
Oh it's indeed crazy. So CodeMirror will allow code editing, but what's next 🙀 |
|
|
… only on story name.
# Conflicts: # examples/angular-cli/package.json # examples/official-storybook/package.json # examples/polymer-cli/package.json # examples/vue-kitchen-sink/package.json
# Conflicts: # examples/angular-cli/package.json # examples/polymer-cli/package.json # examples/vue-kitchen-sink/package.json
What's wrong with netlify deploys? |
|
Can it be automated? |
|
What do you mean? We currently deploy each commit |
|
Is there any way to link netlify builds to docs? I think it will be nice to have a versioning of the examples like we wanted to do with the new docs. But that means all these static outputs should be persisted. |
|
There are branch deploys with permalinks For example, this is a link to deploy of this branch that gets updated authomatically with each commit https://addon-stories--storybooks-official.netlify.com/ On documentation site, we should use links to |
| /\.stories\.tsx?$/, | ||
| /index\.ts$/ | ||
| ], | ||
| loaders: [ ...originalTsRule.loaders, require.resolve('@storybook/addon-storysource/loader') ], |
There was a problem hiding this comment.
We can add this loader with enforce: 'pre' instead of patching the original rule:
https://webpack.js.org/configuration/module/#rule-enforce
|
I think I will add Netlify to docs in a separate PR. |
|
Can we add scroll to the highlighted story (in separate PR)? |
Sure |
|
Can we make it as a patch to 3.3 ? |
|
@shilman it's a new feature, but releasing it as patch could improve our documentation right now. WDYT? |
|
I think we should just get 3.4 out sooner rather than back-patching a large new feature |
So, I've been a bit annoyed about too many questions regarding documentation, like:
One of the problems is that though we do have a lot of examples, they are not easily discoverable. So I thought what if we just show the code of the story as an addon. Then we can publish all the examples and link to them from docs. 🤔 Or even put them in the docs with Iframe.
What I did
So, I've added an experimental addon-stories, which probably won't have any sense for external usages.:
It works with a custom loader that should be configured with a custom webpack.config ( maybe there is a better way 🤷♂️ ). This loader injects decorator with the source of the file. For the POC purposes, I've used some naive "string.indexOf" implementation, and probably should be replaced with some AST processing.Currently, the addon panel just shows the source as a plain text.TBD: