@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/BouncingLogo/BouncingLogo.module.css.js

@@ -0,0 +1,9 @@
+const o = "_logo_1o8y5_1", s = "_shadow_1o8y5_12", a = {
+  logo: o,
+  shadow: s
+};
+export {
+  a as default,
+  o as logo,
+  s as shadow
+};

package/dist/components/CircleColorPicker/CircleColorPicker.js

@@ -0,0 +1,72 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { useMemo as E, useState as u, useEffect as H } from "react";
+import { useTranslation as S } from "react-i18next";
+import { useMantineTheme as k, useMantineColorScheme as M, parseThemeColor as b, Menu as m, ActionIcon as V, ColorSwatch as j, Stack as w, ColorPicker as D, DEFAULT_THEME as y, TextInput as z, isColorValid as A, Button as F } from "@mantine/core";
+const d = (e, t) => e ? e === "var(--mantine-color-bright)" ? t === "dark" ? "#ffffff" : "#000000" : e : null, L = ({
+  value: e,
+  onChange: t,
+  menuProps: p,
+  colorPickerProps: x
+}) => {
+  const { t: s } = S("common"), f = k(), { colorScheme: n } = M(), a = E(() => {
+    const r = d(e, n);
+    return b({ color: r, theme: f });
+  }, [e, f, n]), [C, i] = u(a.value), [g, l] = u(null);
+  H(() => {
+    i(d(e, n) || "");
+  }, [n, e]);
+  const [T, v] = u(!1);
+  return /* @__PURE__ */ h(
+    m,
+    {
+      opened: T,
+      floatingStrategy: "fixed",
+      onChange: v,
+      ...p,
+      children: [
+        /* @__PURE__ */ o(m.Target, { children: /* @__PURE__ */ o(V, { size: "md", variant: "subtle", radius: "xl", children: /* @__PURE__ */ o(j, { color: a.value || "transparent" }) }) }),
+        /* @__PURE__ */ o(m.Dropdown, { style: { padding: 8, minWidth: 220 }, children: /* @__PURE__ */ h(w, { gap: "sm", children: [
+          /* @__PURE__ */ o(
+            D,
+            {
+              value: a.value,
+              onChange: (r) => {
+                t(r), i(r), l(null);
+              },
+              format: "hex",
+              swatches: Object.values(y.colors).map((r) => r[5]),
+              ...x
+            }
+          ),
+          /* @__PURE__ */ o(
+            z,
+            {
+              label: s("HEXValue"),
+              onChange: (r) => {
+                const c = r.currentTarget.value;
+                i(c), A(c) ? (t(c), l(null)) : l(s("invalidColorFormat"));
+              },
+              error: g,
+              value: C
+            }
+          ),
+          /* @__PURE__ */ o(
+            F,
+            {
+              variant: "light",
+              size: "xs",
+              onClick: () => {
+                t(null), l(null);
+              },
+              mt: "xs",
+              children: s("resetColor")
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  L as CircleColorPicker
+};

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -12,6 +12,7 @@ export declare const ColorPicker: import('react').ForwardRefExoticComponent<{
     colors?: string[];
     swatchShape?: "circle" | "square";
     fullWidth?: boolean;
+    swatchSize?: number;
 } & Omit<FlexProps, "onChange"> & import('react').RefAttributes<HTMLDivElement>> & {
     ColorCircle: import('react').ForwardRefExoticComponent<ColorCircleProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,131 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as f, useState as p } from "react";
+import { useMantineTheme as C, Flex as a, Tooltip as L, ColorSwatch as P, getThemeColor as u, parseThemeColor as j, ColorInput as z, ActionIcon as h } from "@mantine/core";
+import { IconPalette as A, IconPencil as E } from "@tabler/icons-react";
+import R from "styled-components";
+import { DEFAULT_VALUES as c } from "../../constants.js";
+const T = f(
+  ({
+    value: e,
+    onChange: t,
+    allowCustomColor: i,
+    colors: l,
+    swatchShape: s = "circle",
+    fullWidth: n = !1,
+    swatchSize: b = 30,
+    ...g
+  }, w) => {
+    const y = C(), S = j({
+      color: e || c.COLORS[0],
+      theme: y
+    }), [O, k] = p(S.value), [v, m] = p(!1);
+    return v ? /* @__PURE__ */ d(a, { align: "center", mih: 30, children: [
+      /* @__PURE__ */ r(
+        z,
+        {
+          w: "100%",
+          popoverProps: {
+            withinPortal: !1,
+            keepMounted: !1
+          },
+          maxLength: 7,
+          withEyeDropper: !1,
+          size: "xs",
+          value: O,
+          onChange: k,
+          onChangeEnd: t,
+          placeholder: "Select custom color"
+        }
+      ),
+      /* @__PURE__ */ r(
+        h,
+        {
+          radius: "xl",
+          variant: "default",
+          color: "gray",
+          onClick: () => m(!1),
+          children: /* @__PURE__ */ r(A, { size: 16 })
+        }
+      )
+    ] }, 1) : /* @__PURE__ */ d(
+      a,
+      {
+        ref: w,
+        ...g,
+        justify: n ? "space-between" : "flex-start",
+        align: "center",
+        mih: 32,
+        children: [
+          (l || c.COLORS).map((o) => {
+            const I = o === e || !e && o === c.COLORS[0];
+            return /* @__PURE__ */ r(
+              D,
+              {
+                value: o,
+                isActive: I,
+                size: b - 4,
+                swatchShape: s,
+                onClick: () => t?.(o)
+              },
+              o
+            );
+          }),
+          i && /* @__PURE__ */ r(
+            h,
+            {
+              radius: "xl",
+              variant: "default",
+              color: "gray",
+              onClick: () => m(!0),
+              children: /* @__PURE__ */ r(E, { size: 16 })
+            }
+          )
+        ]
+      },
+      2
+    );
+  }
+), x = f(
+  ({ value: e, isActive: t, swatchShape: i, ...l }, s) => {
+    const n = C();
+    return /* @__PURE__ */ r(a, { miw: 32, justify: "center", align: "center", children: /* @__PURE__ */ r(L, { label: e || "", withArrow: !0, children: /* @__PURE__ */ r(
+      P,
+      {
+        ref: s,
+        color: e ? u(e, n) : "",
+        radius: i === "circle" ? "xl" : "sm",
+        style: {
+          cursor: "pointer",
+          color: "var(--mantine-color-white)"
+        },
+        ...l,
+        children: t && /* @__PURE__ */ r(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -3,
+              left: -3,
+              right: -3,
+              bottom: -3,
+              border: `1px solid ${e ? u(e, n) : ""}`,
+              borderRadius: i === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
+              pointerEvents: "none",
+              boxSizing: "border-box"
+            }
+          }
+        )
+      }
+    ) }) });
+  }
+), D = R(x)`
+  .mantine-ColorSwatch-colorOverlay {
+    border-radius: ${({ swatchShape: e }) => e === "square" ? "3px" : "50%"};
+  }
+`, V = Object.assign(T, {
+  ColorCircle: x
+});
+export {
+  x as ColorCircle,
+  V as ColorPicker
+};

package/dist/components/ColorPicker/ColorPickerPopover.js

@@ -0,0 +1,42 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Popover as t } from "@mantine/core";
+import { ColorPicker as n } from "./ColorPicker.js";
+const w = ({
+  value: r,
+  onChange: i,
+  defaultOpened: c,
+  size: l = 18,
+  radius: d,
+  children: p
+}) => {
+  const [s, e] = h(c);
+  return /* @__PURE__ */ f(
+    t,
+    {
+      opened: s,
+      onChange: e,
+      position: "bottom-start",
+      withArrow: !0,
+      children: [
+        /* @__PURE__ */ o(t.Target, { children: /* @__PURE__ */ o("div", { onClick: () => e((m) => !m), style: { cursor: "pointer" }, children: p || /* @__PURE__ */ o(
+          n.ColorCircle,
+          {
+            value: r,
+            size: l,
+            radius: d
+          }
+        ) }) }),
+        /* @__PURE__ */ o(t.Dropdown, { maw: 270, children: /* @__PURE__ */ o("div", { onClick: () => e(!1), children: /* @__PURE__ */ o(
+          n,
+          {
+            ...i ? { value: r, onChange: i } : { defaultValue: r ?? void 0 }
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  w as ColorPickerPopover
+};

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { EditorType } from '@layers-app/editor';
 import * as React from 'react';
+type EditorType = any;
 type Props = {
     children: (editorRef: React.MutableRefObject<EditorType | null>) => ReactNode;
     onSubmit: () => void;

package/dist/components/CommentComposer/CommentEditorHotkeys.js

@@ -0,0 +1,61 @@
+import { jsx as p, Fragment as E } from "react/jsx-runtime";
+import { useRef as v, useEffect as i } from "react";
+import s from "../CommentsPanel/CommentsPanel.module.css.js";
+function y({
+  children: l,
+  onSubmit: c,
+  handleBlur: f,
+  autoFocus: u = !0,
+  registerClearEditor: d
+}) {
+  const r = v(null);
+  return i(() => {
+    const e = r.current;
+    !e || !u || setTimeout(() => {
+      e.focus(() => ({
+        defaultSelection: "rootEnd"
+      }));
+    }, 0);
+  }, [u]), i(() => {
+    const e = (a) => {
+      const t = a.target, n = r.current;
+      if (!(!n || !t) && (t.classList.contains(s.commentPluginInputFooterContainer) || t.classList.contains("editor-scroller") || t.classList.contains("doc-space-styles-provider"))) {
+        if (t.querySelector(`.${s.commentPluginImagePreviewList}`) || t.querySelector(`.${s.commentPluginFilePreviewContainer}`))
+          return;
+        setTimeout(() => {
+          n.focus(() => ({
+            defaultSelection: "rootEnd"
+          }));
+        }, 0);
+      }
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []), i(() => {
+    const e = r.current;
+    if (!e) return;
+    d?.(() => {
+      e.update(() => {
+        const n = e._editorState._nodeMap.get("root");
+        if (!n) return;
+        n.clear();
+        const o = e._nodes.get("paragraph");
+        if (!o) return;
+        const m = new o.klass();
+        n.append(m), m.select();
+      });
+    });
+    const t = (n) => {
+      n.code === "Enter" && !n.shiftKey && document.activeElement === e.getRootElement() && (c(), setTimeout(() => {
+        e.blur();
+      }));
+    };
+    return document.addEventListener("keydown", t), () => {
+      document.removeEventListener("keydown", t);
+    };
+  }, [c, f, d]), /* @__PURE__ */ p(E, { children: l(r) });
+}
+export {
+  y as CommentEditorBehavior
+};

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

@@ -1,7 +1,8 @@
 import { MutableRefObject } from 'react';
-import { EditorType, RangeSelection } from '@layers-app/editor';
 import { Comment, CommentsNs, GeneralComment, ICommentFile, ICommentOptions, IUser, Thread } from '../CommentsPanel/types.ts';
 import * as React from 'react';
+type EditorType = any;
+type RangeSelection = any;
 interface CommentValue {
     value: string;
     files: ICommentFile[];

package/dist/components/CommentComposer/index.js

@@ -0,0 +1,288 @@
+import { jsx as S, jsxs as $ } from "react/jsx-runtime";
+import * as ge from "react";
+import { useRef as b, useMemo as j, useLayoutEffect as he, useEffect as I } from "react";
+import { showErrorNotification as k } from "../../helpers/showNotifications.js";
+import { CommentsThreadReplyControls as Ce } from "../CommentsPanel/components/CommentsThreadReplyControls.js";
+import { CommentsUploadFilesPreview as Ee } from "../CommentsPanel/components/CommentsUploadFilesPreview.js";
+import { useCommentsStore as X } from "../CommentsPanel/store.js";
+import { preparePreviewFile as H, getClearInputMessage as Me, scrollToTop as K, uploadAllFiles as ye } from "../CommentsPanel/utils.js";
+import { openRemoveConfirmModal as U } from "../modals/RemoveConfirmModal.js";
+import { CommentEditorBehavior as be } from "./CommentEditorHotkeys.js";
+import P from "../CommentsPanel/CommentsPanel.module.css.js";
+const ve = 5 * 1024 * 1024, Fe = 10, De = ({
+  submitAddComment: T,
+  commentValue: r,
+  thread: c,
+  setCommentValue: E,
+  handleBlur: a,
+  autoFocus: D = !0,
+  provideCommentOptions: W,
+  removeCommentImage: Q,
+  handleEditComment: Z,
+  isEditInput: i = !1,
+  isGeneral: v,
+  updateThreadId: _,
+  setCommentActions: B,
+  updateLocation: p,
+  getSelectionText: q,
+  children: A,
+  providedUser: Y,
+  placeholder: G,
+  composerLocales: V
+}) => {
+  const M = b(null), g = j(
+    () => ({
+      container: document.createElement("div"),
+      elements: []
+    }),
+    []
+  ), L = j(() => i ? { ...r } : null, [r, i]), [ee, te] = ge.useState(!1), h = b(r), O = b(null), y = b(!1), oe = X((e) => e.commentsLocales), t = V ?? oe, { currentUser: ne, commentOptions: re } = X(), se = Y ?? ne, F = W ?? re, C = b(null), ie = G ?? t?.addComment, R = !v && !c && !i;
+  he(() => {
+    if (!p) return;
+    p(M.current, C, g);
+    const e = g.container, o = document.body;
+    if (o !== null)
+      return o.appendChild(e), () => {
+        o.removeChild(e);
+      };
+  }, [p, g.container, g]), I(() => {
+    if (!p) return;
+    const e = () => {
+      p(M.current, C, g);
+    };
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [g, p]), I(() => {
+    if (v) return;
+    function e(o) {
+      const n = o.target;
+      if (M.current && M.current.contains(n) || n.closest(".mantine-Popover-dropdown") || n.closest(".floating-text-format-popup") || i && n.closest("[data-ignore-blur='true']") || !i && n.closest(".tabler-icon-messages") || n.closest('[data-menu-dropdown="true"]') || n.closest(".mantine-Modal-content"))
+        return;
+      const s = L ? JSON.stringify(L) !== JSON.stringify(h.current) : !1;
+      if (s && !y.current && i) {
+        y.current = !0, U({
+          title: t.inputEditor.discardModal.title,
+          children: t.inputEditor.discardModal.description,
+          labels: {
+            confirm: t.inputEditor.discardModal.labels.confirm,
+            cancel: t.inputEditor.discardModal.labels.cancel
+          },
+          onConfirm: () => {
+            a();
+          },
+          onClose: () => {
+            y.current = !1;
+          }
+        });
+        return;
+      }
+      if (R && (h.current.value.trim() !== "" || h.current.files.length > 0)) {
+        y.current = !0, o.stopPropagation(), o.preventDefault(), U({
+          title: t.inputEditor.discardModal.title,
+          children: t.inputEditor.cancelCommentModal.description,
+          labels: {
+            confirm: t.inputEditor.discardModal.labels.confirm,
+            cancel: t.inputEditor.discardModal.labels.cancel
+          },
+          onConfirm: () => {
+            a();
+          },
+          onClose: () => {
+            y.current = !1;
+          }
+        });
+        return;
+      }
+      s || a();
+    }
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [
+    a,
+    L,
+    i,
+    R,
+    v,
+    t.inputEditor?.cancelCommentModal?.description,
+    t.inputEditor.discardModal.description,
+    t.inputEditor.discardModal.labels.cancel,
+    t.inputEditor.discardModal.labels.confirm,
+    t.inputEditor.discardModal.title
+  ]);
+  const le = async () => {
+    const e = h.current;
+    if (!e.value.trim() && !e.files.length) return;
+    const o = c ? c.id : F?.pageId, n = e.files.length > 0, s = c ? "COMMENT" : "PAGE", l = v ? "REVIEW" : "FAQ", d = "temp-" + Date.now() + "-" + Math.random().toString(36).substring(2, 9), m = l === "FAQ" ? c ? "comment" : "thread" : "general", f = JSON.stringify(F?.workspaceInfo);
+    let w = q ? q(C.current) : "";
+    w.length > 100 && (w = w.slice(0, 99) + "…");
+    const x = {
+      id: d,
+      quote: m === "thread" ? w : m === "general" ? f : "",
+      deleted: !1,
+      type: m,
+      clientKey: crypto.randomUUID(),
+      resolution: null,
+      edited: !1,
+      text: e.value,
+      reactions: [],
+      files: e.files,
+      authorId: se?.id || "",
+      timeStamp: performance.timeOrigin + performance.now(),
+      children: []
+    };
+    l === "FAQ" ? c ? (T(x, !1, c, C.current), B((u) => ({
+      ...u,
+      replyList: [...u.replyList, c.id]
+    }))) : (K('ul[class*="commentPluginCommentsPanelList"]'), T(
+      x,
+      !0,
+      void 0,
+      C.current
+    )) : (K('ul[class*="commentPluginCommentsPanelList"]'), O.current?.(), T(x, !0)), a(), C.current = null;
+    try {
+      await F?.commentActions.submitCommentApi({
+        text: e.value,
+        commentType: l,
+        parentType: s,
+        parentId: o,
+        onSuccess: async (u) => {
+          const z = u.id, ue = u.updatedAt;
+          let J = [];
+          n && (J = (await ye(
+            z,
+            e.files,
+            F.commentActions.uploadCommentFileApi
+          )).map(
+            (pe) => H(pe)
+          )), _ && _(
+            d,
+            z,
+            ue,
+            m,
+            J.flat(),
+            c
+          );
+        }
+      });
+    } catch (u) {
+      console.error("Error submitting comment:", u);
+    }
+  }, N = () => {
+    i ? Z?.(h.current) : le();
+  }, ce = () => {
+    const e = !!r.value?.trim(), o = !!r.files?.length;
+    U({
+      title: t.inputEditor.clearModal.title,
+      labels: {
+        confirm: t.deleteModal.actions.remove,
+        cancel: t.deleteModal.actions.cancel
+      },
+      children: Me(e, o, t),
+      onConfirm: () => {
+        E({ files: [], value: "" }), O.current?.();
+      }
+    });
+  };
+  I(() => {
+    h.current = r;
+  }, [r]);
+  const ae = (e) => {
+    const o = typeof e == "string";
+    if (o && Q && !i) {
+      Q(e);
+      const n = r.files.filter((s) => "file" in s);
+      E((s) => ({
+        ...s,
+        files: n
+      }));
+      return;
+    }
+    E((n) => {
+      const s = o ? n.files.filter((l) => l.id !== e) : n.files.filter((l, d) => d !== e);
+      return { ...n, files: s };
+    });
+  }, de = (e) => {
+    !e || e.length === 0 || E((o) => {
+      const n = o.files || [], s = Fe - n.length, l = [], d = [];
+      e.forEach((f) => {
+        f.size <= ve ? l.push(f) : d.push(f);
+      }), d.length > 0 && k({
+        message: t?.notifications?.uploadMessages?.fileTooLarge
+      }), l.length > s && k({
+        message: t?.notifications?.uploadMessages?.tooManyFiles
+      });
+      const m = l.slice(0, s).map((f) => H(f, !0));
+      return m.length === 0 ? o : {
+        ...o,
+        files: [...n, ...m]
+      };
+    });
+  }, me = r.value !== "" || r.files.length > 0, fe = r.files.length === 10;
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: M,
+      className: `${P.commentPluginCommentsPanelListThreadEditor} ${i ? P.edited : ""}`,
+      children: /* @__PURE__ */ $(
+        "div",
+        {
+          className: P.commentPluginEditorContainer,
+          style: {
+            "--placeholder-text": `"${ie}..."`
+          },
+          children: [
+            /* @__PURE__ */ S(
+              be,
+              {
+                onSubmit: N,
+                handleBlur: a,
+                autoFocus: D,
+                registerClearEditor: (e) => {
+                  O.current = e;
+                },
+                children: (e) => typeof A == "function" ? A({
+                  onSubmit: N,
+                  handleBlur: a,
+                  autoFocus: D,
+                  setCommentValue: E,
+                  commentValue: r,
+                  editorRef: e
+                }) : A
+              }
+            ),
+            /* @__PURE__ */ $("div", { className: P.commentPluginInputFooterContainer, children: [
+              /* @__PURE__ */ S(
+                Ee,
+                {
+                  hasPermission: !0,
+                  removeImage: ae,
+                  files: r.files,
+                  locales: t
+                }
+              ),
+              /* @__PURE__ */ S(
+                Ce,
+                {
+                  handleClearInput: ce,
+                  disabledSubmitButton: !me,
+                  disabledUploadButton: fe,
+                  handleFileChange: de,
+                  onSubmit: N,
+                  locales: t,
+                  isFloatInput: R,
+                  isSubmitting: ee,
+                  setIsSubmitting: te
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  De as CommentComposer
+};