feat(rose): init package

.gitignore

@@ -13,4 +13,5 @@ build
 /packages/*/umd
 
 *.lerna_backup
+.rpt2_cache
 

Makefile

@@ -54,7 +54,7 @@ init: ##@0 global cleanup/install/bootstrap
 
 fmt: ##@0 global format code using prettier (js, css, md)
 	@./node_modules/.bin/prettier --color --write \
-		"packages/*/{src,stories,tests}/**/*.{js,ts}" \
+		"packages/*/{src,stories,tests}/**/*.{js,ts,tsx}" \
 		"packages/*/index.d.ts" \
 		"packages/*/README.md" \
 		"website/src/**/*.{js,css}" \
@@ -65,7 +65,7 @@ fmt: ##@0 global format code using prettier (js, css, md)
 fmt-check: ##@0 global check if files were all formatted using prettier
 	@echo "${YELLOW}Checking formatting${RESET}"
 	@./node_modules/.bin/prettier --color --list-different \
-        "packages/*/{src,stories,tests}/**/*.{js,ts}" \
+        "packages/*/{src,stories,tests}/**/*.{js,ts,tsx}" \
         "packages/*/index.d.ts" \
         "packages/*/README.md" \
         "website/src/**/*.{js,css}" \
@@ -91,13 +91,13 @@ clean-all: ##@0 global uninstall node modules, remove transpiled code & lock fil
 	@rm -rf website/package-lock.json
 
 define clean-source-lib
-	rm -rf $(1)/*/es
-	rm -rf $(1)/*/lib
+	rm -rf $(1)/*/cjs
+	rm -rf $(1)/*/umd
 endef
 
 define clean-source-all
-	rm -rf $(1)/*/es
-	rm -rf $(1)/*/lib
+	rm -rf $(1)/*/cjs
+	rm -rf $(1)/*/umd
 	rm -rf $(1)/*/node_modules
 	rm -rf $(1)/*/package-lock.json
 endef
@@ -172,7 +172,9 @@ packages-build: ##@1 packages build all packages
 
 package-build-%: ##@1 packages build a package
 	@echo "${YELLOW}Building package ${WHITE}@nivo/${*}${RESET}"
-	@export PACKAGE=${*}; ./node_modules/.bin/rollup -c conf/rollup.config.js
+	@rm -rf ./packages/${*}/cjs
+	@rm -rf ./packages/${*}/umd
+	@export PACKAGE=$(*); ./node_modules/.bin/rollup -c conf/rollup.config.js
 
 packages-screenshots: ##@1 packages generate screenshots for packages readme (website dev server must be running)
 	@node scripts/capture.js
@@ -191,6 +193,8 @@ packages-publish-next: ##@1 packages publish all packages for @next npm tag
 
 package-watch-%: ##@1 packages build package (es flavor) on change, eg. `package-build-watch-bar`
 	@echo "${YELLOW}Running build watcher for package ${WHITE}@nivo/${*}${RESET}"
+	@rm -rf ./packages/${*}/cjs
+	@rm -rf ./packages/${*}/umd
 	@export PACKAGE=${*}; ./node_modules/.bin/rollup -c conf/rollup.config.js -w
 
 package-dev-%: ##@1 packages setup package for development, link to website, run watcher

api/package.json

@@ -49,8 +49,8 @@
     "express-winston": "^2.4.0",
     "joi": "^14.3.0",
     "lodash": "^4.17.4",
-    "react": "16.2.0",
-    "react-dom": "16.2.0",
+    "react": "16.6.3",
+    "react-dom": "16.6.3",
     "uuid": "^3.1.0",
     "winston": "^2.3.1"
   },

conf/base.yaml

@@ -1,6 +1,7 @@
 capture:
     baseUrl: http://localhost:3000
     pages:
+      # capture illustrations for readme
       - path: /bar
         selector: .chart-tabs__content
         output: ./packages/bar/doc/bar.png
@@ -65,6 +66,14 @@ capture:
         selector: .chart-tabs__content
         output: ./packages/radar/doc/radar.png
 
+      - path: /rose
+        selector: .chart-tabs__content
+        output: ./packages/rose/doc/rose.png
+
+      - path: /rose/canvas
+        selector: .chart-tabs__content
+        output: ./packages/rose/doc/rose-canvas.png
+
       - path: /sankey
         selector: .chart-tabs__content
         output: ./packages/sankey/doc/sankey.png
