diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index f99341d555750e85380dbaba4019142a5b2ffdfa..3467971c1057dc949fec9d29a3c2c6211ae13a0e 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -1,14 +1,22 @@
import React, { Fragment } from 'react'
import { isNumber } from 'lodash'
import styled from 'styled-components'
-import { reduxForm } from 'redux-form'
+import { reduxForm, Field } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { H3, ValidatedField, TextField, Checkbox } from '@pubsweet/ui'
-import { compose, setDisplayName, withStateHandlers } from 'recompose'
+import {
+ compose,
+ withState,
+ withProps,
+ withHandlers,
+ setDisplayName,
+} from 'recompose'
import { Tag, Label, Row, Item, PersonInfo, IconButton } from './'
+const Empty = () => <div />
+
// #region AuthorTitle
const AuthorTitle = ({
editMode,
@@ -87,7 +95,10 @@ const AuthorEdit = ({
saveChanges={handleSubmit}
toggleEditMode={toggleEditMode}
/>
+
<Row>
+ <Field component={Empty} name="id" />
+ <Field component={Empty} name="isSubmitting" />
<Item vertical withRightMargin>
<Label required>Email</Label>
<ValidatedField
@@ -126,9 +137,13 @@ const AuthorEdit = ({
// #endregion
const EnhancedAuthorEdit = compose(
+ withProps(({ author }) => ({
+ initialValues: {
+ ...author,
+ },
+ })),
reduxForm({
form: 'author-edit',
- onSubmit: values => {},
}),
)(AuthorEdit)
@@ -145,45 +160,49 @@ const Author = ({ author, listIndex, toggleEditMode }) => (
)
const AuthorCard = ({
- author,
+ item,
editMode,
dragHandle,
- toggleEditMode,
- listIndex = null,
+ toggleEdit,
+ index = null,
+ saveNewAuthor,
+ editExistingAuthor,
+ authorEditorSubmit,
+ isOver,
+ isDragging,
}) => (
- <Root>
+ <Root isDragging={isDragging} isOver={isOver}>
{!editMode &&
(typeof dragHandle === 'function' ? dragHandle() : dragHandle)}
{editMode ? (
<EnhancedAuthorEdit
- author={author}
+ author={item}
+ editExistingAuthor={editExistingAuthor}
editMode={editMode}
- listIndex={listIndex}
- toggleEditMode={toggleEditMode}
+ listIndex={index}
+ onSubmit={authorEditorSubmit}
+ saveNewAuthor={saveNewAuthor}
+ toggleEditMode={toggleEdit(index)}
/>
) : (
<Author
- author={author}
+ author={item}
editMode={editMode}
- listIndex={listIndex}
- toggleEditMode={toggleEditMode}
+ listIndex={index}
+ toggleEditMode={toggleEdit(index)}
/>
)}
</Root>
)
export default compose(
- withStateHandlers(
- { editMode: false },
- {
- toggleEditMode: ({ editMode }, { onEdit }) => () => {
- typeof onEdit === 'function' && onEdit()
- return {
- editMode: !editMode,
- }
- },
+ withState('editMode', 'setEditMode', ({ item }) => item.id === 'newAuthor'),
+ withHandlers({
+ toggleEdit: ({ setEditMode, onEdit }) => index => () => {
+ onEdit(index)
+ setEditMode(e => !e)
},
- ),
+ }),
setDisplayName('AuthorCard'),
)(AuthorCard)
@@ -201,11 +220,13 @@ const AuthorContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
- padding: ${th('gridUnit')};
+ padding: calc(${th('gridUnit')} * 2);
`
const Root = styled.div`
align-items: center;
+ background-color: ${props =>
+ props.isOver ? th('colorFurniture') : th('colorBackgroundHue')};
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
display: flex;
diff --git a/packages/component-faraday-ui/src/AuthorCard.md b/packages/component-faraday-ui/src/AuthorCard.md
index 7b9aa3c8609027cc60a929d0a30ba39dd8e5bf02..53b2664b1c6f9f8d1dfed5071e680ec7a60f70e3 100644
--- a/packages/component-faraday-ui/src/AuthorCard.md
+++ b/packages/component-faraday-ui/src/AuthorCard.md
@@ -13,11 +13,11 @@ const author = {
<div>
<AuthorCard
onEdit={() => console.log('s-a dat click pe edit')}
- listIndex={0}
- author={author}
+ index={0}
+ item={author}
/>
- <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} listIndex={1} author={author} />
- <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} listIndex={2} author={author} />
+ <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} index={1} item={author} />
+ <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} index={2} item={author} />
</div>
```
@@ -33,5 +33,5 @@ const author = {
isCorresponding: true,
};
-<AuthorCard author={author} dragHandle={DragHandle} />
+<AuthorCard item={author} dragHandle={DragHandle} />
```
diff --git a/packages/component-faraday-ui/src/File.js b/packages/component-faraday-ui/src/File.js
index a9c5252ef4b49b036e61ad229b1a40465e1571e5..5b870944be0c4ccc8b46b9d2bb2dbfa3a3774cce 100644
--- a/packages/component-faraday-ui/src/File.js
+++ b/packages/component-faraday-ui/src/File.js
@@ -31,12 +31,13 @@ const hasPreview = (name = '') => {
}
const FileItem = ({
- item: file,
fileSize,
onPreview,
+ item: file,
removeFile,
hasPreview,
onDownload,
+ onDelete,
dragHandle = null,
...rest
}) => (
@@ -49,21 +50,22 @@ const FileItem = ({
{hasPreview && (
<IconButton
icon="eye"
- iconSize={3}
+ iconSize={2}
ml={1}
mr={1}
- onClick={onPreview(file)}
+ onClick={onPreview}
secondary
/>
)}
<IconButton
icon="download"
- iconSize={3}
- ml={1}
+ iconSize={2}
+ ml={hasPreview ? 0 : 1}
mr={1}
- onClick={onDownload(file)}
+ onClick={onDownload}
secondary
/>
+ <IconButton icon="trash" iconSize={2} mr={1} onClick={onDelete} secondary />
</Root>
)
@@ -80,6 +82,8 @@ FileItem.propTypes = {
onPreview: PropTypes.func,
/** Handler for the download button. */
onDownload: PropTypes.func,
+ /** Handler for the delete button. */
+ onDelete: PropTypes.func,
}
export default compose(
@@ -88,11 +92,14 @@ export default compose(
fileSize: parseFileSize(size),
})),
withHandlers({
- onDownload: ({ onDownload }) => file => () => {
- onDownload(file)
+ onDownload: ({ onDownload, item }) => () => {
+ typeof onDownload === 'function' && onDownload(item)
+ },
+ onPreview: ({ onPreview, item }) => () => {
+ typeof onPreview === 'function' && onPreview(item)
},
- onPreview: ({ onPreview }) => file => () => {
- onPreview(file)
+ onDelete: ({ onDelete, item }) => () => {
+ typeof onDelete === 'function' && onDelete(item)
},
}),
)(FileItem)
diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 2590b3a1c8687fb9edc48b81fd27ae55dc88d594..af49341a1d8b80a3de9a009571bde45fac0ea477 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -2,9 +2,10 @@ import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { FilePicker } from '@pubsweet/ui'
-import { compose, withProps } from 'recompose'
+import { compose, withState, withHandlers, withProps } from 'recompose'
import { radiusHelpers } from './styledHelpers'
+import { withNativeFileDrop, withFileSectionDrop } from './helpers'
import {
Row,
Item,
@@ -24,21 +25,40 @@ const EXTENSIONS = {
}
const FileSection = ({
+ error,
title,
isLast,
+ listId,
isFirst,
required,
- files = [],
+ moveItem,
+ isFileItemOver,
+ canDropFileItem,
+ connectFileDrop,
supportedFormats,
+ connectDropTarget,
allowedFileExtensions,
+ files = [],
+ onFilePick = () => {},
+ onPreview,
+ onDownload,
+ onDelete,
}) => (
- <Root isFirst={isFirst} isLast={isLast}>
+ <Root
+ innerRef={instance => {
+ connectFileDrop(instance)
+ connectDropTarget(instance)
+ }}
+ isFileItemOver={isFileItemOver && canDropFileItem}
+ isFirst={isFirst}
+ isLast={isLast}
+ >
<Row alignItems="center">
<Item>
<Label required={required}>{title}</Label>
<FilePicker
allowedFileExtensions={allowedFileExtensions}
- onUpload={file => {}}
+ onUpload={onFilePick}
>
<ActionLink icon="plus" size="small">
UPLOAD FILE
@@ -54,25 +74,50 @@ const FileSection = ({
)}
</Row>
<SortableList
+ beginDragProps={['id', 'index', 'name', 'listId']}
dragHandle={DragHandle}
items={files}
+ listId={listId}
listItem={FileItem}
mb={1}
+ moveItem={moveItem}
+ onDelete={onDelete}
+ onDownload={onDownload}
+ onPreview={onPreview}
/>
+ {error && (
+ <Row>
+ <Text error>{error}</Text>
+ </Row>
+ )}
</Root>
)
export default compose(
+ withState('error', 'setStateError', ''),
+ withHandlers({
+ clearError: ({ setStateError }) => () => {
+ setStateError(e => '')
+ },
+ }),
+ withHandlers({
+ setError: ({ setStateError, clearError }) => err => {
+ setStateError(e => err, () => setTimeout(clearError, 2000))
+ },
+ }),
withProps(({ allowedFileExtensions = [] }) => ({
supportedFormats: allowedFileExtensions
.map(ext => EXTENSIONS[ext.toLowerCase()])
.join(', '),
})),
+ withFileSectionDrop,
+ withNativeFileDrop,
)(FileSection)
// #region styles
const Root = styled.div`
- background: ${th('colorBackground')};
+ background: ${props =>
+ props.isFileItemOver ? th('colorFurniture') : th('colorBackground')};
min-height: calc(${th('gridUnit')} * 22);
padding: 0 ${th('gridUnit')};
diff --git a/packages/component-faraday-ui/src/FileSection.md b/packages/component-faraday-ui/src/FileSection.md
index e67f554e09999117936d7641e96e88c41b5789f6..c3a1b5f9e0d7a73f00a2ce310f26cba9d8fd02cd 100644
--- a/packages/component-faraday-ui/src/FileSection.md
+++ b/packages/component-faraday-ui/src/FileSection.md
@@ -1,4 +1,4 @@
-A section that shows FileItems. Drag and drop support.
+Sections on top of each other.
```js
const files = [
@@ -9,31 +9,7 @@ const files = [
},
{
id: 'file2',
- name: 'myfile.docx',
- size: 133127,
- },
-];
-
-<FileSection
- files={files}
- title="Main Manuscript"
- required
- allowedFileExtensions={['pdf', 'doc', 'docx']}
-/>
-```
-
-Multiple sections on top of each other.
-
-```js
-const files = [
- {
- id: 'file1',
- name: 'myfile.docx',
- size: 51312,
- },
- {
- id: 'file2',
- name: 'myfile.docx',
+ name: 'another_pdf.pdf',
size: 133127,
},
];
@@ -42,16 +18,55 @@ const files = [
<FileSection
isFirst
required
+ listId="mainManuscript"
files={files}
title="Main Manuscript"
allowedFileExtensions={['pdf', 'doc', 'docx']}
+ onFileDrop={f => console.log('dropped a native file', f)}
+ onFilePick={f => console.log('picked a file', f)}
+ moveItem={
+ (dragIndex, hoverIndex) => console.log('moving the item from', dragIndex, hoverIndex)
+ }
+ changeList={
+ (from, to, fileId) => console.log('change from to', from, to, fileId)
+ }
+ onDelete={f => console.log('delete', f)}
+ onPreview={f => console.log('preview', f)}
+ onDownload={f => console.log('download', f)}
/>
<FileSection
required
title="Cover Letter"
files={files}
+ listId="coverLetter"
allowedFileExtensions={['pdf', 'doc', 'docx']}
+ onFileDrop={f => console.log('dropped a native file', f)}
+ onFilePick={f => console.log('picked a file', f)}
+ moveItem={
+ (dragIndex, hoverIndex) => console.log('moving the item from', dragIndex, hoverIndex)
+ }
+ changeList={
+ (from, to, fileId) => console.log('change from to', from, to, fileId)
+ }
+ onDelete={f => console.log('delete', f)}
+ onPreview={f => console.log('preview', f)}
+ onDownload={f => console.log('download', f)}
/>
- <FileSection title="Supplimental Files" required isLast />
+ <FileSection
+ files={[]}
+ title="Supplimental Files"
+ listId="supplimentalFiles"
+ required isLast onFileDrop={f => console.log('dropped a native file', f)}
+ onFilePick={f => console.log('picked a file', f)}
+ moveItem={
+ (dragIndex, hoverIndex) => console.log('moving the item from', dragIndex, hoverIndex)
+ }
+ changeList={
+ (from, to, fileId) => console.log('change from to', from, to, fileId)
+ }
+ onDelete={f => console.log('delete', f)}
+ onPreview={f => console.log('preview', f)}
+ onDownload={f => console.log('download', f)}
+ />
</div>
```
diff --git a/packages/component-faraday-ui/src/SortableList.js b/packages/component-faraday-ui/src/SortableList.js
index 1c6595d653c344dfae39953ab9ed0ecbe2153919..f6bd63d6e33fc049676783818ffb6378691fb58a 100644
--- a/packages/component-faraday-ui/src/SortableList.js
+++ b/packages/component-faraday-ui/src/SortableList.js
@@ -64,7 +64,7 @@ const Item = ({
{React.createElement(listItem, {
...rest,
dragHandle: connectDragSource(
- <div style={{ display: 'flex' }}>
+ <div style={{ display: 'flex', alignSelf: 'stretch' }}>
{React.createElement(dragHandle)}
</div>,
),
diff --git a/packages/component-faraday-ui/src/SortableList.md b/packages/component-faraday-ui/src/SortableList.md
index 4db4cfa6c0d812d1235d1f4834b2897eba3e27d5..33a51c4ba20236944b84b7dfb61b032019cd43dd 100644
--- a/packages/component-faraday-ui/src/SortableList.md
+++ b/packages/component-faraday-ui/src/SortableList.md
@@ -51,5 +51,5 @@ class Example extends React.Component {
}
}
-<Example />
+;<Example />
```
diff --git a/packages/component-faraday-ui/src/WizardAuthors.js b/packages/component-faraday-ui/src/WizardAuthors.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a9afb711f6261a8d090e5038825bb7b7b61d433
--- /dev/null
+++ b/packages/component-faraday-ui/src/WizardAuthors.js
@@ -0,0 +1,145 @@
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { compose, withState, withHandlers } from 'recompose'
+
+import {
+ Row,
+ Item,
+ Label,
+ DragHandle,
+ AuthorCard,
+ ActionLink,
+ SortableList,
+} from './'
+
+const WizardAuthors = ({
+ authors,
+ moveAuthor,
+ addNewAuthor,
+ setAuthorEdit,
+ saveNewAuthor,
+ editExistingAuthor,
+ authorEditorSubmit,
+}) => (
+ <Fragment>
+ <Row alignItems="center" justify="flex-start" pl={1} pr={1}>
+ <Item>
+ <Label>Authors</Label>
+ <ActionLink icon="plus" onClick={addNewAuthor}>
+ ADD AUTHOR
+ </ActionLink>
+ </Item>
+ <Item justify="flex-end">
+ <ActionLink
+ icon="link"
+ iconPosition="right"
+ to="https://www.hindawi.com/journals/jl/guidelines/"
+ >
+ Journal Author Submission Guidelines
+ </ActionLink>
+ </Item>
+ </Row>
+ <SortableContainer>
+ <SortableList
+ authorEditorSubmit={authorEditorSubmit}
+ dragHandle={DragHandle}
+ editExistingAuthor={editExistingAuthor}
+ itemKey="id"
+ items={authors}
+ listItem={AuthorCard}
+ moveItem={moveAuthor}
+ onEdit={setAuthorEdit}
+ saveNewAuthor={saveNewAuthor}
+ />
+ </SortableContainer>
+ </Fragment>
+)
+
+const defaultAuthors = [
+ {
+ id: 'auth-1',
+ email: 'author.here1@gmail.com',
+ firstName: 'Sebastian',
+ lastName: 'Teodorescu',
+ affiliation: 'PSD',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ id: 'auth-2',
+ email: 'author.here2@gmail.com',
+ firstName: 'Bogdan',
+ lastName: 'Cochior',
+ affiliation: 'PSD',
+ isSubmitting: false,
+ isCorresponding: true,
+ },
+ {
+ id: 'auth-3',
+ email: 'author.here3@gmail.com',
+ firstName: 'Alexandru',
+ lastName: 'Munteanu',
+ affiliation: 'PSD',
+ isSubmitting: false,
+ isCorresponding: true,
+ },
+]
+
+export default compose(
+ withState(
+ 'authors',
+ 'setAuthors',
+ ({ authors }) => authors || defaultAuthors,
+ ),
+ withHandlers({
+ addNewAuthor: ({ authors, setAuthors }) => () => {
+ if (authors.some(a => a.id === 'newAuthor')) {
+ return
+ }
+ setAuthors([...authors, { id: 'newAuthor' }])
+ },
+ moveAuthor: ({ authors, setAuthors }) => (dragIndex, hoverIndex) => {
+ const newAuthors = SortableList.moveItem(authors, dragIndex, hoverIndex)
+ setAuthors(newAuthors)
+ },
+ setAuthorEdit: ({ authors, setAuthors }) => index => {
+ setAuthors(authors.filter(a => a.id !== 'newAuthor'))
+ },
+ saveNewAuthor: ({ authors, setAuthors }) => author => {
+ const newAuthors = [...authors.filter(a => a.id !== 'newAuthor'), author]
+ setAuthors(newAuthors)
+ },
+ editExistingAuthor: ({ authors, setAuthors }) => editedAuthor => {
+ const newAuthors = authors.map(
+ a => (a.id === editedAuthor.id ? editedAuthor : a),
+ )
+ setAuthors(newAuthors)
+ },
+ }),
+ withHandlers({
+ authorEditorSubmit: ({ saveNewAuthor, editExistingAuthor }) => (
+ values,
+ dispatch,
+ { toggleEditMode },
+ ) => {
+ if (values.id === 'newAuthor') {
+ saveNewAuthor({
+ ...values,
+ id: String(Math.floor(Math.random() * 10000000)),
+ })
+ } else {
+ editExistingAuthor(values)
+ setTimeout(toggleEditMode, 10)
+ }
+ },
+ }),
+)(WizardAuthors)
+
+// #region styles
+const SortableContainer = styled.div`
+ background-color: ${th('colorBackground')};
+ border-radius: ${th('borderRadius')};
+ padding: ${th('gridUnit')};
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/WizardAuthors.md b/packages/component-faraday-ui/src/WizardAuthors.md
new file mode 100644
index 0000000000000000000000000000000000000000..b3be1ddfc1df3ef6fe06279feec6246236eb13f2
--- /dev/null
+++ b/packages/component-faraday-ui/src/WizardAuthors.md
@@ -0,0 +1,17 @@
+A sortable author list.
+
+```js
+<WizardAuthors
+ authors={[
+ {
+ id: 'auth-3',
+ email: 'author.here3@gmail.com',
+ firstName: 'Alexandru',
+ lastName: 'Munteanu',
+ affiliation: 'PSD',
+ isSubmitting: false,
+ isCorresponding: true,
+ },
+ ]}
+/>
+```
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
index 06ab4eff0c9810a5f09356ea405a95bf047bf4cf..bfcb56cda9351cef32fd77a5ea0cbe1f9d398b93 100644
--- a/packages/component-faraday-ui/src/gridItems/Row.js
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -1,7 +1,7 @@
import { get } from 'lodash'
import styled from 'styled-components'
-import { marginHelper } from '../styledHelpers'
+import { marginHelper, paddingHelper } from '../styledHelpers'
/** @component */
export default styled.div.attrs({
@@ -16,4 +16,5 @@ export default styled.div.attrs({
width: 100%;
${marginHelper};
+ ${paddingHelper};
`
diff --git a/packages/component-faraday-ui/src/helpers/index.js b/packages/component-faraday-ui/src/helpers/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..52df3f99c73ab1a139a359c6596b5855b691d7df
--- /dev/null
+++ b/packages/component-faraday-ui/src/helpers/index.js
@@ -0,0 +1,2 @@
+export { default as withNativeFileDrop } from './withNativeFileDrop'
+export { default as withFileSectionDrop } from './withFileSectionDrop'
diff --git a/packages/component-faraday-ui/src/helpers/withFileSectionDrop.js b/packages/component-faraday-ui/src/helpers/withFileSectionDrop.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce997caf006edd08b99ca897e83e73d5036bdab1
--- /dev/null
+++ b/packages/component-faraday-ui/src/helpers/withFileSectionDrop.js
@@ -0,0 +1,45 @@
+import { DropTarget } from 'react-dnd'
+
+export default DropTarget(
+ 'item',
+ {
+ drop(
+ {
+ files,
+ maxFiles,
+ setError,
+ changeList,
+ listId: toListId,
+ allowedFileExtensions,
+ },
+ monitor,
+ ) {
+ const { listId: fromListId, id, name } = monitor.getItem()
+ const fileExtention = name.split('.')[1]
+
+ if (
+ allowedFileExtensions &&
+ !allowedFileExtensions.includes(fileExtention)
+ ) {
+ setError('Invalid file type.')
+ return
+ }
+
+ if (files.length >= maxFiles) {
+ setError('No more files can be added to this section.')
+ return
+ }
+ if (toListId === fromListId) return
+ changeList(fromListId, toListId, id)
+ },
+ canDrop({ listId: toListId, setError }, monitor) {
+ const { listId: fromListId } = monitor.getItem()
+ return toListId !== fromListId
+ },
+ },
+ (connect, monitor) => ({
+ isFileItemOver: monitor.isOver(),
+ canDropFileItem: monitor.canDrop(),
+ connectDropTarget: connect.dropTarget(),
+ }),
+)
diff --git a/packages/component-faraday-ui/src/helpers/withNativeFileDrop.js b/packages/component-faraday-ui/src/helpers/withNativeFileDrop.js
new file mode 100644
index 0000000000000000000000000000000000000000..ab635fdbf8d06b90d13a57637ea7612b82854744
--- /dev/null
+++ b/packages/component-faraday-ui/src/helpers/withNativeFileDrop.js
@@ -0,0 +1,34 @@
+import { DropTarget } from 'react-dnd'
+import { NativeTypes } from 'react-dnd-html5-backend'
+
+export default DropTarget(
+ NativeTypes.FILE,
+ {
+ drop(
+ { onFileDrop, files, maxFiles, setError, allowedFileExtensions },
+ monitor,
+ ) {
+ const [file] = monitor.getItem().files
+ const fileExtention = file.name.split('.')[1]
+
+ if (files.length >= maxFiles) {
+ setError('No more files can be added to this section.')
+ return
+ }
+
+ if (
+ allowedFileExtensions &&
+ !allowedFileExtensions.includes(fileExtention)
+ ) {
+ setError('Invalid file type.')
+ }
+
+ typeof onFileDrop === 'function' && onFileDrop(file)
+ },
+ },
+ (connect, monitor) => ({
+ isFileOver: monitor.isOver(),
+ canDropFile: monitor.canDrop(),
+ connectFileDrop: connect.dropTarget(),
+ }),
+)
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index f9c3b50f4882695cebb21571e01a5fd9ec1d660a..fa097d039e56ce598dcdbda143c2e43143e894ea 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -17,6 +17,7 @@ export { default as PersonInfo } from './PersonInfo'
export { default as SortableList } from './SortableList'
export { default as Tag } from './Tag'
export { default as Text } from './Text'
+export { default as WizardAuthors } from './WizardAuthors'
export * from './styledHelpers'
diff --git a/packages/styleguide/src/Wrapper.js b/packages/styleguide/src/Wrapper.js
index b4b841f149478b8a9f38488cf845a48881effd7e..2fa36592aea7494b93782a5fbd63b09656abf5d5 100644
--- a/packages/styleguide/src/Wrapper.js
+++ b/packages/styleguide/src/Wrapper.js
@@ -6,13 +6,15 @@ import hindawiTheme from 'hindawi-theme'
import { ThemeProvider } from 'styled-components'
import { createStore, combineReducers } from 'redux'
+import withDragDropContext from './withDragDropContext'
+
const store = createStore(
combineReducers({
form: reducer,
}),
)
-export default class Wrapper extends Component {
+class Wrapper extends Component {
render() {
return (
<Provider store={store}>
@@ -23,3 +25,5 @@ export default class Wrapper extends Component {
)
}
}
+
+export default withDragDropContext(Wrapper)
diff --git a/packages/styleguide/src/withDragDropContext.js b/packages/styleguide/src/withDragDropContext.js
new file mode 100644
index 0000000000000000000000000000000000000000..4eaa72da2e49f0134dd6fbde89f4e0e63f7d03d7
--- /dev/null
+++ b/packages/styleguide/src/withDragDropContext.js
@@ -0,0 +1,4 @@
+import { DragDropContext } from 'react-dnd'
+import HTML5Backend from 'react-dnd-html5-backend'
+
+export default DragDropContext(HTML5Backend)
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 74f9330bd1ca8fc95a63df4c196a8883be2b201f..b0d7ed6080e7edcc30828330a7774bf872df65c7 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/packages/styleguide/styleguide.config.js
@@ -4,17 +4,21 @@ module.exports = {
sections: [
{
name: 'Hinadwi UI',
+ sectionDepth: 1,
components: ['../component-faraday-ui/src/[A-Z]*.js'],
},
{
name: 'Modals',
+ sectionDepth: 1,
components: ['../component-faraday-ui/src/modals/[A-Z]*.js'],
},
{
name: 'Grid Items',
+ sectionDepth: 1,
components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
},
],
+ pagePerSection: true,
styleguideComponents: {
Wrapper: path.join(__dirname, 'src/Wrapper'),
},