search

onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.8k stars 236 forks source link

[FEAT] UI for editing/creating components #265

Open Kitenite opened 2 months ago

Kitenite commented 2 months ago

Describe the feature

We already detect component level changes. We should have a UI for editing component root. @drfarrell @Eejya can you add more design/requirements?

drfarrell commented 1 month ago

Idea: Right click to "Create Component" will auto-generate a .tsx file (and perhaps find out where to put it?) with all of the right imported dependencies like importing icons, etc.

We could probably have a "Componatize" button in the toolbar that appears when a div is selected, but I kind of like how right-clicking is a power-user move anyway. Just feels like we may need a bit more of an accessible UX for making that happen, but perhaps we start with just the right-click option.