feat: replaces dnd with dnd-kit

[pandeymangg]

What does this PR do?

Replaces the current library react-beautiful-dnd which is used for dnd with @formkit/drag-and-drop

Fixes # (issue)

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

3 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		May 14, 2024 11:27am
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		May 14, 2024 11:27am
formbricks-docs	⬜️ Ignored (Inspect)	Visit Preview		May 14, 2024 11:27am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[jobenjada]

Hey! :)

Looks good, but I broke it quite quickly:

1. Added a new question
2. Dragged the open card to the top

dnd-bug.mp4

---

2. Just a small thing but I find it confusing that the the number of the card I grab does not change but its replica changes the number:

dnd-ux.mp4

A solution could be to blur / hide the number of the card you drag? Not sure how the DnD works so open for your suggestion 🤓

---

Also one E2E test failed previously

[mattinannt]

Shared a video via Slack. Unfortunately it's not working in my local environment

[mattinannt]

@pandeymangg Looks great :-)
Only two small things I noticed while using it:

Can we also make the whole slate area drag-able to make it easier for people to drag and pull instead of only the 9 dots? :-)

Also when we drag a choice we get overlapping borders. Can we give the input a background color to avoid this? :-)

Reviewed and approved by Matti