[RFC] Component structure visualisation
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Summary 💡
I'd like to gather feedback about a possible improvement to the documentation: visualization of a component structure.
It could (conceptually, don't mind the visual design) look like this: https://codesandbox.io/s/component-structure-visualisation-d31po?file=/demo.tsx (blue chips represent static classes, purple chips - conditional ones).
In my opinion this will have the most impact where component customization is required. Unstyled components come to mind first, but core components could also make use of it. It is important to know the structure of slots when customizing a component. Having a visual representation of CSS classes and where they are applied could also help.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the issue summary and the linked CodeSandbox demo at demo.tsx, then inspect the current component documentation for how slots and CSS classes are described. Before implementation, establish the desired visualization scope and acceptance criteria; the issue currently provides no files, tests, or concrete definition of done.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100