@manuscripts/style-guide 1.12.13-LEAN-3572.0 → 1.12.13

package/dist/es/components/Comments/ResolveButton.js

@@ -0,0 +1,59 @@
+/*!
+ * © 2021 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 React from 'react';
+import styled from 'styled-components';
+import { CommentResolveIcon } from '../icons';
+import { Tooltip } from '../Tooltip';
+export const ResolveButton = ({ id, resolved, resolvedCallback }) => {
+    return (React.createElement(Container, null,
+        React.createElement(Button, { className: resolved ? 'resolved' : '', "data-tooltip-id": id, onClick: resolvedCallback },
+            React.createElement(CommentResolveIcon, null)),
+        React.createElement(Tooltip, { id: id, place: "bottom" }, (resolved && 'Unresolve') || 'Resolve')));
+};
+const Container = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: ${(props) => props.theme.grid.unit};
+`;
+const Button = styled.button `
+  display: flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: none;
+  background: #ffffff;
+  padding: 0;
+  cursor: pointer;
+
+  &.resolved {
+    background: #f2fbfc;
+    border: 1px solid #bce7f6;
+    path {
+      fill: #1a9bc7;
+    }
+  }
+
+  &:not([disabled]):hover,
+  &:not([disabled]):active {
+    path {
+      fill: #1a9bc7;
+    }
+    background: #f2fbfc;
+    border: 1px solid #c9c9c9;
+  }
+`;

package/dist/es/components/Comments/index.js

@@ -0,0 +1,5 @@
+export * from './CommentBody';
+export * from './CommentTarget';
+export * from './CommentUser';
+export * from './ResolveButton';
+export * from './CommentWrapper';

package/dist/es/components/EditorHeader/EditorHeader.js

@@ -123,6 +123,7 @@ export const PrimaryButtonSmall = styled(PrimaryButton) `
 `;
 const Wrapper = styled.div `
   display: flex;
+  z-index: 6;
   padding: ${(props) => props.theme.grid.unit * 3}px
     ${(props) => props.theme.grid.unit * 8}px;
   width: 100%;
@@ -130,6 +131,7 @@ const Wrapper = styled.div `
   align-items: center;
   border-bottom: 1px solid #f2f2f2;
   font-size: 14px;
+  background: white;
 
   ${NavDropdownContainer} + ${NavDropdownContainer} {
     margin-left: ${(props) => props.theme.grid.unit * 2}px;

package/dist/es/components/ManuscriptNoteList.js

@@ -0,0 +1,181 @@
+/*!
+ * © 2020 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ObjectTypes, } from '@manuscripts/json-schema';
+import { buildContribution, buildNote } from '@manuscripts/transform';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuid } from 'uuid';
+import { buildNoteTree, } from '../lib/comments';
+import { IconTextButton } from './Button';
+import { CheckboxField, CheckboxLabel } from './Checkbox';
+import { CommentTarget } from './Comments/CommentTarget';
+import { CommentWrapper } from './Comments/CommentWrapper';
+import { AddIcon } from './icons';
+import { RelativeDate } from './RelativeDate';
+export const ManuscriptNoteList = React.memo(({ createKeyword, deleteModel, getCollaboratorById, currentUserId, displayName, getKeyword, listCollaborators, listKeywords, notes, noteSource, saveModel, selected, can, }) => {
+    const [newComment, setNewComment] = useState();
+    const [selectResolved, setSelectResolved] = useState(false);
+    const [noteTarget, setNoteTarget] = useState();
+    useEffect(() => {
+        if (noteTarget && !newComment) {
+            const newComment = buildNote(noteTarget, noteSource);
+            newComment.displayName = displayName;
+            if (currentUserId) {
+                const contribution = buildContribution(currentUserId);
+                newComment.contributions = [contribution];
+            }
+            else {
+                newComment.contributions = [];
+            }
+            setNewComment(newComment);
+        }
+    }, [noteTarget, currentUserId, displayName, newComment, noteSource]);
+    const items = useMemo(() => {
+        const combinedComments = [...notes];
+        if (newComment) {
+            combinedComments.push(newComment);
+        }
+        const commentsTreeMap = buildNoteTree(combinedComments);
+        return Array.from(commentsTreeMap.entries());
+    }, [notes, newComment]);
+    const handleAddNewNote = useCallback((event) => {
+        event.preventDefault();
+        setNoteTarget(ObjectTypes.ManuscriptNote + ':' + uuid().toUpperCase());
+        setSelectResolved(false);
+    }, [setNoteTarget]);
+    const deleteNote = useCallback((id) => {
+        return deleteModel(id).finally(() => {
+            if (newComment && newComment._id === id) {
+                setNoteTarget(undefined);
+                setNewComment(undefined);
+            }
+        });
+    }, [deleteModel, newComment, setNoteTarget]);
+    const saveNote = useCallback((note) => {
+        return saveModel(note).then((note) => {
+            if (newComment && newComment._id === note._id) {
+                setNoteTarget(undefined);
+                setNewComment(undefined);
+            }
+            return note;
+        });
+    }, [newComment, setNoteTarget, saveModel]);
+    const isNew = useCallback((note) => {
+        return newComment ? newComment._id === note._id : false;
+    }, [newComment]);
+    const handleOnSelectChange = useCallback((e) => setSelectResolved(e.target.checked), []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionHeader, { withAddButton: can.createNotes },
+            can.createNotes && (React.createElement(AddNoteButton, { onClick: handleAddNewNote },
+                "Add ",
+                React.createElement(AddIcon, null))),
+            items.length > 0 && (React.createElement(Checkbox, null,
+                React.createElement(CheckboxField, { checked: selectResolved, onChange: handleOnSelectChange }),
+                React.createElement(LabelText, null, "See resolved")))),
+        items.length >= 0 && (React.createElement(NoteListContainer, { "data-cy": "notes-list" }, items.map(([target, noteData]) => {
+            const isSelected = (selected &&
+                (selected.node.attrs.id === target ||
+                    selected.node.attrs.rid === target)) ||
+                false;
+            const selectedNoteData = selectResolved
+                ? noteData
+                : noteData.filter((note) => !note.comment.resolved);
+            return (React.createElement(CommentTarget, { key: target, isSelected: isSelected }, selectedNoteData.map(({ comment, children }) => (React.createElement(NoteThread, { key: comment._id },
+                React.createElement(NoteBodyContainer, { isSelected: isSelected, isNew: isNew(comment) },
+                    React.createElement(CommentWrapper, { createKeyword: createKeyword, comment: comment, deleteComment: deleteNote, handleSetResolved: () => __awaiter(void 0, void 0, void 0, function* () {
+                            return yield saveModel(Object.assign(Object.assign({}, comment), { resolved: !comment.resolved }));
+                        }), getCollaborator: getCollaboratorById, getKeyword: getKeyword, listCollaborators: listCollaborators, listKeywords: listKeywords, saveComment: saveNote, handleCreateReply: setNoteTarget, isNew: isNew(comment), isSelected: isSelected, isProdNote: true, can: can })),
+                children.map((note) => (React.createElement(ReplyBodyContainer, { key: note._id },
+                    React.createElement(CommentWrapper, { createKeyword: createKeyword, comment: note, deleteComment: deleteNote, getCollaborator: getCollaboratorById, getKeyword: getKeyword, isReply: true, listCollaborators: listCollaborators, listKeywords: listKeywords, saveComment: saveNote, handleCreateReply: setNoteTarget, isNew: isNew(note), isProdNote: true, can: can })))))))));
+        })))));
+});
+const AddNoteButton = styled(IconTextButton) `
+  svg {
+    margin: 0 0 0 ${(props) => props.theme.grid.unit * 4}px;
+    path {
+      fill: ${(props) => props.theme.colors.text.secondary};
+      stroke: ${(props) => props.theme.colors.text.secondary};
+    }
+  }
+  font-size: ${(props) => props.theme.font.size.normal};
+`;
+const NoteListContainer = styled.div `
+  flex: 1;
+  overflow-y: auto;
+`;
+export const NoteBodyContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 4}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
+  background: ${(props) => props.theme.colors.background.primary};
+
+  ${(props) => borderStyle(props.theme.colors.border.secondary)};
+  ${(props) => (props.isNew || props.isSelected) &&
+    borderStyle(props.theme.colors.border.primary)}
+  ${(props) => props.isSelected &&
+    `background: ${props.theme.colors.background.selected};`}
+
+  .tooltip {
+    border-radius: 6px;
+    padding: 8px;
+    text-align: center;
+  }
+`;
+const borderStyle = (color) => `
+    ${'border: 1px solid ' + color};
+    ${'border-left: 4px solid ' + color};
+`;
+const NoteThread = styled.div `
+  margin: ${(props) => props.theme.grid.unit * 4}px 0;
+`;
+export const ReplyBodyContainer = styled.div `
+  padding: ${(props) => props.theme.grid.unit * 4}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
+  margin-left: ${(props) => props.theme.grid.unit * 8}px;
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-top: none;
+`;
+export const LightRelativeDate = styled(RelativeDate) `
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.colors.text.secondary};
+  letter-spacing: -0.2px;
+`;
+const ActionHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${(props) => (props.withAddButton && 'space-between') || 'flex-end'};
+  padding-left: ${(props) => props.theme.grid.unit * 8}px;
+`;
+export const LabelText = styled.div `
+  font-family: ${(props) => props.theme.font.family.sans};
+  color: ${(props) => props.theme.colors.text.primary};
+  font-size: 14px;
+  line-height: 24px;
+  margin: 0 !important;
+`;
+const Checkbox = styled(CheckboxLabel) `
+  div {
+    color: ${(props) => props.theme.colors.text.primary};
+  }
+`;

package/dist/es/components/RelativeDate.js

@@ -13,29 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
-export const RelativeDate = (_a) => {
-    var { date } = _a, props = __rest(_a, ["date"]);
-    if (!date) {
+export const RelativeDate = ({ createdAt }) => {
+    if (!createdAt) {
         return null;
     }
     const formatter = new Intl.RelativeTimeFormat('en', { style: 'short' });
-    let value = Math.floor((date - Date.now()) / 3600000);
+    let value = Math.floor((createdAt - Date.now()) / 3600000);
     let unit = 'hour';
     if (Math.abs(value) > 24) {
         value = Math.floor(value / 24);
         unit = 'day';
     }
-    return React.createElement("span", Object.assign({}, props), formatter.format(value, unit));
+    return React.createElement("span", null, formatter.format(value, unit));
 };

package/dist/es/index.js

@@ -45,6 +45,8 @@ export * from './components/LoadingOverlay';
 export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
+export * from './components/ManuscriptNoteList';
+export * from './components/Comments';
 export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/SelectField';

package/dist/types/components/Comments/CommentActions.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * © 2020 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 React, { Dispatch, SetStateAction } from 'react';
+import { Capabilities } from '../../lib/capabilities';
+export declare const CommentActions: React.FC<{
+    id: string;
+    target: string;
+    can?: Capabilities;
+    isResolved?: boolean;
+    isOwnComment: boolean;
+    handleSetResolved?: () => void;
+    deleteComment: (id: string, target?: string) => void;
+    setIsEditing: Dispatch<SetStateAction<boolean | undefined>>;
+    isProdNote?: boolean;
+}>;

package/dist/types/components/Comments/CommentBody.d.ts

@@ -0,0 +1,39 @@
+/*!
+ * © 2020 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 { Keyword, UserProfile } from '@manuscripts/json-schema';
+import React, { Dispatch, SetStateAction } from 'react';
+import { CommentType, UnsavedComment } from '../../lib/comments';
+export interface CommentBodyProps {
+    createKeyword: (name: string) => Promise<Keyword>;
+    deleteComment: (id: string, target?: string) => void;
+    getCollaborator: (id: string) => UserProfile | undefined;
+    getKeyword: (id: string) => Keyword | undefined;
+    isNew: boolean;
+    isReply?: boolean;
+    listCollaborators: () => UserProfile[];
+    listKeywords: () => Keyword[];
+    comment: CommentType | UnsavedComment;
+    saveComment: (comment: CommentType | UnsavedComment) => Promise<CommentType>;
+    handleCreateReply: (id: string) => void;
+    scrollIntoHighlight?: (comment: CommentType | UnsavedComment) => void;
+    onFocusOut?: (id: string, content: string) => boolean;
+}
+export declare const CommentBody: React.FC<CommentBodyProps & {
+    setIsEditing: Dispatch<SetStateAction<boolean | undefined>>;
+    isEditing?: boolean;
+    isDeleting?: boolean;
+    isProdNote?: boolean;
+}>;

package/dist/types/components/Comments/CommentTarget.d.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 2020 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 React from 'react';
+interface Props {
+    isSelected: boolean;
+}
+export declare const CommentTarget: React.FC<Props>;
+export {};

package/dist/types/components/Comments/CommentUser.d.ts

@@ -0,0 +1,23 @@
+/*!
+ * © 2020 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 { Contribution, UserProfile } from '@manuscripts/json-schema';
+import React from 'react';
+export declare const CommentUser: React.FC<{
+    contributions?: Contribution[];
+    getCollaboratorById: (id: string) => UserProfile | undefined;
+    displayName?: string;
+    createdAt?: number;
+}>;

package/dist/types/components/Comments/CommentWrapper.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 2020 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 React from 'react';
+import { Capabilities } from '../../lib/capabilities';
+import { CommentBodyProps } from './CommentBody';
+export declare const CommentWrapper: React.FC<CommentBodyProps & {
+    handleSetResolved?: () => void;
+    isSelected?: boolean;
+    handleRequestSelect?: () => void;
+    can?: Capabilities;
+    currentUserId?: string;
+    isProdNote?: boolean;
+}>;

package/dist/types/components/Comments/ResolveButton.d.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 2021 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 React from 'react';
+export declare const ResolveButton: React.FC<{
+    id: string;
+    resolved: boolean | undefined;
+    resolvedCallback: () => void;
+}>;

package/dist/types/components/Comments/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CommentBody';
+export * from './CommentTarget';
+export * from './CommentUser';
+export * from './ResolveButton';
+export * from './CommentWrapper';

package/dist/types/components/ManuscriptNoteList.d.ts

@@ -0,0 +1,45 @@
+/*!
+ * © 2020 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 { Keyword, ManuscriptNote, UserProfile } from '@manuscripts/json-schema';
+import { Selected } from '@manuscripts/transform';
+import React from 'react';
+import { Capabilities } from '../lib/capabilities';
+interface Props {
+    createKeyword: (name: string) => Promise<Keyword>;
+    deleteModel: (id: string) => Promise<string>;
+    getCollaboratorById: (id: string) => UserProfile | undefined;
+    currentUserId?: string;
+    displayName?: string;
+    getKeyword: (id: string) => Keyword | undefined;
+    listCollaborators: () => UserProfile[];
+    listKeywords: () => Keyword[];
+    notes: ManuscriptNote[];
+    noteSource: 'EMAIL' | 'EDITOR' | 'DASHBOARD';
+    saveModel: (model: ManuscriptNote) => Promise<ManuscriptNote>;
+    selected: Selected | null;
+    can: Capabilities;
+}
+export declare const ManuscriptNoteList: React.FC<Props>;
+export declare const NoteBodyContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isSelected: boolean;
+    isNew: boolean;
+}, never>;
+export declare const ReplyBodyContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LightRelativeDate: import("styled-components").StyledComponent<React.FC<{
+    createdAt?: number | undefined;
+}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/types/components/RelativeDate.d.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import React from 'react';
-export type RelativeDateProps = React.HTMLAttributes<HTMLSpanElement> & {
-    date?: number;
-};
-export declare const RelativeDate: React.FC<RelativeDateProps>;
+export declare const RelativeDate: React.FC<{
+    createdAt?: number;
+}>;

package/dist/types/index.d.ts

@@ -46,6 +46,8 @@ export * from './components/LoadingOverlay';
 export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
+export * from './components/ManuscriptNoteList';
+export * from './components/Comments';
 export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/SelectField';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.12.13-LEAN-3572.0",
+  "version": "1.12.13",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",