Note dependencies in our stories

[stephiescastle]

I was thinking it would be helpful to add labels to our stories that let users know if there is additional scss or js required for the component. Then the user will know if they need the scss partial or import the js. We could even have templated documentation for this, similar to how bootstrap-vue has a "importing as a component" docs for all of their components:
https://bootstrap-vue.org/docs/components/alert#importing-individual-components

This is helpful for those who are using components a la carte, which we are currently do for WCP and WWW.

Dependencies to note, and include path to files if relevant:

• scss
• js
• any other package dependencies (swiper.js for carousels, etc)

[stephiescastle]

Example of what this could look like for a component that requires scss, js, and including the swiper.js library

---

Component Dependencies

Assets	Path	Implementation
SCSS	/src/scss/components/_MyComponent.scss	@import '/src/scss/components/MyComponent'
JS	/src/js/_MyComponent.js	require('/src/js/_MyComponent.js')
NPM	Swiper.js	npm i --save swiper

[stephiescastle]

Ideally we'd find a way to automate this. Some pathways:

1. Use react components in our docs to auto-generate this somehow. We're already using some custom react components to generate our component overview TOCs.

2. We could also use something like dependency cruiser. Things to explore in dependency cruiser (see WIP branch):

   • dependency graph of all of explorer-1
   • dependency graph per component
   • tweak graphviz config to make it more readable