Storybook: Replace the demo with storybook and use it for testing.

[nikolasrieble]

TDLR:
Integrating storybook into the main repo would (a) enable a better development experience, (b) integrate the documentation in the main repository and (c) enable us to add simple user interaction tests.

The problem

We are not very confident to ship bug fixes or new features.

Documentation and code out of sync:

As the documentation lives in another repository (the website), it naturally comes out of sync, which complicates developer experience and adds effort for us to maintain.

Manual testing:

While unit tests exist, they are not exhaustive and not sufficient to test user interactions. Thus we must currently manually test using the demo, and the website. Still in the last release we managed to ship two bugs which resulted in two patches.

The solution

Replace the demo code with Storybook

Locally developing with Storybook is a great developer experience and is closer to state of the art of frontend development. This would improve the quality of life for existing contributors and possibly attract new contributors.

Integrate the storybook test runner into our CI

The test runner enables us to simple stories as tests. If they render without an error, the test passes.

Future: Use storybooks play function to write user interaction stories and thereby unlock integration tests

This would set a path forward for confidence required to fix bugs and add new features.
https://storybook.js.org/docs/react/writing-stories/play-function
https://storybook.js.org/addons/@storybook/test-runner

[nikolasrieble]

I would sure love to hear your thoughts on my proposal. @ckifer @dillonreedy @dsldsl @arcthur @proke03

[ckifer]

I think storybook is a nice win for us. I have my opinions in Storybook as a product/software, but I don't think most of my concerns really apply here.

What we need: self-documenting tests/examples as we build. Storybook gives us that mostly out of the box.

My one concern is that this should not/can't completely replace the current docs site. Not sure what the correct solution is, but initially we can host the storybook separate from the docs site and add a link to it as its in-progress.

[nikolasrieble]

In how far can Storybook not replace the current docs site? What would you think is the best solution for docs?

I would have thought a docs page could be sufficient. https://storybook.js.org/addons/@storybook/addon-docs

[ckifer]

I guess I enjoy the current website structure and layout for things that are not updated often - home page, install guide, etc. Could we embed the story book using a similar home page as to what we have now?

Kind of like https://cultureamp.design/storybook/

[proke03]

I prototyped your idea roughly.

[ckifer]

Nice @proke03 !

That's exactly what I was thinking. Examples/API get replaced with the storybook hosted in the same website. Can probably remove Blog and update Guide.

We could move the docs site into this repo so it's easier to contribute to.

[proke03]

Thank you, @ckifer !
It used iframe tag with src link below.
https://dillonreedy.github.io/recharts-storybook/?path=/story/introduction-configure--page

I thought of leaving recharts.org as is and integrating the storybook into this repository.
But if possible, it would be nice to integrate recharts.org as you said, as it would make it easier to contribute to the docs.

[nikolasrieble]

Wonderful. Should we scope this out in issues with a second milestone?
We could start of the storybook that @dillonreedy created, yet I think it would be important to keep it in the main repo, to enable smooth development.

[nikolasrieble]

Another problem this would solve is that all code examples on the website lead to demo sandboxes, which use an outdated version of recharts by default. We would have to upgrade this in all sandboxes every time we do a release, as opposed with storybook, which we would always release as a whole with a new version.

[nikolasrieble]

Closing this issue in favour of multiple smaller issues, better scoped, structured in a shared milestone.