feat: date formatting

Author: stampaaaron

package-lock.json

@@ -75,6 +75,7 @@
     "@vitejs/plugin-react": "^3.0.0",
     "babel-loader": "^9.1.0",
     "conventional-github-releaser": "3.1.5",
+    "date-fns": "^2.29.3",
     "eslint": "^8.30.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

package.json

@@ -1,5 +1,5 @@
 import './Timeline.css';
-import { useEffect, useRef } from 'react';
+import { Key, useEffect, useRef } from 'react';
 import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
 
 type OffsetConfig = number | { left?: number; right?: number };
@@ -21,19 +21,22 @@ export type TimelineProps = {
   items: PropsWithKey<TimelineItemProps>[];
   gap?: number;
   offset?: OffsetConfig;
+  dateFormat?: string;
+  dateLocale?: Locale;
   className?: string;
 };
 
 const defaultTimelineConfig: Partial<TimelineProps> = {
   gap: 50,
   offset: 50,
+  dateFormat: 'P',
 };
 
 export function Timeline(props: TimelineProps) {
-  const { items, gap, offset, className } = { ...defaultTimelineConfig, ...props };
+  const { items, gap, offset, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
 
   const timelineRef = useRef<HTMLDivElement>(null);
-  const itemsRef = useRef<Map<Date, HTMLElement>>();
+  const itemsRef = useRef<Map<Key, HTMLElement>>();
 
   function getRefMap() {
     if (!itemsRef.current) {
@@ -87,13 +90,15 @@ export function Timeline(props: TimelineProps) {
       <div className="timeline__line" />
       {items.map((item) => (
         <TimelineItem
+          dateFormat={dateFormat}
+          dateLocale={dateLocale}
           {...item}
           ref={(node) => {
             const map = getRefMap();
             if (node) {
-              map.set(item.date, node);
+              map.set(item.key, node);
             } else {
-              map.delete(item.date);
+              map.delete(item.key);
             }
           }}
         />

src/components/Timeline.tsx

@@ -1,24 +1,29 @@
 import { forwardRef, Key, PropsWithChildren } from 'react';
+import { format } from 'date-fns';
 
 export type PropsWithKey<T> = T & {
   key: Key;
 };
 
 export type TimelineItemProps = PropsWithChildren<{
   className?: string;
-  date: Date;
+  date: Date | string;
+  dateFormat?: string;
+  dateLocale?: Locale;
   title: string;
 }>;
 
-export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ className, title, date, children }, ref) => {
-  return (
-    <div ref={ref} className={['timeline-item', className].join(' ')}>
-      <div className="timeline-item__marker" />
-      <div className="timeline-card">
-        <p className="timeline-card__date">{date.toISOString()}</p>
-        <p className="timeline-card__title">{title}</p>
-        {children}
+export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(
+  ({ className, title, date, children, dateFormat, dateLocale }, ref) => {
+    return (
+      <div ref={ref} className={['timeline-item', className].join(' ')}>
+        <div className="timeline-item__marker" />
+        <div className="timeline-card">
+          <p className="timeline-card__date">{date instanceof Date ? format(date, dateFormat ?? 'P', { locale: dateLocale }) : date}</p>
+          <p className="timeline-card__title">{title}</p>
+          {children}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);