@@ -112,3 +121,100 @@ capture:
       - path: /waffle/canvas
         selector: .chart-tabs__content
         output: ./packages/waffle/doc/waffle-canvas.png
+
+      # capture icons for website
+      - path: /icons
+        selector: '#bar-grey'
+        output: ./website/src/assets/icons/bar-grey.png
+
+      - path: /icons
+        selector: '#bar-red'
+        output: ./website/src/assets/icons/bar-red.png
+
+      - path: /icons
+        selector: '#heatmap-grey'
+        output: ./website/src/assets/icons/heatmap-grey.png
+
+      - path: /icons
+        selector: '#heatmap-red'
+        output: ./website/src/assets/icons/heatmap-red.png
+
+      - path: /icons
+        selector: '#waffle-grey'
+        output: ./website/src/assets/icons/waffle-grey.png
+
+      - path: /icons
+        selector: '#waffle-red'
+        output: ./website/src/assets/icons/waffle-red.png
+
+      - path: /icons
+        selector: '#pie-grey'
+        output: ./website/src/assets/icons/pie-grey.png
+
+      - path: /icons
+        selector: '#pie-red'
+        output: ./website/src/assets/icons/pie-red.png
+
+      - path: /icons
+        selector: '#radar-grey'
+        output: ./website/src/assets/icons/radar-grey.png
+
+      - path: /icons
+        selector: '#radar-red'
+        output: ./website/src/assets/icons/radar-red.png
+
+      - path: /icons
+        selector: '#line-grey'
+        output: ./website/src/assets/icons/line-grey.png
+
+      - path: /icons
+        selector: '#line-red'
+        output: ./website/src/assets/icons/line-red.png
+
+      - path: /icons
+        selector: '#bullet-grey'
+        output: ./website/src/assets/icons/bullet-grey.png
+
+      - path: /icons
+        selector: '#bullet-red'
+        output: ./website/src/assets/icons/bullet-red.png
+
+      - path: /icons
+        selector: '#rose-grey'
+        output: ./website/src/assets/icons/rose-grey.png
+
+      - path: /icons
+        selector: '#rose-red'
+        output: ./website/src/assets/icons/rose-red.png
+
+      - path: /icons
+        selector: '#circle-packing-grey'
+        output: ./website/src/assets/icons/circle-packing-grey.png
+
+      - path: /icons
+        selector: '#circle-packing-red'
+        output: ./website/src/assets/icons/circle-packing-red.png 
+
+      - path: /icons
+        selector: '#stream-grey'
+        output: ./website/src/assets/icons/stream-grey.png
+
+      - path: /icons
+        selector: '#stream-red'
+        output: ./website/src/assets/icons/stream-red.png
+
+      - path: /icons
+        selector: '#scatterplot-grey'
+        output: ./website/src/assets/icons/scatterplot-grey.png
+
+      - path: /icons
+        selector: '#scatterplot-red'
+        output: ./website/src/assets/icons/scatterplot-red.png
+
+      - path: /icons
+        selector: '#parallel-coordinates-grey'
+        output: ./website/src/assets/icons/parallel-coordinates-grey.png
+
+      - path: /icons
+        selector: '#parallel-coordinates-red'
+        output: ./website/src/assets/icons/parallel-coordinates-red.png

conf/rollup.config.js

@@ -2,9 +2,20 @@ import { camelCase, upperFirst } from 'lodash'
 import babel from 'rollup-plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import stripBanner from 'rollup-plugin-strip-banner'
+import typescript from 'rollup-plugin-typescript2'
 
 const pkg = process.env.PACKAGE
 
+const tsPackages = [
+    'axes',
+    'bar',
+    'core',
+    'legends',
+    'rose',
+    'scales',
+    'scatterplot',
+]
+
 const externals = [
     'prop-types',
 ]
@@ -19,8 +30,13 @@ const mapGlobal = name => {
     return name
 }
 
