CyCraft / CyCraft/planetar

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

Open
#19 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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):

image

- [ ] 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.