@layers-app/shared 0.4.4 → 0.4.6

package/dist/components/Chat/ChatInput/index.js

@@ -0,0 +1,288 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { useState as Z, useRef as z, useEffect as $, useCallback as d } from "react";
+import { Edit04Icon as _, LinkBackwardIcon as ee, Image01Icon as ae, PlayIcon as ne, File01Icon as ie, Attachment02Icon as te, Sent02Icon as se } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as m } from "@hugeicons/react";
+import { Box as le, Button as re, CloseButton as B, ActionIcon as R, Textarea as ce } from "@mantine/core";
+import { AttachmentsPreview as oe } from "../../AttachmentsPreview/AttachmentsPreview.js";
+import { EmojiPicker as de } from "../../EmojiPicker/EmojiPicker.js";
+import { IconEntity as me } from "../../ProjectIcon/ProjectIcon.js";
+import { SmilePlusIcon as ue } from "./smilePlusIcon.js";
+import e from "./ChatInput.module.css.js";
+function he({
+  value: D,
+  onChange: E,
+  onSend: P,
+  onAttach: u,
+  onEmojiSelect: N,
+  onGifSelect: b,
+  placeholder: H = "Add a message...",
+  replyTo: i,
+  editing: h,
+  notice: l,
+  attachments: r,
+  onRemoveAttachment: V,
+  maxLength: G,
+  disabled: c,
+  disableAttachments: v,
+  className: L,
+  style: M
+}) {
+  const x = D !== void 0, [O, T] = Z(""), o = x ? D : O, p = z(null), g = z(null), y = z(r?.length ?? 0);
+  $(() => {
+    const n = r?.length ?? 0;
+    n > y.current && g.current?.focus(), y.current = n;
+  }, [r?.length]);
+  const j = !!i, A = !!h;
+  $(() => {
+    (j || A) && g.current?.focus();
+  }, [j, A]);
+  const f = d(
+    (n) => {
+      x || T(n), E?.(n);
+    },
+    [x, E]
+  ), I = d(() => {
+    const n = o.trim();
+    (n || r && r.length > 0) && (P?.(n), f(""));
+  }, [o, r, P, f]), U = d(
+    (n) => {
+      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), I());
+    },
+    [I]
+  ), q = d(
+    (n) => {
+      const t = me.parse(n)?.emoji ?? n;
+      N ? N(t) : f(o + t);
+    },
+    [N, f, o]
+  ), J = d(
+    (n) => {
+      const t = n.target.files;
+      t && t.length > 0 && u?.(Array.from(t)), p.current && (p.current.value = "");
+    },
+    [u]
+  ), Q = d(
+    (n) => {
+      if (c || v || !u) return;
+      const t = n.clipboardData?.items;
+      if (!t) return;
+      const w = [];
+      for (let k = 0; k < t.length; k++) {
+        const S = t[k];
+        if (S.kind === "file") {
+          const F = S.getAsFile();
+          F && w.push(F);
+        }
+      }
+      w.length > 0 && (n.preventDefault(), u(w));
+    },
+    [c, v, u]
+  ), W = o.trim().length > 0, C = r && r.length > 0, K = C && r.some((n) => "isTemp" in n && n.isTemp), X = W || C && !K, Y = !!(h || i);
+  return /* @__PURE__ */ s(
+    le,
+    {
+      className: `${e.root} ${L || ""}`,
+      style: M,
+      "data-testid": "chat-input",
+      px: "md",
+      pb: "md",
+      children: [
+        !v && /* @__PURE__ */ a(
+          "input",
+          {
+            ref: p,
+            type: "file",
+            multiple: !0,
+            accept: "*/*",
+            className: e.hiddenFileInput,
+            onChange: J,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: e.inputRow, children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: `${e.inputBox} ${Y ? e.withHeader : ""}`,
+              "data-disabled": c || void 0,
+              children: [
+                l ? /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: e.notice,
+                    "data-variant": l.variant ?? "warning",
+                    children: [
+                      l.icon ? /* @__PURE__ */ a("span", { className: e.noticeIcon, children: l.icon }) : null,
+                      /* @__PURE__ */ s("div", { className: e.noticeMain, children: [
+                        /* @__PURE__ */ a("span", { className: e.noticeText, children: l.text }),
+                        l.action ? /* @__PURE__ */ a(
+                          re,
+                          {
+                            size: "compact-xs",
+                            variant: "white",
+                            radius: "xl",
+                            className: e.noticeAction,
+                            onClick: l.action.onClick,
+                            children: l.action.label
+                          }
+                        ) : null
+                      ] }),
+                      l.onDismiss ? /* @__PURE__ */ a(
+                        B,
+                        {
+                          size: "sm",
+                          className: e.noticeDismiss,
+                          onClick: l.onDismiss,
+                          "aria-label": "Dismiss"
+                        }
+                      ) : null
+                    ]
+                  }
+                ) : null,
+                h ? /* @__PURE__ */ s("div", { className: e.header, children: [
+                  /* @__PURE__ */ a("div", { className: e.headerIcon, children: /* @__PURE__ */ a(m, { icon: _, size: 20 }) }),
+                  /* @__PURE__ */ s("div", { className: e.headerBar, "data-variant": "edit", children: [
+                    /* @__PURE__ */ a("div", { className: e.headerTitle, "data-variant": "edit", children: "Edit" }),
+                    /* @__PURE__ */ a("div", { className: e.headerText, children: h.text })
+                  ] }),
+                  /* @__PURE__ */ a(
+                    B,
+                    {
+                      size: "sm",
+                      onClick: h.onCancel,
+                      "aria-label": "Close"
+                    }
+                  )
+                ] }) : i ? /* @__PURE__ */ s("div", { className: e.header, children: [
+                  /* @__PURE__ */ a("div", { className: e.headerIcon, children: /* @__PURE__ */ a(m, { icon: ee, size: 20 }) }),
+                  /* @__PURE__ */ s("div", { className: e.headerBar, "data-variant": "reply", children: [
+                    /* @__PURE__ */ a("div", { className: e.headerTitle, "data-variant": "reply", children: i.senderName }),
+                    /* @__PURE__ */ a("div", { className: e.headerText, children: (() => {
+                      if (i.text && i.text.trim().length > 0) return i.text;
+                      if (i.attachmentName) {
+                        const t = i.attachmentKind === "image" ? ae : i.attachmentKind === "video" ? ne : ie;
+                        return /* @__PURE__ */ s("span", { className: e.headerAttachment, children: [
+                          /* @__PURE__ */ a(m, { icon: t, size: 14 }),
+                          /* @__PURE__ */ a("span", { children: i.attachmentName })
+                        ] });
+                      }
+                      return "";
+                    })() })
+                  ] }),
+                  /* @__PURE__ */ a(
+                    B,
+                    {
+                      size: "sm",
+                      onClick: i.onCancel,
+                      "aria-label": "Close"
+                    }
+                  )
+                ] }) : null,
+                C && /* @__PURE__ */ a("div", { className: e.attachments, children: /* @__PURE__ */ a(
+                  oe,
+                  {
+                    files: r,
+                    mode: "draft",
+                    onRemove: V
+                  }
+                ) }),
+                /* @__PURE__ */ s("div", { className: e.inputArea, children: [
+                  /* @__PURE__ */ a(
+                    de,
+                    {
+                      onChange: q,
+                      showIcons: !1,
+                      showGifs: !!b,
+                      onSelectGif: b,
+                      showRemoveButton: !1,
+                      showRandomButton: !1,
+                      position: "top-start",
+                      closeOnSelect: !1,
+                      withinPortal: !0,
+                      children: /* @__PURE__ */ a(
+                        R,
+                        {
+                          variant: "subtle",
+                          radius: "xl",
+                          size: 34,
+                          color: "gray",
+                          className: e.iconButton,
+                          "aria-label": "Emoji",
+                          disabled: c,
+                          children: /* @__PURE__ */ a(m, { icon: ue, size: 24 })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    ce,
+                    {
+                      ref: g,
+                      classNames: {
+                        root: e.textarea,
+                        input: e.textareaInput
+                      },
+                      w: "100%",
+                      flex: 1,
+                      value: o,
+                      onChange: (n) => f(n.currentTarget.value),
+                      onPaste: Q,
+                      onKeyDown: U,
+                      placeholder: H,
+                      autosize: !0,
+                      minRows: 1,
+                      maxRows: 6,
+                      disabled: c,
+                      variant: "unstyled",
+                      maxLength: G
+                    }
+                  ),
+                  !v && /* @__PURE__ */ a(
+                    R,
+                    {
+                      variant: "subtle",
+                      radius: "xl",
+                      size: 34,
+                      color: "gray",
+                      className: e.iconButton,
+                      "aria-label": "Attach file",
+                      onClick: () => p.current?.click(),
+                      disabled: c,
+                      children: /* @__PURE__ */ a(
+                        m,
+                        {
+                          icon: te,
+                          size: 24,
+                          style: { transform: "rotate(30deg)" }
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            R,
+            {
+              className: e.sendButton,
+              variant: "filled",
+              color: "indigo",
+              radius: 12,
+              size: 50,
+              onClick: I,
+              disabled: c || !X,
+              loading: K,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ a(m, { icon: se, size: 24 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+he.displayName = "ChatInput";
+export {
+  he as ChatInput
+};

package/dist/components/Chat/ChatInput/smilePlusIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconSvgElement } from '@hugeicons/react';
+export declare const SmilePlusIcon: IconSvgElement;
+//# sourceMappingURL=smilePlusIcon.d.ts.map

package/dist/components/Chat/ChatInput/smilePlusIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smilePlusIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatInput/smilePlusIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,cA6C3B,CAAC"}

package/dist/components/Chat/ChatInput/smilePlusIcon.js

@@ -0,0 +1,49 @@
+const o = [
+  [
+    "path",
+    {
+      d: "M21.3 10.5C21.4311 11.1462 21.5 11.8151 21.5 12.5C21.5 18.0228 17.0228 22.5 11.5 22.5C5.97715 22.5 1.5 18.0228 1.5 12.5C1.5 6.97715 5.97715 2.5 11.5 2.5C12.1849 2.5 12.8538 2.56886 13.5 2.70004",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      key: "0"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M19.494 1.5V7.5M22.5 4.494L16.5 4.494",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      key: "1"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M7.5 15.5C8.41212 16.7144 9.86433 17.5 11.5 17.5C13.1357 17.5 14.5879 16.7144 15.5 15.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      key: "2"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M15.125 8.887V9.41649M7.875 8.887V9.41649M8.25 9.25C8.25 8.83579 8.08211 8.5 7.875 8.5C7.66789 8.5 7.5 8.83579 7.5 9.25C7.5 9.66421 7.66789 10 7.875 10C8.08211 10 8.25 9.66421 8.25 9.25ZM15.5 9.25C15.5 8.83579 15.3321 8.5 15.125 8.5C14.9179 8.5 14.75 8.83579 14.75 9.25C14.75 9.66421 14.9179 10 15.125 10C15.3321 10 15.5 9.66421 15.5 9.25Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      key: "3"
+    }
+  ]
+];
+export {
+  o as SmilePlusIcon
+};

package/dist/components/Chat/ChatLayout/ChatLayout.module.css.js

@@ -0,0 +1,15 @@
+const o = "_root_uj82d_1", d = "_sidebar_uj82d_23", t = "_chat_uj82d_45", _ = "_info_uj82d_67", r = "_drawerBody_uj82d_87", s = {
+  root: o,
+  sidebar: d,
+  chat: t,
+  info: _,
+  drawerBody: r
+};
+export {
+  t as chat,
+  s as default,
+  r as drawerBody,
+  _ as info,
+  o as root,
+  d as sidebar
+};

package/dist/components/Chat/ChatLayout/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ChatLayoutProps {
+    sidebar: React.ReactNode;
+    chat: React.ReactNode;
+    info?: React.ReactNode;
+    showInfo?: boolean;
+    sidebarOpened?: boolean;
+    onSidebarClose?: () => void;
+    maxWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ChatLayout({ sidebar, chat, info, showInfo, sidebarOpened, onSidebarClose, maxWidth, className, style, }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatLayout {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,QAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE,eAAe,2CAuBjB;yBAjCe,UAAU"}

package/dist/components/Chat/ChatLayout/index.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Drawer as h } from "@mantine/core";
+import a from "./ChatLayout.module.css.js";
+function p({
+  sidebar: o,
+  chat: r,
+  info: s,
+  showInfo: i,
+  sidebarOpened: d,
+  onSidebarClose: l,
+  maxWidth: c = 1680,
+  className: t,
+  style: m
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${a.root}${t ? ` ${t}` : ""}`,
+      style: { ...m, "--chat-layout-max-width": `${c}px` },
+      children: [
+        /* @__PURE__ */ e("div", { className: a.sidebar, children: o }),
+        /* @__PURE__ */ e(
+          h,
+          {
+            opened: !!d,
+            onClose: () => l?.(),
+            size: 320,
+            withCloseButton: !1,
+            padding: 0,
+            classNames: { body: a.drawerBody },
+            children: o
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: a.chat, children: r }),
+        i && s && /* @__PURE__ */ e("div", { className: a.info, children: s })
+      ]
+    }
+  );
+}
+p.displayName = "ChatLayout";
+export {
+  p as ChatLayout
+};

package/dist/components/Chat/ChatMessage/ChatMessage.module.css.js

@@ -0,0 +1,21 @@
+const t = "_wrapper_1hoj2_1", a = "_avatar_1hoj2_77", e = "_spacer_1hoj2_93", o = "_content_1hoj2_107", s = "_attachmentsWrap_1hoj2_153", n = "_mediaOnlyMeta_1hoj2_243", _ = "_messageRow_1hoj2_285", c = "_hoverActions_1hoj2_295", r = {
+  wrapper: t,
+  avatar: a,
+  spacer: e,
+  content: o,
+  attachmentsWrap: s,
+  mediaOnlyMeta: n,
+  messageRow: _,
+  hoverActions: c
+};
+export {
+  s as attachmentsWrap,
+  a as avatar,
+  o as content,
+  r as default,
+  c as hoverActions,
+  n as mediaOnlyMeta,
+  _ as messageRow,
+  e as spacer,
+  t as wrapper
+};

package/dist/components/Chat/ChatMessage/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CommentComposerTypes } from '../../CommentComposer/types';
+import { type Reaction } from '../MessageReactions';
+import { type MessageDeliveryStatus } from '../MessageStatus';
+export interface ChatMessageProps {
+    children: React.ReactNode;
+    outgoing?: boolean;
+    senderName?: string;
+    senderColor?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    avatarName?: string;
+    avatarSrc?: string;
+    showAvatar?: boolean;
+    timestamp?: string;
+    status?: MessageDeliveryStatus;
+    onRetry?: () => void;
+    retryLabel?: string;
+    replyTo?: {
+        senderName: string;
+        text: React.ReactNode;
+        color?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+        onClick?: () => void;
+    };
+    forwardFrom?: string;
+    edited?: boolean;
+    attachments?: CommentComposerTypes.AnyCommentFile[];
+    reactions?: Reaction[];
+    onReactionToggle?: (emoji: string) => void;
+    groupPosition?: 'single' | 'first' | 'middle' | 'last';
+    onReaction?: (emoji: string) => void;
+    onReply?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onCopy?: () => void;
+    onForward?: () => void;
+    onPin?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
+    onAvatarClick?: () => void;
+    fullWidth?: boolean;
+    noBubble?: boolean;
+    mediaOnly?: boolean;
+    hasMedia?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ChatMessage: React.NamedExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatMessage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatMessage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAOnE,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,qBAAqB,EAAiB,MAAM,kBAAkB,CAAC;AAO7E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE;QACR,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACtB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IACpD,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,oFAmOvB,CAAC"}