New test/build system

Author: mjackson

.babelrc

@@ -1,2 +1,5 @@
-lib
+node_modules
+
+cjs
+esm
 umd

.gitignore

@@ -4,4 +4,3 @@ node_js:
 branches:
   only:
   - master
-  - /^greenkeeper-/

.travis.yml

@@ -6,17 +6,17 @@
 [npm-badge]: https://img.shields.io/npm/v/react-point.svg?style=flat-square
 [npm]: https://www.npmjs.org/package/react-point
 
-[`react-point`](https://www.npmjs.com/package/react-point) is a small, focused click/tap component for React.
+[`react-point`](https://www.npmjs.com/package/react-point) gives you fast touch events for your React applications.
 
-A `<PointTarget>` normalizes click and click-like touch events (not swipes or drags) into a "point event". This helps you avoid the 300ms delay for click events on touch interfaces like iOS.
+A `<PointTarget>` normalizes click and click-like touch events (not swipes or drags) into a "point" event. This helps you avoid the 300ms delay for click events on touch interfaces like iOS.
 
 ## Installation
 
-Using [npm](https://www.npmjs.com/):
+Using [yarn](https://yarnpkg.com/):
 
-    $ npm install --save react-point
+    $ yarn add react-point
 
-Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:
+Then, use as you would anything else:
 
 ```js
 // using ES6 modules
@@ -43,7 +43,7 @@ import React from 'react'
 import PointTarget from 'react-point'
 
 class App extends React.Component {
-  handlePoint() {
+  handlePoint = () => {
     alert('I was clicked or tapped!')
   }
 
@@ -55,14 +55,14 @@ class App extends React.Component {
 }
 ```
 
-By default, a `<PointTarget>` renders a `<button>` for accessibility. However, you can use the [`children` prop](https://facebook.github.io/react/tips/children-props-type.html) to make it render something else. For example, to render a `<div>`:
+By default, a `<PointTarget>` renders a `<button>` for accessibility. However, you can use the [`children` prop](https://facebook.github.io/react/docs/jsx-in-depth.html#children-in-jsx) to make it render something else. For example, to render a `<div>`:
 
 ```js
 import React from 'react'
 import PointTarget from 'react-point'
 
 class App extends React.Component {
-  handlePoint() {
+  handlePoint = () => {
     alert('I was clicked or tapped!')
   }
 
@@ -78,4 +78,9 @@ class App extends React.Component {
 
 *Note:* The `onClick`, `onTouchStart`, `onTouchMove`, `onTouchEnd`, and `onTouchCancel` props will be overwritten because `<PointTarget>` needs them to do its thing).
 
-That's it :) Enjoy!
+Enjoy!
+
+## About
+
+react-point is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:[email protected])!
+"hat's it :) Enjoy!

README.md

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    [ "es2015", { "loose": true } ],
+    "stage-1",
+    "react"
+  ]
+}

karma.conf.js

@@ -15,8 +15,5 @@
   "rules": {
     "array-bracket-spacing": [ 2, "always" ],
     "semi": [ 2, "never" ]
-  },
-  "globals": {
-    "__DEV__": true
   }
 }

modules/.babelrc

@@ -8,6 +8,12 @@ const touchY = (event) =>
   event.touches[0].clientY
 
 class PointTarget extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    tolerance: PropTypes.number,
+    onPoint: PropTypes.func
+  }
+
   static defaultProps = {
     tolerance: 10
   }
@@ -16,20 +22,20 @@ class PointTarget extends React.Component {
     if (!this.usingTouch && this.props.onPoint)
       this.props.onPoint()
   }
-  
+
   handleTouchStart = (event) => {
     this.usingTouch = true
-    
+
     if (this.touchStarted)
       return
-    
+
     this.touchStarted = true
-    
+
     this.touchMoved = false
     this.startX = touchX(event)
     this.startY = touchY(event)
   }
-  
+
   handleTouchMove = (event) => {
     if (!this.touchMoved) {
       const { tolerance } = this.props
@@ -38,23 +44,23 @@ class PointTarget extends React.Component {
                         Math.abs(this.startY - touchY(event)) > tolerance
     }
   }
-  
+
   handleTouchCancel = () => {
     this.touchStarted = this.touchMoved = false
     this.startX = this.startY = 0
   }
-  
+
   handleTouchEnd = () => {
     this.touchStarted = false
-    
+
     if (!this.touchMoved && this.props.onPoint)
       this.props.onPoint()
   }
-  
+
   componentWillMount() {
     this.usingTouch = false
   }
-  
+
   render() {
     const { children } = this.props
 
@@ -70,12 +76,4 @@ class PointTarget extends React.Component {
   }
 }
 
-if (__DEV__) {
-  PointTarget.propTypes = {
-    children: PropTypes.node,
-    tolerance: PropTypes.number,
-    onPoint: PropTypes.func
-  }
-}
-
 export default PointTarget

.eslintrc modules/.eslintrc

@@ -1,5 +1,8 @@
 {
+  "plugins": [
+    "jest"
+  ],
   "env": {
-    "mocha": true
+    "jest/globals": true
   }
 }

modules/PointTarget.js

@@ -18,15 +18,15 @@ describe('A <PointTarget>', () => {
   describe('with no children', () => {
     it('renders a button', () => {
       render(<PointTarget/>, node, () => {
-        expect(node.firstChild.tagName).toEqual('BUTTON')
+        expect(node.firstChild.tagName.toLowerCase()).toEqual('button')
       })
     })
   })
 
   describe('with children', () => {
     it('renders them', () => {
       render(<PointTarget><div/></PointTarget>, node, () => {
-        expect(node.firstChild.tagName).toEqual('DIV')
+        expect(node.firstChild.tagName.toLowerCase()).toEqual('div')
       })
     })
   })

modules/__tests__/.eslintrc

@@ -1,7 +1 @@
-/* eslint-env node */
-import PointTarget from './PointTarget'
-
-// TODO: Remove in next major release.
-PointTarget.PointTarget = PointTarget
-
-module.exports = PointTarget
+export default from './PointTarget'