Use Storybook for an isolated dev environment

[JoseRFelix]

What do you guys think of substituting devbox for Storybook?

Motivations

Adding storybook can ease the development and visual testing of individual components. Also, can be used to showcase different use cases of these components.

[bpierre]

I think it could work for devbox/, which it is directed at developers, but I am a bit reluctant to the idea of using it to showcase components, as we want something a little bit more branded than a Storybook instance. gallery/ is doing that right now, but we want to redesign a bit and add better demos there, some coming from devbox/.

One concern I have with Storybook is how demos can get tied to the Storybook API, making it difficult to integrate somewhere else, but I guess we could take care of separating the demos ourselves. The integration of their visual testing service seems interesting, though I’m not sure it would be worth the cost since we are using scoped styles everywhere and visual regressions are not happening often.

If you want to give it a try, I think we could start by taking one of the devbox demos, and see how it would look as a Storybook story. From there, we could decide if moving to Storybook would be worth it. What do you think?

[JoseRFelix]

I was thinking that instead of starting from zero using storybook, we could use lerna and leave /devbox as a package, similar to what material-ui does. Furthermore, we can add /gallery and /src as their own packages easing development.

My main problem when I was developing the ToggleComponent was updating the changes coming from the src which lerna can fix easily.

[bpierre]

My main problem when I was developing the ToggleComponent was updating the changes coming from the src which lerna can fix easily.

I should write this somewhere, but you should get the changes automatically by doing:

cd aragon-ui/
yarn link
cd devbox/
yarn link @aragon/ui

Then:

# shell session 1
yarn dev

# shell session 2
yarn devbox

I’m not sure Lerna would help a lot since both devbox/ and gallery/ are private packages, and I think it can add a bit of friction for new contributors. Do you think it could help with anything else than linking @aragon/ui to devbox/ and gallery?

If not, perhaps we could add a script to do the linking automatically?

[JoseRFelix]

Thanks! I think creating a script would be the better choice, and perhaps later add lerna if needed.

[sohkai]

I should write this somewhere, but you should get the changes automatically by doing:

Maybe we should write a script and automatically do this on a local, non-CI install?