Fix Storybook #707
Fix Storybook #707
Conversation
| ``` | ||
|
|
||
| This is how we find all of the Markdown files in the bundle directory and generate stories from their code blocks. Storybook sections are labeled by the first argument to `storiesOf()` (in the above example, "Module name"), and individual stories get their titles from either the previous Markdown heading or the `title` attribute in the fenced code block. See the [`code-blocks` docs](https://npmjs.com/package/code-blocks) and the [`storiesFromMarkdown()` source](./.storybook/lib/storiesFromMarkdown.js) for more info. | ||
| Note: At this time, we do not load any stories from `src/**/stories.js`. |
There was a problem hiding this comment.
Where are they loaded from? I'm confused by this comment
There was a problem hiding this comment.
It's in the previous graf:
All
htmlfenced code blocks insrc/**/*.mdwill be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
😁
There was a problem hiding this comment.
Is there any reason why we can'd delete src/**/stories.js?
There was a problem hiding this comment.
As far as I can tell, those didn't make it in the #666 migration.
| } | ||
| }) | ||
| #!/bin/bash | ||
| remote=${STORYBOOK_GIT_URL:-https://github.com/primer/storybook} |
There was a problem hiding this comment.
Do we mean deploy here when we say publish?
There was a problem hiding this comment.
Yeah, the "publish" terminology is from when we first introduced Storybook and just wasn't ever updated to match how we use "publish" and "deploy". In this case, though, I decided that putting it in script/postpublish was necessary to ensure that it would only be run when we published a new version.
🤔 I guess that's not exactly what we want, because that means it won't run if we don't publish a new version, which is what would happen if we merge this branch to master.
There was a problem hiding this comment.
ah, I think that's ok - we can manually run npm run publish-storybook when we'd like to publish outside of releases right?
TL;DR: This gets Storybook working again and closes #690, which I introduced while reorganizing the repo for v12.
I upgraded Storybook to 5.0.0 and installed the viewport addon with Primer breakpoints (small, medium, large, and x-large). You can change the viewport with the last icon along the top edge of the preview panel:
Instead of importing
code-blocksand handling all the markdown parsing in the bundle, the logic that reads markdown and generates stories is now a webpack "loader". This shrinks the JS bundle quite a bit, and should speed up hot module reloading too.I tidied up the Storybook publishing logic and added a clause to
script/postpublishthat runsnpm run publish-storybookif we're on themasterbranch in Actions. I tested it out and it worked, but we won't know for sure whether it works in Actions until we merge this PR tomasterand it succeeds.