Fix typings for DropTarget and DragSource decorators

package.json

@@ -61,14 +61,15 @@
 		"@commitlint/cli": "^7.2.1",
 		"@commitlint/config-conventional": "^7.1.2",
 		"@types/jest": "^23.3.8",
-		"husky": "^1.1.2",
+		"husky": "^1.1.3",
 		"jest": "^23.6.0",
 		"jest-environment-jsdom": "^23.4.0",
 		"lerna": "^3.4.3",
-		"lint-staged": "^7.3.0",
+		"lint-staged": "^8.0.4",
 		"npm-run-all": "^4.1.3",
 		"prettier": "^1.14.3",
 		"ts-jest": "^23.10.4",
+		"typescript": "^3.1.6",
 		"tslint": "^5.11.0",
 		"tslint-config-prettier": "^1.15.0",
 		"tslint-react": "~3.6.0"
@@ -107,9 +108,10 @@
 	"workspaces": {
     "packages": ["packages/*"],
     "nohoist": [
+
       "**/@types/*",
       "**/hoist-non-react-statics",
-      "**/redux"
+			"**/redux"
     ]
 	}
 }

packages/dnd-core/package.json

@@ -25,6 +25,6 @@
 	"devDependencies": {
 		"npm-run-all": "^4.1.3",
 		"rimraf": "^2.6.2",
-		"typescript": "^3.1.3"
+		"typescript": "^3.1.6"
 	}
 }

packages/documentation-examples/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "react-dnd-documentation-examples",
+	"version": "5.0.0",
+	"private": true,
+	"description": "Drag and Drop for React",
+	"main": "lib/index.js",
+	"types": "lib/index.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/react-dnd/react-dnd.git"
+	},
+	"license": "BSD-3-Clause",
+	"scripts": {
+		"clean": "rimraf lib",
+		"build": "tsc",
+		"test": "run-s clean build",
+		"start": "tsc -w --preserveWatchOutput"
+	},
+	"dependencies": {
+		"@types/faker": "^4.1.4",
+		"@types/styled-components": "^4.0.3",
+		"dnd-core": "^4.0.5",
+		"faker": "^4.1.0",
+		"hoist-non-react-statics": "^2.5.0",
+		"immutability-helper": "^2.8.1",
+		"invariant": "^2.1.0",
+		"lodash": "^4.17.11",
+		"react-dnd": "^5.0.0",
+		"react-dnd-html5-backend": "^5.0.1",
+		"recompose": "^0.27.1",
+		"shallowequal": "^1.1.0",
+		"styled-components": "^4.0.3"
+	},
+	"devDependencies": {
+		"@types/react": "16.3.14",
+		"@types/react-dom": "16.0.9",
+		"npm-run-all": "^4.1.3",
+		"react": "^16.6.0",
+		"rimraf": "^2.6.2",
+		"typescript": "^3.1.6"
+	},
+	"peerDependencies": {
+		"react": ">= 16.3"
+	}
+}

packages/documentation/src/examples/00 Chessboard/BoardSquare.tsx → packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx

