Create an Addon that uses custom webpack loaders.

[cpsubrian]

Howdy, I'm pretty close to finishing a pretty neat feature that I'm using on my storybook. I'd like to wrap it up into an addon so I can reuse it on other projects. In a nutshell it:

• Lets you load *.story.src.js files as 'stories'.
• These files just export a component that should be the story example.
• It then loads those same files using both prismjs-loader and raw-loader.
• It uses those to create syntax-highlighted code blocks showing you how the story is coded as well as parsing the original story source code for the first docblock.
• This docblock is expected to follow a convenient format that provides the info needed to call storiesOf() with the proper category and whatnot.
• The rest of the dockblock is assume to be a markdown description of the story.

See it in action here: https://terraeclipse.github.io/react-stack/?selectedKind=Mapbox&selectedStory=Controls&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel

And the relevant code can be found here: https://github.com/TerraEclipse/react-stack/blob/master/tools/.storybook/util/loadSourceStories.js

I'm not too familiar with the addon API, so I'm not sure exactly how I'd ship this. It requires the prismjs-loader to be available. In theory then my 'addon' could just export a function you call and pass your directory to with possibly a customizable regex.

[cpsubrian]

Perhaps it doesn't really work as an addon at all, and just needs to be up and documented somewhere so I/people can copy-paste.

[shilman]

Wow that's really beautiful. I think there are two ways to go with this.

1. Make it an addon, where the source code displays in the addon pane. This would be pretty similar to https://github.com/Kilix/storybook-addon-jsx
2. Make it a decorator, that just adds to the preview pane.

The benefit to option 1 is that you can then resize the preview pane as you want and you can test responsive behavior on the component, etc.

The benefit to option 2 is that it looks really great and integrated.

Long-term option 1 will be better because we'll improve Storybook's UI to make addons more powerful. But short term I don't have a strong opinion.

Either way, great work!

For more on writing addons: https://storybooks.js.org/docs/react-storybook/addons/writing-addons/

[shilman]

PS @cpsubrian Added you to our examples gallery (WIP) storybook-eol/storybooks.github.io#55

[cpsubrian]

Oh awesome!

For the webpack loaders, would they be deps, devdeps, or peerDeps of an addon or decorator?

Due to how require contexts work, I think I'd have to have users pass in an actual require context, not a path, since webpack statically analyzes the 'require.context' call itself.

[cpsubrian]

Looking forward to mobile UI, anything I could help with?

[ndelangen]

@cpsubrian Would you please join us on our slack to discuss this ?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!