Add storybook

[gdetrez]

One common and annoying problem that arise when working on react component is that it is sometime necessary to go through many hoops just to see how a component looks like. E.g. to see a running scanning job in scan-o-matic, one needs an online scanner, and then to create a job with the correct scanner and start it.

One possible solution is to temporarily insert a component with the desired state in the page but that's not very practical or elegant. So my idea wast to build a static page with a collection of components in different states but of course, npm already has a tool for that, which is storybook.

It's exactly that: it lets you build a collection of components in different states but it adds some widgets for navigation, auto-reload, a console... (and a gazillion dependencies, but not in production...).

I think this should be helpful when developing/reviewing components but could maybe also replace many low-vlaue/high-maintenance tests like "<MyComponent/> should render a div with class foo and text bar".

The current configuration auto-discovers stories from components/*.stories.js files.

My suggestion is that we try in in scan-o-matic for a few sprints. If we like it, we may then want to add it to other projects. If it turns out to be too much maintenance for too little value, having the stories in separate files should make it easier to remove the whole thing.

to try it

npm install
npm run storybook

And then http://localhost:9001

[codecov-io]

Codecov Report

Merging #351 into master will decrease coverage by <.01%. The diff coverage is n/a.

@@            Coverage Diff             @@
##           master     #351      +/-   ##
==========================================
- Coverage   49.48%   49.48%   -0.01%     
==========================================
  Files         225      225              
  Lines       19731    19731              
  Branches     2890     2890              
==========================================
- Hits         9764     9763       -1     
  Misses       9563     9563              
- Partials      404      405       +1

Impacted Files	Coverage Δ
scanomatic/data_processing/phases/segmentation.py	73.81% <0%> (-0.84%)	:arrow_down:
scanomatic/image_analysis/grid.py	76.69% <0%> (+0.75%)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 8413978...e2a4a61. Read the comment docs.

[gdetrez]

Did you try the instructions above?