(chore) Use standalone proptypes (#5988)

* upgrade deps

* run codemod

* update storybook

package.json

@@ -44,6 +44,7 @@
     "node-libs-browser": "0.5.3",
     "platformicons": "0.1.1",
     "po-catalog-loader": "^1.2.0",
+    "prop-types": "^15.5.10",
     "query-string": "2.4.2",
     "raven-js": "3.16.1",
     "react": "15.3.2",
@@ -84,7 +85,9 @@
     "snapshot": "build-storybook && PERCY_TOKEN=$STORYBOOK_PERCY_TOKEN PERCY_PROJECT=$STORYBOOK_PERCY_PROJECT percy-storybook --widths=375,1280"
   },
   "jest": {
-    "snapshotSerializers": ["enzyme-to-json/serializer"],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/tests/js/helpers/importStyleMock.js",
       "integration-docs-platforms": "<rootDir>/tests/fixtures/_platforms.json"
@@ -102,9 +105,9 @@
   },
   "devDependencies": {
     "@percy-io/react-percy-storybook": "^1.0.2",
-    "@storybook/addon-actions": "3.2.0",
-    "@storybook/addon-info": "3.2.0",
-    "@storybook/react": "3.2.0",
+    "@storybook/addon-actions": "^3.2.0",
+    "@storybook/addon-info": "^3.2.0",
+    "@storybook/react": "^3.2.0",
     "babel-eslint": "7.1.1",
     "babel-jest": "^19.0.0",
     "chai": "3.4.1",

src/sentry/static/sentry/app/components/actionOverlay.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import OrganizationState from '../mixins/organizationState';
 import {t} from '../locale';
@@ -6,12 +7,12 @@ import LoadingIndicator from '../components/loadingIndicator';
 
 const ActionOverlay = React.createClass({
   propTypes: {
-    actionId: React.PropTypes.string.isRequired,
-    isLoading: React.PropTypes.bool
+    actionId: PropTypes.string.isRequired,
+    isLoading: PropTypes.bool
   },
 
   contextTypes: {
-    router: React.PropTypes.object.isRequired
+    router: PropTypes.object.isRequired
   },
 
   mixins: [OrganizationState],

src/sentry/static/sentry/app/components/activity/feed.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import ApiMixin from '../../mixins/apiMixin';
@@ -10,10 +11,10 @@ import {logException} from '../../utils/logging';
 
 const ActivityFeed = React.createClass({
   propTypes: {
-    endpoint: React.PropTypes.string,
-    query: React.PropTypes.object,
-    renderEmpty: React.PropTypes.func,
-    pagination: React.PropTypes.bool
+    endpoint: PropTypes.string,
+    query: PropTypes.object,
+    renderEmpty: PropTypes.func,
+    pagination: PropTypes.bool
   },
 
   mixins: [ApiMixin],

src/sentry/static/sentry/app/components/activity/item.jsx

@@ -1,4 +1,5 @@
 import marked from 'marked';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import {CommitLink} from '../../views/releases/releaseCommits';
@@ -14,10 +15,10 @@ import {t, tn, tct} from '../../locale';
 
 const ActivityItem = React.createClass({
   propTypes: {
-    clipHeight: React.PropTypes.number,
-    defaultClipped: React.PropTypes.bool,
-    item: React.PropTypes.object.isRequired,
-    orgId: React.PropTypes.string.isRequired
+    clipHeight: PropTypes.number,
+    defaultClipped: PropTypes.bool,
+    item: PropTypes.object.isRequired,
+    orgId: PropTypes.string.isRequired
   },
 
   getDefaultProps() {
@@ -55,9 +56,9 @@ const ActivityItem = React.createClass({
     let issue = item.issue;
 
     let issueLink = issue
-      ? (<IssueLink orgId={orgId} projectId={project.slug} issue={issue}>
+      ? <IssueLink orgId={orgId} projectId={project.slug} issue={issue}>
           {issue.shortId}
-        </IssueLink>)
+        </IssueLink>
       : null;
 
     switch (item.type) {

src/sentry/static/sentry/app/components/activity/note.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import TimeSince from '../../components/timeSince';
@@ -8,10 +9,10 @@ import marked from '../../utils/marked';
 
 const Note = React.createClass({
   propTypes: {
-    author: React.PropTypes.object.isRequired,
-    item: React.PropTypes.object.isRequired,
-    onEdit: React.PropTypes.func.isRequired,
-    onDelete: React.PropTypes.func.isRequired
+    author: PropTypes.object.isRequired,
+    item: PropTypes.object.isRequired,
+    onEdit: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired
   },
 
   canEdit() {

src/sentry/static/sentry/app/components/activity/noteContainer.jsx

@@ -1,16 +1,17 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Note from './note';
 import NoteInput from './noteInput';
 
 const NoteContainer = React.createClass({
   propTypes: {
-    group: React.PropTypes.object.isRequired,
-    item: React.PropTypes.object.isRequired,
-    author: React.PropTypes.object.isRequired,
-    onDelete: React.PropTypes.func.isRequired,
-    sessionUser: React.PropTypes.object.isRequired,
-    memberList: React.PropTypes.array.isRequired
+    group: PropTypes.object.isRequired,
+    item: PropTypes.object.isRequired,
+    author: PropTypes.object.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    sessionUser: PropTypes.object.isRequired,
+    memberList: PropTypes.array.isRequired
   },
 
   getInitialState() {

src/sentry/static/sentry/app/components/activity/noteInput.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import marked from 'marked';
 
@@ -20,11 +21,11 @@ function makeDefaultErrorJson() {
 
 const NoteInput = React.createClass({
   propTypes: {
-    item: React.PropTypes.object,
-    group: React.PropTypes.object.isRequired,
-    onFinish: React.PropTypes.func,
-    memberList: React.PropTypes.array.isRequired,
-    sessionUser: React.PropTypes.object.isRequired
+    item: PropTypes.object,
+    group: PropTypes.object.isRequired,
+    onFinish: PropTypes.func,
+    memberList: PropTypes.array.isRequired,
+    sessionUser: PropTypes.object.isRequired
   },
 
   mixins: [PureRenderMixin, ApiMixin],

src/sentry/static/sentry/app/components/alertMessage.jsx

@@ -1,15 +1,16 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import AlertActions from '../actions/alertActions';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import {t} from '../locale';
 
 const AlertMessage = React.createClass({
   propTypes: {
-    alert: React.PropTypes.shape({
-      id: React.PropTypes.string,
-      message: React.PropTypes.string.isRequired,
-      type: React.PropTypes.oneOf(['success', 'error', 'warning']),
-      url: React.PropTypes.string
+    alert: PropTypes.shape({
+      id: PropTypes.string,
+      message: PropTypes.string.isRequired,
+      type: PropTypes.oneOf(['success', 'error', 'warning']),
+      url: PropTypes.string
     })
   },
 

src/sentry/static/sentry/app/components/alerts/toastIndicator.jsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 function ToastIndicator({type, children}) {
@@ -11,7 +12,7 @@ function ToastIndicator({type, children}) {
 }
 
 ToastIndicator.propTypes = {
-  type: React.PropTypes.string.isRequired
+  type: PropTypes.string.isRequired
 };
 
 export default ToastIndicator;

src/sentry/static/sentry/app/components/assigneeSelector.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Reflux from 'reflux';
@@ -17,7 +18,7 @@ import {t} from '../locale';
 
 const AssigneeSelector = React.createClass({
   propTypes: {
-    id: React.PropTypes.string.isRequired
+    id: PropTypes.string.isRequired
   },
 
   mixins: [

src/sentry/static/sentry/app/components/avatar.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import $ from 'jquery';
 import MD5 from 'crypto-js/md5';
@@ -6,11 +7,11 @@ import UserLetterAvatar from '../components/userLetterAvatar';
 
 const Avatar = React.createClass({
   propTypes: {
-    user: React.PropTypes.object,
-    size: React.PropTypes.number,
-    default: React.PropTypes.string,
-    title: React.PropTypes.string,
-    gravatar: React.PropTypes.bool
+    user: PropTypes.object,
+    size: PropTypes.number,
+    default: PropTypes.string,
+    title: PropTypes.string,
+    gravatar: PropTypes.bool
   },
 
   getDefaultProps() {

src/sentry/static/sentry/app/components/avatarCropper.jsx

@@ -1,13 +1,14 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import AlertActions from '../actions/alertActions';
 import {t} from '../locale';
 
 const AvatarCropper = React.createClass({
   propTypes: {
-    user: React.PropTypes.object.isRequired,
-    updateDataUrlState: React.PropTypes.func.isRequired,
-    savedDataUrl: React.PropTypes.string
+    user: PropTypes.object.isRequired,
+    updateDataUrlState: PropTypes.func.isRequired,
+    savedDataUrl: PropTypes.string
   },
 
   getInitialState() {

src/sentry/static/sentry/app/components/avatarRadio.jsx

@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import {t} from '../locale';
 
 const AvatarRadio = React.createClass({
   propTypes: {
-    user: React.PropTypes.object.isRequired,
-    updateUser: React.PropTypes.func.isRequired
+    user: PropTypes.object.isRequired,
+    updateUser: PropTypes.func.isRequired
   },
 
   OPTIONS: {

src/sentry/static/sentry/app/components/avatarSettings.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import AlertActions from '../actions/alertActions';
@@ -10,7 +11,7 @@ import {t} from '../locale';
 
 const AvatarSettings = React.createClass({
   propTypes: {
-    userId: React.PropTypes.number
+    userId: PropTypes.number
   },
 
   mixins: [ApiMixin],

src/sentry/static/sentry/app/components/badge.jsx

@@ -1,9 +1,10 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 const Badge = React.createClass({
   propTypes: {
-    text: React.PropTypes.string,
-    isNew: React.PropTypes.bool
+    text: PropTypes.string,
+    isNew: PropTypes.bool
   },
 
   render() {

src/sentry/static/sentry/app/components/barChart.jsx

@@ -1,24 +1,25 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import StackedBarChart from '../components/stackedBarChart';
 
 const BarChart = React.createClass({
   propTypes: {
-    points: React.PropTypes.arrayOf(
-      React.PropTypes.shape({
-        x: React.PropTypes.number.isRequired,
-        y: React.PropTypes.number.isRequired,
-        label: React.PropTypes.string
+    points: PropTypes.arrayOf(
+      PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        label: PropTypes.string
       })
     ),
-    interval: React.PropTypes.string,
-    height: React.PropTypes.number,
-    width: React.PropTypes.number,
-    placement: React.PropTypes.string,
-    label: React.PropTypes.string,
-    markers: React.PropTypes.arrayOf(
-      React.PropTypes.shape({
-        x: React.PropTypes.number.isRequired,
-        label: React.PropTypes.string
+    interval: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    placement: PropTypes.string,
+    label: PropTypes.string,
+    markers: PropTypes.arrayOf(
+      PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        label: PropTypes.string
       })
     )
   },

src/sentry/static/sentry/app/components/broadcastModal.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import IconCloseLg from '../icons/icon-close-lg';
 import ConfigStore from '../stores/configStore';
@@ -49,12 +50,12 @@ const ReleaseAnnouncement = ({close}) => {
 };
 
 ReleaseAnnouncement.propTypes = {
-  close: React.PropTypes.func.isRequired
+  close: PropTypes.func.isRequired
 };
 
 const BroadcastModal = React.createClass({
   propTypes: {
-    closeBroadcast: React.PropTypes.func.isRequired
+    closeBroadcast: PropTypes.func.isRequired
   },
   mixins: [ApiMixin],
 

src/sentry/static/sentry/app/components/buttons/button.jsx

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import {Link} from 'react-router';
 import classNames from 'classnames';
 

src/sentry/static/sentry/app/components/clippedBox.jsx

@@ -1,14 +1,15 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {t} from '../locale';
 
 const ClippedBox = React.createClass({
   propTypes: {
-    title: React.PropTypes.string,
-    defaultClipped: React.PropTypes.bool,
-    clipHeight: React.PropTypes.number,
-    btnClassName: React.PropTypes.string,
-    btnText: React.PropTypes.string
+    title: PropTypes.string,
+    defaultClipped: PropTypes.bool,
+    clipHeight: PropTypes.number,
+    btnClassName: PropTypes.string,
+    btnText: PropTypes.string
   },
 
   getDefaultProps() {