feat(storybook): init storybook

.storybook/addons.js

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

.storybook/config.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { configure } from '@storybook/react'
+
+const req = require.context('../stories', true, /\.stories\.js$/)
+
+function loadStories() {
+    req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nivo",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "licenses": [
     {
       "type": "MIT",
@@ -32,6 +32,7 @@
     "recompose": "^0.24.0"
   },
   "devDependencies": {
+    "@storybook/react": "^3.2.3",
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
     "babel-plugin-check-es2015-constants": "^6.22.0",
@@ -60,6 +61,7 @@
     "jest": "^20.0.4",
     "lint-staged": "^4.0.2",
     "mocha": "^3.5.0",
+    "nivo-generators": "^0.3.0",
     "prettier": "^1.5.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
@@ -81,12 +83,14 @@
     "build:es": "cross-env NODE_ENV=es babel src --out-dir es",
     "build:es:watch": "npm run build:es -- --watch",
     "build": "npm run build:commonjs && npm run build:es",
-    "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --color --write \"{src,specs,test}/**/*.js\"",
-    "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different \"{src,specs,test}/**/*.js\"",
+    "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --color --write \"{src,specs,test,.storybook,stories}/**/*.js\"",
+    "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different \"{src,specs,test,.storybook,stories}/**/*.js\"",
     "version": "echo ${npm_package_version}",
     "prepublishOnly": "npm test && npm run build",
     "precommit": "lint-staged",
-    "commitmsg": "validate-commit-msg"
+    "commitmsg": "validate-commit-msg",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "lint-staged": {
     "*.js": [

src/components/charts/bar/Bar.js

@@ -84,7 +84,7 @@ export default class Bar extends Component {
 
         // theming
         theme: {},
-        colors: Nivo.defaults.colorRange,
+        colors: 'nivo',
         colorBy: 'serie.id',
 
         // motion

src/components/charts/radar/Radar.js

@@ -185,7 +185,7 @@ export const RadarDefaultProps = {
 
     // theming
     theme: {},
-    colors: Nivo.defaults.colorRange,
+    colors: 'nivo',
     colorBy: 'id',
     fillOpacity: 0.15,
 

stories/charts/bar.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { generateDrinkStats } from 'nivo-generators'
+import { Bar } from '../../src'
+
+const commonProperties = {
+    width: 900,
+    height: 360,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    data: generateDrinkStats(18),
+    xPadding: 0.2,
+}
+
+storiesOf('Bar', module)
+    .addDecorator(story =>
+        <div
+            style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                top: 0,
+                left: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            {story()}
+        </div>
+    )
+    .add('stacked', () => <Bar {...commonProperties} />)
+    .add('grouped', () => <Bar {...commonProperties} groupMode="grouped" />)

stories/charts/radar.stories.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { generateSerie, randColor } from 'nivo-generators'
+import { Radar } from '../../src'
+
+const commonProperties = {
+    width: 600,
+    height: 600,
+    margin: { top: 60, right: 60, bottom: 60, left: 60 },
+    facets: ['fruity', 'bitter', 'heavy', 'strong', 'sunny'],
+    //colors: 'nivo',
+    data: ['chardonay', 'carmenere', 'syrah'].map(id => ({
+        id,
+        color: randColor(),
+        data: generateSerie(5),
+    })),
+}
+
+storiesOf('Radar', module)
+    .addDecorator(story =>
+        <div
+            style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                top: 0,
+                left: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            {story()}
+        </div>
+    )
+    .add('default', () => <Radar {...commonProperties} />)
+    .add('linear grid shape', () => <Radar {...commonProperties} gridShape="linear" />)

stories/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import { Button, Welcome } from '@storybook/react/demo'
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
+
+storiesOf('Button', module)
+    .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+    .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)