feat(calendar): add stories

.storybook/config.js

@@ -16,6 +16,7 @@ setDefaults({
 function loadStories() {
     require('../packages/nivo-bar/stories/bar.stories')
     require('../packages/nivo-bar/stories/barCanvas.stories')
+    require('../packages/nivo-calendar/stories/calendar.stories')
     require('../packages/nivo-chord/stories/chord.stories')
     require('../packages/nivo-circle-packing/stories/bubble.stories')
     require('../packages/nivo-circle-packing/stories/bubbleHtml.stories')

packages/nivo-calendar/src/Calendar.js

@@ -8,6 +8,7 @@
  */
 import React from 'react'
 import { BoxLegendSvg } from '@nivo/legends'
+import setDisplayName from 'recompose/setDisplayName'
 import computeCalendar from './computeCalendar'
 import { CalendarPropTypes } from './props'
 import { DIRECTION_HORIZONTAL } from './constants'
@@ -167,4 +168,4 @@ const Calendar = ({
 
 Calendar.propTypes = CalendarPropTypes
 
-export default enhance(Calendar)
+export default setDisplayName('Calendar')(enhance(Calendar))

packages/nivo-calendar/stories/.eslintrc.yml

@@ -0,0 +1,5 @@
+globals:
+  module: true
+
+rules:
+  react/prop-types: 0

packages/nivo-calendar/stories/calendar.stories.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { generateDayCounts } from '@nivo/generators'
+import { Calendar } from '../index'
+
+const from = new Date(2019, 0, 1)
+const to = new Date(2019, 11, 31)
+const data = generateDayCounts(from, to)
+
+const commonProps = {
+    width: 900,
+    height: 260,
+    margin: {
+        top: 50,
+        right: 10,
+        bottom: 10,
+        left: 50,
+    },
+    from: from.toISOString(),
+    to: to.toISOString(),
+    data,
+}
+
+const stories = storiesOf('Calendar', module)
+
+stories.add('default', withInfo()(() => <Calendar {...commonProps} />))
+
+const japaneseMonths = [
+    '一月',
+    '二月',
+    '三月',
+    '四月',
+    '五月',
+    '六月',
+    '七月',
+    '八月',
+    '九月',
+    '十月',
+    '十一月',
+    '十二月',
+]
+stories.add(
+    'translating months',
+    withInfo()(() => (
+        <Calendar monthLegend={(year, month) => japaneseMonths[month]} {...commonProps} />
+    ))
+)
+
+stories.add(
+    'custom colors',
+    withInfo()(() => (
+        <Calendar
+            colors={['#a1cfff', '#468df3', '#a053f0', '#9629f0', '#8428d8']}
+            {...commonProps}
+        />
+    ))
+)
+
+stories.add(
+    'vertical calendar',
+    withInfo()(() => <Calendar direction="vertical" {...commonProps} height={600} />)
+)