update Rollup config

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "ie >= 9"]
+        },
+        "modules": false
+      }
+    ],
+    "react"
+  ]
+}

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "parser": "flow",
+  "semi": false,
+  "singleQuote": true
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 TryKickoff
+Copyright (c) 2017 TryKickoff
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,62 +1,53 @@
 {
   "name": "@kickoff/react-components",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React components for easy use of the Kickoff framework",
-  "main": "dist/kickoff-react-components.js",
-  "module": "dist/kickoff-react-components.mjs",
-  "jsnext:main": "dist/kickoff-react-components.mjs",
+  "main": "dist/cjs/kickoff-react-components",
+  "module": "dist/esm/kickoff-react-components",
+  "browser": "dist/umd/kickoff-react-components",
+  "dependencies": {
+    "react": "^16.0.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.2.3",
+    "prettier": "^1.7.3",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.50.0",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-filesize": "^1.4.2",
+    "rollup-plugin-gzip": "^1.3.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "uglify-es": "^3.1.3"
+  },
   "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "lint": "standard | snazzy",
-    "lint:fix": "standard --fix",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rimraf dist && cross-env NODE_ENV=development rollup -c",
+    "build:prod": "rimraf dist && cross-env NODE_ENV=production rollup -c",
+    "watch": "rimraf dist && cross-env NODE_ENV=development rollup -c -w",
+    "lint": "prettier --write \"src/**/*.js\"",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "precommit": "lint-staged"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/TryKickoff/react-components.git"
   },
-  "keywords": [
-    "⚽",
-    "kickoff",
-    "react"
-  ],
+  "keywords": ["⚽", "kickoff", "react"],
   "author": "JP Driver",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/TryKickoff/react-components/issues"
   },
   "homepage": "https://github.com/TryKickoff/react-components#readme",
-  "files": [
-    "src",
-    "dist"
-  ],
-  "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "babel-preset-react": "^6.24.1",
-    "lint-staged": "^4.0.2",
-    "rimraf": "^2.6.1",
-    "rollup": "^0.45.2",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-uglify": "^2.0.1",
-    "rollup-watch": "^4.3.1",
-    "snazzy": "^7.0.0",
-    "standard": "^10.0.2",
-    "uglify-es": "^3.0.27"
-  },
-  "dependencies": {
-    "react": "^15.6.1"
-  },
-  "standard": {
-    "parser": "babel-eslint",
-    "ignore": [
-      "dist",
-      "node_modules"
-    ]
-  },
+  "files": ["dist"],
   "lint-staged": {
-    "*.js": "standard --fix"
+    "*.{js,css}": ["prettier --write", "git add"]
   }
 }

rollup.config.js

@@ -1,35 +1,53 @@
+import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
 import uglify from 'rollup-plugin-uglify'
 import { minify } from 'uglify-es'
+import gzip from 'rollup-plugin-gzip'
+import filesize from 'rollup-plugin-filesize'
+import pkg from './package.json'
 
-let pkg = require('./package.json')
-let external = Object.keys(pkg.dependencies)
+const NODE_ENV = process.env.NODE_ENV
+const isProductionBuild = NODE_ENV === 'production'
+const jsFile = `.${NODE_ENV}.js`
 
