docs: remove example cross-referencing

package.json

@@ -105,6 +105,10 @@
 		"testMatch": [
 			"<rootDir>/packages/**/__tests__/**/?(*.)(spec|test).(t|j)s(x|)"
 		],
+		"testPathIgnorePatterns": [
+			"/packages/documentation/static/",
+			"/packages/documentation/public/"
+		],
 		"transform": {
 			"^.+\\.(ts|tsx)$": "ts-jest"
 		},

packages/examples-hooks/src/01-dustbin/copy-or-move/Box.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ItemTypes from '../single-target/ItemTypes'
+import ItemTypes from './ItemTypes'
 
 import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
 const {

packages/examples-hooks/src/01-dustbin/copy-or-move/Dustbin.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
-import ItemTypes from '../single-target/ItemTypes'
+import ItemTypes from './ItemTypes'
 const {
 	useDrop,
 } = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__

packages/examples-hooks/src/01-dustbin/copy-or-move/ItemTypes.ts

@@ -0,0 +1,3 @@
+export default {
+	BOX: 'box',
+}

packages/examples-hooks/src/01-dustbin/single-target-in-iframe/Box.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
+import ItemTypes from './ItemTypes'
+const {
+	useDrag,
+} = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__
+
+const style: React.CSSProperties = {
+	border: '1px dashed gray',
+	backgroundColor: 'white',
+	padding: '0.5rem 1rem',
+	marginRight: '1.5rem',
+	marginBottom: '1.5rem',
+	cursor: 'move',
+	float: 'left',
+}
+
+interface BoxProps {
+	name: string
+}
+
+const Box: React.FC<BoxProps> = ({ name }) => {
+	const [{ isDragging }, drag] = useDrag({
+		item: { name, type: ItemTypes.BOX },
+		end: (dropResult?: { name: string }) => {
+			if (dropResult) {
+				alert(`You dropped ${name} into ${dropResult.name}!`)
+			}
+		},
+		collect: monitor => ({
+			isDragging: monitor.isDragging(),
+		}),
+	})
+	const opacity = isDragging ? 0.4 : 1
+
+	return (
+		<div ref={drag} style={{ ...style, opacity }}>
+			{name}
+		</div>
+	)
+}
+
+export default Box

packages/examples-hooks/src/01-dustbin/single-target-in-iframe/Dustbin.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
+import ItemTypes from './ItemTypes'
+
+const {
+	useDrop,
+} = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__
+
+const style: React.CSSProperties = {
+	height: '12rem',
+	width: '12rem',
+	marginRight: '1.5rem',
+	marginBottom: '1.5rem',
+	color: 'white',
+	padding: '1rem',
+	textAlign: 'center',
+	fontSize: '1rem',
+	lineHeight: 'normal',
+	float: 'left',
+}
+
+const Dustbin: React.FC = () => {
+	const [{ canDrop, isOver }, drop] = useDrop({
+		accept: ItemTypes.BOX,
+		drop: () => ({ name: 'Dustbin' }),
+		collect: monitor => ({
+			isOver: monitor.isOver(),
+			canDrop: monitor.canDrop(),
+		}),
+	})
+
+	const isActive = canDrop && isOver
+	let backgroundColor = '#222'
+	if (isActive) {
+		backgroundColor = 'darkgreen'
+	} else if (canDrop) {
+		backgroundColor = 'darkkhaki'
+	}
+
+	return (
+		<div ref={drop} style={{ ...style, backgroundColor }}>
+			{isActive ? 'Release to drop' : 'Drag a box here'}
+		</div>
+	)
+}
+
+export default Dustbin

packages/examples-hooks/src/01-dustbin/single-target-in-iframe/ItemTypes.ts

@@ -0,0 +1,3 @@
+export default {
+	BOX: 'box',
+}

packages/examples-hooks/src/01-dustbin/single-target-in-iframe/index.tsx

@@ -6,9 +6,8 @@ import {
 	DragDropContextProvider,
 } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
-import Dustbin from '../single-target/Dustbin'
-import Box from '../single-target/Box'
-import { isDebugMode } from '../../isDebugMode'
+import Dustbin from './Dustbin'
+import Box from './Box'
 
 const {
 	default: Frame,
@@ -18,11 +17,7 @@ const {
 const FrameBindingContext: React.FC = ({ children }) => (
 	<FrameContextConsumer>
 		{({ window }: any) => (
-			<DragDropContextProvider
-				backend={HTML5Backend}
-				context={window}
-				debugMode={isDebugMode()}
-			>
+			<DragDropContextProvider backend={HTML5Backend} context={window}>
 				{children}
 			</DragDropContextProvider>
 		)}

packages/examples/src/01-dustbin/copy-or-move/Box.tsx

@@ -5,7 +5,7 @@ import {
 	DragSourceConnector,
 	DragSourceMonitor,
 } from 'react-dnd'
-import ItemTypes from '../single-target/ItemTypes'
+import ItemTypes from './ItemTypes'
 
 const style: React.CSSProperties = {
 	border: '1px dashed gray',

packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { DropTarget, ConnectDropTarget } from 'react-dnd'
-import ItemTypes from '../single-target/ItemTypes'
+import ItemTypes from './ItemTypes'
 
 const style: React.CSSProperties = {
 	height: '12rem',

packages/examples/src/01-dustbin/copy-or-move/ItemTypes.ts

@@ -0,0 +1,3 @@
+export default {
+	BOX: 'box',
+}

packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+	DragSource,
+	DragSourceMonitor,
+	ConnectDragSource,
+	DragSourceConnector,
+} from 'react-dnd'
+import ItemTypes from './ItemTypes'
+
+const style: React.CSSProperties = {
+	border: '1px dashed gray',
+	backgroundColor: 'white',
+	padding: '0.5rem 1rem',
+	marginRight: '1.5rem',
+	marginBottom: '1.5rem',
+	cursor: 'move',
+	float: 'left',
+}
+
+export interface BoxProps {
+	name: string
+
+	// Collected Props
+	isDragging: boolean
+	connectDragSource: ConnectDragSource
+}
+const Box: React.FC<BoxProps> = ({ name, isDragging, connectDragSource }) => {
+	const opacity = isDragging ? 0.4 : 1
+	return (
+		<div ref={connectDragSource} style={{ ...style, opacity }}>
+			{name}
+		</div>
+	)
+}
+
+export default DragSource(
+	ItemTypes.BOX,
+	{
+		beginDrag: (props: BoxProps) => ({ name: props.name }),
+		endDrag(props: BoxProps, monitor: DragSourceMonitor) {
+			const item = monitor.getItem()
+			const dropResult = monitor.getDropResult()
+
+			if (dropResult) {
+				alert(`You dropped ${item.name} into ${dropResult.name}!`)
+			}
+		},
+	},
+	(connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
+		connectDragSource: connect.dragSource(),
+		isDragging: monitor.isDragging(),
+	}),
+)(Box)

packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+	DropTarget,
+	ConnectDropTarget,
+	DropTargetMonitor,
+	DropTargetConnector,
+} from 'react-dnd'
+import ItemTypes from './ItemTypes'
+
+const style: React.CSSProperties = {
+	height: '12rem',
+	width: '12rem',
+	marginRight: '1.5rem',
+	marginBottom: '1.5rem',
+	color: 'white',
+	padding: '1rem',
+	textAlign: 'center',
+	fontSize: '1rem',
+	lineHeight: 'normal',
+	float: 'left',
+}
+
+export interface DustbinProps {
+	canDrop: boolean
+	isOver: boolean
+	connectDropTarget: ConnectDropTarget
+}
+
+const Dustbin: React.FC<DustbinProps> = ({
+	canDrop,
+	isOver,
+	connectDropTarget,
+}) => {
+	const isActive = canDrop && isOver
+	let backgroundColor = '#222'
+	if (isActive) {
+		backgroundColor = 'darkgreen'
+	} else if (canDrop) {
+		backgroundColor = 'darkkhaki'
+	}
+
+	return (
+		<div ref={connectDropTarget} style={{ ...style, backgroundColor }}>
+			{isActive ? 'Release to drop' : 'Drag a box here'}
+		</div>
+	)
+}
+
+export default DropTarget(
+	ItemTypes.BOX,
+	{
+		drop: () => ({ name: 'Dustbin' }),
+	},
+	(connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
+		connectDropTarget: connect.dropTarget(),
+		isOver: monitor.isOver(),
+		canDrop: monitor.canDrop(),
+	}),
+)(Dustbin)

packages/examples/src/01-dustbin/single-target-in-iframe/ItemTypes.ts

@@ -0,0 +1,3 @@
+export default {
+	BOX: 'box',
+}

packages/examples/src/01-dustbin/single-target-in-iframe/index.tsx

@@ -3,9 +3,8 @@ declare var require: any
 import React from 'react'
 import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
-import Dustbin from '../single-target/Dustbin'
-import Box from '../single-target/Box'
-import { isDebugMode } from '../../isDebugMode'
+import Dustbin from './Dustbin'
+import Box from './Box'
 
 const {
 	default: Frame,
@@ -15,11 +14,7 @@ const {
 const FrameBindingContext: React.FC = ({ children }) => (
 	<FrameContextConsumer>
 		{({ window }: any) => (
-			<DragDropContextProvider
-				backend={HTML5Backend}
-				context={window}
-				debugMode={isDebugMode()}
-			>
+			<DragDropContextProvider backend={HTML5Backend} context={window}>
 				{children}
 			</DragDropContextProvider>
 		)}