refactor: improve handling of component props

Author: stampaaaron

src/components/Timeline.tsx

@@ -1,12 +1,12 @@
 import './Timeline.css';
 import { Key, ReactElement, useEffect, useRef } from 'react';
-import { PropsWithKey, TimelineItem, TimelineItemProps, TimelineItemRefs } from './TimelineItem';
+import { TimelineItem, TimelineItemRefs, TimelineItemsProps } from './TimelineItem';
 import { OffsetConfig, resolveOffsets } from '../models/offset';
 import { Positioning } from '../models/positioning';
 import { convertToCssVariable, StyleConfig } from '../models/style';
 
 export type TimelineProps = {
-  items: PropsWithKey<TimelineItemProps>[];
+  items: TimelineItemsProps;
   positioning: Positioning;
   gap?: number;
   offset?: OffsetConfig;

src/components/TimelineItem.tsx

@@ -1,18 +1,20 @@
 import { forwardRef, Key, PropsWithChildren, ReactElement, useRef, useImperativeHandle } from 'react';
 import { format } from 'date-fns';
 
-export type PropsWithKey<T> = T & {
+type PropsWithKey<T> = T & {
   key: Key;
 };
 
 export type TimelineItemRefs = { pointer: HTMLDivElement | null; item: HTMLDivElement | null; marker: HTMLDivElement | null };
 
+export type TimelineItemsProps = PropsWithKey<TimelineItemProps>[];
+
 export type TimelineItemProps = PropsWithChildren<{
   className?: string;
+  title?: string;
   date: Date | string;
   dateFormat?: string;
   dateLocale?: Locale;
-  title: string;
   customMarker?: ReactElement;
   customPointer?: ReactElement;
 }>;
@@ -39,7 +41,7 @@ export const TimelineItem = forwardRef<TimelineItemRefs, TimelineItemProps>(
             {customPointer}
           </div>
           <p className="timeline-card__date">{date instanceof Date ? format(date, dateFormat ?? 'P', { locale: dateLocale }) : date}</p>
-          <p className="timeline-card__title">{title}</p>
+          {title && <p className="timeline-card__title">{title}</p>}
           {children}
         </div>
       </div>

src/index.tsx

@@ -1 +1,2 @@
-export { Timeline } from './components/Timeline';
+export { Timeline, TimelineProps } from './components/Timeline';
+export { TimelineItemsProps } from './components/TimelineItem';