+let input = `./packages/${pkg}/src/index.js`
+if (tsPackages.includes(pkg)) {
+    input = `./packages/${pkg}/src/index.ts`
+}
+
 const common = {
-    input: `./packages/${pkg}/src/index.js`,
+    input,
     external: id => externals.includes(id)
         || id.indexOf('react') === 0
         || id.indexOf('d3') === 0
@@ -31,20 +47,16 @@ const common = {
 
 const commonPlugins = [
     stripBanner({
-        include: `./packages/${pkg}/src/**/*.js`,
+        include: `./packages/${pkg}/src/**/*.{js,ts,tsx}`,
     }),
     resolve({
         module: true,
         jsnext: true,
         main: true,
         browser: true,
-        extensions: ['.js'],
+        extensions: ['.js', '.ts', '.tsx'],
         modulesOnly: true,
     }),
-    babel({
-        exclude: 'node_modules/**',
-        plugins: ['external-helpers']
-    }),
 ]
 
 export default [
@@ -55,7 +67,14 @@ export default [
             format: 'cjs',
             name: `@nivo/${pkg}`,
         },
-        plugins: commonPlugins,
+        plugins: [
+            ...commonPlugins,
+            tsPackages.includes(pkg) && typescript(),
+            babel({
+                exclude: 'node_modules/**',
+                plugins: ['external-helpers']
+            }),
+        ].filter(Boolean),
     },
     {
         ...common,
@@ -66,6 +85,19 @@ export default [
             name: 'nivo',
             globals: mapGlobal,
         },
-        plugins: commonPlugins,
+        plugins: [
+            ...commonPlugins,
+            tsPackages.includes(pkg) && typescript({
+                tsconfigOverride: {
+                    compilerOptions: {
+                        declaration: false
+                    }
+                }
+            }),
+            babel({
+                exclude: 'node_modules/**',
+                plugins: ['external-helpers']
+            }),
+        ],
     },
 ]

examples/typescript/src/components/Line.tsx → examples/old/Line.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { ResponsiveLine, LineComputedSerieData } from '@nivo/line'
-import { LegendMouseHandlerData } from '@nivo/legends'
+import { ResponsiveLine /* LineComputedSerieData */ } from '@nivo/line'
+import { LegendMouseHandlerData, Anchor, Direction } from '@nivo/legends'
 
-const colorBy = (data: LineComputedSerieData) => data.color as string
+// const colorBy = (data: LineComputedSerieData) => data.color as string
 
 export default class Line extends React.Component {
     public render() {
@@ -58,8 +58,8 @@ export default class Line extends React.Component {
                     }}
                     curve="monotoneX"
                     lineWidth={3}
-                    colors="nivo"
-                    colorBy={colorBy}
+                    // colors="nivo"
+                    // colorBy={colorBy}
                     axisTop={undefined}
                     axisLeft={{
                         tickRotation: 0,
@@ -106,10 +106,10 @@ export default class Line extends React.Component {
                     enableStackTooltip={true}
                     legends={[
                         {
-                            anchor: 'top-left',
+                            anchor: Anchor.TopLeft,
                             translateX: 20,
                             translateY: 10,
-                            direction: 'column',
+                            direction: Direction.Column,
                             itemWidth: 100,
                             itemHeight: 26,
                             itemOpacity: 0.8,

examples/retro/package.json

@@ -12,8 +12,8 @@
     "@nivo/pie": "0.49.0",
     "@nivo/stream": "0.49.0",
     "@nivo/treemap": "0.49.0",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "react-scripts": "^1.1.5"
   },
   "scripts": {

examples/retro/yarn.lock

@@ -5885,14 +5885,15 @@ react-dev-utils@^5.0.2:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dom@^16.5.0:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.0.tgz#57704e5718669374b182a17ea79a6d24922cb27d"
+react-dom@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.3.0"
+    scheduler "^0.11.2"
 
 react-error-overlay@^4.0.1:
   version "4.0.1"
@@ -5959,14 +5960,15 @@ react-scripts@^1.1.5:
   optionalDependencies:
     fsevents "^1.1.3"
 
-react@^16.5.0:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.5.0.tgz#f2c1e754bf9751a549d9c6d9aca41905beb56575"
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.3.0"
+    scheduler "^0.11.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -6366,10 +6368,12 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-schedule@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.3.0.tgz#1be2ab2fc2e768536269ce7326efb478d6c045e8"
+scheduler@^0.11.2:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
+  integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
   dependencies:
+    loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
 schema-utils@^0.3.0: