@manuscripts/body-editor 1.7.19 → 1.7.20

package/dist/cjs/views/base_node_view.js

@@ -16,7 +16,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseNodeView = void 0;
-const utils_1 = require("../lib/utils");
 class BaseNodeView {
     constructor(props, node, view, getPos, decorations) {
         this.props = props;
@@ -62,24 +61,6 @@ class BaseNodeView {
                 this.dom.classList.toggle('has-sync-error', this.syncErrors.length > 0);
             }
         };
-        this.updateNodeAttrs = (attrs) => {
-            this.view.state.doc.descendants((node, pos) => {
-                if (node.attrs.id === attrs.id) {
-                    const tr = this.view.state.tr.setNodeMarkup(pos, undefined, attrs);
-                    if ((0, utils_1.isMetaNode)(node.type.name)) {
-                        tr.setMeta('track-changes-update-meta-node', true);
-                    }
-                    this.view.dispatch(tr);
-                }
-            });
-        };
-        this.deleteNode = (id) => {
-            this.view.state.doc.descendants((node, pos) => {
-                if (node.attrs.id === id) {
-                    this.view.dispatch(this.view.state.tr.delete(pos, pos + node.nodeSize));
-                }
-            });
-        };
     }
     setDomAttrs(node, element, omit = []) {
         Object.keys(node.attrs || {}).forEach((attr) => {

package/dist/cjs/views/bibliography_element.js

@@ -33,6 +33,7 @@ const transform_1 = require("@manuscripts/transform");
 const assets_1 = require("../assets");
 const dompurify_1 = require("../lib/dompurify");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
+const view_1 = require("../lib/view");
 const bibliography_1 = require("../plugins/bibliography");
 const comment_annotation_1 = require("../plugins/comment_annotation");
 const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
@@ -151,10 +152,10 @@ class BibliographyElementBlockView extends block_view_1.default {
         };
         this.handleSave = (item) => {
             const node = this.decoder.decode(item);
-            this.updateNodeAttrs(node.attrs);
+            (0, view_1.updateNode)(this.view, node);
         };
         this.handleDelete = (item) => {
-            return this.deleteNode(item._id);
+            (0, view_1.deleteNode)(this.view, item._id);
         };
         this.addClickListenerToBibItem = (element, dataTracked) => {
             if (dataTracked.status !== track_changes_plugin_1.CHANGE_STATUS.rejected) {

package/dist/cjs/views/citation_editable.js

@@ -27,6 +27,7 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const citation_sources_1 = require("../citation-sources");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
+const view_1 = require("../lib/view");
 const bibliography_1 = require("../plugins/bibliography");
 const citation_1 = require("./citation");
 const CitationEditorWrapper_1 = require("./CitationEditorWrapper");
@@ -101,7 +102,7 @@ class CitationEditableView extends citation_1.CitationView {
             }
             else {
                 const node = this.decoder.decode(item);
-                this.updateNodeAttrs(node.attrs);
+                (0, view_1.updateNodeAttrs)(this.view, node.type, node.attrs);
             }
         };
         this.handleUncite = (id) => {
@@ -145,7 +146,7 @@ class CitationEditableView extends citation_1.CitationView {
             this.handleCancel();
         };
         this.handleDelete = (item) => {
-            return this.deleteNode(item._id);
+            return (0, view_1.deleteNode)(this.view, item._id);
         };
         this.handleComment = () => {
             const comment = (0, transform_1.buildComment)(this.node.attrs.id);

package/dist/cjs/views/contributors.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2023 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +21,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContributorsView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
+const AuthorsModal_1 = require("../components/authors/AuthorsModal");
+const authors_1 = require("../lib/authors");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
+const view_1 = require("../lib/view");
 const affiliations_1 = require("../plugins/affiliations");
 const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
 const block_view_1 = __importDefault(require("./block_view"));
@@ -77,15 +95,11 @@ class ContributorsView extends block_view_1.default {
             }
             const can = this.props.getCapabilities();
             const disableEditButton = !can.editMetadata;
-            const { bibliographicName, isCorresponding, email, id } = displayAttr;
-            container.addEventListener('click', (e) => {
-                e.preventDefault();
-                if (!disableEditButton) {
-                    this.props.openAuthorEditing();
-                    this.props.selectAuthorForEditing(id);
-                }
-            });
-            const name = this.buildNameLiteral(bibliographicName);
+            const { isCorresponding, email } = displayAttr;
+            if (!disableEditButton) {
+                container.addEventListener('click', this.handleClick);
+            }
+            const name = (0, authors_1.authorLabel)(displayAttr);
             container.innerHTML =
                 isCorresponding && email
                     ? `<span class="name">${name} (${email})</span>`
@@ -113,21 +127,6 @@ class ContributorsView extends block_view_1.default {
             }
             return container;
         };
-        this.initials = (given) => given
-            ? given
-                .trim()
-                .split(' ')
-                .map((part) => part.substr(0, 1).toUpperCase() + '.')
-                .join('')
-            : '';
-        this.buildNameLiteral = ({ given = '', family = '', suffix = '' }) => {
-            if (!given && !family) {
-                return 'Unknown Author';
-            }
-            return [this.initials(given), family, suffix]
-                .filter((part) => part)
-                .join(' ');
-        };
         this.isJointFirstAuthor = (authors, index) => {
             const author = index === 0 ? authors[index] : authors[index - 1];
             return Boolean(author.attrs.isJointContributor);
@@ -148,7 +147,7 @@ class ContributorsView extends block_view_1.default {
             const can = this.props.getCapabilities();
             const button = (0, ReactSubView_1.default)(this.props, style_guide_1.SecondaryButton, {
                 mini: true,
-                onClick: this.props.openAuthorEditing,
+                onClick: this.handleClick,
                 className: 'edit-authors-button',
                 disabled: !can.editMetadata,
                 children: 'Edit Authors',
@@ -168,6 +167,60 @@ class ContributorsView extends block_view_1.default {
                 }
             }
         };
+        this.handleClick = (e) => {
+            var _a, _b;
+            e.stopPropagation();
+            const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
+            const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
+            let author = undefined;
+            const target = e.target;
+            if (target) {
+                const id = (_a = target.closest('.contributor')) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
+                author = contributors.filter((a) => a.id === id)[0];
+            }
+            const componentProps = {
+                author,
+                authors: contributors,
+                affiliations,
+                onSaveAuthor: this.handleSaveAuthor,
+                onDeleteAuthor: this.handleDeleteAuthor,
+                onSaveAffiliation: this.handleSaveAffiliation,
+            };
+            (_b = this.popper) === null || _b === void 0 ? void 0 : _b.remove();
+            this.popper = (0, ReactSubView_1.default)(this.props, AuthorsModal_1.AuthorsModal, componentProps, this.node, this.getPos, this.view);
+            this.container.appendChild(this.popper);
+        };
+        this.handleSaveAuthor = (author) => {
+            if (!(0, view_1.findChildByID)(this.view, author.id)) {
+                this.insertAuthorNode(author);
+            }
+            else {
+                (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.contributor, author);
+            }
+        };
+        this.handleDeleteAuthor = (author) => {
+            (0, view_1.deleteNode)(this.view, author.id);
+        };
+        this.handleSaveAffiliation = (affiliation) => {
+            if (!(0, view_1.findChildByID)(this.view, affiliation.id)) {
+                this.insertAffiliationNode(affiliation);
+            }
+            else {
+                (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.affiliation, affiliation);
+            }
+        };
+        this.insertAuthorNode = (attrs) => {
+            const parent = (0, view_1.findChildByType)(this.view, transform_1.schema.nodes.contributors);
+            const tr = this.view.state.tr;
+            const node = transform_1.schema.nodes.contributor.create(attrs);
+            this.view.dispatch(tr.insert(parent.pos + 1, node));
+        };
+        this.insertAffiliationNode = (attrs) => {
+            const parent = (0, view_1.findChildByType)(this.view, transform_1.schema.nodes.affiliations);
+            const tr = this.view.state.tr;
+            const node = transform_1.schema.nodes.affiliation.create(attrs);
+            this.view.dispatch(tr.insert(parent.pos + 1, node));
+        };
         this.ignoreMutation = () => true;
         this.stopEvent = () => true;
     }

package/dist/es/components/authors/AffiliationButton.js

@@ -0,0 +1,75 @@
+import ArrowDownBlue from '@manuscripts/assets/react/ArrowDownBlue';
+import { DeleteIcon } from '@manuscripts/style-guide';
+import { isEqual } from 'lodash';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { affiliationLabel } from '../../lib/authors';
+import { AffiliationForm } from './AffiliationForm';
+const Container = styled.div `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+  margin-bottom: 2px;
+  overflow: hidden;
+`;
+const AffiliationFormContainer = styled.div `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  margin: 6px 12px 12px;
+  overflow: hidden;
+`;
+const AffiliationLabel = styled.div `
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+`;
+const DropdownIndicator = styled(ArrowDownBlue) `
+  border: 0;
+  border-radius: 50%;
+  margin-right: 0.6em;
+  min-width: 20px;
+`;
+const ToggleButton = styled.button `
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 1rem;
+  padding: 0.6em 0.5em;
+  outline: none;
+
+  &.open svg {
+    transform: rotateX(180deg);
+  }
+`;
+const RemoveButton = styled.div `
+  cursor: pointer;
+`;
+export const AffiliationButton = ({ affiliation, onSave, onRemove, }) => {
+    const [isOpen, setOpen] = useState(false);
+    const toggleOpen = () => {
+        setOpen((o) => !o);
+    };
+    const handleSave = (values) => {
+        if (isEqual(values, affiliation)) {
+            return;
+        }
+        const copy = Object.assign(Object.assign({}, affiliation), values);
+        onSave(copy);
+    };
+    return (React.createElement(Container, null,
+        React.createElement(AffiliationLabel, null,
+            React.createElement(ToggleButton, { type: "button", className: isOpen ? 'open' : '', onClick: toggleOpen },
+                React.createElement(DropdownIndicator, null),
+                affiliationLabel(affiliation)),
+            React.createElement(RemoveButton, { onClick: onRemove },
+                React.createElement(DeleteIcon, null))),
+        isOpen && (React.createElement(AffiliationFormContainer, null,
+            React.createElement(AffiliationForm, { values: affiliation, onSave: handleSave })))));
+};

package/dist/es/components/authors/AffiliationForm.js

@@ -0,0 +1,43 @@
+import { TextField } from '@manuscripts/style-guide';
+import { Field, Formik } from 'formik';
+import React from 'react';
+import styled from 'styled-components';
+import { ChangeHandlingForm } from './ChangeHandlingForm';
+const Row = styled.div `
+  display: flex;
+  border-top: 1px solid ${(props) => props.theme.colors.border.field.default};
+  &:first-child {
+    border-top: none;
+  }
+`;
+const AffiliationsTextField = styled(TextField) `
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  &:not(:first-child) {
+    border-left: 1px solid ${(props) => props.theme.colors.border.field.default};
+  }
+
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+export const AffiliationForm = ({ values, onSave, }) => {
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave }, () => (React.createElement(ChangeHandlingForm, { onChange: onSave },
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "institution" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "institution", placeholder: "Institution Name" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "department" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "department", placeholder: "Department" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "addressLine1", placeholder: "Street Address" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "city" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "city", placeholder: "City" }, props.field)))),
+            React.createElement(Field, { name: "county" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "county", placeholder: "State / Province" }, props.field))))),
+        React.createElement(Row, null,
+            React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "postCode", placeholder: "Postal Code" }, props.field)))),
+            React.createElement(Field, { name: "country" }, (props) => (React.createElement(AffiliationsTextField, Object.assign({ id: "country", placeholder: "Country" }, props.field)))))))));
+};

package/dist/es/components/authors/AuthorActions.js

@@ -0,0 +1,31 @@
+import { ButtonGroup, DeleteIcon, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DeleteAuthorConfirmationDialog } from './DeleteAuthorConfirmationDialog';
+const AuthorActionsContainer = styled.div `
+  display: flex;
+`;
+const RemoveButton = styled.div `
+  display: flex;
+  align-items: center;
+
+  svg {
+    cursor: pointer;
+  }
+`;
+const StyledButtonGroup = styled(ButtonGroup) `
+  flex: 1;
+`;
+export const AuthorActions = ({ author, onSave, onDelete, onCancel, }) => {
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+    return (React.createElement(AuthorActionsContainer, null,
+        React.createElement(DeleteAuthorConfirmationDialog, { author: author, isOpen: showDeleteDialog, onDelete: () => {
+                setShowDeleteDialog(true);
+                onDelete();
+            }, onCancel: () => setShowDeleteDialog(false) }),
+        React.createElement(RemoveButton, { onClick: () => setShowDeleteDialog(true) },
+            React.createElement(DeleteIcon, null)),
+        React.createElement(StyledButtonGroup, null,
+            React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
+            React.createElement(PrimaryButton, { onClick: onSave }, "Save"))));
+};

package/dist/es/components/authors/AuthorAffiliations.js

@@ -0,0 +1,85 @@
+import AddAuthor from '@manuscripts/assets/react/AddAuthor';
+import { generateID, ObjectTypes } from '@manuscripts/json-schema';
+import React, { useContext, useMemo, useState } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import styled, { ThemeContext } from 'styled-components';
+import { affiliationLabel, } from '../../lib/authors';
+import { AffiliationButton } from './AffiliationButton';
+const AddAffiliation = styled(AddAuthor) `
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`;
+export const AddAffiliationIndicator = () => React.createElement(AddAffiliation, null);
+const getSelectStyles = (focus, theme) => ({
+    backgroundColor: focus
+        ? theme.colors.background.fifth
+        : theme.colors.background.primary,
+    borderColor: focus
+        ? theme.colors.border.field.active
+        : theme.colors.border.field.default,
+    '&:hover': {
+        backgroundColor: theme.colors.background.fifth,
+    },
+    borderRadius: theme.grid.radius.default,
+    boxShadow: 'none',
+    fontFamily: theme.font.family.sans,
+});
+export const AuthorAffiliations = ({ author, affiliations, onSave, onAdd, onRemove, }) => {
+    const theme = useContext(ThemeContext);
+    const [searchText, setSearchText] = useState('');
+    const affiliationMap = useMemo(() => new Map(affiliations.map((a) => [a.id, a])), [affiliations]);
+    const authorAffiliations = useMemo(() => {
+        var _a;
+        return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.map((i) => affiliationMap.get(i));
+    }, [affiliationMap, author]);
+    const otherAffiliations = useMemo(() => {
+        var _a;
+        const copy = new Map(affiliationMap);
+        (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.forEach((i) => copy.delete(i));
+        return Array.from(copy.values());
+    }, [affiliationMap, author]);
+    const options = otherAffiliations.map((a) => ({
+        value: a.id,
+        label: affiliationLabel(a),
+    }));
+    const handleChange = (id) => {
+        const affiliation = affiliationMap.get(id);
+        if (!affiliation) {
+            return;
+        }
+        onAdd(affiliation);
+        setSearchText('');
+    };
+    const handleCreate = (institution) => {
+        const affiliation = {
+            id: generateID(ObjectTypes.Affiliation),
+            addressLine1: '',
+            city: '',
+            country: '',
+            county: '',
+            department: '',
+            institution: institution,
+            postCode: '',
+            priority: 0,
+        };
+        onSave(affiliation);
+        onAdd(affiliation);
+    };
+    return (React.createElement(React.Fragment, null,
+        authorAffiliations.map((a) => (React.createElement(AffiliationButton, { key: `${author.id}-${a.id}`, affiliation: a, onSave: onSave, onRemove: () => onRemove(a) }))),
+        React.createElement(CreatableSelect, { options: options, isMulti: false, isClearable: true, value: null, inputValue: searchText, components: {
+                IndicatorsContainer: AddAffiliationIndicator,
+            }, placeholder: "Begin typing to add affiliation", noOptionsMessage: () => 'Type the name of an institution', onChange: (i) => i && handleChange(i.value), onInputChange: setSearchText, onCreateOption: (v) => v && handleCreate(v), isValidNewOption: (t) => !!t, styles: {
+                control: (provided, state) => (Object.assign(Object.assign({}, provided), getSelectStyles(state.isFocused, theme))),
+            } })));
+};

package/dist/es/components/authors/AuthorDetailsForm.js

@@ -0,0 +1,67 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CheckboxField, CheckboxLabel, TextField, TextFieldGroupContainer, TextFieldLabel, } from '@manuscripts/style-guide';
+import { Field, Formik } from 'formik';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { ChangeHandlingForm } from './ChangeHandlingForm';
+export const LabelText = styled.div `
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.2px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+export const Fieldset = styled.fieldset `
+  padding: 0;
+  margin: 0;
+  border: none;
+`;
+const OrcidContainer = styled.div `
+  margin: 16px 0 0;
+`;
+export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, }) => {
+    const formRef = useRef(null);
+    if (actionsRef && !actionsRef.current) {
+        actionsRef.current = {
+            reset: () => {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+            },
+        };
+    }
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: false, innerRef: formRef }, (formik) => {
+        const isAuthor = formik.values.role === 'author';
+        return (React.createElement(ChangeHandlingForm, { onChange: onChange },
+            React.createElement(Fieldset, null,
+                React.createElement(TextFieldGroupContainer, null,
+                    React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(TextField, Object.assign({ id: 'given-name', placeholder: 'Given name' }, props.field)))),
+                    React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(TextField, Object.assign({ id: 'family-name', placeholder: 'Family name' }, props.field))))),
+                React.createElement(Field, { name: 'email', type: 'email' }, (props) => (React.createElement(TextField, Object.assign({ id: 'email', placeholder: 'Email address' }, props.field)))),
+                React.createElement(CheckboxLabel, { disabled: !isAuthor },
+                    React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, Object.assign({ id: 'isCorresponding', checked: props.field.value, disabled: !isAuthor }, props.field)))),
+                    React.createElement(LabelText, null, "Corresponding Author")),
+                React.createElement(CheckboxLabel, null,
+                    React.createElement(Field, { name: 'role', type: 'checkbox' }, (props) => (React.createElement(CheckboxField, { name: 'role', checked: isAuthor, onChange: (e) => {
+                            formik.setFieldValue(props.field.name, e.target.checked ? 'author' : 'other', false);
+                        } }))),
+                    React.createElement(LabelText, null, "Include in Authors List")),
+                React.createElement(OrcidContainer, null,
+                    React.createElement(TextFieldLabel, null,
+                        React.createElement(LabelText, null, "ORCID"),
+                        React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))))));
+    }));
+};

