@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/authors/CreateAuthorModal.tsx

@@ -0,0 +1,172 @@
+/*!
+ * © 2025 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 {
+  CloseButton,
+  ModalContainer,
+  ModalHeader,
+  StyledModal,
+} from '@manuscripts/style-guide'
+import { generateNodeID, schema } from '@manuscripts/transform'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+
+import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors'
+import { normalizeAuthor } from '../../lib/normalize'
+import {
+  MODAL_ON_CLOSE_NOTIFY_DELAY_MS,
+  FormTitle,
+  StyledModalBody,
+  StyledScrollableModalContent,
+} from '../form/CreateModalStyles'
+import FormFooter from '../form/FormFooter'
+import { ModalFormSaveButton } from '../form/ModalFormActions'
+import { AuthorDetailsForm, FormActions } from './AuthorDetailsForm'
+import { useManageAffiliations } from './useManageAffiliations'
+import { useManageCredit } from './useManageCredit'
+
+export interface CreateAuthorModalProps {
+  authorsCount: number
+  affiliations: AffiliationAttrs[]
+  onSave: (author: ContributorAttrs) => void
+  onClose: () => void
+}
+
+export const CreateAuthorModal: React.FC<CreateAuthorModalProps> = ({
+  authorsCount,
+  affiliations: $affiliations,
+  onSave,
+  onClose,
+}) => {
+  const [isOpen, setIsOpen] = useState(true)
+  const [isDisableSave, setDisableSave] = useState(true)
+  const [isEmailRequired, setEmailRequired] = useState(false)
+  const [hasError, setHasError] = useState(false)
+  const actionsRef = useRef<FormActions>(undefined)
+  const authorFormRef = useRef<HTMLFormElement>(null)
+
+  const selection = useMemo(
+    () => createEmptyAuthor(authorsCount),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  // Wait for the close animation to finish before calling onClose.
+  const prevIsOpenRef = useRef(true)
+  useEffect(() => {
+    if (prevIsOpenRef.current && !isOpen) {
+      prevIsOpenRef.current = isOpen
+      const id = window.setTimeout(() => {
+        onClose()
+      }, MODAL_ON_CLOSE_NOTIFY_DELAY_MS)
+      return () => window.clearTimeout(id)
+    }
+    prevIsOpenRef.current = isOpen
+  }, [isOpen, onClose])
+
+  const { selectedAffiliations } = useManageAffiliations(
+    selection,
+    $affiliations
+  )
+
+  const { selectedCreditRoles } = useManageCredit(selection)
+
+  const handleSave = (values: ContributorAttrs) => {
+    onSave({ ...selection, ...values })
+    setIsOpen(false)
+  }
+
+  const handleChange = (values: ContributorAttrs) => {
+    const { given, family, email, isCorresponding } = values
+    const isNameFilled = given?.length || family?.length
+
+    if (isNameFilled) {
+      if (isCorresponding) {
+        setDisableSave(!email?.length)
+      } else {
+        setDisableSave(false)
+      }
+    } else {
+      setDisableSave(true)
+    }
+
+    setEmailRequired(!!isCorresponding)
+  }
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={() => setIsOpen(false)}
+      shouldCloseOnOverlayClick={true}
+    >
+      <ModalContainer data-cy="create-author-modal">
+        <ModalHeader>
+          <CloseButton
+            onClick={() => setIsOpen(false)}
+            data-cy="modal-close-button"
+          />
+        </ModalHeader>
+        <StyledModalBody>
+          <StyledScrollableModalContent>
+            <FormTitle>Create Author</FormTitle>
+            <AuthorDetailsForm
+              values={normalizeAuthor(selection)}
+              onChange={handleChange}
+              onSave={handleSave}
+              actionsRef={actionsRef}
+              isEmailRequired={isEmailRequired}
+              selectedAffiliations={selectedAffiliations.map((a) => a.id)}
+              authorFormRef={authorFormRef}
+              selectedCreditRoles={selectedCreditRoles}
+              newEntity={true}
+              onAuthorDetailsTabErrorChange={setHasError}
+            />
+          </StyledScrollableModalContent>
+        </StyledModalBody>
+        <FormFooter
+          onCancel={() => setIsOpen(false)}
+          primaryAction={
+            <ModalFormSaveButton
+              form="author-details-form"
+              isDisableSave={isDisableSave || hasError}
+              label="New Author"
+              onSubmitForm={() => actionsRef.current?.submitForm?.()}
+            />
+          }
+        />
+      </ModalContainer>
+    </StyledModal>
+  )
+}
+
+function createEmptyAuthor(priority: number): ContributorAttrs {
+  return {
+    id: generateNodeID(schema.nodes.contributor),
+    role: '',
+    affiliationIDs: [],
+    degrees: [],
+    given: '',
+    family: '',
+    email: '',
+    suffix: '',
+    isCorresponding: false,
+    ORCID: '',
+    priority,
+    isJointContributor: false,
+    correspIDs: [],
+    footnoteIDs: [],
+    prefix: '',
+    creditRoles: [],
+  }
+}

package/src/components/authors/CreditDrawer.tsx

@@ -0,0 +1,71 @@
+/*!
+ * © 2025 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,
+  LabelText,
+} from '@manuscripts/style-guide'
+import React from 'react'
+import styled from 'styled-components'
+
+import { CheckboxContainer } from './AuthorDetailsForm'
+
+export interface CreditContributionsCheckboxesProps {
+  items: { id: string; vocabTerm: string }[]
+  selectedItems: { id: string }[]
+  onSelect: (id: string) => void
+}
+
+export const CreditContributionsCheckboxes: React.FC<
+  CreditContributionsCheckboxesProps
+> = ({ items, selectedItems = [], onSelect }) => {
+  const selectedIds = selectedItems.map((a) => a.id)
+  return (
+    <TwoColumnContainer
+      data-cy="credit-taxnonomy"
+      role="group"
+      aria-label="Contributions (CRediT)"
+    >
+      {items.map((item) => (
+        <TwoColumnCheckbox key={item.id}>
+          <CheckboxLabel>
+            <CheckboxField
+              name={item.id}
+              checked={selectedIds.includes(item.id)}
+              onChange={() => {
+                onSelect(item.id)
+              }}
+            />
+            <LabelText>{item.vocabTerm}</LabelText>
+          </CheckboxLabel>
+        </TwoColumnCheckbox>
+      ))}
+    </TwoColumnContainer>
+  )
+}
+
+const TwoColumnContainer = styled.ul`
+  list-style: none;
+  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
+  margin: 0;
+  display: flex;
+  flex-flow: row wrap;
+  position: relative;
+`
+
+const TwoColumnCheckbox = styled(CheckboxContainer)`
+  flex: 1 0 50%;
+`

package/src/components/authors/DraggableAuthor.tsx

@@ -0,0 +1,228 @@
+/*!
+ * © 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 {
+  Avatar,
+  CorrespondingAuthorIcon,
+  CrclTickAnimation,
+  DeleteIcon,
+  DraggableIcon,
+  withNavigableListItem,
+} from '@manuscripts/style-guide'
+import React, { useRef, useState } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import styled from 'styled-components'
+
+import { authorLabel, ContributorAttrs } from '../../lib/authors'
+import { DropSide, getDropSide } from '../../lib/dnd'
+import { DeleteButton } from '../references/ReferenceForm/styled-components'
+
+const AuthorContainer = withNavigableListItem(styled.div`
+  padding: ${(props) => props.theme.grid.unit * 2}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.25s;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  cursor: pointer;
+  &:hover,
+  &.active {
+    background: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+  &.dragging {
+    opacity: 1;
+    cursor: grabbing;
+  }
+
+  &.dragging * {
+    opacity: 0;
+  }
+
+  &.drop-before {
+    cursor: grabbing;
+    border-top-color: ${(props) => props.theme.colors.brand.dark};
+  }
+
+  &.drop-after {
+    cursor: grabbing;
+    border-bottom-color: ${(props) => props.theme.colors.brand.dark};
+  }
+`)
+
+const AvatarContainer = styled.div`
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+`
+
+const Box = styled.div`
+  margin-left: 14px;
+`
+
+const AuthorBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`
+
+const AuthorNotes = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  & ${AuthorBadge}:not(:last-child) {
+    right: -20%;
+  }
+`
+
+const AuthorName = styled.div`
+  margin-left: 12px;
+  flex: 1;
+`
+
+const DragHandle = styled(DraggableIcon)`
+  cursor: move;
+  margin-left: -4px;
+  margin-right: -12px;
+`
+const RemoveButton = styled(DeleteButton)`
+  .icon_element {
+    fill: ${(props) => (props.disabled && '#c9c9c9') || '#6E6E6E'} !important;
+  }
+`
+const StyledCrclTickAnimation = styled(CrclTickAnimation)`
+  margin-left: 12px;
+`
+interface DragItem {
+  author: ContributorAttrs
+}
+
+interface DraggableAuthorProps {
+  author: ContributorAttrs
+  isSelected: boolean
+  onClick: () => void
+  onDelete: () => void
+  moveAuthor: (
+    from: ContributorAttrs,
+    to: ContributorAttrs,
+    shift: number
+  ) => void
+  showSuccessIcon?: boolean
+}
+
+export const DraggableAuthor: React.FC<DraggableAuthorProps> = React.memo(
+  ({ author, isSelected, onClick, onDelete, moveAuthor, showSuccessIcon }) => {
+    const [dropSide, setDropSide] = useState<DropSide>()
+    const ref = useRef<HTMLDivElement>(null)
+    const [{ isDragging }, dragRef, preview] = useDrag({
+      type: 'author',
+      item: {
+        author,
+      },
+      collect: (monitor) => {
+        return {
+          isDragging: monitor.isDragging(),
+        }
+      },
+    })
+    preview(ref)
+    const [{ isOver }, dropRef] = useDrop({
+      accept: 'author',
+      hover: (item: DragItem, monitor) => {
+        if (!ref.current) {
+          return
+        }
+        const side = getDropSide(ref.current, monitor)
+        setDropSide(side)
+      },
+      drop: (item: DragItem, monitor) => {
+        if (!ref.current) {
+          return
+        }
+        const side = getDropSide(ref.current, monitor)
+        const diff = side === 'before' ? -0.5 : 0.5
+        moveAuthor(item.author, author, diff)
+      },
+      collect: (monitor) => ({
+        isOver: monitor.isOver(),
+      }),
+    })
+
+    dragRef(dropRef(ref))
+
+    const classes: string[] = []
+    if (isDragging) {
+      classes.push('dragging')
+    }
+
+    if (isOver && dropSide) {
+      classes.push(`drop-${dropSide}`)
+    }
+
+    if (isSelected) {
+      classes.push('active')
+      if (ref.current) {
+        ref.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        })
+      }
+    }
+
+    return (
+      <AuthorContainer
+        ref={ref}
+        className={classes.join(' ')}
+        onClick={onClick}
+        data-cy="author-item"
+      >
+        <AvatarContainer data-cy="author-avatar">
+          {isSelected && <DragHandle />}
+          <Box>
+            {showSuccessIcon && <StyledCrclTickAnimation size={36} />}
+            <Avatar
+              size={36}
+              color={'#6e6e6e'}
+              opacity={showSuccessIcon ? 0.05 : 1}
+            />
+          </Box>
+          <AuthorNotes data-cy="author-notes">
+            {author.isCorresponding && (
+              <AuthorBadge>
+                <CorrespondingAuthorIcon />
+              </AuthorBadge>
+            )}
+          </AuthorNotes>
+        </AvatarContainer>
+        <AuthorName data-cy="author-name">{authorLabel(author)}</AuthorName>
+        {isSelected && (
+          <RemoveButton
+            size={13}
+            onClick={() => onDelete()}
+            data-tooltip-content="Delete"
+          >
+            <DeleteIcon fill={'#6E6E6E'} />
+          </RemoveButton>
+        )}
+      </AuthorContainer>
+    )
+  }
+)

package/src/components/authors/useManageAffiliations.tsx

@@ -0,0 +1,77 @@
+/*!
+ * © 2025 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 { useEffect, useReducer, useState } from 'react'
+
+import { arrayReducer } from '../../lib/array-reducer'
+import { AffiliationAttrs, ContributorAttrs } from '../../lib/authors'
+
+export const affiliationsReducer = arrayReducer<AffiliationAttrs>(
+  (a, b) => a.id === b.id
+)
+
+export const useManageAffiliations = (
+  selection: ContributorAttrs | undefined,
+  $affiliations: AffiliationAttrs[]
+) => {
+  const [affiliations, dispatchAffiliations] = useReducer(affiliationsReducer, [
+    ...$affiliations,
+  ])
+
+  useEffect(() => {
+    dispatchAffiliations({ type: 'set', state: [...$affiliations] })
+  }, [$affiliations])
+  const [selectedAffiliations, setSelectedAffiliations] = useState<
+    {
+      id: string
+      institution: string
+    }[]
+  >([])
+
+  const removeAffiliation = (affId: string) => {
+    if (!selection) {
+      return
+    }
+    const newAffiliations = selectedAffiliations
+      .map((a) => a.id)
+      .filter((id) => id !== affId)
+    setSelectedAffiliations(
+      affiliations.filter((item) => newAffiliations.includes(item.id))
+    )
+  }
+  const selectAffiliation = (affiliationId: string) => {
+    if (!selection) {
+      return
+    }
+
+    const currentAffiliations = selectedAffiliations.map((a) => a.id)
+    const isAlreadySelected = currentAffiliations.includes(affiliationId)
+
+    const newAffiliations = isAlreadySelected
+      ? currentAffiliations.filter((id) => id !== affiliationId)
+      : [...currentAffiliations, affiliationId]
+
+    setSelectedAffiliations(
+      affiliations.filter((item) => newAffiliations.includes(item.id))
+    )
+  }
+  return {
+    selectedAffiliations,
+    setSelectedAffiliations,
+    removeAffiliation,
+    selectAffiliation,
+    affiliations,
+  }
+}

package/src/components/authors/useManageCredit.tsx

@@ -0,0 +1,63 @@
+/*!
+ * © 2025 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 { CreditRole, CreditVocabTerm } from '@manuscripts/transform'
+import { useEffect, useMemo, useState } from 'react'
+
+import { ContributorAttrs } from '../../lib/authors'
+
+export const useManageCredit = (selection: ContributorAttrs | undefined) => {
+  const vocabTermItems = useMemo(() => {
+    return Object.values(CreditVocabTerm).map((c) => ({
+      vocabTerm: c,
+      id: c,
+    }))
+  }, [])
+
+  useEffect(() => {
+    setSelectedCreditRoles(selection?.creditRoles ? selection?.creditRoles : [])
+  }, [selection])
+
+  const [selectedCreditRoles, setSelectedCreditRoles] = useState<CreditRole[]>(
+    []
+  )
+
+  const selectCreditRole = (role: string) => {
+    setSelectedCreditRoles((prev) => {
+      const clear = prev.filter((t) => t.vocabTerm !== role)
+      if (clear.length !== prev.length) {
+        return clear
+      }
+      const newTerm = vocabTermItems.find((t) => t.vocabTerm === role)
+      if (newTerm) {
+        return [...prev, { vocabTerm: newTerm.vocabTerm }]
+      }
+      return prev
+    })
+  }
+
+  const removeCreditRole = (role: string) => {
+    setSelectedCreditRoles((prev) => {
+      return prev.filter((r) => r.vocabTerm !== role)
+    })
+  }
+  return {
+    removeCreditRole,
+    selectCreditRole,
+    selectedCreditRoles,
+    setSelectedCreditRoles,
+    vocabTermItems,
+  }
+}