feat: setup element referencing

Author: stampaaaron

src/components/Timeline.stories.mdx

@@ -3,4 +3,10 @@ import { Timeline } from './Timeline';
 
 <Meta title="Timeline" component={Timeline} />
 
-<Timeline items={[{ title: 'test', date: new Date() }]} />
+<Timeline
+  items={[
+    { title: 'test1', date: new Date() },
+    { title: 'test2', date: new Date() },
+    { title: 'test3', date: new Date() },
+  ]}
+/>

src/components/Timeline.tsx

@@ -1,16 +1,38 @@
-import { TimelineItem, TimelineItemProps } from './TimelineItem';
 import './Timeline.css';
+import { useRef } from 'react';
+import { TimelineItem, TimelineItemProps } from './TimelineItem';
 
 export type TimelineProps = {
   items: TimelineItemProps[];
 };
 
 export function Timeline({ items }: TimelineProps) {
+  const itemsRef = useRef<Map<Date, HTMLDivElement>>();
+
+  function getRefMap() {
+    if (!itemsRef.current) {
+      // Initialize the Map on first usage.
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  }
+
   return (
     <div className="timeline">
       <div className="timeline__line" />
       {items.map((item) => (
-        <TimelineItem key={item.date.toISOString()} {...item} />
+        <div
+          ref={(node) => {
+            const map = getRefMap();
+            if (node) {
+              map.set(item.date, node);
+            } else {
+              map.delete(item.date);
+            }
+          }}
+        >
+          <TimelineItem key={item.date.toISOString()} {...item} />
+        </div>
       ))}
     </div>
   );