Simpler examples without atlassian dependencies

[buzzie-bee]

This is a suggestion to implement some simpler examples without Atlassian dependencies.

The documentation for this project is very good, but the examples are all quite large with heavy dependencies on Atlassian components and tools.

The List Example is a great starting point for what I'd like to build, but it's overwhelming to try and recreate locally by copy pasting the example code.

It might be possible for prospective users to dig into the Atlassian code base to figure out how to replicate for example the Box component with plain jsx and their own styling, but with how many dependencies even the Box component is a major effort to try to understand what's going on.

It would very helpful to adopters of this package if we could have some versions of the examples using plain JSX elements and either plain css files or tailwind so it's easier to understand how to recreate the examples locally.

Ideally the examples should only have imports from React and pragmatic-drag-and-drop, and if you copy pasted them into a project with those dependencies installed it should just work.

[wobsoriano]

I would love to see this! I'm trying to convert the list example to Svelte, and I thought it was going to be easy until I noticed that most of the dependencies rely on Atlassian components, which are written in React.

[alexreardon]

I love the intention of this ask: making it easy for anybody to copy paste for their given stack and get going quickly 🚀

The challenge is that our examples (for the most) are designed to be production ready. For these examples to be production ready, they rely on other components (eg inline menus, modals and so on). We chose to use the components available to us in our examples, and the pieces that made the most sense for our internal consumers (ie Atlassian Design System components).

I think a reasonable proposition would be to choose a single fairly straightforward and contained example (eg the list example) and create a few variations of that example for different tech stacks (eg "react + tailwind", "svelte" and so on).

How does that sound to folks?

[buzzie-bee]

I think a reasonable proposition would be to choose a single fairly straightforward and contained example (eg the list example) and create a few variations of that example for different tech stacks (eg "react + tailwind", "svelte" and so on).

Thanks for getting back to me so promptly :) I think that sounds perfect! Once someone can get the list example running, tweaking it to implement the other examples such as board, grid, tree, etc should be a lot easier for new adopters.

Just a thought (feel free to dismiss) - I was thinking the list example for the variations could be simplified further. Users could incrementally add extra features like the drag handle drop down menu or add avatar icons themselves, and it would make creating the other examples easier to implement and maintain for you and/or the team.

[Monu18765]

Kanban Board example doesn't open in CodeSandbox.

[outbackStack]

That would be amazing @alexreardon . I'm having trouble doing a simple list for SolidJS following the examples. And since this is new, there's not much tutorials on YouTube at the moment for learning.

[ericmaro]

here is one for svelte with a chessboard example https://github.com/ericmaro/pragmatic-dnd-svelte good luck

[driskull]

I'd love to just see a simple example without any framework. I'm interested in building a web component that handles drag and drop. All the react code is quite a bit to remove and figure out what is actually needed.

[outbackStack]

I've finally managed to redo the list example(minimum code) in SolidJS after a couple of days.

https://stackblitz.com/edit/solidjs-templates-qevlb6?file=src%2FApp.jsx

It took me a while to get my head around the blue indicator as that's all CSS.

Thanks @alexreardon and the team at Atlassian for making this amazing package available to us 😀

[alexreardon]

Here is a first crack of mine:

Technologies used

• Pragmatic drag drag and drop
• React
• TailwindCSS for styling
• lucide-react icons
• TypeScript

Code

• Source
• Run on StackBlitz

[alexreardon]

Of special interest is a port of our <DropIndicator/> package that uses Tailwind for styling rather than emotion

https://github.com/alexreardon/pdnd-tailwind/blob/main/src/drop-indicator.tsx

[alexreardon]

A little video talking about the example 😊🫡

[buzzie-bee]

This looks fantastic! Exactly what I was envisioning. Thank you so much 😊

Along with the solid and svelte examples posted here I think new adopters will have a much easier time getting started.

The drop indicator is really nice too, I was replicating it in a less dry slightly hacky way, so soon I'll swap it out for your component.

[buzzie-bee]

Oops I clicked close instead of clicking comment sorry. I'll leave it up to you to decide if it should be closed. LGTM though!

[alexreardon]

I will include the simple list example I created in on our examples page.

I think a great next step is to port this simple list example to other technologies! It would be amazing if other folks could port the example I created to other technologies 🤝

I have created a place to give more information and talk about this more longer term:

https://github.com/atlassian/pragmatic-drag-and-drop/discussions/71

Thanks to everyone in this issue for your encouragement and hard work already!

Thanks @buzzie-bee!

[alexreardon]

I've created another one!

https://github.com/alexreardon/pdnd-vanilla-tailwind

• Pragmatic drag drag and drop
• TailwindCSS
• TypeScript (but could easily have no TypeScript!)
• All state is kept in the DOM

[driskull]

@alexreardon I've created one using web components based off of the vanilla one you created above.

https://github.com/driskull/pdnd-web-component-tailwind https://stackblitz.com/~/github.com/driskull/pdnd-web-component-tailwind?startScript=dev

I think this can be used to get pdnd working with web components.

It still uses tailwind which doesn't totally make sense in a web component sense but that part could easily be removed by a user that doesn't need it.

Let me know if any adjustments are needed.