Fix typings for DropTarget and DragSource decorators (#1134)

* Fix typings for DropTarget decorator

The decorator function has to take a component accepting both, props and collected props - but it should return a component which only takes the own props

* Fix typings for the DragSource decorator

Same fix as for the DropTarget decorator

* fix: correct typings in PR

* fix: correct typings due to types issues in docs

* refactor: update pr with typings per @lukyth suggestions

This is a WIP - the TS decorators in examples are broken

* docs: move documentation examples into a separate package

This allows us to perform typescript validation on the examples outside of the Gatsby site, which uses babel and misses some issues.

Unit tests for the examples will eventually land here as well.

Ultimately, the text portion of these examples will go back into Gatsby as Markdown, including the functional example as a custom component.

* docs: wire up the example pages to use the examples package

* docs: upgrade typescript, correct ts issue in examples

* docs: get docsite running

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) => ({