feat(demo): add command to deploy demo website + storybook

.babelrc

@@ -1,70 +1,3 @@
 {
-  "plugins": [
-    [
-      "transform-es2015-template-literals",
-      {
-        "loose": true
-      }
-    ],
-    "transform-es2015-literals",
-    "transform-es2015-function-name",
-    "transform-es2015-arrow-functions",
-    "transform-es2015-block-scoped-functions",
-    "transform-class-properties",
-    [
-      "transform-es2015-classes",
-      {
-        "loose": true
-      }
-    ],
-    "transform-es2015-object-super",
-    "transform-es2015-shorthand-properties",
-    [
-      "transform-es2015-computed-properties",
-      {
-        "loose": true
-      }
-    ],
-    "check-es2015-constants",
-    [
-      "transform-es2015-spread",
-      {
-        "loose": true
-      }
-    ],
-    "transform-es2015-parameters",
-    [
-      "transform-es2015-destructuring",
-      {
-        "loose": true
-      }
-    ],
-    "transform-es2015-block-scoping",
-    "transform-object-rest-spread",
-    "transform-react-jsx",
-    "syntax-jsx",
-    "lodash"
-  ],
-  "env": {
-    "commonjs": {
-      "plugins": [
-        [
-          "transform-es2015-modules-commonjs",
-          {
-            "loose": true
-          }
-        ]
-      ]
-    },
-    "test": {
-      "plugins": [
-        [
-          "transform-es2015-modules-commonjs",
-          {
-            "loose": true
-          }
-        ]
-      ]
-    }
-  }
+  "presets": ["@nivo/babel-preset"]
 }

.storybook/config.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
 import { configure } from '@storybook/react'
 import { setDefaults } from '@storybook/addon-info'
 import './style.css'
@@ -12,10 +13,17 @@ setDefaults({
     maxPropStringLength: 10000
 })
 
-const req = require.context('../packages', true, /\.stories\.js$/)
-
 function loadStories() {
-    req.keys().forEach(filename => req(filename))
+    require('../packages/nivo-bar/stories/bar.stories')
+    require('../packages/nivo-chord/stories/chord.stories')
+    require('../packages/nivo-circle-packing/stories/bubble.stories')
+    require('../packages/nivo-heatmap/stories/heatmap.stories')
+    require('../packages/nivo-line/stories/line.stories')
+    require('../packages/nivo-pie/stories/pie.stories')
+    require('../packages/nivo-radar/stories/radar.stories')
+    require('../packages/nivo-sankey/stories/sankey.stories')
+    require('../packages/nivo-stream/stories/stream.stories')
+    require('../packages/nivo-sunburst/stories/sunburst.stories')
 }
 
 configure(loadStories, module)

.travis.yml

@@ -1,10 +1,10 @@
 language: node_js
 node_js:
-  - '6'
-  - '7'
   - '8'
 script:
   - make init
+  - make demo-build
+  - make storybook-build
   #- yarn run fmt:check
   #- yarn run test:cover
 #after_success:

Makefile

@@ -1,6 +1,6 @@
 SOURCES = packages
 
-.PHONY: help init build-all clean-all
+.PHONY: help init build-all clean-all demo demo-build demo-deploy storybook storybook-build storybook-deploy deploy-all
 
 ########################################################################################################################
 #
@@ -41,7 +41,12 @@ init: ##@init cleanup/install/bootstrap
 	./node_modules/.bin/lerna bootstrap
 	make build-all
 
+deploy-all: ##@deploy deploy demo website & storybook
+	@make demo-deploy
+	@make storybook-deploy
+
 build-all: ##@build build all packages
+	@echo "${YELLOW}Building all packages${RESET}"
 	$(foreach source, $(SOURCES), $(call clean-source-lib, $(source)))
 	./node_modules/.bin/lerna run --ignore nivo-demo --ignore nivo-example-retro build
 
@@ -67,3 +72,42 @@ define clean-source-all
 	rm -rf $(1)/*/node_modules
 	rm -rf $(1)/*/package-lock.json
 endef
+
+########################################################################################################################
+#
+# DEMO
+#
+########################################################################################################################
+
+demo: ##@demo start demo in dev mode
+	@echo "${YELLOW}Starting demo${RESET}"
+	@cd demo && yarn start
+
+demo-build: ##@demo build demo
+	@echo "${YELLOW}Building demo${RESET}"
+	@cd demo && yarn build
+
+demo-deploy: ##@demo build & deploy demo
+	@make demo-build
+
+	@echo "${YELLOW}Deploying demo${RESET}"
+	@./node_modules/.bin/gh-pages -d demo/build -r [email protected]:plouc/nivo.git -b gh-pages
+
+########################################################################################################################
+#
+# STORYBOOK
+#
+########################################################################################################################
+
+storybook: ##@storybook start storybook in dev mode on port 6006
+	@./node_modules/.bin/start-storybook -p 6006
+
+storybook-build: ##@storybook build storybook
+	@echo "${YELLOW}Building storybook${RESET}"
+	@./node_modules/.bin/build-storybook
+
+storybook-deploy: ##@storybook build and deploy storybook
+	@make storybook-build
+
+	@echo "${YELLOW}Deploying storybook${RESET}"
+	@./node_modules/.bin/gh-pages -d storybook-static -r [email protected]:plouc/nivo.git -b gh-pages -e storybook

demo/package.json