@@ -9,13 +9,14 @@ import {
 import Square from './Square'
 import { canMoveKnight, moveKnight } from './Game'
 import ItemTypes from './ItemTypes'
+import Overlay from './Overlay'
 
-export interface CollectedProps {
-	isOver?: boolean
-	canDrop?: boolean
-	connectDropTarget?: ConnectDropTarget
+interface CollectedProps {
+	isOver: boolean
+	canDrop: boolean
+	connectDropTarget: ConnectDropTarget
 }
-export interface BoardSquareProps extends CollectedProps {
+export interface BoardSquareProps {
 	x: number
 	y: number
 	children: any
@@ -42,44 +43,24 @@ const collect: DropTargetCollector<CollectedProps> = (
 	}
 }
 
-class BoardSquare extends React.Component<BoardSquareProps> {
+class BoardSquare extends React.Component<BoardSquareProps & CollectedProps> {
 	public render() {
 		const { x, y, connectDropTarget, isOver, canDrop, children } = this.props
 		const black = (x + y) % 2 === 1
 
-		return (
-			connectDropTarget &&
-			connectDropTarget(
-				<div
-					style={{
-						position: 'relative',
-						width: '100%',
-						height: '100%',
-					}}
-				>
-					<Square black={black}>{children}</Square>
-					{isOver && !canDrop && this.renderOverlay('red')}
-					{!isOver && canDrop && this.renderOverlay('yellow')}
-					{isOver && canDrop && this.renderOverlay('green')}
-				</div>,
-			)
-		)
-	}
-
-	private renderOverlay(color: string) {
-		return (
+		return connectDropTarget(
 			<div
 				style={{
-					position: 'absolute',
-					top: 0,
-					left: 0,
-					height: '100%',
+					position: 'relative',
 					width: '100%',
-					zIndex: 1,
-					opacity: 0.5,
-					backgroundColor: color,
+					height: '100%',
 				}}
-			/>
+			>
+				<Square black={black}>{children}</Square>
+				{isOver && !canDrop && <Overlay color="red" />}
+				{!isOver && canDrop && <Overlay color="yellow" />}
+				{isOver && canDrop && <Overlay color="green" />}
+			</div>,
 		)
 	}
 }

packages/documentation/src/examples/00 Chessboard/Knight.tsx → packages/documentation-examples/src/00 Chessboard/Knight.tsx

@@ -32,8 +32,8 @@ const collect: DragSourceCollector<KnightProps> = (
 })
 
 export interface KnightProps {
-	connectDragSource?: ConnectDragSource
-	connectDragPreview?: ConnectDragPreview
+	connectDragSource: ConnectDragSource
+	connectDragPreview: ConnectDragPreview
 	isDragging?: boolean
 }
 
@@ -47,18 +47,15 @@ class Knight extends React.Component<KnightProps> {
 
 	public render() {
 		const { connectDragSource, isDragging } = this.props
-		return (
-			connectDragSource &&
-			connectDragSource(
-				<div
-					style={{
-						...knightStyle,
-						opacity: isDragging ? 0.5 : 1,
-					}}
-				>
-					♘
-				</div>,
-			)
+		return connectDragSource(
+			<div
+				style={{
+					...knightStyle,
+					opacity: isDragging ? 0.5 : 1,
+				}}
+			>
+				♘
+			</div>,
 		)
 	}
 }

packages/documentation-examples/src/00 Chessboard/Overlay.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export interface OverlayProps {
+	color: string
+}
+
+const Overlay: React.SFC<OverlayProps> = ({ color }) => {
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				height: '100%',
+				width: '100%',
+				zIndex: 1,
+				opacity: 0.5,
+				backgroundColor: color,
+			}}
+		/>
+	)
+}
+
+export default Overlay

packages/documentation/src/examples/00 Chessboard/index.tsx → packages/documentation-examples/src/00 Chessboard/index.tsx

@@ -1,6 +1,5 @@
 // tslint:disable member-ordering
 import * as React from 'react'
-import { Link } from 'gatsby'
 import Board from './Board'
 import { observe } from './Game'
 
@@ -40,7 +39,7 @@ export default class ChessboardTutorialApp extends React.Component<
 				</p>
 				<p>
 					This is a sample app you&apos;ll build as you work through the{' '}
-					<Link to="/docs/tutorial">tutorial</Link>.
+					<a href="/docs/tutorial">tutorial</a>.
 				</p>
 				<p>
 					It illustrates creating the drag sources and the drop targets, using
@@ -57,8 +56,8 @@ export default class ChessboardTutorialApp extends React.Component<
 					<Board knightPosition={knightPosition} />
 				</div>
 				<p>
-					Make sure to check out the <Link to="docs/tutorial">tutorial</Link>{' '}
-					for step-by-step instructions on building it!
+					Make sure to check out the <a href="/docs/tutorial">tutorial</a> for
+					step-by-step instructions on building it!
 				</p>
 			</div>
 		)

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

@@ -49,20 +49,20 @@ const boxSource = {
 
 export interface BoxProps {
 	name: string
-	isDragging?: boolean
-	connectDragSource?: ConnectDragSource
 }
 
-class Box extends React.Component<BoxProps> {
+interface BoxCollectedProps {
+	isDragging: boolean
+	connectDragSource: ConnectDragSource
+}
+
+class Box extends React.Component<BoxProps & BoxCollectedProps> {
 	public render() {
 		const { isDragging, connectDragSource } = this.props
 		const { name } = this.props
 		const opacity = isDragging ? 0.4 : 1
 
-		return (
-			connectDragSource &&
-			connectDragSource(<div style={{ ...style, opacity }}>{name}</div>)
-		)
+		return connectDragSource(<div style={{ ...style, opacity }}>{name}</div>)
 	}
 }
 

packages/documentation/src/examples/01 Dustbin/Copy or Move/Dustbin.tsx → packages/documentation-examples/src/01 Dustbin/Copy or Move/Dustbin.tsx

@@ -25,13 +25,16 @@ const boxTarget = {
 }
 
 export interface DustbinProps {
-	connectDropTarget?: ConnectDropTarget
-	canDrop?: boolean
-	isOver?: boolean
 	allowedDropEffect: string
 }
 
-class Dustbin extends React.Component<DustbinProps> {
+interface DustbinCollectedProps {
+	connectDropTarget: ConnectDropTarget
+	canDrop: boolean
+	isOver: boolean
+}
+
+class Dustbin extends React.Component<DustbinProps & DustbinCollectedProps> {
 	public render() {
 		const { canDrop, isOver, allowedDropEffect, connectDropTarget } = this.props
 		const isActive = canDrop && isOver
@@ -43,16 +46,13 @@ class Dustbin extends React.Component<DustbinProps> {
 			backgroundColor = 'darkkhaki'
 		}
 
-		return (
-			connectDropTarget &&
-			connectDropTarget(
-				<div style={{ ...style, backgroundColor }}>
-					{`Works with ${allowedDropEffect} drop effect`}
-					<br />
-					<br />
-					{isActive ? 'Release to drop' : 'Drag a box here'}
-				</div>,
-			)
+		return connectDropTarget(
+			<div style={{ ...style, backgroundColor }}>
+				{`Works with ${allowedDropEffect} drop effect`}
+				<br />
+				<br />
+				{isActive ? 'Release to drop' : 'Drag a box here'}
+			</div>,
 		)
 	}
 }

packages/documentation/src/examples/01 Dustbin/Multiple Targets/Box.tsx → packages/documentation-examples/src/01 Dustbin/Multiple Targets/Box.tsx

@@ -27,28 +27,28 @@ const boxSource = {
 export interface BoxProps {
 	name: string
 	type: string
-	connectDragSource?: ConnectDragSource
-	isDragging?: boolean
-	isDropped?: boolean
+	isDropped: boolean
 }
 
-class Box extends React.Component<BoxProps> {
+interface BoxCollectedProps {
+	connectDragSource: ConnectDragSource
+	isDragging: boolean
+}
+
+class Box extends React.Component<BoxProps & BoxCollectedProps> {
 	public render() {
 		const { name, isDropped, isDragging, connectDragSource } = this.props
 		const opacity = isDragging ? 0.4 : 1
 
-		return (
-			connectDragSource &&
-			connectDragSource(
-				<div style={{ ...style, opacity }}>
-					{isDropped ? <s>{name}</s> : name}
-				</div>,
-			)
+		return connectDragSource(
+			<div style={{ ...style, opacity }}>
+				{isDropped ? <s>{name}</s> : name}
+			</div>,
 		)
 	}
 }
 
-export default DragSource(
+export default DragSource<BoxProps, BoxCollectedProps>(
 	(props: BoxProps) => props.type,
 	boxSource,
 	(connect: DragSourceConnector, monitor: DragSourceMonitor) => ({