fix: Rewrite drag-n-drop functionality to track cards moved from one lane to another

With react-dnd, it was difficult to add placeholders and also find the exact position when a card
was dropped from one lane to another. Now using react-beautiful-dnd to handle all drag-n-drop
features

#44

Author: rcdexta

src/components/Lane.js

@@ -59,9 +59,10 @@ class Lane extends Component {
     })
   }
 
-  laneDidMount = node => {
+  laneDidMount = (node, dragReference) => {
     if (node) {
       node.addEventListener('scroll', this.handleScroll)
+			dragReference(node)
     }
   }
 
@@ -204,20 +205,20 @@ class Lane extends Component {
     const isDropDisabled = !droppable
     return (
       <Droppable droppableId={id} type="card" index={index} isDropDisabled={isDropDisabled}>
-        {(dropProvided, dropSnapshot) => (
-          <ScrollableLane innerRef={this.laneDidMount}>
-            <Section
-              {...otherProps}
-              key={id}
-              onClick={() => onLaneClick && onLaneClick(id)}
-              innerRef={dropProvided.innerRef}
-              {...dropProvided.draggableProps}>
-              {this.renderHeader()}
-              {this.renderDragContainer()}
-              {loading && <Loader />}
-            </Section>
-          </ScrollableLane>
-        )}
+        {(dropProvided, dropSnapshot) => {
+          const isDraggingOver = dropSnapshot.isDraggingOver
+					return <Section
+						{...otherProps}
+						key={id}
+						onClick={() => onLaneClick && onLaneClick(id)}
+						innerRef={ref => this.laneDidMount(ref, dropProvided.innerRef)}
+						isDraggingOver={isDraggingOver}
+						{...dropProvided.draggableProps}>
+						{this.renderHeader()}
+						{this.renderDragContainer()}
+						{loading && <Loader/>}
+					</Section>
+				}}
       </Droppable>
     )
   }

src/styles/Base.js

@@ -26,19 +26,17 @@ export const BoardDiv = styled.div`
   height: 100vh;
 `
 
-export const ScrollableLane = styled.div`
-	height: auto;
-  max-height: 95%;
-  overflow-y: auto;
-  min-width: 250px;
-`
-
 export const Section = styled.section`
   background-color: #e3e3e3;
   border-radius: 3px;
   margin: 5px 5px;
+  position: relative;
   padding: 10px;
-  
+  min-width: 250px;
+  height: auto;
+  padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
+  max-height: 95%;
+  overflow-y: auto;
 `
 
 export const Header = styled.header`
@@ -68,8 +66,9 @@ export const CardWrapper = styled.article`
   border-radius: 3px;
   margin: 10px 0px;
   border-bottom: 1px solid #ccc;
+  background-color: #fff;
   position: relative;
-  padding: 6px 8px;
+  padding: 10px;
   cursor: pointer;
   transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
   max-width: 250px;
@@ -131,11 +130,11 @@ export const AddCardLink = styled.a`
 	border-radius: 0 0 3px 3px;
 	color: #838c91;
 	display: block;
-	flex: 0 0 auto;
 	padding: 5px 2px;
-	position: relative;
+	position: absolute;
 	text-decoration: none;
 	cursor: pointer;
+	bottom: 3px;
 	
 	&:hover {
 	  //background-color: #cdd2d4;

stories/DragDrop.story.js

@@ -6,8 +6,8 @@ import Board from '../src'
 
 const data = require('./data.json')
 
-storiesOf('Advanced Features', module).add(
-  'Drag-n-Drop',
+storiesOf('Drag-n-Drop', module).add(
+  'Basic',
   withInfo('A demonstration of onDragStart and onDragEnd hooks')(() => {
     const handleDragStart = (cardId, laneId) => {
       console.log('drag started')

stories/RestrictedLanes.story.js

@@ -6,9 +6,9 @@ import Board from '../src'
 
 const data = require('./drag-drop.json')
 
-storiesOf('Advanced Features', module).add(
-  'Restrict Drag-n-Drop',
-  withInfo('Use droppable property to pervent some lanes from being droppable')(() => {
+storiesOf('Drag-n-Drop', module).add(
+  'Restrict lanes',
+  withInfo('Use droppable property to prevent some lanes from being droppable')(() => {
     return (
       <Board
         data={data}

stories/data.json

@@ -33,7 +33,7 @@
     },
     {
       "id": "WIP",
-      "title": "Work In Progress (Not Droppable)",
+      "title": "Work In Progress",
       "label": "10/20",
       "cards": [
         {