CyCraft / CyCraft/planetar

feat(component-gallery): ComponentPicker with automatic folder nesting [1.5h]

Open
#20 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

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.