feat(composition): init more granular approach to components

lerna.json

@@ -1,6 +1,7 @@
 {
   "lerna": "2.5.1",
   "packages": [
+    "website",
     "packages/*"
   ],
   "version": "0.33.0"

package.json

@@ -31,8 +31,8 @@
     "prettier": "^1.6.1",
     "prop-types": "^15.5.10",
     "puppeteer": "^0.13.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react": "16.2.0",
+    "react-dom": "16.2.0"
   },
   "scripts": {
     "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\"",

packages/nivo-axes/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@nivo/babel-preset"]
+}

packages/nivo-axes/.eslintrc.yml

@@ -0,0 +1,18 @@
+parser: babel-eslint
+
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+    experimentalObjectRestSpread: true
+
+env:
+  browser: true
+
+globals:
+  global: true
+
+extends:
+  - eslint:recommended
+  - plugin:react/recommended

packages/nivo-axes/.npmignore

@@ -0,0 +1,20 @@
+# src (will be transpiled)
+/src
+
+# logs
+*.log*
+
+# OSX
+.DS_Store
+
+# config/build
+.babelrc
+
+# storybook
+/.storybook
+/stories
+/storybook-static
+
+# test
+/coverage
+/tests

packages/nivo-axes/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@nivo/axes",
+  "version": "0.33.0",
+  "license": "MIT",
+  "main": "./lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "dependencies": {
+    "@nivo/core": "0.33.0",
+    "d3-format": "^1.2.0",
+    "d3-scale": "^1.0.6",
+    "d3-shape": "^1.2.0",
+    "react-motion": "^0.5.2",
+    "recompose": "^0.26.0"
+  },
+  "devDependencies": {
+    "@nivo/babel-preset": "0.33.0",
+    "@nivo/generators": "0.33.0",
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.3",
+    "babel-jest": "^20.0.3",
+    "cross-env": "^5.0.5",
+    "eslint": "^4.12.1",
+    "eslint-plugin-react": "^7.5.1",
+    "jest": "^21.0.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.10",
+    "react": ">= 16.2.0 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint src stories tests",
+    "test": "jest --verbose ./tests",
+    "test:cover": "jest --verbose --coverage ./tests",
+    "build:commonjs": "rm -rf lib && cross-env NODE_ENV=commonjs babel src --out-dir lib",
+    "build:commonjs:watch": "npm run build:commonjs -- --watch",
+    "build:es": "rm -rf 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"
+  }
+}

packages/nivo-axes/src/canvas/GridCanvas.js

@@ -0,0 +1,29 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { renderGridLinesToCanvas } from './render'
+
+const GridCanvas = ({ ctx, width, height, xScale, yScale }) => {
+    renderGridLinesToCanvas(ctx, {
+        width,
+        height,
+        scale: xScale,
+        axis: 'x',
+    })
+
+    renderGridLinesToCanvas(ctx, {
+        width,
+        height,
+        scale: yScale,
+        axis: 'y',
+    })
+
+    return null
+}
+
+export default GridCanvas

packages/nivo-axes/src/canvas/XAxisCanvas.js

@@ -0,0 +1,61 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import PropTypes from 'prop-types'
+import { renderAxisToCanvas } from './render'
+
+const XAxisCanvas = ({
+    ctx,
+    width,
+    height,
+    position,
+    scale,
+    tickSize,
+    tickPadding,
+    tickRotation,
+    format,
+}) => {
+    renderAxisToCanvas(ctx, {
+        width,
+        height,
+        position,
+        scale,
+        tickSize,
+        tickPadding,
+        tickRotation,
+        format,
+    })
+
+    return null
+}
+
+XAxisCanvas.propTypes = {
+    ctx: PropTypes.object.isRequired,
+
+    // generic
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    position: PropTypes.oneOf(['top', 'bottom']).isRequired,
+    scale: PropTypes.func.isRequired,
+
+    // ticks
+    tickValues: PropTypes.array,
+    tickCount: PropTypes.number,
+    tickSize: PropTypes.number.isRequired,
+    tickPadding: PropTypes.number.isRequired,
+    tickRotation: PropTypes.number.isRequired,
+    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+}
+
+XAxisCanvas.defaultProps = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+}
+
+export default XAxisCanvas

packages/nivo-axes/src/canvas/YAxisCanvas.js

