migrate from the deprecated React.propTypes to prop-types package

CHANGELOG.md

@@ -10,6 +10,8 @@ All notable changes to this project will be documented in this file. If a contri
 
 ### Changed
 
+- Migrate from the decrepated `React.PropTypes` to the `prop-types` package, thanks to [@YasserKaddour](https://github.com/YasserKaddour). (see [#668](https://github.com/styled-components/styled-components/pull/668))
+
 ## [v1.4.4] — 2017-03-01
 
 ### Changed

package.json

@@ -49,6 +49,7 @@
     "inline-style-prefixer": "^2.0.5",
     "is-function": "^1.0.1",
     "is-plain-object": "^2.0.1",
+    "prop-types": "^15.5.4",
     "supports-color": "^3.1.2"
   },
   "devDependencies": {

src/hoc/withTheme.js

@@ -2,11 +2,12 @@
 /* globals ReactClass */
 
 import React from 'react'
+import PropTypes from 'prop-types'
 import { CHANNEL } from '../models/ThemeProvider'
 
 export default (Component: ReactClass<mixed>) => class extends React.Component {
   static contextTypes = {
-    [CHANNEL]: React.PropTypes.func,
+    [CHANNEL]: PropTypes.func,
   };
 
   state: { theme?: ?Object } = {};

src/models/AbstractStyledComponent.js

@@ -1,5 +1,6 @@
 // @flow
-import { Component, PropTypes } from 'react'
+import { Component } from 'react'
+import PropTypes from 'prop-types'
 
 import { CHANNEL } from './ThemeProvider'
 

src/models/ThemeProvider.js

@@ -1,6 +1,7 @@
 // @flow
 /* globals React$Element */
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import isFunction from 'is-function'
 import isPlainObject from 'is-plain-object'
 import createBroadcast from '../utils/create-broadcast'

src/models/test/ThemeProvider.test.js

@@ -1,6 +1,7 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
+import PropTypes from 'prop-types';
 import expect from 'expect'
 import { shallow, render } from 'enzyme'
 import ThemeProvider, { CHANNEL } from '../ThemeProvider'
@@ -39,7 +40,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: React.PropTypes.object,
+      [CHANNEL]: PropTypes.object,
     }
 
     render(
@@ -66,7 +67,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: React.PropTypes.object,
+      [CHANNEL]: PropTypes.object,
     }
 
     render(
@@ -101,7 +102,7 @@ describe('ThemeProvider', () => {
       render() { return null }
     }
     Child.contextTypes = {
-      [CHANNEL]: React.PropTypes.object,
+      [CHANNEL]: PropTypes.object,
     }
 
     render(

src/test/extending.test.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react'
+import PropTypes from 'prop-types';
 import expect from 'expect'
 import { shallow } from 'enzyme'
 
@@ -106,7 +107,7 @@ describe('extending', () => {
       color: ${(props) => props.color};
     `
     Parent.propTypes = {
-      color: React.PropTypes.string
+      color: PropTypes.string
     }
 
     const Child = styled(Parent)`background-color: green;`