Removed defaultProps.

package.json

@@ -61,7 +61,7 @@
     "@storybook/addon-knobs": "^3.2.0",
     "@storybook/addon-options": "^3.2.4",
     "@storybook/react": "^3.2.4",
-    "babel-cli": "^6.8.0",
+    "babel-cli": "^6.10.4",
     "babel-core": "^6.10.4",
     "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.1",
@@ -72,6 +72,7 @@
     "babel-register": "^6.5.2",
     "chai": "^3.3.0",
     "chai-spies": "^0.7.1",
+    "chalk": "^2.4.2",
     "css-loader": "^0.24.0",
     "enzyme": "2.8.2",
     "event-stream": "^3.3.1",
@@ -87,13 +88,13 @@
     "normalize.css": "^4.1.1",
     "npm": "^5.3.0",
     "object-assign": "^4.1.0",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^0.14.0 || ^15.0.0",
+    "react": "^15.5.4",
+    "react-addons-test-utils": "15.6.2",
     "react-context": "0.0.3",
-    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-dom": "^15.5.4",
     "react-hot-loader": "^1.2.8",
     "react-mark": "0.0.4",
-    "react-test-renderer": "^15.3.2",
+    "react-test-renderer": "^15.5.4",
     "remarkable": "^1.6.0",
     "require-dir": "^0.3.0",
     "rimraf": "^2.5.0",
@@ -102,6 +103,9 @@
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   },
+  "overrides": {
+    "chalk": "^2.4.2"
+  },
   "files": [
     "lib",
     "es"

src/components/alpha/Alpha.js

@@ -4,8 +4,18 @@ import reactCSS from 'reactcss'
 import { ColorWrap, Alpha } from '../common'
 import AlphaPointer from './AlphaPointer'
 
-export const AlphaPicker = ({ rgb, hsl, width, height, onChange, direction, style,
-  renderers, pointer, className = '' }) => {
+export const AlphaPicker = ({ 
+  rgb, 
+  hsl, 
+  width = '316px', 
+  height = '16px', 
+  onChange, 
+  direction = 'horizontal', 
+  style,
+  renderers, 
+  pointer = AlphaPointer, 
+  className = '' 
+}) => {
   const styles = reactCSS({
     'default': {
       picker: {
@@ -35,11 +45,4 @@ export const AlphaPicker = ({ rgb, hsl, width, height, onChange, direction, styl
   )
 }
 
-AlphaPicker.defaultProps = {
-  width: '316px',
-  height: '16px',
-  direction: 'horizontal',
-  pointer: AlphaPointer,
-}
-
 export default ColorWrap(AlphaPicker)

src/components/block/Block.js

@@ -7,8 +7,17 @@ import * as color from '../../helpers/color'
 import { ColorWrap, EditableInput, Checkboard } from '../common'
 import BlockSwatches from './BlockSwatches'
 
-export const Block = ({ onChange, onSwatchHover, hex, colors, width, triangle,
-  styles: passedStyles = {}, className = '' }) => {
+export const Block = ({
+  onChange,
+  onSwatchHover,
+  hex,
+  colors = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555',
+  '#dce775', '#ff8a65', '#ba68c8'],
+  width = 170,
+  triangle = 'top',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const transparent = hex === 'transparent'
   const handleChange = (hexCode, e) => {
     color.isValidHex(hexCode) && onChange({
@@ -106,12 +115,4 @@ Block.propTypes = {
   styles: PropTypes.object,
 }
 
-Block.defaultProps = {
-  width: 170,
-  colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555',
-    '#dce775', '#ff8a65', '#ba68c8'],
-  triangle: 'top',
-  styles: {},
-}
-
 export default ColorWrap(Block)

src/components/chrome/Chrome.js

@@ -8,8 +8,19 @@ import ChromeFields from './ChromeFields'
 import ChromePointer from './ChromePointer'
 import ChromePointerCircle from './ChromePointerCircle'
 
-export const Chrome = ({ width, onChange, disableAlpha, rgb, hsl, hsv, hex, renderers,
-  styles: passedStyles = {}, className = '', defaultView }) => {
+export const Chrome = ({
+  width = 225,
+  onChange,
+  disableAlpha = false,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  renderers,
+  styles: passedStyles = {},
+  className = '',
+  defaultView
+}) => {
   const styles = reactCSS(merge({
     'default': {
       picker: {
@@ -155,10 +166,4 @@ Chrome.propTypes = {
   ]),
 }
 
-Chrome.defaultProps = {
-  width: 225,
-  disableAlpha: false,
-  styles: {},
-}
-
 export default ColorWrap(Chrome)

src/components/circle/Circle.js

@@ -8,8 +8,23 @@ import * as material from 'material-colors'
 import { ColorWrap } from '../common'
 import CircleSwatch from './CircleSwatch'
 
-export const Circle = ({ width, onChange, onSwatchHover, colors, hex, circleSize,
-  styles: passedStyles = {}, circleSpacing, className = '' }) => {
+export const Circle = ({
+  width = 252,
+  onChange,
+  onSwatchHover,
+  colors = [
+    material.red['500'], material.pink['500'], material.purple['500'],
+    material.deepPurple['500'], material.indigo['500'], material.blue['500'],
+    material.lightBlue['500'], material.cyan['500'], material.teal['500'],
+    material.green['500'], material.lightGreen['500'], material.lime['500'],
+    material.yellow['500'], material.amber['500'], material.orange['500'],
+    material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
+  hex,
+  circleSize = 28,
+  styles: passedStyles = {},
+  circleSpacing = 14,
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -48,17 +63,4 @@ Circle.propTypes = {
   styles: PropTypes.object,
 }
 
-Circle.defaultProps = {
-  width: 252,
-  circleSize: 28,
-  circleSpacing: 14,
-  colors: [material.red['500'], material.pink['500'], material.purple['500'],
-    material.deepPurple['500'], material.indigo['500'], material.blue['500'],
-    material.lightBlue['500'], material.cyan['500'], material.teal['500'],
-    material.green['500'], material.lightGreen['500'], material.lime['500'],
-    material.yellow['500'], material.amber['500'], material.orange['500'],
-    material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
-  styles: {},
-}
-
 export default ColorWrap(Circle)

src/components/circle/CircleSwatch.js

@@ -3,8 +3,15 @@ import reactCSS, { handleHover } from 'reactcss'
 
 import { Swatch } from '../common'
 
-export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
-  circleSize, circleSpacing }) => {
+export const CircleSwatch = ({ 
+  color, 
+  onClick, 
+  onSwatchHover, 
+  hover, 
+  active,
+  circleSize = 28, 
+  circleSpacing = 14 
+}) => {
   const styles = reactCSS({
     'default': {
       swatch: {
@@ -47,9 +54,4 @@ export const CircleSwatch = ({ color, onClick, onSwatchHover, hover, active,
   )
 }
 
-CircleSwatch.defaultProps = {
-  circleSize: 28,
-  circleSpacing: 14,
-}
-
 export default handleHover(CircleSwatch)

src/components/common/Checkboard.js

@@ -2,7 +2,14 @@ import React, { isValidElement } from 'react'
 import reactCSS from 'reactcss'
 import * as checkboard from '../../helpers/checkboard'
 
-export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShadow, children }) => {
+export const Checkboard = ({
+  white = 'transparent',
+  grey = 'rgba(0,0,0,.08)',
+  size = 8, 
+  renderers = {},
+  borderRadius,
+  boxShadow,
+  children }) => {
   const styles = reactCSS({
     'default': {
       grid: {
@@ -16,11 +23,4 @@ export const Checkboard = ({ white, grey, size, renderers, borderRadius, boxShad
   return isValidElement(children)?React.cloneElement(children, { ...children.props, style: {...children.props.style,...styles.grid}}):<div style={styles.grid}/>;
 }
 
-Checkboard.defaultProps = {
-  size: 8,
-  white: 'transparent',
-  grey: 'rgba(0,0,0,.08)',
-  renderers: {},
-}
-
 export default Checkboard

src/components/common/ColorWrap.js

@@ -62,7 +62,6 @@ export const ColorWrap = (Picker) => {
   }
 
   ColorPicker.defaultProps = {
-    ...Picker.defaultProps,
     color: {
       h: 250,
       s: 0.50,

src/components/common/Raised.js

@@ -3,8 +3,13 @@ import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
 import merge from 'lodash/merge'
 
-export const Raised = ({ zDepth, radius, background, children,
-  styles: passedStyles = {} }) => {
+export const Raised = ({ 
+  zDepth = 1, 
+  radius = 2, 
+  background = '#fff', 
+  children,
+  styles: passedStyles = {} 
+}) => {
   const styles = reactCSS(merge({
     'default': {
       wrap: {
@@ -81,11 +86,4 @@ Raised.propTypes = {
   styles: PropTypes.object,
 }
 
-Raised.defaultProps = {
-  background: '#fff',
-  zDepth: 1,
-  radius: 2,
-  styles: {},
-}
-
 export default Raised

src/components/compact/Compact.js

@@ -9,8 +9,21 @@ import { ColorWrap, Raised } from '../common'
 import CompactColor from './CompactColor'
 import CompactFields from './CompactFields'
 
-export const Compact = ({ onChange, onSwatchHover, colors, hex, rgb,
-  styles: passedStyles = {}, className = '' }) => {
+export const Compact = ({
+  onChange,
+  onSwatchHover,
+  colors = ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
+    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
+    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
+    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
+    '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
+    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
+  ],
+  hex,
+  rgb,
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       Compact: {
@@ -66,15 +79,4 @@ Compact.propTypes = {
   styles: PropTypes.object,
 }
 
-Compact.defaultProps = {
-  colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
-    '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
-    '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400',
-    '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
-    '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
-    '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
-  ],
-  styles: {},
-}
-
 export default ColorWrap(Compact)

src/components/github/Github.js

@@ -7,8 +7,16 @@ import merge from 'lodash/merge'
 import { ColorWrap } from '../common'
 import GithubSwatch from './GithubSwatch'
 
-export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
-  styles: passedStyles = {}, className = '' }) => {
+export const Github = ({
+  width = 200,
+  colors = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',
+    '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
+  onChange,
+  onSwatchHover,
+  triangle = 'top-left',
+  styles: passedStyles = {},
+  className = ''
+}) => {
   const styles = reactCSS(merge({
     'default': {
       card: {
@@ -96,17 +104,17 @@ export const Github = ({ width, colors, onChange, onSwatchHover, triangle,
   const handleChange = (hex, e) => onChange({ hex, source: 'hex' }, e)
 
   return (
-    <div style={ styles.card } className={ `github-picker ${ className }` }>
-      <div style={ styles.triangleShadow } />
-      <div style={ styles.triangle } />
-      { map(colors, c => (
+    <div style={styles.card} className={`github-picker ${className}`}>
+      <div style={styles.triangleShadow} />
+      <div style={styles.triangle} />
+      {map(colors, c => (
         <GithubSwatch
-          color={ c }
-          key={ c }
-          onClick={ handleChange }
-          onSwatchHover={ onSwatchHover }
+          color={c}
+          key={c}
+          onClick={handleChange}
+          onSwatchHover={onSwatchHover}
         />
-      )) }
+      ))}
     </div>
   )
 }
@@ -118,12 +126,4 @@ Github.propTypes = {
   styles: PropTypes.object,
 }
 
-Github.defaultProps = {
-  width: 200,
-  colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',
-    '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
-  triangle: 'top-left',
-  styles: {},
-}
-
 export default ColorWrap(Github)