Rewrite a Storybook
A few tips how to manage Storybook, or, actually, any other design or develop tool.
Storybook should not work as you application
You Application could use state management, and, probably, is using some backend service. But you Storybook could NOT.
Storybook is a good tool to see something in isolation, to detach a Component from Application and put onto the blank page, and all extra application’s “wires” are making it harder.
You will have to provide Redux, I18n, and wrap-wrap-wrap with decorators… at the end you will be buried under stuff you “need” for your stories, and the stuff you actually don’t. And thus — lets mock it out.
Lets put our storied into the sandboxed… the storyboxed! enviroment!
Way 1 — Hard distinguish your Application and Storybook
Just change storybook webpack config, to use “different” files. This is a “hard” rewire, and you will lose an ability to use “real” files.
Way 2 — Soft control React component you are rendering
You may softly hack into the React, and change the way React component are rendered. For example — inject addon-actions to the every button .
Only react-remock could do it.
Way 3 — Full flavor mocking
I hope you’ve used jest.mock or proxyquire or td or any other “real” mocking tool and library. Mocking is very powerful tool, and could save the day.
Actually — mocking and sandboxing are besties. And mocking and storybooking also should be besties!
As far most of mocking libraries are designed to work in nodejs or “testing” environment”, a library called rewiremock could work in nodejs and webpack. And storybook used webpack.
Not only rewiremock could do it, but any “webpack-compatible” mocking system. Or systems like Babel-plugin-remock, which are absolutely system agnostic.
Mocking, Sandboxing, Isolation and Storybooking
ARE BESTIES!