Merge remote-tracking branch 'origin/parcel-bundler'

.babelrc

@@ -3,18 +3,6 @@
     ["env", {
       "modules": false
     }],
-    "stage-2",
-    "react",
-  ],
-  "env": {
-    "test": {
-      "presets": [
-        "env",
-        "stage-2",
-        "react"
-      ]
-    }
-  },
-  "plugins": [
+    "react-app"
   ]
 }

.gitignore

@@ -5,3 +5,5 @@ npm-debug.log
 /.nyc_output
 /npm
 /gh-pages
+.cache
+out

.travis.yml

@@ -1,14 +1,13 @@
 language: node_js
 
 node_js:
-  - v7
+  - v8
 
 env:
   global:
   matrix:
     - TRAVIS_MATRIX=test
     - TRAVIS_MATRIX=build
-    - TRAVIS_MATRIX=build.demo
 
 script:
   - npm run $TRAVIS_MATRIX

README.md

@@ -1,36 +1,50 @@
-[![version](https://img.shields.io/npm/v/react-ripples.svg?label=version)](https://www.npmjs.org/package/react-ripples) [![Build Status](https://img.shields.io/travis/rwu823/react-ripples.svg)](https://travis-ci.org/rwu823/react-ripples) [![codecov](https://img.shields.io/codecov/c/github/rwu823/react-ripples.svg)](https://codecov.io/github/rwu823/react-ripples)
-# react-ripples
-
-## Install
+<h1 align="center">
+  react-ripples
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.org/package/react-ripples" target="_blank">
+    <img src="https://img.shields.io/npm/v/react-ripples.svg?label=version"/>
+  </a>
+  <a href="https://travis-ci.org/rwu823/react-ripples" target="_blank">
+    <img src="https://img.shields.io/travis/rwu823/react-ripples.svg?branch=master"/>
+  </a>
+  <a href="https://codecov.io/github/rwu823/react-ripples" target="_blank">
+    <img src="https://img.shields.io/codecov/c/github/rwu823/react-ripples.svg"/>
+  </a>
+  <img src="https://img.shields.io/github/license/rwu823/react-ripples.svg" />
+</p>
+
+## Installation
 
 ```sh
 $ npm install --save react-ripples
 ```
 
+or
 
+```sh
+$ yarn add react-ripples --dev
+```
 
 ## Demo
 
 [live demo](https://rwu823.github.io/react-ripples)
 
 
-
 ## Usage
 
-```javascript
+```jsx
 import Ripples from 'react-ripples'
-  
+
 render() {
-  <div>
-    <Ripples>
-      <button>Hello</button>
-    </Ripples>
-  </div>
+  <Ripples>
+    <button>Ripple Button</button>
+  </Ripples>
 }
 ```
 
 
-
 ## API
 
 ### Props

dev/index.html

@@ -98,6 +98,8 @@ <h1>React Ripples</h1>
 </div>
 <footer></footer>
 
+
+<script src="./index.js"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

dev/index.js

@@ -1,9 +1,5 @@
-import React, {} from 'react'
+import React from 'react'
 import { render } from 'react-dom'
-import App from './app'
+import App from './App'
 
 render(<App />, document.querySelector('#app'))
-
-if (module.hot) {
-  module.hot.accept()
-}

package.json

@@ -1,47 +1,52 @@
 {
   "name": "react-ripples",
   "version": "0.4.0",
-  "description": "The ripple effect everything",
+  "description": "The ripple effect. Ripples everything",
   "main": "dist/react-ripples.js",
   "scripts": {
-    "dev": "webpack-dev-server --inline --hot",
-    "build": "NODE_ENV=production node scripts/build",
-    "build.demo": "NODE_ENV=demo webpack --progress",
+    "dev": "NODE_ENV=development parcel dev/index.html --out-dir out",
+    "build": "NODE_ENV=production npm-run-all --parallel build:*",
+    "build:page": "rm -rf gh-pages && parcel build dev/index.html --no-minify --out-dir gh-pages --public-url ./",
+    "build:lib": "rm -rf out && node scripts/build",
     "test": "jest --coverage"
   },
   "keywords": [
     "react",
     "ripple",
     "ripples",
     "effect",
-    "button"
+    "button",
+    "material"
   ],
-  "author": "Rocky Wu <rocky823@gmail.com>",
+  "author": "Rocky Wu <rwu823@gmail.com>",
   "license": "MIT",
+  "jest": {
+    "setupTestFrameworkScriptFile": "./scripts/jest-setup.js",
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "./scripts/jest-setup"
+    ]
+  },
   "devDependencies": {
-    "babel-loader": "^7.0.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.4.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "enzyme": "^2.8.2",
+    "babel-preset-react-app": "^3.1.0",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
     "gulp": "^3.9.1",
     "gulp-rename": "^1.2.2",
     "gulp-size": "^2.1.0",
-    "gulp-uglify": "^2.1.2",
-    "html-webpack-plugin": "^2.28.0",
-    "jest-cli": "^19.0.2",
-    "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4",
-    "rollup": "^0.41.6",
-    "rollup-plugin-babel": "^2.7.1",
-    "shelljs": "^0.7.7",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2"
+    "gulp-uglify": "^3.0.0",
+    "jest": "^21.2.1",
+    "npm-run-all": "^4.1.2",
+    "parcel-bundler": "^1.0.3",
+    "pump": "^2.0.0",
+    "react-dom": "^16.2.0",
+    "rollup": "^0.52.1",
+    "rollup-plugin-babel": "^3.0.2",
+    "shelljs": "^0.7.8"
   },
   "dependencies": {
-    "prop-types": "^15.5.8",
-    "react": "^15.5.4"
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0"
   },
   "repository": "https://github.com/rwu823/react-ripples.git"
 }

scripts/build.js

@@ -1,46 +1,46 @@
-require('shelljs/global')
 const rollup = require('rollup')
 const babel = require('rollup-plugin-babel')
-const pkg = require('../package.json')
+
+const pump = require('pump')
 const gu = require('gulp')
 const rename = require('gulp-rename')
 const uglify = require('gulp-uglify')
 const size = require('gulp-size')
 
-rm('-rf', ['npm'])
+const pkg = require('../package.json')
 
 rollup.rollup({
-  entry: 'src/index.js',
+  input: 'src/index.js',
   external: Object.keys(pkg.dependencies),
   plugins: [
-    babel(),
+    babel()
   ],
-})
-.then((bundle) => {
-  bundle.write({
-    format: 'umd',
-    moduleName: 'ReactRipples',
-    dest: `npm/${pkg.main}`,
-    globals: {
-      'react': 'React',
-    }
-  })
-})
+}).then((bundle) => bundle.write({
+  format: 'umd',
+  name: 'ReactRipples',
+  file: `out/${pkg.main}`,
+  globals: {
+    'react': 'React',
+    'prop-types': 'PropTypes',
+  }
+}))
 .then(() => {
-  gu.src('package.json')
-    .pipe(gu.dest('npm'))
+  pump([
+    gu.src('package.json'),
+    gu.dest('out'),
 
-  gu.src('npm/dist/*.js')
-    .pipe(uglify())
-    .pipe(rename({
+    gu.src('out/dist/*.js'),
+    uglify(),
+    rename({
       suffix: '.min'
-    }))
-    .pipe(gu.dest('npm/dist'))
-    .on('finish', () => {
-      gu.src('npm/**')
-        .pipe(size({
-          showFiles: true,
-          prettySize: true,
-        }))
+    }),
+    gu.dest('out/dist')
+  ], () => pump([
+    gu.src('out/**'),
+    size({
+      showFiles: true,
+      pretty: true,
+      gzip: true,
     })
+  ]))
 })

scripts/deploy.js

@@ -26,10 +26,8 @@ if (TRAVIS_BRANCH === 'master') {
   if (TRAVIS_MATRIX === 'build') {
     // Publish to NPM
     exec(`echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > ~/.npmrc`)
-    exec(`npm publish ./npm --access=public`)
-  }
+    exec(`npm publish ./out --access=public`)
 
-  if (TRAVIS_MATRIX === 'build.demo') {
     // Publish to gh-pages
     cd('gh-pages')
     exec('git init')

scripts/jest-setup.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

src/__tests__/react-ripples.spec.js

@@ -1,7 +1,8 @@
 import React from 'react'
-import Ripples from '../'
 import { shallow, mount } from 'enzyme'
 
+import Ripples from '../'
+
 describe('<Ripple />', () => {
   it('should extend className', () => {
     const $ = shallow(<Ripples className="xyz"/>)