Suggestion: move storybook files next to the files they represent

Concern:

Currently we store Storybook stories in a separate stand-alone folder stories/:

image

This leads to stories being misplaced:

image

story for a component from /subscription/components/activation/ is placed at the top of the hierarchy

And devs not actually seeing that a particular component has a story:

image

there's no indication that activation.vue has stories to try/test it out

Suggestion:

We could move the *.stories.js files next to their respective components. So that the stories are easily discoverable and we don't have to maintain the folder structure parity.

image

Caveats:

Story files might require special linting or import aliases. But since they all have .stories.js suffix — we can fine-tune that in our configs.

Also, by default, story hierarchy in the Storybook UI would reflect that of the folders. And we might see a lot of /component/ subfolders. We can keep that or override via story titles.

Edited by Kos Palchyk