package/dist/es/components/authors/AuthorFormPlaceholder.js

@@ -0,0 +1,50 @@
+import ContributorDetails from '@manuscripts/assets/react/ContributorDetailsPlaceholder';
+import React from 'react';
+import styled from 'styled-components';
+const OuterContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`;
+const InnerContainer = styled.div `
+  text-align: center;
+  max-width: 480px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+`;
+const Placeholder = styled.div `
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const Action = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`;
+const Message = styled.div `
+  max-width: 400px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  margin-top: ${(props) => props.theme.grid.unit * 6}px;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  color: ${(props) => props.theme.colors.text.secondary};
+
+  @media (max-width: 850px) {
+    margin-right: ${(props) => props.theme.grid.unit * 5}px;
+    margin-left: ${(props) => props.theme.grid.unit * 5}px;
+    max-width: 350px;
+  }
+`;
+export const AuthorFormPlaceholder = () => (React.createElement(OuterContainer, { "data-cy": 'author-details' },
+    React.createElement(InnerContainer, null,
+        React.createElement(Placeholder, null,
+            React.createElement(ContributorDetails, null)),
+        React.createElement(React.Fragment, null,
+            React.createElement(Action, null, "Author Details"),
+            React.createElement(Message, null, "Select an author from the list to display their details here.")))));

package/dist/es/components/authors/AuthorList.js

@@ -0,0 +1,33 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DragLayer } from '@manuscripts/style-guide';
+import React from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
+import { DraggableAuthor } from './DraggableAuthor';
+const AuthorListContainer = styled.div `
+  flex: 1;
+  overflow-y: visible;
+`;
+export const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
+    return (React.createElement(DndProvider, { backend: HTML5Backend },
+        React.createElement(AuthorListContainer, null,
+            React.createElement(DragLayer, null),
+            authors.map((a) => {
+                return (React.createElement(DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
+            }))));
+};