Add components overview tool like Storybook.

[shapkarin]

It will be good to have components overview tool like Storybook. Because from time to time project is on maintenance, also that's pretty handy for the check the whole rebranding and overview the all components.

Storybook's blog post:

• Introducing: Storybook for Vue

Code examples:

• storybook/examples/vue-cli/
• storybook/examples/vue-kitchen-sink/

Video example:

[davidyuk]

We have been used Storybook in the Base aepp. It was useful in developing some common components. But we were frequently accidentally breaking the components from there. So, it requires some additional maintenance.

[shapkarin]

@davidyuk What means But we were frequently accidentally breaking the components from there, how it can be Storybook fault?

[davidyuk]

I mean, making a change in a component you have to check how it looks in Storybook even if it looks not necessary. Otherwise, a Storybook page may become broken and unusable. But maybe it can be checked automatically somehow.

[shapkarin]

@davidyuk what if I create some test to check that?

[shapkarin]

At least it can be a test with node.js that parse files:

• grab all components properties scopes
• save the uniq names
• match that with Storybook file

[shapkarin]

At least it can be a test with node.js that parse files:

• grab all components components property scope
• save the uniq names
• match that with Storybook file

but it can be overhead due some components include other sub-components as parts that doesn't mean much without parent component. so maybe it can be some manually tracked list of components...

[davidyuk]

@davidyuk what if I create some test to check that?

I think the script can just open each storybook page in the browser and ensure that there are no exceptions.

[shapkarin]

I suggest such test with node.js:

• get all list of the pages from src/views
• check their "components" properties
• grab that all and uniq the array
• match it with the Storybook

[shapkarin]

@davidyuk what if I create some test to check that?

I think the script can just open each storybook page in the browser and ensure that there are no exceptions.

It can be done with Cypress.

[shapkarin]

I suggest such test with node.js:

• get all list of the pages from src/views
• check their "components" properties
• grab that all and uniq the array
• match it with the Storybook

But I'm still not sure how to automatically get the list of the all components. Because sometimes one component include other and some of them are useless without the parent one and I'm not sure hot to determinate that programatically.

[shapkarin]

@davidyuk the main problem with such test is to find out what components are needs to be included in the Storybook and which are pages or the parts of other components that are useless without parent component.

[davidyuk]

I don't think so. As I know, Storybook renders only pages defined by the developer, to check them script just needs to open each one. It shouldn't care about which components are referenced on these pages.

[shapkarin]

I understand that but I want to find the answer for that question:

Witch components match by a test with the Storybook defined.

[davidyuk]

Why do you need that?

[shapkarin]

But maybe it can be checked automatically somehow.

You mean only to check if Storybook is not broken? I thought to check if all components are present at the Storybook.

[shapkarin]

So if to check only if Storybook is not broken it's pretty easy.

[shapkarin]

@davidyuk as far as I can see together we finally formalize this task in:

• add storybook
• create a test to check if Storybook is works fine itself and included components as well

I will assign this task to myself.

[davidyuk]

I'm proposing to add some pages as well. Ensure that this is approved before starting to work on it.

[shapkarin]

@davidyuk what exactly that pages is about?

[davidyuk]

Actually, they are called stories. See the example in the Base aepp repo.

[shapkarin]

@davidyuk @mradkov I think it will be nice to have such thing for the rebranding. Not sure about priority, maybe can be done later.