Refactor draggable list (#1874)

front/src/modules/ui/draggable-list/__stories__/DraggableItem.stories.tsx

@@ -1,3 +1,4 @@
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { IconBell } from '@/ui/icon';
@@ -5,43 +6,32 @@ import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DraggableItem } from '../components/DraggableItem';
-import { DroppableList } from '../components/DroppableList';
 
 const meta: Meta<typeof DraggableItem> = {
-  title: 'ui/draggable-list/DraggableItem',
+  title: 'UI/DraggableList/DraggableItem',
   component: DraggableItem,
   decorators: [
-    (Story, { parameters }) => (
-      <DroppableList
-        droppableId={parameters.droppableId}
-        onDragEnd={parameters.onDragEnd}
-        draggableItems={<Story />}
-      />
+    (Story) => (
+      <DragDropContext onDragEnd={() => jest.fn()}>
+        <Droppable droppableId="droppable-id">
+          {(_provided) => <Story />}
+        </Droppable>
+      </DragDropContext>
     ),
     ComponentDecorator,
   ],
   parameters: {
-    droppableId: 'droppable',
-    onDragEnd: () => console.log('dragged'),
+    container: { width: 100 },
+  },
+  argTypes: {
+    itemComponent: { control: { disable: true } },
   },
   args: {
     draggableId: 'draggable-1',
-    key: 'key-1',
     index: 0,
     isDragDisabled: false,
     itemComponent: (
-      <>
-        <MenuItemDraggable
-          LeftIcon={IconBell}
-          key="key-1"
-          text="Draggable item 1"
-        />
-        <MenuItemDraggable
-          LeftIcon={IconBell}
-          key="key-2"
-          text="Draggable item 2"
-        />
-      </>
+      <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 1" />
     ),
   },
 };

front/src/modules/ui/draggable-list/__stories__/DraggableList.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@/ui/icon';
+import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { DraggableItem } from '../components/DraggableItem';
+import { DraggableList } from '../components/DraggableList';
+
+const meta: Meta<typeof DraggableList> = {
+  title: 'UI/DraggableList/DraggableList',
+  component: DraggableList,
+  decorators: [ComponentDecorator],
+  parameters: {
+    onDragEnd: () => console.log('dragged'),
+  },
+  argTypes: {
+    draggableItems: { control: false },
+  },
+  args: {
+    draggableItems: (
+      <>
+        <DraggableItem
+          draggableId="draggable-1"
+          index={0}
+          isDragDisabled={false}
+          itemComponent={
+            <MenuItemDraggable
+              LeftIcon={IconBell}
+              text="Non Draggable item 1"
+            />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-2"
+          index={1}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 2" />
+          }
+        />
+        <DraggableItem
+          draggableId="draggable-3"
+          index={2}
+          itemComponent={
+            <MenuItemDraggable LeftIcon={IconBell} text="Draggable item 3" />
+          }
+        />
+      </>
+    ),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DraggableItem>;
+
+export const Default: Story = {};

front/src/modules/ui/draggable-list/components/DraggableItem.tsx

@@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
 
 type DraggableItemProps = {
-  key: string;
   draggableId: string;
   isDragDisabled?: boolean;
   index: number;
@@ -11,7 +10,6 @@ type DraggableItemProps = {
 };
 
 export const DraggableItem = ({
-  key,
   draggableId,
   isDragDisabled = false,
   index,
@@ -20,7 +18,7 @@ export const DraggableItem = ({
   const theme = useTheme();
   return (
     <Draggable
-      key={key}
+      key={draggableId}
       draggableId={draggableId}
       index={index}
       isDragDisabled={isDragDisabled}

front/src/modules/ui/draggable-list/components/DraggableList.tsx

@@ -4,9 +4,9 @@ import {
   Droppable,
   OnDragEndResponder,
 } from '@hello-pangea/dnd';
+import { v4 } from 'uuid';
 
-type DroppableListProps = {
-  droppableId: string;
+type DraggableListProps = {
   draggableItems: React.ReactNode;
   onDragEnd: OnDragEndResponder;
 };
@@ -15,15 +15,14 @@ const StyledDragDropItemsWrapper = styled.div`
   width: 100%;
 `;
 
-export const DroppableList = ({
-  droppableId,
+export const DraggableList = ({
   draggableItems,
   onDragEnd,
-}: DroppableListProps) => {
+}: DraggableListProps) => {
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <StyledDragDropItemsWrapper>
-        <Droppable droppableId={droppableId}>
+        <Droppable droppableId={v4()}>
           {(provided) => (
             <div ref={provided.innerRef} {...provided.droppableProps}>
               {draggableItems}