Move SortableList into new components-faraday package

packages/components-faraday/package.json

+{
+  "name": "pubsweet-components-faraday",
+  "version": "0.0.1",
+  "main": "src",
+  "license": "MIT",
+  "dependencies": {
+    "@pubsweet/ui": "^0.1.1",
+    "moment": "^2.20.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "recompose": "^0.26.0",
+    "redux": "^3.6.0",
+    "redux-form": "^7.0.3"
+  }
+}

packages/components-faraday/src/components/SortableList/SortableList.js

+import React from 'react'
+import { compose } from 'recompose'
+import { findDOMNode } from 'react-dom'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DragSource, DropTarget, DragDropContext } from 'react-dnd'
+
+const itemSource = {
+  beginDrag(props) {
+    return { index: props.index }
+  },
+}
+
+const itemTarget = {
+  hover({ moveItem, index }, monitor, component) {
+    const dragIndex = monitor.getItem().index
+    const hoverIndex = index
+
+    // Don't replace items with themselves
+    if (dragIndex === hoverIndex) {
+      return
+    }
+
+    const hoverBoundingRect = findDOMNode(component).getBoundingClientRect() // eslint-disable-line
+    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+    const clientOffset = monitor.getClientOffset()
+    const hoverClientY = clientOffset.y - hoverBoundingRect.top
+
+    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+      return
+    }
+
+    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+      return
+    }
+    if (typeof moveItem === 'function') {
+      moveItem(dragIndex, hoverIndex)
+    }
+    monitor.getItem().index = hoverIndex
+  },
+  drop({ dropItem }) {
+    if (dropItem && typeof dropItem === 'function') dropItem()
+  },
+}
+
+const Item = ({
+  connectDragPreview,
+  connectDragSource,
+  connectDropTarget,
+  listItem,
+  dragHandle,
+  isEditing,
+  ...rest
+}) =>
+  dragHandle
+    ? connectDragPreview(
+        connectDropTarget(
+          <div style={{ flex: 1 }}>
+            {React.createElement(listItem, {
+              ...rest,
+              dragHandle: connectDragSource(
+                <div style={{ display: 'flex' }}>
+                  {React.createElement(dragHandle)}
+                </div>,
+              ),
+            })}
+          </div>,
+        ),
+      )
+    : connectDropTarget(
+        connectDragSource(
+          <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>,
+        ),
+      )
+
+const DecoratedItem = compose(
+  DropTarget('item', itemTarget, (connect, monitor) => ({
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+  })),
+  DragSource('item', itemSource, (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging(),
+  })),
+)(Item)
+
+const SortableList = ({
+  items,
+  moveItem,
+  listItem,
+  dragHandle,
+  editItem,
+  ...rest
+}) => {
+  console.log('Sortablelist', rest)
+  return (
+    <div>
+      {items.map((item, i) => (
+        <DecoratedItem
+          dragHandle={dragHandle}
+          index={i}
+          isEditing={rest.editedAuthor !== -1}
+          key={item.name || Math.random()}
+          listItem={listItem}
+          moveItem={moveItem}
+          {...item}
+          {...rest}
+        />
+      ))}
+    </div>
+  )
+}
+
+// helper function for sortable lists
+SortableList.moveItem = (items, dragIndex, hoverIndex) => {
+  if (dragIndex <= hoverIndex) {
+    return [
+      ...items.slice(0, dragIndex),
+      items[hoverIndex],
+      items[dragIndex],
+      ...items.slice(hoverIndex + 1),
+    ]
+  }
+  return [
+    ...items.slice(0, hoverIndex),
+    items[dragIndex],
+    items[hoverIndex],
+    ...items.slice(dragIndex + 1),
+  ]
+}
+
+export default DragDropContext(HTML5Backend)(SortableList)

packages/components-faraday/src/components/index.js

+export { default as SortableList } from './SortableList/SortableList'

packages/components-faraday/src/index.js

+module.exports = {
+  client: {
+    components: [() => require('./components')],
+  },
+}

packages/components-faraday/webpack.config.js

+const webpackConfig = require('xpub-styleguide/src/webpack-config')
+
+module.exports = webpackConfig(__dirname)