Plugin confusion

[arctic kestrel]

So I'm checking out plugins for two goals -

1. a custom component catalogue (with drag/drop ability)
2. a trigger (button for example) that can dispatch a new "content" payload into the UI (programmatic design I guess?)

Looking at docs - it seems like renderComponentList was what I needed for #1 - but its not doing what I expected.
Seems like it returns children, state & dispatch like other plugins but I thought I'd be able to have more granular control over the rendering of the component list.
Maybe I'm using it incorrectly - What is this feature intended for? And if not for making a custom component list -is there another feature that enables this?

RE: dispatching a new data payload - assuming I use the SetDataAction ?

Oh and one more question - any way to toggle visibility on the "outline" section without hiding the entire left sidebar? This is not extremely important but I want to render my own custom left sidebar (hence the question about custom component list rendering)

[arctic kestrel]

Update - I figured out programmatically setting data. That was pretty straightforward.
Seems like you can only update the data payload for the current page you're on though.
Trying to update a data object with
for example : { "/": { content: [...], ...... }}does not work, but { content: [...], ...... } does.

So a quick explainer on rendering custom component lists (if possible) and toggling the outline visibility is all I need clarity on. Thanks!

[regal fractal]

Ah you are probably one of the first people to build a plugin, so apologies for any API jank. I'm working on new docs at the minute, so hopefully that helps

I think renderComponentList might not yet be powerful enough for you use case. It allows you to render wrapping UI around children, but not modify the children themselves because we don't expose the underlying components.

There's an example use-case in the categories PR: https://github.com/measuredco/puck/pull/183

Because we don't currently expose the underlying UI components, you can't create custom draggable items. If you need that functionality, we'd probably need to expose this: https://github.com/measuredco/puck/blob/main/packages/core/components/ComponentList/index.tsx#L13. Alternatively, you could create a custom draggable with https://github.com/hello-pangea/dnd using the droppable id component-list. This is the library Puck is using under the hood (recently replacing react-beautiful-dnd).

Related, I'd be interested to hear if you have any thoughts on this: https://github.com/measuredco/puck/issues/224

It could potentially change how users can extend Puck, providing a much more flexible model for use cases like this.

[arctic kestrel]

Yea I remember cloning Puck a couple months ago back when you were on react-beautiful-dnd , and I had to swap that out for hello-pangea haha 😅

Im glad you brought that up because I realized I could probably build my own draggable items and just use the plugin dispatch API to update the content schema ?

I don't have a lot of experience with DND apps - so I'm not fully comprehending how this would work - if I created draggables, would they actually be able to be dropped into droppable zones on the UI?

I'm guessing because my custom component selectors & the puck UI renderer share the same DropZone context?

Do I still need to programmatically update the content schema? Or does the underlying dropzone context handle that when components get dropped on the page?

Checking out the GH link you sent as well 🤙🏽

Added my thoughts on the hooks/composability feature in a comment on the GH thread

[regal fractal]

Yeah - I think it should work but haven't tried it.

So long as your config contains the component definition, and your draggable is configured to use component key as the ID, it should work without programatic intervention.