@appearhere/bloom/components/Calendar/DayPicker/DayPicker.story.js

Appear Here's pattern library and styleguide

import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, number } from '@storybook/addon-knobs';
import moment from 'moment';
import DayPicker from './DayPicker';
import { defaultDayState } from './DayPickerItem';

class StateManagedDayPicker extends Component {
  state = {
    date: '',
    month: moment(),
  };

  getDayState = (day) => {
    const { date } = this.state;
    return Object.assign({}, defaultDayState, {
      isSelected: day && date && day.isSame(date, 'day'),
      isFirstSelected: day && date && day.isSame(date, 'day'),
      isLastSelected: day && date && day.isSame(date, 'day'),
    });
  };

  handleInteraction = (e, date) => {
    this.setState({ date });
  };

  handleMonthChange = (_, month) => {
    this.setState({ month });
  };

  render() {
    const { month } = this.state;

    return (
      <div>
        <DayPicker
          { ...this.props }
          month={ month }
          onInteraction={ this.handleInteraction }
          onMonthChange={ this.handleMonthChange }
          dayProps={ {
            getDayState: this.getDayState,
          } }
        />
      </div>
    );
  }
}

const stories = storiesOf('DayPicker', module);
stories.addDecorator(withKnobs);

const today = moment();

stories
  .add('Single date selected', () => (
    <DayPicker
      dayProps={ {
        getDayState: d => Object.assign({}, defaultDayState, {
          isSelected: d && d.isSame(moment(), 'day'),
          isFirstSelected: d && d.isSame(moment(), 'day'),
          isLastSelected: d && d.isSame(moment(), 'day'),
        }),
      } }
      month={ moment().month(4) }
    />
  ))
  .add('Multiple dates selected', () => (
    <DayPicker
      dayProps={ {
        getDayState: (d) => {
          const startDate = moment().add(-5, 'day');
          const endDate = moment().add(5, 'day');

          return Object.assign({}, defaultDayState, {
            isSelected: d && d.isAfter(startDate, 'day') && d.isBefore(endDate, 'day'),
            isFirstSelected: d && d.isSame(startDate, 'day'),
            isLastSelected: d && d.isSame(endDate, 'day'),
          });
        },
      } }
      month={ moment({ month: number('month', today.month()) }) }
    />
  ))
  .add('Interactive', () => (
    <StateManagedDayPicker />
  ));