@@ -5,8 +5,6 @@
     "description": "nivo demo",
     "author": "Raphaël Benitte <[email protected]>",
     "devDependencies": {
-        "gh-pages": "^1.0.0",
-        "prettier": "^1.7.4",
         "react-scripts": "1.0.14",
         "source-map-explorer": "^1.5.0"
     },
@@ -51,7 +49,6 @@
         "analyze": "source-map-explorer build/static/js/main.*",
         "fmt": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --write 'src/**/*.js' 'src/**/*.css'",
         "fmt:check": "prettier --print-width=100 --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --list-different 'src/**/*.js' 'src/**/*.css'",
-        "demo:publish": "npm run build && gh-pages -d build -r [email protected]:plouc/nivo.git -b gh-pages",
         "sprites": "glue --img src/assets --css src/styles src/assets/icons"
     }
 }

demo/src/components/pages/About.js

@@ -126,7 +126,7 @@ const About = () => (
                         >
                             nivo
                         </a>{' '}
-                        - the nivo library
+                        - nivo packages & website
                     </li>
                     <li>
                         <a
@@ -158,16 +158,6 @@ const About = () => (
                         </a>{' '}
                         - the data generators used for nivo-website and http API samples
                     </li>
-                    <li>
-                        <a
-                            href="https://github.com/plouc/nivo-website"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            nivo-website
-                        </a>{' '}
-                        - the source for the nivo website
-                    </li>
                 </ul>
             </div>
         </div>

package.json

@@ -18,13 +18,14 @@
   "keywords": [],
   "dependencies": {
     "@ekino/config": "^0.3.0",
-    "@storybook/addon-info": "^3.2.17",
+    "@nivo/babel-preset": "^0.32.0-9",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
     "puppeteer": "^0.13.0",
     "react-motion": "^0.5.1"
   },
   "devDependencies": {
+    "@storybook/addon-info": "^3.2.17",
     "@storybook/addon-knobs": "^3.2.17",
     "@storybook/react": "^3.2.17",
     "clog-cli": "^1.0.0",
@@ -53,11 +54,7 @@
     "test:unit:cover": "jest --verbose --coverage ./test",
     "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}",
     "disabledPrepublishOnly": "npm test && npm run build",
-    "storybook": "start-storybook -p 6006",
-    "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",
     "changelog": "rm CHANGELOG.md && node scripts/generate-changelog.js"
   },
   "lint-staged": {

packages/nivo-bar/stories/bar.stories.js

@@ -4,7 +4,7 @@ import { withInfo } from '@storybook/addon-info'
 import { generateCountriesData, sets } from 'nivo-generators'
 import range from 'lodash/range'
 import random from 'lodash/random'
-import { Bar } from '../src'
+import { Bar } from '../es'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {

packages/nivo-chord/stories/chord.stories.js

@@ -1,9 +1,7 @@
 import React from 'react'
-
 import { storiesOf } from '@storybook/react'
 import { generateChordData } from 'nivo-generators'
-//import '../style.css'
-import { Chord } from '../src'
+import { Chord } from '../es'
 
 const commonProperties = {
     width: 600,

packages/nivo-circle-packing/stories/bubble.stories.js

@@ -1,9 +1,7 @@
 import React from 'react'
-
 import { storiesOf } from '@storybook/react'
 import { generateLibTree } from 'nivo-generators'
-//import '../style.css'
-import { Bubble } from '../src'
+import { Bubble } from '../es'
 
 const commonProperties = {
     width: 600,

packages/nivo-heatmap/stories/heatmap.stories.js

@@ -1,9 +1,7 @@
 import React from 'react'
-
 import { storiesOf } from '@storybook/react'
 import { generateCountriesData } from 'nivo-generators'
-//import '../style.css'
-import { HeatMap } from '../src'
+import { HeatMap } from '../es'
 
 const CustomCell = ({
     value,

packages/nivo-line/stories/line.stories.js

@@ -2,8 +2,7 @@ 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'
+import { Line } from '../es'
 
 const data = generateDrinkStats(18)
 const commonProperties = {

packages/nivo-pie/stories/pie.stories.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, select } from '@storybook/addon-knobs'
 import { generateProgrammingLanguageStats } from 'nivo-generators'
-//import '../style.css'
-import { Pie } from '../src'
+import { Pie } from '../es'
 
 const commonProperties = {
     width: 600,

packages/nivo-radar/stories/radar.stories.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, select } from '@storybook/addon-knobs'
 import { generateWinesTastes } from 'nivo-generators'
-//import '../style.css'
-import { Radar } from '../src'
+import { Radar } from '../es'
 
 const commonProperties = {
     width: 600,

packages/nivo-sankey/stories/sankey.stories.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { generateSankeyData } from 'nivo-generators'
-//import '../style.css'
-import { Sankey } from '../src'
+import { Sankey } from '../es'
 
 const commonProperties = {
     width: 1100,

packages/nivo-stream/stories/stream.stories.js

@@ -2,8 +2,8 @@ import React from 'react'
 import { range, random } from 'lodash'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
-//import '../style.css'
-import { Stream, areaCurvePropKeys } from '../src'
+import { areaCurvePropKeys } from '@nivo/core'
+import { Stream } from '../es'
 
 const keys = ['Raoul', 'Josiane', 'Marcel', 'René', 'Paul', 'Jacques']
 

packages/nivo-sunburst/stories/sunburst.stories.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
-//import '../style.css'
-import { Sunburst } from '../src'
+import { Sunburst } from '../es'
 import { generateLibTree } from 'nivo-generators'
 
 const commonProperties = {