[crubier]

Do you never use unit tests or integretion tests ?

When you are building an app bottom up, you will be working on components “in isolation” 100% of the time all the way up. Integration between components is just part of the behavior of a component higher in the hierarchy.

You can make stories of larger components assembling smaller components, entire pages, and even your entire app!

It’s been very valuable for my teams, especially coupled with Chromatic.

[dmitriid]

> When you are building an app bottom up, you will be working on components “in isolation” 100% of the time all the way up.

What? When you're building an app, you will always have components interacting with each other and being used with each other.

[crubier]

Yes but my point is that “components interacting with each others” is really just the implementation of another component higher up in the hierarchy.

E.g, the interaction between the submit button and the email input box is just the behavior of the whole form component. In react at least, your app is a component, so literally all the logic of your app is in a component in the end. And you can rest this component in storybook. So really there is no limit to what you can test in storybook in that sense.

[dmitriid]

> Yes but my point is that “components interacting with each others” is really just the implementation of another component higher up in the hierarchy.

It's not "just another component up in the hierarchy". If your components are truly composable, you don't need to create another "component" to be able to use them. But you do need to show how they can be used together.

> And you can rest this component in storybook. So really there is no limit to what you can test in storybook in that sense.

And yet, I keep seeing "components in isolation" and all examples (and all storybooks I've seen) have little to no examples of how these isolated components are used together.

[crubier]

I don’t know what you mean. I have dozens of stories showing components of all layers in the hierarchy. I have single button stories, stories for entire views, stories of entire apps.

And storybook allows to show the code of stories, which is equivalent to a « getting started » or usage example for each of these components in docs. Except that it is guaranteed to be evergreen, since if these examples break, my CI wouldn’t pass.

Labelflow is a public repo I manage with storybooks like that. We use Chromatic with storybook in there. Search for folders named « __stories__ » for stories at all level of the hierarchy. https://github.com/labelflow/labelflow

[dmitriid]

You're one of the few people who does things right then :)