@@ -0,0 +1,61 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import PropTypes from 'prop-types'
+import { renderAxisToCanvas } from './render'
+
+const YAxisCanvas = ({
+    ctx,
+    width,
+    height,
+    position,
+    scale,
+    tickSize,
+    tickPadding,
+    tickRotation,
+    format,
+}) => {
+    renderAxisToCanvas(ctx, {
+        width,
+        height,
+        position,
+        scale,
+        tickSize,
+        tickPadding,
+        tickRotation,
+        format,
+    })
+
+    return null
+}
+
+YAxisCanvas.propTypes = {
+    ctx: PropTypes.object.isRequired,
+
+    // generic
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    position: PropTypes.oneOf(['left', 'right']).isRequired,
+    scale: PropTypes.func.isRequired,
+
+    // ticks
+    tickValues: PropTypes.array,
+    tickCount: PropTypes.number,
+    tickSize: PropTypes.number.isRequired,
+    tickPadding: PropTypes.number.isRequired,
+    tickRotation: PropTypes.number.isRequired,
+    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+}
+
+YAxisCanvas.defaultProps = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+}
+
+export default YAxisCanvas

packages/nivo-axes/src/canvas/index.js

@@ -0,0 +1,12 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+export { default as XAxisCanvas } from './XAxisCanvas'
+export { default as YAxisCanvas } from './YAxisCanvas'
+export { default as GridCanvas } from './GridCanvas'
+export * from './render'

packages/nivo-core/src/lib/canvas/axes.js → packages/nivo-axes/src/canvas/render.js

@@ -6,8 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { computeAxisTicks, computeGridLines } from '../cartesian/axes'
-import { degreesToRadians } from '../polar'
+import { computeAxisTicks, computeGridLines } from '../compute'
+
+const degreesToRadians = degrees => degrees * Math.PI / 180
 
 const horizontalPositions = ['top', 'bottom']
 const positions = ['top', 'right', 'bottom', 'left']

packages/nivo-core/src/lib/cartesian/axes.js → packages/nivo-axes/src/compute.js

@@ -6,7 +6,32 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { textPropsByEngine } from '../bridge'
+const textPropsByEngine = {
+    svg: {
+        align: {
+            left: 'start',
+            center: 'middle',
+            right: 'end',
+        },
+        baseline: {
+            top: 'before-edge',
+            center: 'central',
+            bottom: 'after-edge',
+        },
+    },
+    canvas: {
+        align: {
+            left: 'left',
+            center: 'center',
+            right: 'right',
+        },
+        baseline: {
+            top: 'top',
+            center: 'middle',
+            bottom: 'bottom',
+        },
+    },
+}
 
 const horizontalPositions = ['top', 'bottom']
 const verticalPositions = ['left', 'right']

packages/nivo-core/src/lib/cartesian/index.js → packages/nivo-axes/src/index.js

@@ -6,5 +6,5 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-export * from './axes'
-export * from './grid'
+export * from './svg'
+export * from './canvas'

packages/nivo-core/src/components/axes/Axes.js → packages/nivo-axes/src/svg/Axes.js

@@ -10,7 +10,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { isEqual } from 'lodash'
 import shouldUpdate from 'recompose/shouldUpdate'
-import { motionPropTypes } from '../../props'
 import Axis, { axisPropType } from './Axis'
 
 const horizontalPositions = ['top', 'bottom']
@@ -85,7 +84,10 @@ Axes.propTypes = {
     theme: PropTypes.object.isRequired,
 
     // motion
-    ...motionPropTypes,
+    // motion
+    animate: PropTypes.bool,
+    motionStiffness: PropTypes.number,
+    motionDamping: PropTypes.number,
 }
 
 export default shouldUpdate(

packages/nivo-core/src/components/axes/Axis.js → packages/nivo-axes/src/svg/Axis.js

@@ -14,8 +14,8 @@ import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { TransitionMotion, spring } from 'react-motion'
-import { withMotion } from '../../hocs'
-import { computeAxisTicks } from '../../lib/cartesian/axes'
+import { withMotion } from '@nivo/core'
+import { computeAxisTicks } from '../compute'
 import AxisTick from './AxisTick'
 
 const axisPositions = ['top', 'right', 'bottom', 'left']
@@ -238,6 +238,11 @@ Axis.propTypes = {
     // theming
     theme: PropTypes.object.isRequired,
 
+    // motion
+    animate: PropTypes.bool,
+    motionStiffness: PropTypes.number,
+    motionDamping: PropTypes.number,
+
     // interactivity
     onClick: PropTypes.func,
 }