Add drag and drop provider

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrop } from 'react-dnd';
 
+// NOTE: If we found a way to make `useDrop` conditional,
+// Or we provided a HOC of this component, we could provide
+// this UI without the DragAndDropContext dependency.
 function ViewportPane({ children, isActive, onDrop }) {
   const [{ isHovered, isHighlighted }, drop] = useDrop({
     accept: 'displayset',

platform/ui/src/components/ViewportPane/ViewportPane.mdx

@@ -5,7 +5,7 @@ route: components/viewport-pane
 ---
 
 import { Playground, Props } from 'docz';
-import { ViewportGrid, ViewportPane } from '@ohif/ui';
+import { DragAndDropContext, ViewportGrid, ViewportPane } from '@ohif/ui';
 
 # ViewportPane
 
@@ -21,10 +21,12 @@ import { ViewportPane } from '@ohif/ui';
 
 <Playground>
   <div className="p-4 h-56">
-    <ViewportGrid>
-      <ViewportPane><h3>Hello</h3></ViewportPane>
-      <ViewportPane><h3>World</h3></ViewportPane>
-    </ViewportGrid>
+    <DragAndDropContext>
+      <ViewportGrid numRows={1} numCols={2}>
+        <ViewportPane onDrop={() => {}} isActive={true}><h3>Hello</h3></ViewportPane>
+        <ViewportPane onDrop={() => {}} isActive={false}><h3>World</h3></ViewportPane>
+      </ViewportGrid>
+    </DragAndDropContext>
   </div>
 </Playground>
 

platform/ui/src/components/ViewportPane/index.js

@@ -1,2 +1,2 @@
-import ViewportPane from './ViewportPane.jsx';
+import ViewportPane from './ViewportPane';
 export default ViewportPane;