feat(storybook): add ability to publish storybook to gh-pages

.gitignore

@@ -5,3 +5,4 @@ node_modules
 /lib
 /es
 /coverage
+/storybook-static

.storybook/addons.js

@@ -1,4 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
-import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'

package.json

@@ -32,6 +32,7 @@
     "recompose": "^0.24.0"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.0",
     "@storybook/react": "^3.2.3",
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
@@ -57,7 +58,9 @@
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "cross-env": "^5.0.2",
+    "gh-pages": "^1.0.0",
     "husky": "^0.14.3",
+    "import": "^0.0.6",
     "jest": "^20.0.4",
     "lint-staged": "^4.0.2",
     "mocha": "^3.5.0",
@@ -90,7 +93,8 @@
     "precommit": "lint-staged",
     "commitmsg": "validate-commit-msg",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook:build": "build-storybook",
+    "storybook:publish": "npm run storybook:build && gh-pages -d storybook-static -r [email protected]:plouc/nivo.git -b gh-pages -e storybook"
   },
   "lint-staged": {
     "*.js": [

src/components/charts/line/Line.js

@@ -224,7 +224,7 @@ export const LineDefaultProps = {
     // axes & grid
     axisBottom: {},
     axisLeft: {},
-    enableGridX: false,
+    enableGridX: true,
     enableGridY: true,
 
     // markers
@@ -237,7 +237,7 @@ export const LineDefaultProps = {
 
     // theming
     theme: {},
-    colors: Nivo.defaults.colorRange,
+    colors: 'nivo',
     colorBy: 'id',
 
     // motion

src/components/charts/radar/RadarGridLevels.js

@@ -75,7 +75,7 @@ const RadarGridLevels = ({
     if (animate !== true) {
         return (
             <g>
-                {range(radii).map((radius, i) =>
+                {radii.map((radius, i) =>
                     <path
                         key={`level.${i}`}
                         fill="none"
@@ -86,6 +86,7 @@ const RadarGridLevels = ({
             </g>
         )
     }
+
     return (
         <TransitionMotion {...levelsTransitionProps}>
             {interpolatedStyles =>

stories/charts/bar.stories.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { storiesOf } from '@storybook/react'
 import { generateDrinkStats } from 'nivo-generators'
+import '../style.css'
 import { Bar } from '../../src'
 
 const commonProperties = {
@@ -14,20 +15,11 @@ const commonProperties = {
 
 storiesOf('Bar', module)
     .addDecorator(story =>
-        <div
-            style={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                top: 0,
-                left: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-        >
+        <div className="wrapper">
             {story()}
         </div>
     )
     .add('stacked', () => <Bar {...commonProperties} />)
     .add('grouped', () => <Bar {...commonProperties} groupMode="grouped" />)
+    .add('using data serie color', () => <Bar {...commonProperties} colorBy={d => d.serie.color} />)
+    .add('using data datum color', () => <Bar {...commonProperties} colorBy={d => d.color} />)

stories/charts/line.stories.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, boolean, select } from '@storybook/addon-knobs'
+import { generateDrinkStats } from 'nivo-generators'
+import '../style.css'
+import { Line } from '../../src'
+
+const commonProperties = {
+    width: 900,
+    height: 360,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    data: generateDrinkStats(18),
+    animate: true,
+}
+
+const curveOptions = ['linear', 'monotoneX']
+
+const stories = storiesOf('Line', module)
+
+stories
+    .addDecorator(story =>
+        <div className="wrapper">
+            {story()}
+        </div>
+    )
+    .addDecorator(withKnobs)
+
+stories.add('default', () =>
+    <Line {...commonProperties} curve={select('curve', curveOptions, 'linear')} />
+)
+
+stories.add('stacked', () =>
+    <Line {...commonProperties} stacked={true} curve={select('curve', curveOptions, 'linear')} />
+)
+
+stories.add('with custom curve', () =>
+    <Line {...commonProperties} stacked={true} curve="monotoneX" />
+)
+
+stories.add('with markers label', () =>
+    <Line
+        {...commonProperties}
+        stacked={boolean('stacked', true)}
+        curve={select('curve', curveOptions, 'linear')}
+        enableMarkersLabel={true}
+        markersSize={10}
+        markersBorderColor="#fff"
+        markersBorderWidth={2}
+    />
+)
+
+stories.add('abusing markers label', () =>
+    <Line
+        {...commonProperties}
+        stacked={boolean('stacked', true)}
+        curve={select('curve', curveOptions, 'monotoneX')}
+        enableMarkersLabel={true}
+        markersSize={26}
+        markersLabelYOffset={3}
+        axisLeft={{
+            tickSize: 10,
+        }}
+    />
+)
+
+stories.add('using data colors', () =>
+    <Line
+        {...commonProperties}
+        stacked={boolean('stacked', true)}
+        curve={select('curve', curveOptions, 'linear')}
+        colorBy={d => d.color}
+        enableMarkersLabel={true}
+        markersSize={10}
+        markersBorderColor="#fff"
+        markersBorderWidth={2}
+    />
+)

stories/charts/radar.stories.js

@@ -1,38 +1,70 @@
 import React from 'react'
-
 import { storiesOf } from '@storybook/react'
+import { withKnobs, select } from '@storybook/addon-knobs'
 import { generateSerie, randColor } from 'nivo-generators'
+import '../style.css'
 import { Radar } from '../../src'
 
 const commonProperties = {
     width: 600,
     height: 600,
-    margin: { top: 60, right: 60, bottom: 60, left: 60 },
+    margin: { top: 80, right: 80, bottom: 80, left: 80 },
     facets: ['fruity', 'bitter', 'heavy', 'strong', 'sunny'],
     //colors: 'nivo',
     data: ['chardonay', 'carmenere', 'syrah'].map(id => ({
         id,
         color: randColor(),
         data: generateSerie(5),
     })),
+    animate: true,
 }
 
-storiesOf('Radar', module)
+const curveOptions = ['linearClosed', 'basisClosed', 'catmullRomClosed', 'cardinalClosed']
+
+const stories = storiesOf('Radar', module)
+
+stories
     .addDecorator(story =>
-        <div
-            style={{
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                top: 0,
-                left: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-        >
+        <div className="wrapper">
             {story()}
         </div>
     )
-    .add('default', () => <Radar {...commonProperties} />)
-    .add('linear grid shape', () => <Radar {...commonProperties} gridShape="linear" />)
+    .addDecorator(withKnobs)
+
+stories.add('default', () => <Radar {...commonProperties} />)
+
+stories.add('with custom curve', () =>
+    <Radar {...commonProperties} gridShape="linear" curve="catmullRomClosed" />
+)
+
+stories.add('linear grid shape', () =>
+    <Radar
+        {...commonProperties}
+        gridShape="linear"
+        curve={select('curve', curveOptions, 'linearClosed')}
+    />
+)
+
+stories.add('with markers label', () =>
+    <Radar
+        {...commonProperties}
+        curve={select('curve', curveOptions, 'linearClosed')}
+        gridShape="linear"
+        markersSize={10}
+        markersBorderColor="#fff"
+        markersBorderWidth={2}
+        enableMarkersLabel={true}
+        gridLabelOffset={36}
+    />
+)
+
+stories.add('abusing markers label', () =>
+    <Radar
+        {...commonProperties}
+        curve={select('curve', curveOptions, 'catmullRomClosed')}
+        markersSize={32}
+        markersLabelYOffset={3}
+        enableMarkersLabel={true}
+        gridLabelOffset={36}
+    />
+)

stories/style.css

@@ -0,0 +1,14 @@
+svg text {
+    font-family: 'Consolas', monospace;
+}
+
+.wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}