Adds SingleDatePicker stories by prop category (input, calendar, day)

.storybook/config.js

@@ -14,6 +14,9 @@ function loadStories() {
   require('../stories/DateRangePicker_calendar');
   require('../stories/DateRangePicker_day');
   require('../stories/SingleDatePicker');
+  require('../stories/SingleDatePicker_input');
+  require('../stories/SingleDatePicker_calendar');
+  require('../stories/SingleDatePicker_day');
   require('../stories/DayPicker');
 }
 

stories/DateRangePicker_day.js

@@ -2,8 +2,6 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@kadira/storybook';
 
-import { VERTICAL_ORIENTATION, ANCHOR_RIGHT } from '../constants';
-
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 

stories/SingleDatePicker.js

@@ -4,111 +4,35 @@ import { storiesOf } from '@kadira/storybook';
 
 import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
 
-import { VERTICAL_ORIENTATION, ANCHOR_RIGHT } from '../constants';
-
 const TestInput = props => (
-   <div style={{ marginTop: 16 }} >
-     <input
-       {...props}
-       type="text"
-       style={{
-         height: 48,
-         width: 284,
-         fontSize: 18,
-         fontWeight: 200,
-         padding: '12px 16px',
-       }}
-     />
+  <div style={{ marginTop: 16 }} >
+    <input
+      {...props}
+      type="text"
+      style={{
+        height: 48,
+        width: 284,
+        fontSize: 18,
+        fontWeight: 200,
+        padding: '12px 16px',
+      }}
+    />
   </div>
 );
-const TestPrevIcon = props => (
-  <span style={{
-      border: '1px solid #dce0e0',
-      backgroundColor: '#fff',
-      color: '#484848',
-      padding: '3px'
-    }}
-  >
-    Prev
-  </span>
-);
-const TestNextIcon = props => (
-  <span style={{
-    border: '1px solid #dce0e0',
-    backgroundColor: '#fff',
-    color: '#484848',
-    padding: '3px'
-    }}
-  >
-    Next
-  </span>
-);
 
-storiesOf('SingleDatePicker', module)
+storiesOf('SingleDatePicker (SDP)', module)
   .addWithInfo('default', () => (
     <SingleDatePickerWrapper />
   ))
-  .addWithInfo('single month', () => (
-    <SingleDatePickerWrapper
-      numberOfMonths={1}
-    />
-  ))
   .addWithInfo('as part of a form', () => (
-     <div>
-       <SingleDatePickerWrapper />
-       <TestInput placeholder="Input 1" />
-       <TestInput placeholder="Input 2" />
-       <TestInput placeholder="Input 3" />
-     </div>
-   ))
-  .addWithInfo('anchored right', () => (
-    <div style={{ float: 'right' }}>
-      <SingleDatePickerWrapper
-        anchorDirection={ANCHOR_RIGHT}
-      />
+    <div>
+      <SingleDatePickerWrapper />
+      <TestInput placeholder="Input 1" />
+      <TestInput placeholder="Input 2" />
+      <TestInput placeholder="Input 3" />
     </div>
-  ))
-  .addWithInfo('vertical', () => (
-    <SingleDatePickerWrapper
-      orientation={VERTICAL_ORIENTATION}
-    />
-  ))
-  .addWithInfo('horizontal with portal', () => (
-    <SingleDatePickerWrapper
-      withPortal
-    />
-  ))
-  .addWithInfo('horizontal with fullscreen portal', () => (
-    <SingleDatePickerWrapper withFullScreenPortal />
-  ))
-  .addWithInfo('vertical with full screen portal', () => (
-    <SingleDatePickerWrapper
-      orientation={VERTICAL_ORIENTATION}
-      withFullScreenPortal
-    />
-  ))
-  .addWithInfo('with clear dates button', () => (
-    <SingleDatePickerWrapper
-      showClearDate
-    />
-  ))
-  .addWithInfo('reopens DayPicker on clear dates', () => (
-    <SingleDatePickerWrapper
-      showClearDate
-      reopenPickerOnClearDate
-    />
-  ))
-  .addWithInfo('does not autoclose the DayPicker on date selection', () => (
-    <SingleDatePickerWrapper
-      keepOpenOnDateSelect
-    />
-  ))
-  .addWithInfo('with month specified on open', () => (
-    <SingleDatePickerWrapper
-      initialVisibleMonth={() => moment('01 2017', 'MM YYYY')}
-    />
-  ))
-  .addWithInfo('non-english locale', () => {
+   ))
+  .addWithInfo('non-english locale (Chinese)', () => {
     moment.locale('zh-cn');
     return (
       <SingleDatePickerWrapper
@@ -116,35 +40,8 @@ storiesOf('SingleDatePicker', module)
         monthFormat="YYYY[年]MMMM"
         phrases={{
           closeDatePicker: '关闭',
+          clearDate: '清除日期',
         }}
       />
     );
-  })
-  .addWithInfo('with custom display format', () => (
-    <SingleDatePickerWrapper
-      displayFormat="MMM D"
-    />
-  ))
-  .addWithInfo('with custom arrows', () => (
-    <SingleDatePickerWrapper
-      navPrev={<TestPrevIcon />}
-      navNext={<TestNextIcon />}
-    />
-  ))
-  .addWithInfo('with outside days enabled', () => (
-    <SingleDatePickerWrapper
-      numberOfMonths={1}
-      enableOutsideDays
-    />
-  ))
-  .addWithInfo('with screen reader message', () => (
-    <SingleDatePickerWrapper
-      screenReaderInputMessage='Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc'
-    />
-  ))
-  .addWithInfo('with custom daily details', () => (
-    <SingleDatePickerWrapper
-      numberOfMonths={1}
-      renderDay={day => day.format('ddd')}
-    />
-  ));
+  });

