feat(component-gallery): ComponentPicker; ...List; ...ListItem [2h]
- Dominant language
- Vue
- Stars
- 5
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
### 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the existing ComponentPickerGrid and ApiCards implementations to understand the current grid logic and vue-docgen data lookup. Add ComponentPicker, ComponentPickerList, and ComponentPickerListItem with the requested kind-based selection and filePath behavior. Done means both grid and list render correctly, with list items showing the component name, description, and hover color.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100