feat(component-gallery): ComponentPicker; ...List; ...ListItem [2h]

[mesqueeb]

ComponentPicker

• create a new ComponentPicker.vue component
• extract the logic of ComponentPickerGrid so the "grid" is only the UI that depends on props
• make ComponentPicker use ComponentPickerGrid based on a prop called "kind" set to kind: 'grid'

ComponentPickerList

the ComponentPickerList should be a way simpler solution than the grid that looks something like this (more on this down below):

• add a new ComponentPickerList.vue component
• make ComponentPicker use ComponentPickerList based on a prop called "kind" set to kind: 'list'
• A list should exist out of v-for of the sub component: ComponentPickerListItem.vue (also to be made)

ComponentPickerListItem

• should receive a single filePath: string prop
• it should look very simple like the example screenshot above
• it should have a hover color
• based on the filePath the list item should retrieve the vue-docgen object (like ApiCards do) and it should extract these fields from that object: (1) the component "name" field, (2) the component "description" field.
• use the name and description to render the list item