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

@@ -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",

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'
 

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),

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,

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

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

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

@@ -1,29 +1,27 @@
-// tslint:disable member-ordering
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
 import Board from './Board'
 import { observe } from './Game'
 
 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>
 	)

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,

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'
 

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'
 

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,

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

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'

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'

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,

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,

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'
 

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,

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,

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'
 

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,

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,

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'

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',

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)
 	})

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 {

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'

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'

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'
 

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'
 

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,

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 {

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,

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>,
 		)
 	}

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'

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'
 

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'
 

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'
 

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,

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'

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,

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'
 

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,

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'

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 {

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'
 

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'
 

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'