chore(package): use prop-types package (#1576)

* chore(package): use prop-types package

* chore(package): bump version of prop-types

* Update webpack.umd.config.js

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
 import { Link } from 'react-router-dom'
 

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -1,6 +1,7 @@
 import * as Babel from 'babel-standalone'
 import _ from 'lodash'
-import React, { Component, createElement, isValidElement, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component, createElement, isValidElement } from 'react'
 import { withRouter } from 'react-router'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'

docs/app/Components/ComponentDoc/ComponentExamples.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { Component, createElement, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component, createElement } from 'react'
 
 import { exampleContext } from 'docs/app/utils'
 import { Grid } from 'src'

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { Header, Icon, Popup, Table } from 'src'
 import { SUI } from 'src/lib'

docs/app/Components/ComponentDoc/ContributionPrompt.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { repoURL } from 'docs/app/utils'
 import { Message, Icon } from 'src'

docs/app/Components/ComponentDoc/ExampleSection.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { Grid, Header } from 'src'
 

docs/app/Components/Editor/Editor.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import AceEditor from 'react-ace'
 import ace from 'brace'
 import 'brace/ext/language_tools'

docs/app/Components/ExternalExampleLayout.js

@@ -1,5 +1,6 @@
 import _ from 'lodash/fp'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import PageNotFound from '../Views/PageNotFound'
 import { exampleContext } from 'docs/app/utils'

docs/app/Components/Layout.js

@@ -1,5 +1,6 @@
 import AnchorJS from 'anchor-js'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import Sidebar from 'docs/app/Components/Sidebar/Sidebar'
 import style from 'docs/app/Style'

docs/app/Components/Logo/Logo.js

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import { Image } from 'src'
 
 const Logo = (props) => <Image {...props} src='/logo.png' />

docs/app/Components/Root.js

@@ -1,5 +1,6 @@
 import _ from 'lodash/fp'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import ComponentDoc from '../Components/ComponentDoc/ComponentDoc'
 import { META } from 'src/lib'

docs/app/Components/Sidebar/Sidebar.js

@@ -1,5 +1,6 @@
 import _ from 'lodash/fp'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'

docs/app/Examples/collections/Form/Shorthand/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 

docs/app/Examples/collections/Menu/Variations/MenuExampleColoredInvertedMenus.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { Menu } from 'semantic-ui-react'
 
 const colors = [

docs/app/Examples/collections/Menu/Variations/MenuExampleColoredMenus.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { Menu } from 'semantic-ui-react'
 
 const colors = [

docs/app/Examples/elements/Rail/Variations/RailExampleSize.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const Wrapper = ({ children }) => (

docs/app/Examples/modules/Search/Types/SearchExampleCategoryCustom.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { Label } from 'semantic-ui-react'
 
 import SearchExampleCategory from './SearchExampleCategory'

docs/app/Examples/modules/Search/Types/SearchExampleStandardCustom.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { Label } from 'semantic-ui-react'
 
 import SearchExampleStandard from './SearchExampleStandard'

docs/app/Views/Introduction.js

@@ -1,5 +1,7 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import { Link } from 'react-router-dom'
+
 import Editor from 'docs/app/Components/Editor/Editor'
 import pkg from 'package.json'
 import {

docs/app/index.ejs

@@ -64,6 +64,7 @@
   <script src="//cdn.jsdelivr.net/faker.js/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/<%= htmlWebpackPlugin.options.versions.jsBeautify %>/beautify-html.min.js"></script>
   <!-- Use unminified React when not in production so we get errors and warnings -->
+  <script src="//unpkg.com/prop-types@<%= htmlWebpackPlugin.options.versions.propTypes %>/prop-types.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/react<%= __PROD__ ? '.min' : '' %>.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom-server.min.js"></script>

package.json

@@ -56,7 +56,8 @@
     "babel-runtime": "^6.22.0",
     "classnames": "^2.1.5",
     "debug": "^2.6.3",
-    "lodash": "^4.17.2"
+    "lodash": "^4.17.2",
+    "prop-types": "^15.5.7"
   },
   "devDependencies": {
     "@types/react": "^15.0.14",

src/addons/Confirm/Confirm.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import {
   customPropTypes,

src/addons/Portal/Portal.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import { Children, cloneElement, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import { Children, cloneElement } from 'react'
 import ReactDOM from 'react-dom'
 
 import {

src/addons/TextArea/TextArea.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import {
   customPropTypes,
   getElementType,

src/collections/Breadcrumb/Breadcrumb.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import {
   createShorthandFactory,

src/collections/Form/Form.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Form/FormField.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { createElement, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { createElement } from 'react'
 
 import {
   createHTMLLabel,

src/collections/Form/FormGroup.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Grid/Grid.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Grid/GridColumn.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Grid/GridRow.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Menu/Menu.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   AutoControlledComponent as Component,

src/collections/Menu/MenuHeader.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Menu/MenuItem.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import {
   createShorthandFactory,

src/collections/Menu/MenuMenu.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Message/Message.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import {
   createHTMLParagraph,

src/collections/Message/MessageContent.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Message/MessageHeader.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,

src/collections/Message/MessageItem.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,

src/collections/Message/MessageList.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,

src/collections/Table/Table.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Table/TableBody.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Table/TableCell.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,

src/collections/Table/TableHeader.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Table/TableHeaderCell.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   customPropTypes,

src/collections/Table/TableRow.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import {
   createShorthandFactory,