fix(ui): fix longstanding drag-and-drop duplication issue (#502)

* fix(ui): fixed color switching on list reordering

* chore: remove lock file

* chore: add back lock file

* feat(ui): fix color duplication issue and prevent scrolling beyond parent

* feat(ui): add to storybook

* fix(ui): remove white background while dragging

* chore: remove dnd pangea from package.json

* chore: rebuild lock file

* chore: remove nested li element issue

* fix(ui): allow grabbing cursor while dragging

* fix(ui): address chromatic errors

* fix(ui): address chromatic errors

* fix(ui): address linting issues and pass tests

* fix(ui): create hook for modifying the cursor globally

* chore: add check for storybook env

* chore: add back unused import to AddAllButton

* fix: make cursor grabbing hook more explicit

* chore: move sortable list item into sortable list file

* fix: remove isStorybook prop from ScheduleListItem

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/hooks/useCursor.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+/**
+ * Dynamically applies a grabbing cursor to the root element with the important flag
+ */
+export const useCursor = () => {
+    useEffect(() => {
+        const html = document.documentElement;
+        return () => {
+            html.style.removeProperty('cursor');
+            html.classList.remove('[&_*]:!cursor-grabbing');
+        };
+    }, []);
+
+    const setCursorGrabbing = (isGrabbing: boolean) => {
+        const html = document.documentElement;
+
+        if (isGrabbing) {
+            html.classList.add('[&_*]:!cursor-grabbing');
+        } else {
+            html.classList.remove('[&_*]:!cursor-grabbing');
+        }
+    };
+
+    return { setCursorGrabbing };
+};