@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/CommentsPanel/components/CommentsThreadReplyControls.js

@@ -0,0 +1,108 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as x from "react";
+import { Tooltip as a, ActionIcon as n } from "@mantine/core";
+import { useCommentsStore as k } from "../store.js";
+import { IS_APPLE as v } from "../utils.js";
+import i from "./Icon.js";
+import o from "../CommentsPanel.module.css.js";
+const F = ({
+  onSubmit: p,
+  handleFileChange: f,
+  disabledSubmitButton: s,
+  disabledUploadButton: l,
+  isFloatInput: h = !1,
+  setIsSubmitting: c,
+  isSubmitting: u,
+  handleClearInput: C,
+  locales: I
+}) => {
+  const b = k((r) => r.commentsLocales), t = I ?? b, m = x.useRef(null), E = () => {
+    l || m.current?.click();
+  }, y = (r) => {
+    r.target.files && (f(Array.from(r.target.files)), r.target.value = "");
+  }, g = async () => {
+    if (!u) {
+      c(!0);
+      try {
+        p();
+      } catch (r) {
+        console.error("Ошибка при отправке:", r);
+      } finally {
+        c(!1);
+      }
+    }
+  };
+  return /* @__PURE__ */ d("div", { className: o.commentPluginThreadEditorControls, children: [
+    !s && !h && /* @__PURE__ */ e(a, { label: t.inputEditor?.clear, children: /* @__PURE__ */ e(
+      n,
+      {
+        color: "#495057",
+        onClick: C,
+        size: 22,
+        "aria-label": "Clear",
+        variant: "transparent",
+        tabIndex: -1,
+        children: /* @__PURE__ */ e(i, { name: "close" })
+      }
+    ) }),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: o.threadEditorControlsUpload,
+        style: { position: "relative" },
+        onClick: E,
+        children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              label: l ? t.notifications?.uploadMessages?.fileLimit : t.inputEditor?.uploadFiles,
+              children: /* @__PURE__ */ e(
+                n,
+                {
+                  color: "#495057",
+                  size: 16,
+                  "aria-label": "Upload File",
+                  variant: "transparent",
+                  tabIndex: -1,
+                  disabled: l,
+                  className: o.threadEditorControlsActionIcon,
+                  children: /* @__PURE__ */ e(i, { name: "paperclip" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: m,
+              type: "file",
+              multiple: !0,
+              disabled: l,
+              onChange: y,
+              className: o.threadEditorControlsFileInput,
+              tabIndex: -1
+            },
+            l.toString()
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(a, { label: v ? "⌘ + Enter" : "Ctrl + Enter", children: /* @__PURE__ */ e(
+      n,
+      {
+        color: "#000000",
+        size: 22,
+        "aria-label": "Submit",
+        className: o.commentSubmitButton,
+        variant: "outline",
+        tabIndex: -1,
+        onClick: g,
+        disabled: s,
+        children: /* @__PURE__ */ e(i, { name: "send" })
+      }
+    ) })
+  ] });
+};
+export {
+  F as CommentsThreadReplyControls
+};

package/dist/components/CommentsPanel/components/CommentsUploadFilesPreview.js

@@ -0,0 +1,142 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { useState as b, useMemo as g } from "react";
+import { getFileIcons as U } from "../../../helpers/getFileIcons.js";
+import { getFileType as x } from "../../../helpers/getFileType.js";
+import { LoadingOverlay as F } from "@mantine/core";
+import { AttachmentsGalleryModal as D } from "../../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
+import { useCommentsStore as O } from "../store.js";
+import { CommentActionMenu as y } from "./CommentActionMenu.js";
+import n from "../CommentsPanel.module.css.js";
+const f = (o) => !!o && o.startsWith("temp-"), B = ({
+  files: o,
+  hasPermission: u,
+  removeImage: h,
+  showLoading: p = !1,
+  locales: P
+}) => {
+  const [v, I] = b(null), { adminPermission: w } = O((e) => e), s = g(
+    () => o.filter((e) => e.isImage),
+    [o]
+  ), c = g(
+    () => o.filter((e) => !e.isImage),
+    [o]
+  ), C = g(
+    () => s.map((e) => ({
+      id: e.id,
+      Url: e.src,
+      contentType: "image"
+    })),
+    [s]
+  ), N = (e) => {
+    const t = URL.createObjectURL(e), m = document.createElement("a");
+    m.href = t, m.download = e.name, document.body.appendChild(m), m.click(), setTimeout(() => {
+      URL.revokeObjectURL(t), document.body.removeChild(m);
+    }, 200);
+  }, d = o.every((e) => e.id);
+  return s.length === 0 && c.length === 0 ? null : /* @__PURE__ */ l("div", { className: n.commentPluginImagePreviewContainer, children: [
+    s.length > 0 && /* @__PURE__ */ i("ul", { className: n.commentPluginImagePreviewList, children: s.map(({ src: e, id: t, file: m }, a) => {
+      const r = t ?? a, L = f(r) && p;
+      return /* @__PURE__ */ l(
+        "li",
+        {
+          className: n.commentPluginImagePreviewItem,
+          children: [
+            /* @__PURE__ */ l("div", { className: n.commentPluginImagePreviewWrapper, children: [
+              /* @__PURE__ */ i(
+                "img",
+                {
+                  crossOrigin: "anonymous",
+                  src: e,
+                  onClick: () => {
+                    d && I({
+                      Url: e,
+                      id: t,
+                      contentType: "image"
+                    });
+                  },
+                  alt: `Uploaded-${a}`,
+                  className: `${n.commentPluginImagePreviewImage} ${d ? "enable" : ""}`
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: n.commentPluginImagePreviewRemoveButton, children: /* @__PURE__ */ i(
+                y,
+                {
+                  onDelete: () => h(r),
+                  onDownload: () => N(m),
+                  iconColor: "white",
+                  hasPermission: w || !!u,
+                  locales: P
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ i(
+              F,
+              {
+                visible: L,
+                loaderProps: { size: 20 }
+              }
+            )
+          ]
+        },
+        r
+      );
+    }) }),
+    c.length > 0 && /* @__PURE__ */ i("div", { className: n.commentPluginFilePreviewContainer, children: /* @__PURE__ */ i("ul", { className: n.commentPluginFilePreviewList, children: c.map(({ file: e, id: t }, m) => {
+      const a = t ?? m, r = f(a) && p;
+      return /* @__PURE__ */ l(
+        "li",
+        {
+          className: n.commentPluginFilePreviewItem,
+          children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                className: n.commentPluginFileCard,
+                title: e.name,
+                children: [
+                  /* @__PURE__ */ i("div", { className: n.commentPluginFileCardIcon, children: U(x(e.type), !1, 32) }),
+                  /* @__PURE__ */ l("div", { className: n.commentPluginFileCardInfo, children: [
+                    /* @__PURE__ */ i("div", { className: n.commentPluginFileCardName, children: e.name }),
+                    /* @__PURE__ */ l("div", { className: n.commentPluginFileCardSize, children: [
+                      (e.size / 1024).toFixed(1),
+                      " KB"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ i(
+                    y,
+                    {
+                      onDelete: () => h(a),
+                      onDownload: () => N(e),
+                      hasPermission: w || !!u,
+                      locales: P
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(
+              F,
+              {
+                visible: r,
+                loaderProps: { size: 20 }
+              }
+            )
+          ]
+        },
+        a
+      );
+    }) }) }),
+    d && /* @__PURE__ */ i(
+      D,
+      {
+        attachments: C,
+        onOpenChange: () => I(null),
+        opened: !!v,
+        initialIndex: C.findIndex((e) => e.id === v?.id) ?? 0
+      }
+    )
+  ] });
+};
+export {
+  B as CommentsUploadFilesPreview
+};

package/dist/components/CommentsPanel/components/Icon.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Flex as l } from "@mantine/core";
+import { IconLayoutSidebarLeftExpand as t, IconChevronsRight as i, IconCheck as a, IconPaperclip as p, IconSend as I, IconReload as d, IconShieldCheckFilled as m, IconDotsVertical as h, IconMoodSmile as k, IconMessages as f, IconFilter as g, IconArrowBackUp as u, IconMessage as y, IconX as C } from "@tabler/icons-react";
+const c = {
+  close: C,
+  message: y,
+  reply: u,
+  filter: g,
+  messages: f,
+  emoji: k,
+  "dots-vertical": h,
+  "shield-check": m,
+  reOpen: d,
+  send: I,
+  paperclip: p,
+  "check-mark": a,
+  doubleChevrons: i,
+  "close-panel": t
+}, j = ({
+  name: n,
+  iconStyle: r,
+  ...e
+}) => {
+  const s = c[n] || c.bullet;
+  return /* @__PURE__ */ o(l, { gap: 0, justify: "center", align: "center", ...e, children: /* @__PURE__ */ o(s, { size: 18, stroke: 2, style: r, ...e }) });
+};
+export {
+  j as default
+};

package/dist/components/CommentsPanel/index.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
-import { NodeKey, RangeSelection } from '@layers-app/editor';
 import { Comment, Comments, CommentsFilter, CommentsLocales, GeneralComment, GetEditorFn, ICommentFile, StoreOptions, Thread, UpdateCommentTextArgs, SharedCommentProps } from './types.ts';
 import * as React from 'react';
+type NodeKey = string;
+type RangeSelection = any;
 interface CommentsPanelProps extends Omit<SharedCommentProps, 'commentOrThread'> {
     comments: Comments;
     activeIDs: string[];

package/dist/components/CommentsPanel/index.js

@@ -0,0 +1,137 @@
+import { jsxs as V, jsx as s } from "react/jsx-runtime";
+import { useRef as _, useEffect as h, useState as $, useMemo as B } from "react";
+import { LoadingOverlay as H } from "@mantine/core";
+import { CommentsEmptyPlaceholder as M } from "./components/CommentsEmptyPlaceholder.js";
+import { CommentsFilterHeader as O } from "./components/CommentsFilterHeader.js";
+import { CommentsPanelList as X } from "./components/CommentsPanelList.js";
+import { useCommentsStore as Z } from "./store.js";
+import u from "./CommentsPanel.module.css.js";
+function te({
+  activeIDs: g,
+  deleteCommentOrThread: w,
+  comments: f,
+  submitAddComment: p,
+  markNodeMap: I,
+  storeOptions: C,
+  deleteCommentImage: U,
+  addCommentReaction: D,
+  removeCommentReactions: L,
+  restoreComment: l,
+  updateCommentTextOrImage: N,
+  listRef: d,
+  resolveThreat: A,
+  updateThreadId: v,
+  locales: y,
+  getEditor: T,
+  setCommentsFilter: b,
+  commentsFilter: n,
+  clipPath: k,
+  isLoading: P,
+  isSidebar: m = !0
+}) {
+  const x = Z(
+    (o) => o.initializeComments
+  ), i = _([]);
+  h(() => {
+    x({
+      ...C,
+      getEditor: T,
+      isSidebar: m,
+      commentsLocales: y.comments
+    });
+  }, [C.commentOptions?.workspaceInfo, m, y]);
+  const [z, K] = $({
+    value: "",
+    files: []
+  }), { filteredComments: S, isEmpty: E } = B(() => {
+    const e = f.filter((a) => {
+      const t = a, r = n.resolved === "all" ? !0 : n.resolved === "resolved" ? t.resolution === "ACCEPTED" : t.resolution !== "ACCEPTED", c = n.filteredUsers.length === 0 || n.filteredUsers.some(
+        (R) => R.userId === t.authorId
+      );
+      return !t.deleted && r && c;
+    }).sort((a, t) => t.timeStamp - a.timeStamp);
+    return {
+      filteredComments: e,
+      isEmpty: e.length === 0
+    };
+  }, [f, n]);
+  h(() => {
+    if (!l) return;
+    const o = (e) => {
+      if (!((e.ctrlKey || e.metaKey) && e.code === "KeyZ")) return;
+      const t = document.activeElement;
+      if (!t || t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.getAttribute("contenteditable") === "true" || t.classList.contains("ContentEditable__root"))
+        return;
+      const r = i.current.at(-1);
+      r && (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), i.current = i.current.filter(
+        (c) => c.id !== r.id
+      ), l(r.comment.id, r.threadId));
+    };
+    return window.addEventListener("keydown", o), () => {
+      window.removeEventListener("keydown", o);
+    };
+  }, [l]);
+  const j = async (o, e) => {
+    i.current.push({
+      id: o.id,
+      comment: o,
+      threadId: e?.id
+    }), await w(o, e);
+  };
+  return /* @__PURE__ */ V(
+    "div",
+    {
+      style: { clipPath: k },
+      className: `${u.commentPluginCommentsPanel}${m ? " " + u.commentPluginCommentsPanelSidebar : ""}`,
+      children: [
+        /* @__PURE__ */ s(
+          O,
+          {
+            disabled: E,
+            listRef: d,
+            commentsFilter: n,
+            setCommentsFilter: b,
+            setCommentValue: K,
+            submitAddComment: p,
+            commentValue: z,
+            updateThreadId: v
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: u.commentsPanelBody, children: P ? /* @__PURE__ */ s(
+          H,
+          {
+            visible: P,
+            h: m ? void 0 : 200,
+            overlayProps: { opacity: 0 },
+            loaderProps: { size: 24 }
+          }
+        ) : E ? /* @__PURE__ */ s(
+          M,
+          {
+            listRef: d,
+            commentsFilter: n
+          }
+        ) : /* @__PURE__ */ s(
+          X,
+          {
+            deleteCommentImage: U,
+            activeIDs: g,
+            addCommentReaction: D,
+            comments: S,
+            updateThreadId: v,
+            deleteCommentOrThread: j,
+            listRef: d,
+            removeCommentReactions: L,
+            submitAddComment: p,
+            markNodeMap: I,
+            updateCommentTextOrImage: N,
+            resolveThreat: A
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  te as CommentsPanel
+};

package/dist/components/CommentsPanel/store.js

@@ -0,0 +1,32 @@
+import { create as m } from "zustand";
+import { createDefaultCommentsLocales as s } from "./utils.js";
+const t = m((o) => ({
+  workspaceMembers: [],
+  currentUser: void 0,
+  showComments: !1,
+  adminPermission: !1,
+  commentOptions: void 0,
+  getEditor: void 0,
+  selectMarkNode: () => {
+  },
+  isSidebar: !0,
+  isGuest: !1,
+  commentsLocales: s(),
+  initializeComments: (e) => {
+    o(() => ({
+      workspaceMembers: e.workspaceMembers || [],
+      currentUser: e.currentUser,
+      showComments: e.showComments ?? !1,
+      adminPermission: e.commentOptions?.adminPermission,
+      commentOptions: e.commentOptions,
+      getEditor: e.getEditor,
+      selectMarkNode: e.selectMarkNode,
+      isSidebar: e.isSidebar,
+      isGuest: e.commentOptions?.isGuest,
+      commentsLocales: e.commentsLocales ?? s()
+    }));
+  }
+}));
+export {
+  t as useCommentsStore
+};

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

@@ -1,5 +1,5 @@
-import { EditorType } from '@layers-app/editor';
 import * as React from 'react';
+type EditorType = any;
 export interface ICommentReaction {
     id: string;
     commentId: string;
@@ -74,7 +74,7 @@ export type GeneralComment = {
 };
 type CommentValueType = {
     value: string;
-    files: (ICommentFile)[];
+    files: ICommentFile[];
 };
 export type GetEditorFn = (params: {
     onSubmit: () => void;
@@ -96,11 +96,11 @@ export interface ICommentsFilterProps {
     updateThreadId: (tempId: string, realId: string, updatedAt: string, commentType: string, files: ICommentFile[], thread?: Thread) => void;
     commentValue: {
         value: string;
-        files: (ICommentFile)[];
+        files: ICommentFile[];
     };
     setCommentValue: React.Dispatch<React.SetStateAction<{
         value: string;
-        files: (ICommentFile)[];
+        files: ICommentFile[];
     }>>;
     submitAddComment: (commentOrThread: Comment | Thread | GeneralComment, isInlineComment: boolean, thread?: Thread | GeneralComment, selection?: any | null, files?: File[]) => void;
 }
@@ -268,7 +268,7 @@ export interface CommentsNs {
         };
     };
     emptyState: {
-        "not-resolved": string;
+        'not-resolved': string;
         resolved: string;
         all: string;
         userFilter: string;

package/dist/components/CommentsPanel/utils.js

@@ -0,0 +1,189 @@
+const f = (t) => {
+  const e = t.split("/");
+  return e[e.length - 1];
+}, g = async (t, e, o) => e.length ? (await Promise.all(
+  e.map(
+    (r) => new Promise((i, l) => {
+      o({
+        file: r.file,
+        commentId: t,
+        onSuccess: (s) => {
+          i(s);
+        },
+        onError: (s) => {
+          console.error(s), l(null);
+        }
+      });
+    })
+  )
+)).filter((r) => r !== null) : [];
+function h(t) {
+  setTimeout(() => {
+    const e = document.querySelector(t);
+    e && e.scrollTo({ top: 0, behavior: "smooth" });
+  }, 100);
+}
+const M = (t, e) => {
+  switch (t) {
+    case "thread":
+      return e.deleteModal.description.thread;
+    case "general":
+      return e.deleteModal.description.general;
+    default:
+      return e.deleteModal.description.comment;
+  }
+}, b = (t, e) => {
+  switch (t) {
+    case "thread":
+      return e.deleteModal.title.thread;
+    case "general":
+      return e.deleteModal.title.general;
+    default:
+      return e.deleteModal.title.comment;
+  }
+};
+function u() {
+  const t = navigator.userAgentData;
+  return t?.platform ? t.platform : navigator.platform ? navigator.platform : navigator.userAgent || "";
+}
+function m(t) {
+  let e = t?.parentElement;
+  for (; e; ) {
+    const o = getComputedStyle(e);
+    if (/(auto|scroll)/.test(o.overflowY))
+      return e;
+    e = e.parentElement;
+  }
+  return window;
+}
+function c(t) {
+  setTimeout(() => {
+    const e = t?.current;
+    if (!e) return;
+    const o = e.firstElementChild;
+    if (!o) return;
+    const n = m(e), r = o.getBoundingClientRect(), i = n instanceof Window ? document.documentElement.getBoundingClientRect() : n.getBoundingClientRect();
+    r.top >= i.top && r.top < i.bottom - 100 || (n instanceof Window ? o.scrollIntoView({ behavior: "smooth", block: "start" }) : n.scrollTo({
+      top: o.offsetTop + 300,
+      behavior: "smooth"
+    }));
+  }, 100);
+}
+function w(t, e, o, n) {
+  t((r) => {
+    if (typeof o == "boolean" || typeof o == "string")
+      return r[e] === o ? r : (c(n), { ...r, [e]: o });
+    if (!o)
+      return typeof r[e] == "boolean" ? { ...r, [e]: !r[e] } : r;
+    if (Array.isArray(r[e])) {
+      n && c(n);
+      const i = r[e], l = o, d = i.some((a) => a.userId === l.userId) ? i.filter((a) => a.userId !== l.userId) : [...i, l];
+      return {
+        ...r,
+        [e]: d
+      };
+    }
+    return r;
+  });
+}
+const p = u(), y = /Mac|macOS|iPod|iPhone|iPad/.test(p), I = () => ({
+  title: "",
+  edited: "",
+  filter: {
+    resolved: "",
+    open: "",
+    all: "",
+    selectUsers: "",
+    searchPlaceholder: "",
+    emptyPlaceholder: "",
+    byStatus: "",
+    byPerson: ""
+  },
+  generalComment: "",
+  addComment: "",
+  replyComment: "",
+  inputEditor: {
+    uploadFiles: "",
+    sendMessage: "",
+    editMessage: "",
+    clear: "",
+    clearModal: {
+      title: "",
+      description: {
+        both: "",
+        text: "",
+        files: "",
+        empty: ""
+      }
+    },
+    discardModal: {
+      title: "",
+      description: "",
+      labels: {
+        confirm: "",
+        cancel: ""
+      }
+    },
+    cancelCommentModal: {
+      description: ""
+    }
+  },
+  notifications: {
+    title: "",
+    description: "",
+    options: { all: "", replies: "" },
+    uploadMessages: { tooManyFiles: "", fileTooLarge: "", fileLimit: "" }
+  },
+  actionTooltips: {
+    resolve: "",
+    reopen: "",
+    addReaction: "",
+    reactionLimit: "",
+    reply: ""
+  },
+  menuActions: {
+    edit: "",
+    delete: "",
+    download: ""
+  },
+  deleteModal: {
+    title: { thread: "", general: "", comment: "" },
+    description: { thread: "", general: "", comment: "" },
+    actions: { cancel: "", delete: "", remove: "" }
+  },
+  repliesToggle: {
+    show_one: "",
+    show_other: "",
+    hide: ""
+  },
+  emptyState: {
+    all: "",
+    resolved: "",
+    "not-resolved": "",
+    userFilter: ""
+  }
+});
+function P(t, e, o) {
+  return t && e ? o.inputEditor.clearModal.description.both : t ? o.inputEditor.clearModal.description.text : e ? o.inputEditor.clearModal.description.files : o.inputEditor.clearModal.description.empty;
+}
+const C = (t, e = !1) => {
+  const o = t.type.startsWith("image/");
+  return {
+    id: t.id ? t.id : e ? `temp-${crypto.randomUUID()}` : crypto.randomUUID(),
+    file: t,
+    isImage: o,
+    src: o ? URL.createObjectURL(t) : ""
+  };
+};
+export {
+  y as IS_APPLE,
+  I as createDefaultCommentsLocales,
+  f as cutDeleteImageId,
+  P as getClearInputMessage,
+  M as getDescription,
+  b as getTitle,
+  C as preparePreviewFile,
+  h as scrollToTop,
+  w as toggleFilter,
+  g as uploadAllFiles
+};