stories/SingleDatePicker_calendar.js

+import React from 'react';
+import moment from 'moment';
+import { storiesOf } from '@kadira/storybook';
+
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+
+import { VERTICAL_ORIENTATION, ANCHOR_RIGHT } from '../constants';
+
+const TestPrevIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+    }}
+  >
+    Prev
+  </span>
+);
+
+const TestNextIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+    }}
+  >
+    Next
+  </span>
+);
+
+storiesOf('SDP - Calendar Props', module)
+  .addWithInfo('default', () => (
+    <SingleDatePickerWrapper />
+  ))
+  .addWithInfo('single month', () => (
+    <SingleDatePickerWrapper
+      numberOfMonths={1}
+    />
+  ))
+  .addWithInfo('anchored right', () => (
+    <div style={{ float: 'right' }}>
+      <SingleDatePickerWrapper
+        anchorDirection={ANCHOR_RIGHT}
+      />
+    </div>
+  ))
+  .addWithInfo('vertical', () => (
+    <SingleDatePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+    />
+  ))
+  .addWithInfo('horizontal with portal', () => (
+    <SingleDatePickerWrapper
+      withPortal
+    />
+  ))
+  .addWithInfo('horizontal with fullscreen portal', () => (
+    <SingleDatePickerWrapper withFullScreenPortal />
+  ))
+  .addWithInfo('vertical with full screen portal', () => (
+    <SingleDatePickerWrapper
+      orientation={VERTICAL_ORIENTATION}
+      withFullScreenPortal
+    />
+  ))
+  .addWithInfo('does not autoclose the DayPicker on date selection', () => (
+    <SingleDatePickerWrapper
+      keepOpenOnDateSelect
+    />
+  ))
+  .addWithInfo('with month specified on open', () => (
+    <SingleDatePickerWrapper
+      initialVisibleMonth={() => moment('01 2017', 'MM YYYY')}
+    />
+  ))
+  .addWithInfo('with custom arrows', () => (
+    <SingleDatePickerWrapper
+      navPrev={<TestPrevIcon />}
+      navNext={<TestNextIcon />}
+    />
+  ))
+  .addWithInfo('with outside days enabled', () => (
+    <SingleDatePickerWrapper
+      numberOfMonths={1}
+      enableOutsideDays
+    />
+  ));

stories/SingleDatePicker_day.js

+import React from 'react';
+import moment from 'moment';
+import { storiesOf } from '@kadira/storybook';
+
+import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
+import isSameDay from '../src/utils/isSameDay';
+
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+
+const datesList = [
+  moment(),
+  moment().add(1, 'days'),
+  moment().add(3, 'days'),
+  moment().add(9, 'days'),
+  moment().add(10, 'days'),
+  moment().add(11, 'days'),
+  moment().add(12, 'days'),
+  moment().add(13, 'days'),
+];
+
+storiesOf('SDP - Day Props', module)
+  .addWithInfo('default', () => (
+    <SingleDatePickerWrapper />
+  ))
+  .addWithInfo('allows all days, including past days', () => (
+    <SingleDatePickerWrapper
+      isOutsideRange={() => false}
+    />
+  ))
+  .addWithInfo('allows next two weeks only', () => (
+    <SingleDatePickerWrapper
+      isOutsideRange={day =>
+        !isInclusivelyAfterDay(day, moment()) ||
+        isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
+      }
+    />
+  ))
+  .addWithInfo('with some blocked dates', () => (
+    <SingleDatePickerWrapper
+      isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
+  ))
+  .addWithInfo('with some highlighted dates', () => (
+    <SingleDatePickerWrapper
+      isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
+    />
+  ))
+  .addWithInfo('blocks fridays', () => (
+    <SingleDatePickerWrapper
+      isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'}
+    />
+  ))
+  .addWithInfo('with custom daily details', () => (
+    <SingleDatePickerWrapper
+      numberOfMonths={1}
+      renderDay={day => day.format('ddd')}
+    />
+  ));

stories/SingleDatePicker_input.js

+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+import SingleDatePickerWrapper from '../examples/SingleDatePickerWrapper';
+
+storiesOf('SDP - Input Props', module)
+  .addWithInfo('default', () => (
+    <SingleDatePickerWrapper />
+  ))
+  .addWithInfo('with clear dates button', () => (
+    <SingleDatePickerWrapper
+      showClearDate
+    />
+  ))
+  .addWithInfo('reopens DayPicker on clear dates', () => (
+    <SingleDatePickerWrapper
+      showClearDate
+      reopenPickerOnClearDate
+    />
+  ))
+  .addWithInfo('with custom display format', () => (
+    <SingleDatePickerWrapper
+      displayFormat="MMM D"
+    />
+  ))
+  .addWithInfo('with screen reader message', () => (
+    <SingleDatePickerWrapper
+      screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
+    />
+  ));