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