skeletonlabs
Add Tree View Component
Link to the Page
- React: https://zagjs.com/components/react/steps
- Svelte: https://zagjs.com/components/svelte/steps
Describe the Issue (screenshots encouraged!)
We recently polled the community and this was the number 3 requested component.
Given the complexity of this one, I'd suggest it be implemented by a member of the Skeleton core team, including @Hugos68 or @phamduylong, with my help for the visual interface design.
Note that our initial public release should be marked with the beta label to match Zag's status of this feature. This should remain until a stable release is provided by Zag.
Hello teams!
The Tree View is now in Zag.js, without the beta tag : https://zagjs.com/components/svelte/tree-view
Any integration planned or already a way to use it?
I used the old TreeView with skeleton 2 and this part isn't migrated (disabled) but it's time for me to find an alternative.
Thx for replies.
Hi @nicolas-albert, thanks for the heads up. And of course, we would love to see this contributed asap.
I would bring your attention to this post which explains limits to my limited personal availability at the moment:
- https://github.com/skeletonlabs/skeleton/discussions/3535
Likewise a number of our core team are dealing with issues outside the scope of Skeleton. This is impacting our ability to deliver large new features additions for the time being. Keep in mind everyone here is volunteers and contribute as they are able, myself included.
As such, I'd encourage you or another member of the community to consider contributing this if there's an immediate need. Both myself and the team are available to provide advice and support for this process. But as it stands I cannot yet promise any specific estimate for delivery.
Of course I understand.
I've not looked how zagjs is bridged with svelte yet, I hope I can be inspired by other skeleton components 👍
Hi there, if @nicolas-albert hasn't started working on this yet, I wouldn't mind giving it a shot. We could actually really use this component, as it's the last thing keeping us from migrating to v3.
Sorry for the delay, I've been out of town for the past week.
Sure @dev-viinz. As I mentioned in the original post, this may be on the more complex end, so I fully expect to coordinate with whomever is working on this. Feel free to submit a draft PR early, take it slow, and communicate regularly.
I'll go ahead and include the following, as it's been a bit of an issue with similar PRs recently. But here's the requirements for contributing components:
https://www.skeleton.dev/docs/resources/contribute/components
You can of course reference a number of existing components. And to be explicit, we do typically request contributors include BOTH the Svelte 5 and React components. Personally as a team, we tend to start with one and implement it in full, then use that as reference for the other framework.
If you have any issues with any of these please let us know.
I have an early version that I use in my project. It will evolved with snippet and styling properties.
https://github.com/nicolas-albert/skeleton/commit/251958a501d4a886739e37597f4513279b939953
I don't do a PR yet because I didn't follow all PR requirements. I don't think I'll have time to make doc & co or the React version (I don't use it).
I have to quickly continue my project with the TreeView and TreeNode integrated to my project. I try to not introduce project specific code into this 2 files in order to reverse it to skeleton.
In the futur, I'll add DnD support because we need it, but it's not provided by ZagJS so I will tweak it later. I don't know if this DnD feature will be kept by skeleton, but it will be in many weeks or month!
Sorry to not do more for the project for now.
Tell me if you want an incomplet PR.
I have added some snippets: https://github.com/nicolas-albert/skeleton/commit/a4290b790fa6bf4ac26c986eb1a4d7fbbca045b5
This is used here: https://github.com/convertigo/convertigo/blob/ecf4393d6de4b84b534bd24d46b1d45493219fbb/convertigo-studio-web/src/lib/admin/components/ProjectEditor.svelte
It's look like:
Our goal is to keep as close to Zag's implementation as possible, so unless Zag supports drag-and-drop, I don't expect we will either. We can consider special features like this on a case-by-case basis, but for the first draft I'd recommend we keep things as simple as possible.
Thanks @nicolas-albert , I'll have a look at your implementation!
@endigo9740 Regarding contribution requirements: I was aware of the contribution guidelines, and was fully anticipating to implement for both frameworks. As you suggested, the plan is to fully implement svelte first, to then "port" over to react.
In order not to spam this thread any further, I'll keep communications to Discord for now.
Our goal is to keep as close to Zag's implementation as possible, so unless Zag supports drag-and-drop, I don't expect we will either. We can consider special features like this on a case-by-case basis, but for the first draft I'd recommend we keep things as simple as possible.
I remember that we add DnD to the Skeleton v2 TreeView without fork it, using the vanilla version. I think I can add DnD on top of the new TreeView.
The ZagJS wrapper part is straightforward, the React code is already in their documentation, the Svelte conversion isn't so hard.
Skeleton is more than a ZagJS wrapper, it's an unified esthetic and logic. Should it use animation, indicator to the left, expand/collapse on indicator click instead of text, etc ... this is not my decision for the Skeleton version, but mine for my usage in my project.
@nicolas-albert I appreciate your input, but I've already outlined the requirements above. We will not be included drag and drop in the initial version of this component.
Skeleton is more than a ZagJS wrapper, it's an unified esthetic and logic.
Correct, Skeleton (as of v3) is a design system that we layer on top of Zag primitives for our optional component library. But that doesn't change the fact we're aiming to keep close to the Zag source and feature set. We're doing this very intentionally to ensure a smooth transition to the planned component API detailed here:
- https://github.com/skeletonlabs/skeleton/discussions/3499
The further we diverge, the harder this process will be going forward.
As Dev mentioned above, let's keep this thread on topic. Separate feature requests are welcome once the base component is in place.