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/stories/components/List.stories.tsx

@@ -1,16 +1,15 @@
-import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
 import { tailwindColorways } from '@shared/util/storybook';
 import type { Meta, StoryObj } from '@storybook/react';
-import List from '@views/components/common/List';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock';
+import type { BaseItem } from '@views/components/common/SortableList';
+import { SortableList } from '@views/components/common/SortableList';
 import React from 'react';
 
 const numberOfCourses = 5;
 
-// TODO: move into utils
 /**
  * Generates an array of courses.
  *
@@ -73,36 +72,34 @@ const generateCourses = (count: number): Course[] => {
 };
 
 const exampleCourses = generateCourses(numberOfCourses);
-const generateCourseBlocks = (course: Course, dragHandleProps: DraggableProvidedDragHandleProps) => (
-    <PopupCourseBlock key={course.uniqueId} course={course} colors={course.colors} dragHandleProps={dragHandleProps} />
-);
+
+type CourseWithId = Course & BaseItem;
 
 const meta = {
     title: 'Components/Common/List',
-    component: List,
+    component: SortableList,
     parameters: {
         layout: 'centered',
     },
     tags: ['autodocs'],
-    argTypes: {
-        gap: { control: 'number' },
-    },
-} satisfies Meta<typeof List<Course>>;
+} satisfies Meta<typeof SortableList<CourseWithId>>;
 export default meta;
 
-type Story = StoryObj<Meta<typeof List<Course>>>;
+type Story = StoryObj<Meta<typeof SortableList<CourseWithId>>>;
 
 export const Default: Story = {
     args: {
-        draggables: exampleCourses,
-        children: generateCourseBlocks,
-        itemKey: item => item.uniqueId,
-        gap: 12,
-        onReordered: () => {},
+        draggables: exampleCourses.map(course => ({
+            id: course.uniqueId,
+            ...course,
+            getConflicts: course.getConflicts,
+        })),
+        onChange: () => {},
+        renderItem: course => <PopupCourseBlock key={course.id} course={course} colors={course.colors} />,
     },
     render: args => (
-        <div className='w-sm'>
-            <List {...args} />
+        <div className='h-3xl w-3xl transform-none'>
+            <SortableList {...args} />
         </div>
     ),
 };