From c8ad24bbea9bca8bc86b34bd1e4994ba80db5939 Mon Sep 17 00:00:00 2001
From: Chris Trevino <darthtrevino@users.noreply.github.com>
Date: Thu, 7 Mar 2019 14:45:25 -0800
Subject: [PATCH] Enable syntheticDefaultImports in TypeScript examples (#1254)

* docs: enable syntheticDefaultImports for more idiomatic js examples

* fix: add 'esmoduleInterop: true' to get jest tests running
---
 package.json                                  |  5 ++++
 .../src/00 Chessboard/Board.tsx               |  2 +-
 .../src/00 Chessboard/BoardSquare.tsx         |  4 +--
 .../src/00 Chessboard/Knight.tsx              |  6 ++---
 .../src/00 Chessboard/Overlay.tsx             |  2 +-
 .../src/00 Chessboard/Square.tsx              |  2 +-
 .../src/00 Chessboard/index.tsx               | 26 +++++++++----------
 .../src/01 Dustbin/Copy or Move/Box.tsx       |  2 +-
 .../src/01 Dustbin/Copy or Move/Dustbin.tsx   |  2 +-
 .../src/01 Dustbin/Copy or Move/index.tsx     |  2 +-
 .../src/01 Dustbin/Multiple Targets/Box.tsx   |  2 +-
 .../01 Dustbin/Multiple Targets/Dustbin.tsx   |  2 +-
 .../src/01 Dustbin/Multiple Targets/index.tsx |  2 +-
 .../Single Target in iframe/index.tsx         |  2 +-
 .../01 Dustbin/Single Target with FCs/Box.tsx |  2 +-
 .../Single Target with FCs/Dustbin.tsx        |  2 +-
 .../Single Target with FCs/index.tsx          |  2 +-
 .../src/01 Dustbin/Single Target/Box.tsx      |  2 +-
 .../src/01 Dustbin/Single Target/Dustbin.tsx  |  2 +-
 .../src/01 Dustbin/Single Target/index.tsx    |  2 +-
 .../src/01 Dustbin/Stress Test/Box.tsx        |  2 +-
 .../src/01 Dustbin/Stress Test/Dustbin.tsx    |  2 +-
 .../src/01 Dustbin/Stress Test/index.tsx      |  2 +-
 .../02 Drag Around/Custom Drag Layer/Box.tsx  |  2 +-
 .../Custom Drag Layer/BoxDragPreview.tsx      |  6 ++---
 .../Custom Drag Layer/Container.tsx           |  6 ++---
 .../Custom Drag Layer/CustomDragLayer.tsx     |  2 +-
 .../Custom Drag Layer/DraggableBox.tsx        |  2 +-
 .../Custom Drag Layer/index.tsx               |  2 +-
 .../src/02 Drag Around/Naive/Box.tsx          |  2 +-
 .../src/02 Drag Around/Naive/Container.tsx    |  2 +-
 .../src/02 Drag Around/Naive/index.tsx        |  2 +-
 .../src/03 Nesting/Drag Sources/SourceBox.tsx |  2 +-
 .../src/03 Nesting/Drag Sources/TargetBox.tsx |  7 ++---
 .../src/03 Nesting/Drag Sources/index.tsx     |  2 +-
 .../src/03 Nesting/Drop Targets/Box.tsx       |  2 +-
 .../src/03 Nesting/Drop Targets/Dustbin.tsx   |  2 +-
 .../src/03 Nesting/Drop Targets/index.tsx     |  2 +-
 .../Cancel on Drop Outside/Card.tsx           |  2 +-
 .../Cancel on Drop Outside/index.tsx          |  2 +-
 .../src/04 Sortable/Simple/Card.tsx           |  2 +-
 .../src/04 Sortable/Simple/index.tsx          |  2 +-
 .../src/04 Sortable/Stress Test/Card.tsx      |  2 +-
 .../src/04 Sortable/Stress Test/Container.tsx |  2 +-
 .../src/04 Sortable/Stress Test/index.tsx     |  2 +-
 .../05 Customize/Drop Effects/SourceBox.tsx   |  2 +-
 .../05 Customize/Drop Effects/TargetBox.tsx   |  2 +-
 .../src/05 Customize/Drop Effects/index.tsx   |  2 +-
 .../Handles and Previews/BoxWithHandle.tsx    |  2 +-
 .../Handles and Previews/BoxWithImage.tsx     |  2 +-
 .../Handles and Previews/index.tsx            |  2 +-
 .../src/06 Other/Native Files/FileList.tsx    |  2 +-
 .../src/06 Other/Native Files/TargetBox.tsx   |  2 +-
 .../src/06 Other/Native Files/index.tsx       |  2 +-
 packages/documentation-examples/src/index.ts  |  2 +-
 .../src/shared/wrapInTestContext.tsx          |  2 +-
 .../documentation-examples/tsconfig.cjs.json  |  2 ++
 .../documentation-examples/tsconfig.docs.json |  1 +
 .../documentation-examples/tsconfig.esm.json  |  1 +
 .../documentation/src/components/layout.tsx   |  2 +-
 .../documentation/src/util/renderHtmlAst.ts   |  2 +-
 packages/documentation/tsconfig.json          |  2 ++
 tsconfig.jest.json                            |  8 ++++++
 63 files changed, 97 insertions(+), 79 deletions(-)
 create mode 100644 tsconfig.jest.json

diff --git a/package.json b/package.json
index 9fd71e700e..ee1c1779ba 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,11 @@
 		"transform": {
 			"^.+\\.(ts|tsx)$": "ts-jest"
 		},
+		"globals": {
+			"ts-jest": {
+				"tsConfig": "tsconfig.jest.json"
+			}
+		},
 		"moduleNameMapper": {
 			"^react-dnd$": "<rootDir>/packages/react-dnd/src",
 			"react-dnd-html5-backend": "<rootDir>//packages/react-dnd-html5-backend/src",
diff --git a/packages/documentation-examples/src/00 Chessboard/Board.tsx b/packages/documentation-examples/src/00 Chessboard/Board.tsx
index 747133d9ec..80daa95212 100644
--- a/packages/documentation-examples/src/00 Chessboard/Board.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/Board.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { BoardSquare } from './BoardSquare'
 import { Knight } from './Knight'
 
diff --git a/packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx b/packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx
index a3c0333187..9606119a65 100644
--- a/packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useRef } from 'react'
 import { useDropTarget } from 'react-dnd'
 import { Square } from './Square'
 import { canMoveKnight, moveKnight } from './Game'
@@ -14,7 +14,7 @@ export interface BoardSquareProps {
 export const BoardSquare: React.FC<BoardSquareProps> = (
 	props: BoardSquareProps,
 ) => {
-	const ref = React.useRef(null)
+	const ref = useRef(null)
 	const { isOver, canDrop } = useDropTarget(ref, ItemTypes.KNIGHT, {
 		canDrop: () => canMoveKnight(props.x, props.y),
 		drop: () => moveKnight(props.x, props.y),
diff --git a/packages/documentation-examples/src/00 Chessboard/Knight.tsx b/packages/documentation-examples/src/00 Chessboard/Knight.tsx
index 2435c6d539..076b8f283c 100644
--- a/packages/documentation-examples/src/00 Chessboard/Knight.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/Knight.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useRef, useMemo } from 'react'
 import { useDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 import knightImage from './knightImage'
@@ -19,8 +19,8 @@ function createKnightImage() {
 }
 
 export const Knight: React.FC = () => {
-	const ref = React.useRef(null)
-	const dragPreview = React.useMemo(createKnightImage, [])
+	const ref = useRef(null)
+	const dragPreview = useMemo(createKnightImage, [])
 	const { isDragging } = useDragSource(ref, ItemTypes.KNIGHT, {
 		beginDrag: () => ({}),
 		dragPreview,
diff --git a/packages/documentation-examples/src/00 Chessboard/Overlay.tsx b/packages/documentation-examples/src/00 Chessboard/Overlay.tsx
index 1e8a7845e1..8bc4dbe1dc 100644
--- a/packages/documentation-examples/src/00 Chessboard/Overlay.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/Overlay.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export interface OverlayProps {
 	color: string
diff --git a/packages/documentation-examples/src/00 Chessboard/Square.tsx b/packages/documentation-examples/src/00 Chessboard/Square.tsx
index b02a2538cd..0546d623a2 100644
--- a/packages/documentation-examples/src/00 Chessboard/Square.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/Square.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export interface SquareProps {
 	black: boolean
diff --git a/packages/documentation-examples/src/00 Chessboard/index.tsx b/packages/documentation-examples/src/00 Chessboard/index.tsx
index e4224b312b..f0a0cfaf17 100644
--- a/packages/documentation-examples/src/00 Chessboard/index.tsx	
+++ b/packages/documentation-examples/src/00 Chessboard/index.tsx	
@@ -1,5 +1,4 @@
-// tslint:disable member-ordering
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
 import Board from './Board'
 import { observe } from './Game'
 
@@ -7,23 +6,22 @@ export interface ChessboardTutorialAppState {
 	knightPosition: [number, number]
 }
 
+const containerStyle: React.CSSProperties = {
+	width: 500,
+	height: 500,
+	border: '1px solid gray',
+}
+
 /**
- * Unlike the tutorial, export a component so it can be used on the website.
+ * The Chessboard Tutorial Application
  */
 const ChessboardTutorialApp: React.FC = () => {
-	const [knightPos, setKnightPos] = React.useState<[number, number]>([1, 7])
+	const [knightPos, setKnightPos] = useState<[number, number]>([1, 7])
 
-	React.useEffect(() =>
-		observe((newPos: [number, number]) => setKnightPos(newPos)),
-	)
+	// the observe function will return an unsubscribe callback
+	useEffect(() => observe((newPos: [number, number]) => setKnightPos(newPos)))
 	return (
-		<div
-			style={{
-				width: 500,
-				height: 500,
-				border: '1px solid gray',
-			}}
-		>
+		<div style={containerStyle}>
 			<Board knightPosition={knightPos} />
 		</div>
 	)
diff --git a/packages/documentation-examples/src/01 Dustbin/Copy or Move/Box.tsx b/packages/documentation-examples/src/01 Dustbin/Copy or Move/Box.tsx
index f6451498a3..76834f9f76 100644
--- a/packages/documentation-examples/src/01 Dustbin/Copy or Move/Box.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Copy or Move/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	ConnectDragSource,
diff --git a/packages/documentation-examples/src/01 Dustbin/Copy or Move/Dustbin.tsx b/packages/documentation-examples/src/01 Dustbin/Copy or Move/Dustbin.tsx
index 8e1df14118..070a23d816 100644
--- a/packages/documentation-examples/src/01 Dustbin/Copy or Move/Dustbin.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Copy or Move/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget } from 'react-dnd'
 import ItemTypes from '../Single Target/ItemTypes'
 
diff --git a/packages/documentation-examples/src/01 Dustbin/Copy or Move/index.tsx b/packages/documentation-examples/src/01 Dustbin/Copy or Move/index.tsx
index c1b5a3ab1d..0474f13370 100644
--- a/packages/documentation-examples/src/01 Dustbin/Copy or Move/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Copy or Move/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Dustbin from './Dustbin'
 import Box from './Box'
 
diff --git a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Box.tsx b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Box.tsx
index 28af11f9c3..aad4834cfd 100644
--- a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Box.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	ConnectDragSource,
diff --git a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Dustbin.tsx b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Dustbin.tsx
index c55bad45cc..2d312b0801 100644
--- a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Dustbin.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 
 const style: React.CSSProperties = {
diff --git a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/index.tsx b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/index.tsx
index f5b2f4d4b9..017de28e2c 100644
--- a/packages/documentation-examples/src/01 Dustbin/Multiple Targets/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Multiple Targets/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx
index 7a4b9a129d..5b0cfce1cb 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx	
@@ -1,6 +1,6 @@
 declare var require: any
 
-import * as React from 'react'
+import React from 'react'
 import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from '../Single Target/Dustbin'
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Box.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Box.tsx
index bb211b8db1..dfef73a989 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Box.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	ConnectDragSource,
 	DragSource,
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Dustbin.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Dustbin.tsx
index 6e4eca159f..135b2bdccf 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Dustbin.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DropTarget,
 	DropTargetConnector,
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/index.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/index.tsx
index 8227692e96..687a996b66 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target with FCs/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Dustbin from './Dustbin'
 import Box from './Box'
 
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target/Box.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target/Box.tsx
index 4b8ed6e3f5..e417485555 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target/Box.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	ConnectDragSource,
 	DragSource,
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target/Dustbin.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target/Dustbin.tsx
index 325aa03d8f..5db7a07fd9 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target/Dustbin.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DropTarget,
 	DropTargetConnector,
diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target/index.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target/index.tsx
index 6d3d94a4fa..0cac2eea19 100644
--- a/packages/documentation-examples/src/01 Dustbin/Single Target/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Single Target/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Dustbin from './Dustbin'
 import Box from './Box'
 
diff --git a/packages/documentation-examples/src/01 Dustbin/Stress Test/Box.tsx b/packages/documentation-examples/src/01 Dustbin/Stress Test/Box.tsx
index 006759fc3d..b5248f8bfb 100644
--- a/packages/documentation-examples/src/01 Dustbin/Stress Test/Box.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Stress Test/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	DragSourceConnector,
diff --git a/packages/documentation-examples/src/01 Dustbin/Stress Test/Dustbin.tsx b/packages/documentation-examples/src/01 Dustbin/Stress Test/Dustbin.tsx
index cde4ab12a9..c57b393d38 100644
--- a/packages/documentation-examples/src/01 Dustbin/Stress Test/Dustbin.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Stress Test/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	ConnectDropTarget,
 	DropTarget,
diff --git a/packages/documentation-examples/src/01 Dustbin/Stress Test/index.tsx b/packages/documentation-examples/src/01 Dustbin/Stress Test/index.tsx
index 58532ee37b..d4584fec06 100644
--- a/packages/documentation-examples/src/01 Dustbin/Stress Test/index.tsx	
+++ b/packages/documentation-examples/src/01 Dustbin/Stress Test/index.tsx	
@@ -1,6 +1,6 @@
 // tslint:disable jsx-no-lambda
 declare var require: any
-import * as React from 'react'
+import React from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import Dustbin from './Dustbin'
 import Box from './Box'
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Box.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Box.tsx
index b1bab1fa2a..acd03ce617 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Box.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 const styles: React.CSSProperties = {
 	border: '1px dashed gray',
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx
index 63920520fe..22129ee920 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useState, useEffect } from 'react'
 import Box from './Box'
 
 const styles = {
@@ -16,9 +16,9 @@ export interface BoxDragPreviewState {
 }
 
 const BoxDragPreview: React.FC<BoxDragPreviewProps> = ({ title }) => {
-	const [tickTock, setTickTock] = React.useState(false)
+	const [tickTock, setTickTock] = useState(false)
 
-	React.useEffect(function subscribeToIntervalTick() {
+	useEffect(function subscribeToIntervalTick() {
 		const interval = setInterval(() => setTickTock(!tickTock), 500)
 		return () => clearInterval(interval)
 	})
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Container.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Container.tsx
index d4b42c702c..7bd9aed5c8 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Container.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/Container.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useState, useRef } from 'react'
 import { useDropTarget, DropTargetMonitor } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 import DraggableBox from './DraggableBox'
@@ -25,7 +25,7 @@ function renderBox(item: any, key: any) {
 }
 
 const Container: React.FC<ContainerProps> = props => {
-	const [boxes, setBoxes] = React.useState<BoxMap>({
+	const [boxes, setBoxes] = useState<BoxMap>({
 		a: { top: 20, left: 80, title: 'Drag me around' },
 		b: { top: 180, left: 20, title: 'Drag me too' },
 	})
@@ -40,7 +40,7 @@ const Container: React.FC<ContainerProps> = props => {
 		)
 	}
 
-	const ref = React.useRef(null)
+	const ref = useRef(null)
 	useDropTarget(ref, ItemTypes.BOX, {
 		drop(monitor: DropTargetMonitor) {
 			const delta = monitor.getDifferenceFromInitialOffset() as {
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/CustomDragLayer.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/CustomDragLayer.tsx
index 11f01570ef..b783dc5327 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/CustomDragLayer.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/CustomDragLayer.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { XYCoord, useDragLayer } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 import BoxDragPreview from './BoxDragPreview'
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/DraggableBox.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/DraggableBox.tsx
index beb7505068..fc5586acc7 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/DraggableBox.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/DraggableBox.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragSource, ConnectDragPreview } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import ItemTypes from './ItemTypes'
diff --git a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/index.tsx b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/index.tsx
index 4e22a8630e..aa4e230a30 100644
--- a/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/index.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Container from './Container'
 import CustomDragLayer from './CustomDragLayer'
 
diff --git a/packages/documentation-examples/src/02 Drag Around/Naive/Box.tsx b/packages/documentation-examples/src/02 Drag Around/Naive/Box.tsx
index 7e1204cdfe..f7b2c386b1 100644
--- a/packages/documentation-examples/src/02 Drag Around/Naive/Box.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Naive/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/02 Drag Around/Naive/Container.tsx b/packages/documentation-examples/src/02 Drag Around/Naive/Container.tsx
index d517c2bd96..af0ed7ebad 100644
--- a/packages/documentation-examples/src/02 Drag Around/Naive/Container.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Naive/Container.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DropTarget,
 	ConnectDropTarget,
diff --git a/packages/documentation-examples/src/02 Drag Around/Naive/index.tsx b/packages/documentation-examples/src/02 Drag Around/Naive/index.tsx
index a27f2818a7..aa9306a4f7 100644
--- a/packages/documentation-examples/src/02 Drag Around/Naive/index.tsx	
+++ b/packages/documentation-examples/src/02 Drag Around/Naive/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Container from './Container'
 
 export interface DragAroundNaiveState {
diff --git a/packages/documentation-examples/src/03 Nesting/Drag Sources/SourceBox.tsx b/packages/documentation-examples/src/03 Nesting/Drag Sources/SourceBox.tsx
index 02f1cbbb73..d86fb56a0a 100644
--- a/packages/documentation-examples/src/03 Nesting/Drag Sources/SourceBox.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drag Sources/SourceBox.tsx	
@@ -1,5 +1,5 @@
 // tslint:disable max-classes-per-file jsx-no-lambda
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	ConnectDragSource,
diff --git a/packages/documentation-examples/src/03 Nesting/Drag Sources/TargetBox.tsx b/packages/documentation-examples/src/03 Nesting/Drag Sources/TargetBox.tsx
index c2ad2a7965..cf9c393d97 100644
--- a/packages/documentation-examples/src/03 Nesting/Drag Sources/TargetBox.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drag Sources/TargetBox.tsx	
@@ -1,5 +1,5 @@
 // tslint:disable max-classes-per-file
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 import Colors from './Colors'
 
@@ -58,8 +58,9 @@ class TargetBoxRaw extends React.Component<
 			<div style={{ ...style, backgroundColor, opacity }}>
 				<p>Drop here.</p>
 
-				{!canDrop &&
-					lastDroppedColor && <p>Last dropped: {lastDroppedColor}</p>}
+				{!canDrop && lastDroppedColor && (
+					<p>Last dropped: {lastDroppedColor}</p>
+				)}
 			</div>,
 		)
 	}
diff --git a/packages/documentation-examples/src/03 Nesting/Drag Sources/index.tsx b/packages/documentation-examples/src/03 Nesting/Drag Sources/index.tsx
index 84bc0f3a32..a03cdbfd09 100644
--- a/packages/documentation-examples/src/03 Nesting/Drag Sources/index.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drag Sources/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import SourceBox from './SourceBox'
 import TargetBox from './TargetBox'
 import Colors from './Colors'
diff --git a/packages/documentation-examples/src/03 Nesting/Drop Targets/Box.tsx b/packages/documentation-examples/src/03 Nesting/Drop Targets/Box.tsx
index ffeafb685f..2d1da8d340 100644
--- a/packages/documentation-examples/src/03 Nesting/Drop Targets/Box.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drop Targets/Box.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/03 Nesting/Drop Targets/Dustbin.tsx b/packages/documentation-examples/src/03 Nesting/Drop Targets/Dustbin.tsx
index 15b6d22a69..cc0fdee706 100644
--- a/packages/documentation-examples/src/03 Nesting/Drop Targets/Dustbin.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drop Targets/Dustbin.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget, DropTargetMonitor } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/03 Nesting/Drop Targets/index.tsx b/packages/documentation-examples/src/03 Nesting/Drop Targets/index.tsx
index c53c2ea0f8..36d655bbe4 100644
--- a/packages/documentation-examples/src/03 Nesting/Drop Targets/index.tsx	
+++ b/packages/documentation-examples/src/03 Nesting/Drop Targets/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Dustbin from './Dustbin'
 import Box from './Box'
 
diff --git a/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx b/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx
index 7ea5e5105c..d14742a298 100644
--- a/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/Card.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	DropTarget,
diff --git a/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/index.tsx b/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/index.tsx
index e965dca9ec..4cf8cbfb90 100644
--- a/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/index.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget } from 'react-dnd'
 import Card from './Card'
 import ItemTypes from './ItemTypes'
diff --git a/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx b/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx
index fb0f7f4d2d..363edb03ea 100644
--- a/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Simple/Card.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { findDOMNode } from 'react-dom'
 import {
 	DragSource,
diff --git a/packages/documentation-examples/src/04 Sortable/Simple/index.tsx b/packages/documentation-examples/src/04 Sortable/Simple/index.tsx
index 3f7ee74856..d65755c59f 100644
--- a/packages/documentation-examples/src/04 Sortable/Simple/index.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Simple/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Card from './Card'
 import update from 'immutability-helper'
 
diff --git a/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx b/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx
index f47064ee71..9355f4e02c 100644
--- a/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Stress Test/Card.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DragSource,
 	DropTarget,
diff --git a/packages/documentation-examples/src/04 Sortable/Stress Test/Container.tsx b/packages/documentation-examples/src/04 Sortable/Stress Test/Container.tsx
index 01f54323c4..958dd0b61c 100644
--- a/packages/documentation-examples/src/04 Sortable/Stress Test/Container.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Stress Test/Container.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { name } from 'faker'
 import Card from './Card'
 import update from 'immutability-helper'
diff --git a/packages/documentation-examples/src/04 Sortable/Stress Test/index.tsx b/packages/documentation-examples/src/04 Sortable/Stress Test/index.tsx
index ab25ad5723..28bca827e8 100644
--- a/packages/documentation-examples/src/04 Sortable/Stress Test/index.tsx	
+++ b/packages/documentation-examples/src/04 Sortable/Stress Test/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Container from './Container'
 
 export interface SortableStressTestState {
diff --git a/packages/documentation-examples/src/05 Customize/Drop Effects/SourceBox.tsx b/packages/documentation-examples/src/05 Customize/Drop Effects/SourceBox.tsx
index 2bc201761e..c433bc4414 100644
--- a/packages/documentation-examples/src/05 Customize/Drop Effects/SourceBox.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Drop Effects/SourceBox.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/05 Customize/Drop Effects/TargetBox.tsx b/packages/documentation-examples/src/05 Customize/Drop Effects/TargetBox.tsx
index 7a4d405fdb..8ebd5e0f71 100644
--- a/packages/documentation-examples/src/05 Customize/Drop Effects/TargetBox.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Drop Effects/TargetBox.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTarget, ConnectDropTarget } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/05 Customize/Drop Effects/index.tsx b/packages/documentation-examples/src/05 Customize/Drop Effects/index.tsx
index eb6889d438..a96399a3c5 100644
--- a/packages/documentation-examples/src/05 Customize/Drop Effects/index.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Drop Effects/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import SourceBox from './SourceBox'
 import TargetBox from './TargetBox'
 
diff --git a/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithHandle.tsx b/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithHandle.tsx
index 6f7e9738ba..fe73ead1dc 100644
--- a/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithHandle.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithHandle.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragPreview, ConnectDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 
diff --git a/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithImage.tsx b/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithImage.tsx
index 572e3efc1a..5fb5b1680b 100644
--- a/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithImage.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Handles and Previews/BoxWithImage.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DragSource, ConnectDragPreview, ConnectDragSource } from 'react-dnd'
 import ItemTypes from './ItemTypes'
 import boxImage from './boxImage'
diff --git a/packages/documentation-examples/src/05 Customize/Handles and Previews/index.tsx b/packages/documentation-examples/src/05 Customize/Handles and Previews/index.tsx
index 1fb04255b7..7527dbde7a 100644
--- a/packages/documentation-examples/src/05 Customize/Handles and Previews/index.tsx	
+++ b/packages/documentation-examples/src/05 Customize/Handles and Previews/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import BoxWithImage from './BoxWithImage'
 import BoxWithHandle from './BoxWithHandle'
 
diff --git a/packages/documentation-examples/src/06 Other/Native Files/FileList.tsx b/packages/documentation-examples/src/06 Other/Native Files/FileList.tsx
index dc17e10a22..a30840ba81 100644
--- a/packages/documentation-examples/src/06 Other/Native Files/FileList.tsx	
+++ b/packages/documentation-examples/src/06 Other/Native Files/FileList.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 export interface FileListProps {
 	files: any[]
diff --git a/packages/documentation-examples/src/06 Other/Native Files/TargetBox.tsx b/packages/documentation-examples/src/06 Other/Native Files/TargetBox.tsx
index 6ebdc1eac2..51946cf646 100644
--- a/packages/documentation-examples/src/06 Other/Native Files/TargetBox.tsx	
+++ b/packages/documentation-examples/src/06 Other/Native Files/TargetBox.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import {
 	DropTarget,
 	DropTargetConnector,
diff --git a/packages/documentation-examples/src/06 Other/Native Files/index.tsx b/packages/documentation-examples/src/06 Other/Native Files/index.tsx
index 1f180e8fa6..71474fbdf6 100644
--- a/packages/documentation-examples/src/06 Other/Native Files/index.tsx	
+++ b/packages/documentation-examples/src/06 Other/Native Files/index.tsx	
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { DropTargetMonitor } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import TargetBox from './TargetBox'
diff --git a/packages/documentation-examples/src/index.ts b/packages/documentation-examples/src/index.ts
index b225d1e72d..88a0b6291b 100644
--- a/packages/documentation-examples/src/index.ts
+++ b/packages/documentation-examples/src/index.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import chessboard from './00 Chessboard'
 import dustbinCopyOrMove from './01 Dustbin/Copy or Move'
 import dustbinMultipleTargets from './01 Dustbin/Multiple Targets'
diff --git a/packages/documentation-examples/src/shared/wrapInTestContext.tsx b/packages/documentation-examples/src/shared/wrapInTestContext.tsx
index 943723dbfc..85da46ff01 100644
--- a/packages/documentation-examples/src/shared/wrapInTestContext.tsx
+++ b/packages/documentation-examples/src/shared/wrapInTestContext.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import TestBackend from 'react-dnd-test-backend'
 import { DragDropContext } from 'react-dnd'
 
diff --git a/packages/documentation-examples/tsconfig.cjs.json b/packages/documentation-examples/tsconfig.cjs.json
index f2f78cb656..b529304c59 100644
--- a/packages/documentation-examples/tsconfig.cjs.json
+++ b/packages/documentation-examples/tsconfig.cjs.json
@@ -1,6 +1,8 @@
 {
 	"extends": "../../tsconfig.cjs.base.json",
 	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
 		"outDir": "./lib/cjs",
 		"baseUrl": "./"
 	},
diff --git a/packages/documentation-examples/tsconfig.docs.json b/packages/documentation-examples/tsconfig.docs.json
index 1f71a5cb06..739c072bfb 100644
--- a/packages/documentation-examples/tsconfig.docs.json
+++ b/packages/documentation-examples/tsconfig.docs.json
@@ -1,6 +1,7 @@
 {
 	"extends": "./tsconfig.esm.json",
 	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
 		"jsx": "preserve",
 		"outDir": "./lib/docs",
 		"baseUrl": "./",
diff --git a/packages/documentation-examples/tsconfig.esm.json b/packages/documentation-examples/tsconfig.esm.json
index 3d77cfa240..4fb3529765 100644
--- a/packages/documentation-examples/tsconfig.esm.json
+++ b/packages/documentation-examples/tsconfig.esm.json
@@ -1,6 +1,7 @@
 {
 	"extends": "../../tsconfig.esm.base.json",
 	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
 		"outDir": "./lib/esm",
 		"baseUrl": "./"
 	},
diff --git a/packages/documentation/src/components/layout.tsx b/packages/documentation/src/components/layout.tsx
index f5753d0559..3e56fe4538 100644
--- a/packages/documentation/src/components/layout.tsx
+++ b/packages/documentation/src/components/layout.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import Helmet from 'react-helmet'
 import styled from 'styled-components'
 import HTML5Backend from 'react-dnd-html5-backend'
-import { isDebugMode } from 'react-dnd-documentation-examples'
+import { isDebugMode } from 'react-dnd-documentation-examples/lib/esm/index'
 
 import { DragDropContextProvider } from 'react-dnd'
 import PageBody from './pagebody'
diff --git a/packages/documentation/src/util/renderHtmlAst.ts b/packages/documentation/src/util/renderHtmlAst.ts
index 490a2fa556..91e235bbf2 100644
--- a/packages/documentation/src/util/renderHtmlAst.ts
+++ b/packages/documentation/src/util/renderHtmlAst.ts
@@ -1,6 +1,6 @@
 declare var require: any
 import { createElement } from 'react'
-import { componentIndex } from 'react-dnd-documentation-examples'
+import { componentIndex } from 'react-dnd-documentation-examples/lib/esm/index'
 import processImages from './processImagesInMarkdownAst'
 const log = require('debug')('site:renderHtmlAst')
 const rehypeReact = require('rehype-react')
diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json
index b9d46b9d31..dc629f8091 100644
--- a/packages/documentation/tsconfig.json
+++ b/packages/documentation/tsconfig.json
@@ -3,6 +3,8 @@
 	"compilerOptions": {
 		"outDir": "./lib",
 		"baseUrl": "./",
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true
 	},
 	"include": ["./src/index.ts"]
 }
diff --git a/tsconfig.jest.json b/tsconfig.jest.json
new file mode 100644
index 0000000000..32b95741d9
--- /dev/null
+++ b/tsconfig.jest.json
@@ -0,0 +1,8 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
+		"allowJs": true
+	}
+}