feat: add unique key to timeline items

Author: stampaaaron

src/components/Timeline.stories.mdx

@@ -6,12 +6,42 @@ import { Timeline } from './Timeline';
 <Timeline
   items={[
     {
-      title: 'test1',
+      key: 1,
+      title: '1',
       date: new Date(),
       children:
         'alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  ',
     },
-    { title: 'test2', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
-    { title: 'test3', date: new Date() },
-  ]}
+    { key: 2, title: '2', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 3, title: '3', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 4, title: '4', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 5, title: '5', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 6, title: '6', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    {
+    key: 7,
+      title: '7',
+      date: new Date(),
+      children:
+        'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfk f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fl f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fl f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks fls flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f',
+    },
+    { key: 8,title: '8', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    {key: 9, title: '9', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    {
+      key: 10,
+      title: '10',
+      date: new Date(),
+      children: (
+        <>
+          aslfjasdlfjsdaflkj
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png" />
+        </>
+
+      ),
+    },
+    { key: 11,title: '11', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 12,title: '12', date: new Date() },
+    {key: 13, title: '13', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
+    { key: 14,title: '14', date: new Date() },
+
+]}
 />

src/components/Timeline.tsx

@@ -1,6 +1,6 @@
 import './Timeline.css';
 import { useEffect, useRef } from 'react';
-import { TimelineItem, TimelineItemProps } from './TimelineItem';
+import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
 
 type OffsetConfig = number | { left?: number; right?: number };
 
@@ -18,7 +18,7 @@ const getMarkerCompensationOffset = (left: number, right: number) => {
 };
 
 export type TimelineProps = {
-  items: TimelineItemProps[];
+  items: PropsWithKey<TimelineItemProps>[];
   gap?: number;
   offset?: OffsetConfig;
 };
@@ -87,7 +87,6 @@ export function Timeline(props: TimelineProps) {
               map.delete(item.date);
             }
           }}
-          key={item.date.toISOString()}
         />
       ))}
     </div>

src/components/TimelineItem.tsx

@@ -1,4 +1,8 @@
-import { forwardRef, PropsWithChildren } from 'react';
+import { forwardRef, Key, PropsWithChildren } from 'react';
+
+export type PropsWithKey<T> = T & {
+  key: Key;
+};
 
 export type TimelineItemProps = PropsWithChildren<{
   className?: string;
@@ -8,7 +12,7 @@ export type TimelineItemProps = PropsWithChildren<{
 
 export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ className, title, date, children }, ref) => {
   return (
-    <div ref={ref} className={`${className} timeline-item`}>
+    <div ref={ref} className={['timeline-item', className].join(' ')}>
       <div className="timeline-item__marker" />
       <div className="timeline-item__content">
         <p>{date.toISOString()}</p>