switch from react-sortable-hoc to https://dndkit.com/

[williamstein]

According to clauderic/react-sortable-hoc#844
the react-sortable-hoc component is dead. It doesn't support react 18, and my attempts to build it from source failed.

This is a blocker for upgrading to react 18, which is in turn a blocker for upgrading to next 13 (see https://beta.nextjs.org/docs/upgrade-guide), which requires react 18.

I think react-sortable-hoc is just used in two places:

• the task list
• tabs in a project

So this probably isn't too difficult of a task.

[williamstein]

We actually use the very popular react-draggable already for the frame borders and also all dragging in the whiteboard. I wonder if we can redo our use of react-sortable-hoc using react-draggable?

[williamstein]

Upon further inspection, maybe the whiteboard should instead use dnd-kit, since it's really impressive. This could make it easy to add some more features like "snap to grid" as well.

[williamstein]

This example is how to do the file tabs: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/presets-sortable-horizontal--locked-axis

[williamstein]

This is now fully done here: #6330

This even includes bug fixes (e.g., for drag-n-drop for tasks) and rewriting all the old "Bootstrap" tab stuff using Antd (which is way more accessible). It also implements new tab control for CRM.

That said, I'm worried a lot about the UI changing too much, and some things are possibly annoying. I'm considering maybe implementing a mode where all file tabs have the same size, which is not the case now, to get behavior more like it used to be (like chrome tabs).