✨ #17 - fix: pr review

maykinmedia · May 30, 2024 · e2e7037 · e2e7037
1 parent 88e1667
commit e2e7037
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/src/components/data/kanban/kanban.stories.tsx b/src/components/data/kanban/kanban.stories.tsx
@@ -39,21 +39,24 @@ export const generateComponentList = (count: number) => {
     return Math.floor(Math.random() * max);
   };
 
-  return Array.from({ length: count }, (_, i) => (
-    <div key={i} style={{ display: "flex", flexDirection: "column" }}>
-      <span>{randomDays[getRandomInt(randomDays.length)]}</span>
-      <span>{randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]}</span>
-      <span>{randomData[getRandomInt(randomData.length)]}</span>
-    </div>
-  ));
+  return Array.from({ length: count }, (_, i) => ({
+    id: i.toString(),
+    content: (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span>{randomDays[getRandomInt(randomDays.length)]}</span>
+        <span>{randomLorenIpsum[getRandomInt(randomLorenIpsum.length)]}</span>
+        <span>{randomData[getRandomInt(randomData.length)]}</span>
+      </div>
+    ),
+  }));
 };
 
 // Define the component list
 const componentList = [
-  { title: "Todo", items: generateComponentList(10) },
-  { title: "In Progress", items: generateComponentList(10) },
-  { title: "In Review", items: generateComponentList(10) },
-  { title: "Done", items: generateComponentList(10) },
+  { title: "Todo", id: "1", items: generateComponentList(10) },
+  { title: "In Progress", id: "2", items: generateComponentList(10) },
+  { title: "In Review", id: "3", items: generateComponentList(10) },
+  { title: "Done", id: "4", items: generateComponentList(10) },
 ];
 
 export const KanbanComponent: Story = {

diff --git a/src/components/data/kanban/kanban.tsx b/src/components/data/kanban/kanban.tsx
@@ -20,7 +20,7 @@ export type KanbanProps = {
 
   /** Get called when a component changes columns. */
   onComponentChange?: (
-    movedComponent: React.ReactNode,
+    movedComponent: KanbanColumnItem,
     sourceColumnIndex: number,
     sourceObjectIndex: number,
     targetColumnIndex: number,
@@ -36,7 +36,13 @@ export type KanbanProps = {
 
 export type KanbanColumn = {
   title: string;
-  items: React.ReactNode[];
+  id: string;
+  items: KanbanColumnItem[];
+};
+
+export type KanbanColumnItem = {
+  id: string;
+  content: React.ReactNode;
 };
 
 export type KanbanDragData = {
@@ -99,7 +105,7 @@ export const Kanban: React.FC<KanbanProps> = ({
   };
 
   const moveObject = (
-    object: React.ReactNode,
+    object: KanbanColumnItem,
     sourceColumnIndex: number,
     targetColumnIndex: number,
     sourceObjectIndex: number,
@@ -145,7 +151,7 @@ export const Kanban: React.FC<KanbanProps> = ({
           {componentListState.map((column, columnIndex) => {
             const count = column.items.length;
             return (
-              <div key={columnIndex}>
+              <div key={column.id}>
                 <H3>
                   {column.title}
                   <div className="mykn-kanban__count">{count}</div>
@@ -172,15 +178,15 @@ export const Kanban: React.FC<KanbanProps> = ({
 };
 export type KanbanSectionProps = {
   columnIndex: number;
-  items: React.ReactNode[];
+  items: KanbanColumnItem[];
   draggable?: boolean;
   dragIndex: [number, number] | null;
   labelSelectColumn?: string;
   labelMoveObject?: string;
   onDragOver: React.DragEventHandler;
   onDrop: React.DragEventHandler;
   moveObject: (
-    object: React.ReactNode,
+    object: KanbanColumnItem,
     sourceColumnIndex: number,
     targetColumnIndex: number,
     sourceObjectIndex: number,
@@ -235,11 +241,11 @@ export const KanbanSection: React.FC<KanbanSectionProps> = ({
 export type KanbanItemProps = {
   buttonProps?: ButtonProps;
   draggable?: boolean;
-  item: React.ReactNode;
+  item: KanbanColumnItem;
   columnIndex: number;
   objectIndex: number;
   moveObject: (
-    object: React.ReactNode,
+    object: KanbanColumnItem,
     sourceColumnIndex: number,
     targetColumnIndex: number,
     sourceObjectIndex: number,
@@ -316,7 +322,7 @@ export const KanbanItem: React.FC<KanbanItemProps> = ({
       {...buttonProps}
       onDragStart={(e) => onDragStart(e, columnIndex, objectIndex)}
     >
-      <div className="mykn-kanban__item">{item}</div>
+      <div className="mykn-kanban__item">{item.content}</div>
       {draggable && (
         <>
           <Select

diff --git a/src/templates/kanban-template/kanban-template.stories.tsx b/src/templates/kanban-template/kanban-template.stories.tsx
@@ -14,10 +14,10 @@ const meta: Meta<typeof KanbanTemplate> = {
 
 // Define the component list
 const componentList = [
-  { title: "Todo", items: generateComponentList(10) },
-  { title: "In Progress", items: generateComponentList(10) },
-  { title: "In Review", items: generateComponentList(10) },
-  { title: "Done", items: generateComponentList(10) },
+  { title: "Todo", id: "1", items: generateComponentList(10) },
+  { title: "In Progress", id: "2", items: generateComponentList(10) },
+  { title: "In Review", id: "3", items: generateComponentList(10) },
+  { title: "Done", id: "4", items: generateComponentList(10) },
 ];
 
 export default meta;