-export default {
-  entry: 'src/index.js',
-  plugins: [
-    babel({
-      babelrc: false,
-      exclude: 'node_modules',
-      presets: [ 'es2015-rollup', 'react' ]
-    }),
-    uglify({}, minify)
-  ],
-  external: external,
-  globals: {
-    'react': 'React'
-  },
-  targets: [
-    {
-      dest: pkg.main,
-      format: 'umd',
-      moduleName: 'KickoffReactComponents',
-      sourceMap: true
+const plugins = [
+  babel({
+    exclude: ['node_modules/**'],
+    plugins: ['external-helpers']
+  }),
+  isProductionBuild && uglify({}, minify),
+  isProductionBuild && gzip(),
+  filesize()
+]
+
+export default [
+  // browser-friendly UMD build
+  {
+    input: 'src/index.js',
+    external: Object.keys(pkg.dependencies),
+    globals: {
+      react: 'React'
     },
-    {
-      dest: pkg.module,
-      format: 'es',
-      sourceMap: true
-    }
-  ]
-}
+    name: 'KickoffReactComponents',
+    output: { file: pkg.browser + jsFile, format: 'umd' },
+    sourcemap: isProductionBuild,
+    plugins: [resolve(), commonjs(), ...plugins]
+  },
+
+  // CommonJS (for Node) and ES module (for bundlers) build.
+  // (We could have three entries in the configuration array
+  // instead of two, but it's quicker to generate multiple
+  // builds from a single configuration where possible, using
+  // the `output` option which can specify `file` and `format`)
+  {
+    input: 'src/index.js',
+    external: Object.keys(pkg.dependencies),
+    output: [
+      { file: pkg.main + jsFile, format: 'cjs' },
+      { file: pkg.module + jsFile, format: 'es' }
+    ],
+    sourcemap: isProductionBuild,
+    plugins: plugins
+  }
+]

src/Actions.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-const Actions = ({ children }) => <div className='form-actions text-centre'>
-  {children}
-</div>
+const Actions = ({ children }) => (
+  <div className="form-actions text-centre">{children}</div>
+)
 
 export default Actions

src/Checkbox.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 class Checkbox extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     this.state = {
       checked: props.checked || false
@@ -10,21 +10,29 @@ class Checkbox extends Component {
     this.onChange = this.onChange.bind(this)
   }
 
-  onChange () {
+  onChange() {
     const checked = !this.state.checked
     this.setState({ checked })
   }
 
-  render () {
+  render() {
     let className = 'control-indicator control-indicator--checkbox'
     if (this.props.tickbox) {
       className = 'control-indicator control-indicator--tickbox'
     }
-    return <label className='control control--custom' htmlFor={this.props.id}>
-      <input className='control--custom-input' type='checkbox' {...this.props} checked={this.state.checked} onChange={this.onChange} />
-      <span className={className} />
-      My checkbox Button Label Text
-    </label>
+    return (
+      <label className="control control--custom" htmlFor={this.props.id}>
+        <input
+          className="control--custom-input"
+          type="checkbox"
+          {...this.props}
+          checked={this.state.checked}
+          onChange={this.onChange}
+        />
+        <span className={className} />
+        My checkbox Button Label Text
+      </label>
+    )
   }
 }
 

src/Column.js

@@ -11,9 +11,7 @@ const Column = ({ centered, children, mid, span }) => {
   if (centered) {
     className += ' g-col--centered'
   }
-  return <div className={className}>
-    {children}
-  </div>
+  return <div className={className}>{children}</div>
 }
 
 export default Column

src/Container.js

@@ -9,9 +9,7 @@ const Container = ({ children, full, narrow, wide }) => {
   } else if (wide) {
     className += ' l.container--wide'
   }
-  return <div className={className}>
-    {children}
-  </div>
+  return <div className={className}>{children}</div>
 }
 
 export default Container

src/Control.js

@@ -11,10 +11,12 @@ const Control = ({ children, error, label, success, warning }) => {
   } else if (warning) {
     className += ' has-warning'
   }
-  return <div className={className}>
-    {label && <Label>{label}</Label>}
-    {children}
-  </div>
+  return (
+    <div className={className}>
+      {label && <Label>{label}</Label>}
+      {children}
+    </div>
+  )
 }
 
 export default Control

src/Fieldset.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-const Fieldset = ({ children }) => <fieldset className='form-fieldset'>
-  {children}
-</fieldset>
+const Fieldset = ({ children }) => (
+  <fieldset className="form-fieldset">{children}</fieldset>
+)
 
 export default Fieldset

src/Form.js

@@ -5,9 +5,7 @@ const Form = ({ children, horizontal }) => {
   if (horizontal) {
     className += ' form--horizontal'
   }
-  return <form className={className}>
-    {children}
-  </form>
+  return <form className={className}>{children}</form>
 }
 
 export default Form

src/Grid.js

@@ -12,9 +12,7 @@ const Grid = ({ children, gutter, scaled, stack }) => {
   } else if (stack) {
     className += ' g--stack'
   }
-  return <div className={className}>
-    {children}
-  </div>
+  return <div className={className}>{children}</div>
 }
 
 export default Grid

src/Input.js

@@ -1,7 +1,9 @@
 import React from 'react'
 
-const Input = (props) => <div className='form-controlGroup-inputWrapper'>
-  <input className='form-input' {...props} />
-</div>
+const Input = props => (
+  <div className="form-controlGroup-inputWrapper">
+    <input className="form-input" {...props} />
+  </div>
+)
 
 export default Input

src/Label.js

@@ -1,7 +1,5 @@
 import React from 'react'
 
-const Label = ({ children }) => <div className='form-label'>
-  {children}
-</div>
+const Label = ({ children }) => <div className="form-label">{children}</div>
 
 export default Label

src/Legend.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-const Legend = ({ children }) => <fieldset className='form-legend'>
-  {children}
-</fieldset>
+const Legend = ({ children }) => (
+  <fieldset className="form-legend">{children}</fieldset>
+)
 
 export default Legend

src/RadioButton.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react'
 
 class RadioButton extends Component {
-  render () {
-    return <label className='control control--custom'>
-      <input className='control--custom-input' type='radio' {...this.props} />
-      <span className='control-indicator control-indicator--radio' />
-      My Radio Button Label Text
-    </label>
+  render() {
+    return (
+      <label className="control control--custom">
+        <input className="control--custom-input" type="radio" {...this.props} />
+        <span className="control-indicator control-indicator--radio" />
+        My Radio Button Label Text
+      </label>
+    )
   }
 }