customComponents.js

import React from 'react'
import { action } from '@storybook/react'

const customComponents = {
  dateCellWrapper: dateCellWrapperProps => {
    // Show 'click me' text in arbitrary places by using the range prop
    const hasAlert = dateCellWrapperProps.range
      ? dateCellWrapperProps.range.some(date => {
          return date.getDate() % 12 === 0
        })
      : false

    const style = {
      display: 'flex',
      flex: 1,
      borderLeft: '1px solid #DDD',
      backgroundColor: hasAlert ? '#f5f5dc' : '#fff',
    }
    return (
      <div style={style}>
        {hasAlert && (
          <a onClick={action('custom dateCellWrapper component clicked')}>
            Click me
          </a>
        )}
        {dateCellWrapperProps.children}
      </div>
    )
  },
  dayWrapper: dayWrapperProps => {
    // Show different styles at arbitrary time
    const hasCustomInfo = dayWrapperProps.value
      ? dayWrapperProps.value.getHours() === 4
      : false
    const style = {
      display: 'flex',
      flex: 1,
      backgroundColor: hasCustomInfo ? '#f5f5dc' : '#fff',
    }
    return (
      <div style={style}>
        {hasCustomInfo && 'Custom Day Wrapper'}
        {dayWrapperProps.children}
      </div>
    )
  },
}

export default customComponents