feat(timeline): Start using compound components

This change introduces the concept of compound
components, applied to Row and Event sub
components of Timeline.

packages/react-component-library/src/components/Timeline/Event.tsx

@@ -6,17 +6,18 @@ import { DAY_WIDTH } from './constants'
 import { useTimelinePosition } from './hooks/useTimelinePosition'
 
 export interface EventProps extends ComponentWithClass {
-  startDate: Date
+  children?: string
   endDate: Date
+  startDate: Date
   status?: string
-  title?: string
 }
 
 export const Event: React.FC<EventProps> = ({
-  startDate,
+  children,
+  className,
   endDate,
+  startDate,
   status = '',
-  title,
 }) => {
   const { offset, width, isBeforeStart, isAfterEnd } = useTimelinePosition(
     startDate,
@@ -27,16 +28,17 @@ export const Event: React.FC<EventProps> = ({
 
   const classes = classNames('timeline__event', {
     [`timeline__event--${status.toLowerCase()}`]: !!status,
+    className,
   })
 
   return (
     <div
       className={classes}
       style={{ left: `${offset * DAY_WIDTH}px` }}
-      data-testid="event-wrapper"
+      data-testid="timeline-event-wrapper"
     >
       <span className="timeline__event-title" data-testid="event-title">
-        {title || `Task ${format(new Date(startDate), 'dd/yyyy')}`}
+        {children || `Task ${format(new Date(startDate), 'dd/yyyy')}`}
       </span>
       <div
         className="timeline__event-bar"

packages/react-component-library/src/components/Timeline/Events.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { EventProps } from '.'
+
+export interface EventsProps extends ComponentWithClass {
+  children:
+    | React.ReactElement<EventProps>
+    | React.ReactElement<EventProps>[]
+}
+
+export const Events: React.FC<EventsProps> = (props) => {
+  return (
+    <div {...props} />
+  )
+}

packages/react-component-library/src/components/Timeline/Row.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import classNames from 'classnames'
 import { differenceInDays } from 'date-fns'
 
+import { DAY_WIDTH } from './constants'
+import { EventsProps } from '.'
 import { getKey, isOdd } from './helpers'
 import { TimelineContext } from './context'
-import { TimelineEvent } from './context/types'
-import { DAY_WIDTH } from './constants'
-import { Event } from '.'
 
 export interface RowProps extends ComponentWithClass {
-  events: TimelineEvent[]
+  children: React.ReactElement<EventsProps> | React.ReactElement<EventsProps>[]
+  name: string
 }
 
 const RowWeeks: React.FC = () => {
@@ -43,30 +43,12 @@ const RowWeeks: React.FC = () => {
   )
 }
 
-const RowEvents: React.FC<RowProps> = ({ events }) => {
-  return (
-    <>
-      {events &&
-        events.map(({ startDate, endDate, status, title }, index) => {
-          return (
-            <Event
-              startDate={startDate}
-              endDate={endDate}
-              status={status}
-              key={getKey('timeline-event', index)}
-              title={title}
-            />
-          )
-        })}
-    </>
-  )
-}
-
-export const Row: React.FC<RowProps> = ({ events }) => {
+export const Row: React.FC<RowProps> = ({ children, className }) => {
+  const classes = classNames('timeline__row', className)
   return (
-    <div className="timeline__row">
+    <div className={classes} data-testid="timeline-row">
       <RowWeeks />
-      <RowEvents events={events} />
+      {children}
     </div>
   )
 }

packages/react-component-library/src/components/Timeline/Rows.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import { RowProps } from '.'
+import { getKey } from './helpers'
+import { NO_DATA_MESSAGE } from './constants'
+
+export interface RowsProps extends ComponentWithClass {
+  children: React.ReactElement<RowProps> | React.ReactElement<RowProps>[]
+}
+
+const noData = (
+  <span className="timeline__empty" data-testid="timeline-no-data">
+    {NO_DATA_MESSAGE}
+  </span>
+)
+
+export const Rows: React.FC<RowsProps> = ({ children, className }) => {
+  const classes = classNames('timeline__main', className)
+  const childrenWithKey = React.Children.map(
+    children,
+    (child: React.ReactElement<RowProps>, index: number) =>
+      React.cloneElement(child, {
+        ...child.props,
+        key: getKey('timeline-row', index),
+      })
+  )
+
+  return (
+    <main className={classes}>
+      {childrenWithKey && childrenWithKey.length ? childrenWithKey : noData}
+    </main>
+  )
+}
+
+Rows.displayName = 'Rows'

packages/react-component-library/src/components/Timeline/Side.tsx

@@ -5,12 +5,13 @@ import { Button } from '../Button'
 import { getKey } from './helpers'
 import { TimelineContext } from './context'
 import { TIMELINE_ACTIONS } from './context/types'
+import { RowProps, RowsProps } from '.'
 
 export interface SideProps extends ComponentWithClass {
-  rowData?: any[]
+  children: React.ReactElement<RowsProps>
 }
 
-const SideList: React.FC<SideProps> = ({ rowData }) => {
+const SideList: React.FC<SideProps> = ({ children }) => {
   return (
     <ol className="timeline__side-list">
       <li className="timeline__side-months">
@@ -19,23 +20,25 @@ const SideList: React.FC<SideProps> = ({ rowData }) => {
       <li className="timeline__side-weeks">
         <span className="timeline__side-title">Weeks</span>
       </li>
-      {rowData &&
-        rowData.map(({ name }, index) => {
+      {React.Children.map(
+        children.props.children,
+        (child: React.ReactElement<RowProps>, index: number) => {
           return (
             <li
               className="timeline__side-row"
               key={getKey('operation-side-row', index)}
               data-testid="side-row"
             >
-              <span className="timeline__side-title">{name}</span>
+              <span className="timeline__side-title">{child.props.name}</span>
             </li>
           )
-        })}
+        }
+      )}
     </ol>
   )
 }
 
-export const Side: React.FC<SideProps> = ({ rowData }) => {
+export const Side: React.FC<SideProps> = ({ children }) => {
   return (
     <TimelineContext.Consumer>
       {({ dispatch }) => {
@@ -55,7 +58,7 @@ export const Side: React.FC<SideProps> = ({ rowData }) => {
                 data-testid="side-button-right"
               />
             </div>
-            <SideList rowData={rowData} />
+            <SideList>{children}</SideList>
           </aside>
         )
       }}

packages/react-component-library/src/components/Timeline/Timeline.stories.tsx

@@ -1,29 +1,51 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 
-import { Timeline } from '.'
+import { Timeline, Event, Events, Row, Rows } from '.'
 
 const stories = storiesOf('Timeline', module)
 
-stories.add('No data', () => <Timeline rowData={[]} />)
-
-const rowData = [
-  {
-    name: 'Example Row',
-    events: [
-      {
-        title: 'Example Event',
-        startDate: new Date(2020, 3, 13),
-        endDate: new Date(2020, 3, 22),
-      },
-    ],
-  },
-]
+stories.add('No data', () => (
+  <Timeline>
+    <Rows>{}</Rows>
+  </Timeline>
+))
 
 stories.add('With data', () => (
-  <Timeline
-    startDate={new Date(2020, 4, 0)}
-    today={new Date(2020, 3, 15)}
-    rowData={rowData}
-  />
+  <Timeline startDate={new Date(2020, 4, 0)} today={new Date(2020, 3, 15)}>
+    <Rows>
+      <Row name="Row 1">
+        <Events>
+          <Event
+            startDate={new Date(2020, 3, 13)}
+            endDate={new Date(2020, 3, 18)}
+          >
+            Event 1
+          </Event>
+          <Event
+            startDate={new Date(2020, 3, 20)}
+            endDate={new Date(2020, 3, 22)}
+          >
+            Event 2
+          </Event>
+        </Events>
+      </Row>
+      <Row name="Row 2">
+        <Events>
+          <Event
+            startDate={new Date(2020, 3, 15)}
+            endDate={new Date(2020, 3, 20)}
+          >
+            Event 3
+          </Event>
+          <Event
+            startDate={new Date(2020, 3, 22)}
+            endDate={new Date(2020, 3, 24)}
+          >
+            Event 4
+          </Event>
+        </Events>
+      </Row>
+    </Rows>
+  </Timeline>
 ))

packages/react-component-library/src/components/Timeline/Timeline.tsx

@@ -1,47 +1,32 @@
 import React from 'react'
 
-import { getKey } from './helpers'
 import { TimelineProvider } from './context'
-
-import { NO_DATA_MESSAGE } from './constants'
-import { Side, Row, TodayMarker, Months, Weeks } from '.'
+import { Side, TodayMarker, Months, Weeks, RowProps } from '.'
+import { RowsProps } from './Rows'
 
 export interface TimelineProps extends ComponentWithClass {
-  rowData: any[]
+  children: React.ReactElement<RowsProps>
   startDate?: Date
   today?: Date
 }
 
 export const Timeline: React.FC<TimelineProps> = ({
-  rowData,
+  children,
   startDate,
   today,
 }) => {
-  const isEmpty = !rowData || rowData.length === 0
-
   return (
     <TimelineProvider startDate={startDate} today={today}>
       <article className="timeline">
-        <Side rowData={rowData} />
+        <Side>{children}</Side>
         <div className="timeline__inner">
           <header className="timeline__header">
             <TodayMarker />
             <Months />
             <Weeks />
           </header>
           <main className="timeline__main">
-            {isEmpty && (
-              <span className="timeline__empty" data-testid="timeline-no-data">
-                {NO_DATA_MESSAGE}
-              </span>
-            )}
-
-            {rowData &&
-              rowData.map(({ events }, index) => {
-                return (
-                  <Row events={events} key={getKey('timeline-row', index)} />
-                )
-              })}
+            {children}
           </main>
         </div>
       </article>