wix-style-react/dist/es/stories/Calendar/index.story.js

wix-style-react

import React from 'react';
import addDays from 'date-fns/add_days';
import Calendar from '../../src/Calendar';
import CodeExample from 'wix-storybook-utils/CodeExample';
import ExampleStandardRaw from '!raw-loader!./ExampleStandard';
import ExampleStandard from './ExampleStandard';
import ExampleYearMonths from './ExampleYearMonths';
import ExampleYearMonthsRaw from '!raw-loader!./ExampleYearMonths';
import ExampleTooltip from './ExampleTooltip';
import ExampleTooltipRaw from '!raw-loader!./ExampleTooltip';
import { Container, Row, Col } from 'wix-style-react/Grid';

import { storySettings } from './storySettings';

export default {
  category: storySettings.category,
  storyName: storySettings.storyName,

  component: Calendar,
  componentPath: '../../src/Calendar',

  componentProps: function componentProps(setState) {
    return {
      onChange: function onChange(value) {
        return setState({ value: value });
      },
      showYearDropdown: false,
      showMonthDropdown: false,
      shouldCloseOnSelect: true,
      locale: 'en',
      excludePastDates: false,
      selectionMode: 'day',
      dataHook: storySettings.dataHook
    };
  },
  exampleProps: {
    value: [{
      label: '1st of Today\'s month',
      value: new Date(new Date().getFullYear(), new Date().getMonth(), 1)
    }, {
      label: 'Today',
      value: new Date()
    }, {
      label: 'Next Week (Range)',
      value: { from: new Date(), to: addDays(new Date(), 6) }
    }, {
      label: 'Last Week (Range)',
      value: { from: addDays(new Date(), -6), to: new Date() }
    }]
  },
  examples: React.createElement(
    Container,
    null,
    React.createElement(
      Row,
      null,
      React.createElement(
        Col,
        { span: 4 },
        React.createElement(
          CodeExample,
          { title: 'Standard', code: ExampleStandardRaw },
          React.createElement(ExampleStandard, null)
        )
      ),
      React.createElement(
        Col,
        { span: 4 },
        React.createElement(
          CodeExample,
          {
            title: 'With Years and Months selection',
            code: ExampleYearMonthsRaw
          },
          React.createElement(ExampleYearMonths, null)
        )
      ),
      React.createElement(
        Col,
        { span: 4 },
        React.createElement(
          CodeExample,
          { title: 'Within a Tooltip', code: ExampleTooltipRaw },
          React.createElement(ExampleTooltip, null)
        )
      )
    )
  )
};