feat(component-gallery): ComponentPicker with automatic folder nesting [1.5h]
- Dominant language
- Vue
- Stars
- 5
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
### Prerequisite
#19
### Goal
Currently a picker grid or list would render atoms / molecules based on this code:
```js
const { atoms, molecules } = getComponentPaths(componentFilesList)
```
Instead, we want to auto-detect all folders inside a "componentFilesList" and render all components found inside any folder. Not just atoms and molecules.
In the future, if people want to only show atoms and molecules like the original implementation, they can just pass that into the "include" prop to the component-gallery:
```vue
```
So we make a list with all folders; subfolders & components, and we somehow display it nested in both the "ComponentPickerGrid" and "ComponentPickerList"
- [ ] implement the above
- [ ] deprecate the `formElementPrefix` prop. If the dev wants something like this, he can just group his "form elements" into a sub-folder in atoms.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with getComponentPaths and the ComponentGallery, then trace how componentFilesList reaches ComponentPickerGrid and ComponentPickerList. Check the include and formElementPrefix props and the prerequisite issue #19; done means nested folders and their components render in both picker variants and formElementPrefix is deprecated.
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