Task/remove proptypes (#1077)

* Remove proptypes dependency

* Use a git hash for now for react-frame-component until they release 4.0.1 or greater that includes the SSR fix

packages/dnd-core/src/HandlerRegistryImpl.ts

@@ -1,6 +1,5 @@
 import { Store } from 'redux'
 import invariant from 'invariant'
-import isArray from 'lodash/isArray'
 import {
 	addSource,
 	addTarget,

packages/documentation/examples/00 Chessboard/Tutorial App/Board.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { DragDropContext } from 'react-dnd'
 import HTML5Backend, { HTML5BackendContext } from 'react-dnd-html5-backend'
 import BoardSquare from './BoardSquare'
@@ -12,10 +11,6 @@ export interface BoardProps {
 
 @DragDropContext<BoardProps, {}, Board>(HTML5Backend)
 export default class Board extends React.Component<BoardProps> {
-	public static propTypes = {
-		knightPosition: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
-	}
-
 	public render() {
 		const squares = []
 		for (let i = 0; i < 64; i += 1) {

packages/documentation/examples/00 Chessboard/Tutorial App/BoardSquare.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DropTarget,
 	DropTargetMonitor,
@@ -45,15 +44,6 @@ const collect: DropTargetCollector<CollectedProps> = (
 
 @DropTarget(ItemTypes.KNIGHT, squareTarget, collect)
 export default class BoardSquare extends React.Component<BoardSquareProps> {
-	public static propTypes = {
-		x: PropTypes.number.isRequired,
-		y: PropTypes.number.isRequired,
-		isOver: PropTypes.bool.isRequired,
-		canDrop: PropTypes.bool.isRequired,
-		connectDropTarget: PropTypes.func.isRequired,
-		children: PropTypes.node,
-	}
-
 	public render() {
 		const { x, y, connectDropTarget, isOver, canDrop, children } = this.props
 		const black = (x + y) % 2 === 1

packages/documentation/examples/00 Chessboard/Tutorial App/Knight.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DragSource,
 	ConnectDragSource,
@@ -33,12 +32,6 @@ export interface KnightProps {
 
 @DragSource(ItemTypes.KNIGHT, knightSource, collect)
 export default class Knight extends React.Component<KnightProps> {
-	public static propTypes = {
-		connectDragSource: PropTypes.func.isRequired,
-		connectDragPreview: PropTypes.func.isRequired,
-		isDragging: PropTypes.bool.isRequired,
-	}
-
 	public componentDidMount() {
 		const img = new Image()
 		img.src =

packages/documentation/examples/00 Chessboard/Tutorial App/Square.tsx

@@ -1,17 +1,11 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 export interface SquareProps {
 	black: boolean
 	children: JSX.Element
 }
 
 export default class Square extends React.Component<SquareProps> {
-	public static propTypes = {
-		black: PropTypes.bool,
-		children: PropTypes.node,
-	}
-
 	public render() {
 		const { black } = this.props
 		const backgroundColor = black ? 'black' : 'white'

packages/documentation/examples/01 Dustbin/Copy or Move/Box.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DragSource,
 	ConnectDragSource,
 	DragSourceConnector,
 	DragSourceMonitor,
 } from 'react-dnd'
 import ItemTypes from '../Single Target/ItemTypes'
-import { DragDropManager } from 'dnd-core'
 
 const style: React.CSSProperties = {
 	border: '1px dashed gray',
@@ -64,12 +62,6 @@ export interface BoxProps {
 	}),
 )
 export default class Box extends React.Component<BoxProps> {
-	public static propTypes = {
-		connectDragSource: PropTypes.func.isRequired,
-		isDragging: PropTypes.bool.isRequired,
-		name: PropTypes.string.isRequired,
-	}
-
 	public render() {
 		const { isDragging, connectDragSource } = this.props
 		const { name } = this.props

packages/documentation/examples/01 Dustbin/Copy or Move/Dustbin.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { DropTarget, ConnectDropTarget } from 'react-dnd'
 import ItemTypes from '../Single Target/ItemTypes'
 
@@ -38,13 +37,6 @@ export interface DustbinProps {
 	canDrop: monitor.canDrop(),
 }))
 export default class Dustbin extends React.Component<DustbinProps> {
-	public static propTypes = {
-		connectDropTarget: PropTypes.func.isRequired,
-		isOver: PropTypes.bool.isRequired,
-		canDrop: PropTypes.bool.isRequired,
-		allowedDropEffect: PropTypes.string.isRequired,
-	}
-
 	public render() {
 		const { canDrop, isOver, allowedDropEffect, connectDropTarget } = this.props
 		const isActive = canDrop && isOver

packages/documentation/examples/01 Dustbin/Multiple Targets/Box.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DragSource,
 	ConnectDragSource,
@@ -41,14 +40,6 @@ export interface BoxProps {
 	}),
 )
 export default class Box extends React.Component<BoxProps> {
-	public static propTypes = {
-		connectDragSource: PropTypes.func.isRequired,
-		isDragging: PropTypes.bool.isRequired,
-		name: PropTypes.string.isRequired,
-		type: PropTypes.string.isRequired,
-		isDropped: PropTypes.bool.isRequired,
-	}
-
 	public render() {
 		const { name, isDropped, isDragging, connectDragSource } = this.props
 		const opacity = isDragging ? 0.4 : 1

packages/documentation/examples/01 Dustbin/Multiple Targets/Dustbin.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { DropTarget, ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 
 const style: React.CSSProperties = {
@@ -40,15 +39,6 @@ export interface DustbinProps {
 	}),
 )
 export default class Dustbin extends React.Component<DustbinProps> {
-	public static propTypes = {
-		connectDropTarget: PropTypes.func.isRequired,
-		isOver: PropTypes.bool.isRequired,
-		canDrop: PropTypes.bool.isRequired,
-		accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
-		lastDroppedItem: PropTypes.object,
-		onDrop: PropTypes.func.isRequired,
-	}
-
 	public render() {
 		const {
 			accepts,

packages/documentation/examples/01 Dustbin/Single Target in iframe/Container.tsx

@@ -1,35 +1,23 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from '../Single Target/Dustbin'
 import Box from '../Single Target/Box'
-
-// TODO: Update this example when react-frame-component uses the official context API
-const Frame = require('react-frame-component').default
+const {
+	default: Frame,
+	FrameContextConsumer,
+} = require('react-frame-component')
 
 class FrameBindingContext extends React.Component {
-	public static contextTypes = {
-		window: PropTypes.object,
-	}
-	public static propTypes = {
-		children: PropTypes.node,
-	}
-
-	get dragDropContext() {
-		return {
-			window: this.context.window,
-		}
-	}
-
 	public render() {
 		return (
-			<DragDropContextProvider
-				backend={HTML5Backend}
-				context={this.dragDropContext}
-			>
-				{this.props.children}
-			</DragDropContextProvider>
+			<FrameContextConsumer>
+				{({ window }: any) => (
+					<DragDropContextProvider backend={HTML5Backend} context={window}>
+						{this.props.children}
+					</DragDropContextProvider>
+				)}
+			</FrameContextConsumer>
 		)
 	}
 }

packages/documentation/examples/01 Dustbin/Single Target/Box.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	ConnectDragSource,
 	DragSource,
@@ -50,12 +49,6 @@ const boxSource = {
 	}),
 )
 export default class Box extends React.Component<BoxProps> {
-	public static propTypes = {
-		connectDragSource: PropTypes.func.isRequired,
-		isDragging: PropTypes.bool.isRequired,
-		name: PropTypes.string.isRequired,
-	}
-
 	public render() {
 		const { isDragging, connectDragSource } = this.props
 		const { name } = this.props

packages/documentation/examples/01 Dustbin/Single Target/Dustbin.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DropTarget,
 	DropTargetConnector,
@@ -43,12 +42,6 @@ export interface DustbinProps {
 	}),
 )
 export default class Dustbin extends React.Component<DustbinProps> {
-	public static propTypes = {
-		connectDropTarget: PropTypes.func.isRequired,
-		isOver: PropTypes.bool.isRequired,
-		canDrop: PropTypes.bool.isRequired,
-	}
-
 	public render() {
 		const { canDrop, isOver, connectDropTarget } = this.props
 		const isActive = canDrop && isOver

packages/documentation/examples/01 Dustbin/Stress Test/Box.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DragSource,
 	DragSourceConnector,
@@ -47,13 +46,6 @@ export interface BoxProps {
 	}),
 )
 export default class Box extends React.Component<BoxProps> {
-	public static propTypes = {
-		connectDragSource: PropTypes.func.isRequired,
-		isDragging: PropTypes.bool.isRequired,
-		name: PropTypes.string.isRequired,
-		type: PropTypes.string.isRequired,
-		isDropped: PropTypes.bool.isRequired,
-	}
 	public render() {
 		const { name, isDropped, isDragging, connectDragSource } = this.props
 		const opacity = isDragging ? 0.4 : 1

packages/documentation/examples/01 Dustbin/Stress Test/Dustbin.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	ConnectDropTarget,
 	DropTarget,
@@ -45,15 +44,6 @@ export interface DustbinProps {
 	}),
 )
 export default class Dustbin extends React.Component<DustbinProps> {
-	public static propTypes = {
-		connectDropTarget: PropTypes.func.isRequired,
-		isOver: PropTypes.bool.isRequired,
-		canDrop: PropTypes.bool.isRequired,
-		accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
-		lastDroppedItem: PropTypes.object,
-		onDrop: PropTypes.func.isRequired,
-	}
-
 	public render() {
 		const {
 			accepts,

packages/documentation/examples/02 Drag Around/Custom Drag Layer/Box.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 const styles: React.CSSProperties = {
 	border: '1px dashed gray',
@@ -13,11 +12,6 @@ export interface BoxProps {
 }
 
 export default class Box extends React.PureComponent<BoxProps> {
-	public static propTypes = {
-		title: PropTypes.string.isRequired,
-		yellow: PropTypes.bool,
-	}
-
 	public render() {
 		const { title, yellow } = this.props
 		const backgroundColor = yellow ? 'yellow' : 'white'

packages/documentation/examples/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Box from './Box'
 
 const styles = {
@@ -20,10 +19,6 @@ export default class BoxDragPreview extends React.PureComponent<
 	BoxDragPreviewProps,
 	BoxDragPreviewState
 > {
-	public static propTypes = {
-		title: PropTypes.string.isRequired,
-	}
-
 	private interval: any
 
 	constructor(props: BoxDragPreviewProps) {

packages/documentation/examples/02 Drag Around/Custom Drag Layer/Container.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {
 	DropTarget,
 	ConnectDropTarget,
@@ -56,11 +55,6 @@ export default class Container extends React.PureComponent<
 	ContainerProps,
 	ContainerState
 > {
-	public static propTypes = {
-		connectDropTarget: PropTypes.func.isRequired,
-		snapToGrid: PropTypes.bool.isRequired,
-	}
-
 	constructor(props: ContainerProps) {
 		super(props)
 		this.state = {

packages/documentation/examples/02 Drag Around/Custom Drag Layer/CustomDragLayer.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { DragLayer, XYCoord } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 import BoxDragPreview from './BoxDragPreview'
@@ -59,21 +58,6 @@ export interface CustomDragLayerProps {
 export default class CustomDragLayer extends React.Component<
 	CustomDragLayerProps
 > {
-	public static propTypes = {
-		item: PropTypes.object,
-		itemType: PropTypes.string,
-		initialOffset: PropTypes.shape({
-			x: PropTypes.number.isRequired,
-			y: PropTypes.number.isRequired,
-		}),
-		currentOffset: PropTypes.shape({
-			x: PropTypes.number.isRequired,
-			y: PropTypes.number.isRequired,
-		}),
-		isDragging: PropTypes.bool.isRequired,
-		snapToGrid: PropTypes.bool.isRequired,
-	}
-
 	public renderItem(type: any, item: any) {
 		switch (type) {
 			case ItemTypes.BOX: