Addon: Pattern Lineage (Dependency Graph)

ShotaEbikawa commented 5 years ago

Is your feature request related to a problem? Please describe. Thank you very much for sharing your time to read this issue. I am wondering if there are add-on where the UI Development Environment displays the existing UI Components that were used to developing a given UI Component.

For instance, let us say that we have the search bar component:

the pattern lineage, or the UI component that was used to build the search bar component, will be the button component and the input label component.

Main benefit of this feature is that:

it enables developers to understand the scope of the given UI components.
it allows developers to know which UI components must be tested/QA'd when the given UI component is modified.

Describe the solution you'd like If there are no add-on similar to this feature:

I will like the information about pattern lineage for the given UI component to be displayed (preferably in the sidebar)
I will also like to have information regarding where the given UI Component is being used in building other components. For instance, let us say that we have a search bar component. I will also like information about where this search bar component is used in other UI component.
I will like each UI component of the given UI component's pattern lineage to be navigated via links (just like the Links add-on).

Are you able to assist bring the feature to reality? Unfortunately, I am not able to contribute in the development process.

Additional context

The image above displays the lineage feature in Pattern Lab, which is UI Development Environment developed by Brad Frost.

shilman commented 5 years ago

Thanks for filing this @ShotaEbikawa! This is a great feature & I hope we can get it into Storybook, hopefully as an addon.

ShotaEbikawa commented 5 years ago

Thank you, @shilman, I am looking forward to implementing this feature in the future iteration!

atanasster commented 4 years ago

@ShotaEbikawa you can check something i have been experimenting with - its a combination of a webpack plugin that collects dependencies information, and a storybook addon to display the collected data as a tree. Its early stage and I am open to suggestions both for functionality as well as UI.

https://github.com/atanasster/storybook-dep-webpack-plugin

ShotaEbikawa commented 4 years ago

Hi @atanasster,

I have checked the Dep addon that you are currently working on, and it looks fantastic! I especially love how the addon displays not only the pattern lineage of the given UI Component but all of the dependencies that were used to build that component. Additional functionalities that I will like to see is:

If a user clicks on the given UI component's dependency tree's node, and if that node is a child component, it navigates to its story.
- For instance, let us say that we are looking at the SearchBar component. The pattern lineage or child components that were used to build the SearchBar component is the InputLabel Component and the Button component. If a user clicks on the SearchBar component's dependency tree's node about InputLabel Component, the addon navigates to that component's story.
Displays information about where the given UI Component is being used in building other components.
- For instance, let us say that we are looking at the SearchBar component. I will also like to have information about where this SearchBar component is being used to build other UI Components(e.g., Headers Component, NavigationBar Component)

Other than that, it looks great, and I am looking forward to the next iteration!

atanasster commented 4 years ago

@ShotaEbikawa thanks, love your suggestions they make perfect sense. However some are a bit trickier to implement (like listing the usage of a component)

Would you like to contribute to the code or with testing? In any case it would be good to discuss some of the features more in depth, especially some might require support for the storybook core. @shilman is there a preferred place to discuss addons like this, or I can just set up some outside feature tracking/discussion setup.

ShotaEbikawa commented 4 years ago

@atanasster Thank you very much for your consideration! Although I am unable to contribute to the source code at the moment, I would love to keep in touch with you about future topics regarding the addon.

shilman commented 4 years ago

@atanasster Anything related to dependency analysis we can discuss here (or elsewhere if there's another issue for it). If it's a change to core, especially a more "meta" one, e.g. how to handle metadata in doc blocks, it should probably have its own issue.

stale[bot] commented 4 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

atanasster commented 4 years ago

@ShotaEbikawa check out https://atanasster.github.io/storybook-addon-deps/?path=/docs/design-system-avatarlist--short

Now the dependency table is a doc block that can be inserted into the documentation

Also check the AvatarList component is using the Avatar, WithTooltip and TooltipNote components and now in the DocsPage you can click On those components to go to their respective stories.

I am adding a dependents table and will shortly create an article. Let me know what you think.

ShotaEbikawa commented 4 years ago

Hi @atanasster

I have checked the iterated Dep addon, and it looks fantastic!! I love how it allows the users to navigate to the given child component via Doc block, and this is what I was looking for. Thank you so much, and I am excited about the dependents table and an article in the next iteration!

stale[bot] commented 4 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

shilman commented 4 years ago

Closing this! Great work @atanasster!

storybookjs / storybook

Addon: Pattern Lineage (Dependency Graph) #8054