docs: remove example cross-referencing

Author: darthtrevino

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