@dotss/tictoccroc 0.0.13 → 0.0.15

package/dist/shared/components/ChatKit/InputBar/InputBar.fallback.mjs

@@ -0,0 +1,85 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Flexbox as o, IconButton as l } from "@dotss/ui";
+import p from "@dotss/ui/core/useTheme";
+const n = 24;
+function b() {
+  const {
+    palette: { grey: r, background: t },
+    spacing: i
+  } = p();
+  return /* @__PURE__ */ e(
+    o,
+    {
+      pt: 2,
+      pb: 2,
+      pl: 4,
+      pr: 4,
+      gap: 1,
+      "aria-busy": !0,
+      alignItems: "center",
+      inlineCSS: {
+        cursor: "wait",
+        borderTop: `1px solid ${r[10]}`,
+        backgroundColor: r.white
+      },
+      children: /* @__PURE__ */ a(
+        o,
+        {
+          alignItems: "center",
+          pt: 2,
+          pb: 2,
+          pl: 4,
+          flexGrow: 1,
+          inlineCSS: {
+            position: "relative",
+            paddingRight: i.content(12),
+            border: `1px solid ${r[10]}`,
+            borderRadius: 20,
+            backgroundColor: t.primary
+          },
+          children: [
+            /* @__PURE__ */ e(
+              o,
+              {
+                tag: "textarea",
+                readOnly: !0,
+                flexGrow: 1,
+                disabled: !0,
+                inlineCSS: {
+                  cursor: "wait",
+                  height: n,
+                  lineHeight: `${n}px`,
+                  border: "none",
+                  outline: "none",
+                  backgroundColor: "transparent",
+                  resize: "none",
+                  scrollbarWidth: "none",
+                  "&::-webkit-scrollbar": {
+                    display: "none"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ e(
+              l,
+              {
+                name: "ArrowUpwardLine",
+                variant: "filled",
+                disabled: !0,
+                inlineCSS: {
+                  cursor: "wait !important",
+                  position: "absolute",
+                  right: 0,
+                  bottom: 0
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  b as default
+};

package/dist/shared/components/ChatKit/InputBar/InputBar.mjs

@@ -0,0 +1,130 @@
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { useState as S, useRef as h, useImperativeHandle as y, useEffect as k } from "react";
+import { Flexbox as l, IconButton as I } from "@dotss/ui";
+import $ from "@dotss/ui/core/useTheme";
+const e = 24;
+function E({ wrapperProps: i, inlineCSS: g, onSend: a, value: t, ref: u, ...c }) {
+  const {
+    palette: { background: b, grey: s },
+    spacing: o
+  } = $(), [m, x] = S(e), r = h(null), d = h(null);
+  y(u, () => d.current);
+  const f = () => {
+    !t || c.disabled || a == null || a();
+  };
+  return k(() => {
+    if (r.current) {
+      r.current.style.height = `${e}px`;
+      const p = r.current.scrollHeight, H = e * 3;
+      x(Math.min(p, H));
+    }
+  }, [t]), /* @__PURE__ */ n(
+    l,
+    {
+      pt: 2,
+      pb: 2,
+      pl: 4,
+      pr: 4,
+      gap: 1,
+      alignItems: "center",
+      ...i,
+      inlineCSS: {
+        borderTop: `1px solid ${s[10]}`,
+        backgroundColor: s.white,
+        ...i == null ? void 0 : i.inlineCSS
+      },
+      children: /* @__PURE__ */ C(
+        l,
+        {
+          alignItems: "center",
+          pt: 2,
+          pb: 2,
+          pl: 4,
+          flexGrow: 1,
+          inlineCSS: {
+            position: "relative",
+            paddingRight: o.content(12),
+            border: `1px solid ${s[10]}`,
+            borderRadius: 20,
+            backgroundColor: b.primary
+          },
+          children: [
+            /* @__PURE__ */ n(
+              l,
+              {
+                ref: r,
+                tag: "textarea",
+                value: t,
+                maxLength: c.maxLength,
+                readOnly: !0,
+                "aria-hidden": !0,
+                inlineCSS: {
+                  width: `calc(100% - ${o.content(16)}px)`,
+                  minHeight: e,
+                  maxHeight: e,
+                  lineHeight: `${e}px`,
+                  border: "none",
+                  outline: "none",
+                  position: "absolute",
+                  top: o.content(2),
+                  left: o.content(4),
+                  visibility: "hidden"
+                }
+              }
+            ),
+            /* @__PURE__ */ n(
+              l,
+              {
+                ref: d,
+                tag: "textarea",
+                flexGrow: 1,
+                value: t,
+                "aria-label": "메시지 입력",
+                ...c,
+                inlineCSS: {
+                  height: m,
+                  lineHeight: `${e}px`,
+                  border: "none",
+                  outline: "none",
+                  backgroundColor: "transparent",
+                  resize: "none",
+                  scrollbarWidth: "none",
+                  "&::-webkit-scrollbar": {
+                    display: "none"
+                  },
+                  ...g
+                }
+              }
+            ),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                onClick: f,
+                style: {
+                  position: "absolute",
+                  right: 0,
+                  bottom: 0
+                },
+                children: /* @__PURE__ */ n(
+                  I,
+                  {
+                    name: "ArrowUpwardLine",
+                    variant: "filled",
+                    disabled: !t,
+                    "aria-label": "전송",
+                    inlineCSS: {
+                      pointerEvents: "none"
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  E as default
+};

package/dist/shared/components/ChatKit/InputBar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as InputBar, InputBarProps } from './InputBar';
+export { default as InputBarFallback } from './InputBar.fallback';
+export type { InputBarProps };
+export default InputBar;

package/dist/shared/components/ChatKit/InputBar/index.mjs

@@ -0,0 +1,6 @@
+import r from "./InputBar.mjs";
+import { default as p } from "./InputBar.fallback.mjs";
+export {
+  p as InputBarFallback,
+  r as default
+};

package/dist/shared/components/ChatKit/Message/Message.d.ts

@@ -0,0 +1,40 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export type MessageStatus = 'SUCCEEDED' | 'PENDING' | 'FAILED';
+export type BaseMessageProps = {
+    id: string | number;
+    mine: boolean;
+    avatarUrl?: string;
+    unreadUserCount: number;
+    content: string;
+    status: MessageStatus;
+    regDatetime: string;
+    showAvatar?: boolean;
+    showTime?: boolean;
+    openMenu?: never;
+    onCloseMenu?: never;
+    onClickMenu?: never;
+    onView?: () => void;
+    onResend?: never;
+    onDelete?: never;
+    onViewAll?: () => void;
+} | {
+    id: string | number;
+    mine: boolean;
+    avatarUrl?: never;
+    unreadUserCount?: never;
+    status: Extract<MessageStatus, 'FAILED'>;
+    content: string;
+    regDatetime?: never;
+    showAvatar?: never;
+    showTime?: never;
+    openMenu?: boolean;
+    onCloseMenu?: () => void;
+    onClickMenu?: () => void;
+    onView?: never;
+    onResend?: () => void;
+    onDelete?: () => void;
+    onViewAll?: () => void;
+};
+export type MessageProps = Omit<FlexboxProps, 'id' | 'title'> & BaseMessageProps;
+declare function Message({ id, content, mine, avatarUrl, unreadUserCount, regDatetime, status, onView, openMenu, onCloseMenu, onClickMenu, onResend, onDelete, onViewAll, showAvatar, showTime, ref, inlineCSS, ...props }: MessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Message;

package/dist/shared/components/ChatKit/Message/Message.fallback.d.ts

@@ -0,0 +1,9 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface MessageFallbackProps extends FlexboxProps {
+    mine: boolean;
+    showAvatar?: boolean;
+    showTime?: boolean;
+    width?: number;
+}
+declare function MessageFallback({ mine, showAvatar, showTime, width, inlineCSS, ...props }: MessageFallbackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default MessageFallback;

package/dist/shared/components/ChatKit/Message/Message.fallback.mjs

@@ -0,0 +1,59 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Flexbox as l, Skeleton as n } from "@dotss/ui";
+import h from "@dotss/ui/core/useTheme";
+function x({
+  mine: e = !1,
+  showAvatar: r = !1,
+  showTime: o = !1,
+  width: s = 200,
+  inlineCSS: a,
+  ...f
+}) {
+  const { spacing: d } = h();
+  return /* @__PURE__ */ t(
+    l,
+    {
+      alignItems: "flex-end",
+      flexDirection: e ? "row-reverse" : "row",
+      pl: 4,
+      pr: 4,
+      gap: 1,
+      ...f,
+      inlineCSS: {
+        overflowAnchor: "none",
+        ...a
+      },
+      children: [
+        /* @__PURE__ */ t(l, { alignItems: "flex-start", gap: 2.5, children: [
+          !e && r && /* @__PURE__ */ i(n, { width: 32, height: 32, borderRadius: 200 }),
+          /* @__PURE__ */ i(
+            n,
+            {
+              width: s,
+              height: 38,
+              borderRadius: 12,
+              inlineCSS: {
+                marginLeft: !e && r ? d.content(10.5) : void 0
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i(
+          l,
+          {
+            flexDirection: "column",
+            alignItems: e ? "flex-end" : "flex-start",
+            inlineCSS: {
+              visibility: o ? "visible" : "hidden",
+              whiteSpace: "nowrap"
+            },
+            children: /* @__PURE__ */ i(n, { width: 38, height: 12 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  x as default
+};

package/dist/shared/components/ChatKit/Message/Message.mjs

@@ -0,0 +1,237 @@
+import { jsxs as t, jsx as r, Fragment as O } from "react/jsx-runtime";
+import { useRef as b, useImperativeHandle as q, useEffect as x } from "react";
+import { Flexbox as s, Typography as v, Button as J, Icon as I, Menu as K, MenuBlock as $, CircularProgressIndicator as Q } from "@dotss/ui";
+import W from "@dotss/ui/core/useTheme";
+import { useCheckHoverPossible as X } from "@dotss/ui/hooks";
+import { MenuButton as Y } from "@dotss/ui/Menu";
+import Z from "dayjs";
+import _ from "../../Image/Image.mjs";
+import V from "../../../hooks/useInView/useInView.mjs";
+function ar({
+  id: C,
+  content: p = "",
+  mine: e = !1,
+  avatarUrl: h = "",
+  unreadUserCount: f = 0,
+  regDatetime: z,
+  status: n,
+  onView: c,
+  openMenu: g,
+  onCloseMenu: i,
+  onClickMenu: B,
+  onResend: u,
+  onDelete: S,
+  onViewAll: D,
+  showAvatar: k,
+  showTime: F,
+  ref: R,
+  inlineCSS: T,
+  ...j
+}) {
+  const {
+    palette: { brand: y, grey: o, etc: A },
+    spacing: w
+  } = W(), { isHoverPossible: G } = X(), l = b(null), E = b(null), m = b(null);
+  q(R, () => l.current);
+  const L = V(l), N = 300, d = n === "FAILED", P = p.length > N, H = (a) => {
+    a === "resend" ? (i == null || i(), m.current = setTimeout(() => {
+      u == null || u();
+    }, 200)) : a === "delete" && (i == null || i(), m.current = setTimeout(() => {
+      S == null || S();
+    }, 200));
+  };
+  return x(() => {
+    L && (c == null || c());
+  }, [L, c]), x(() => {
+    var a;
+    d && ((a = l == null ? void 0 : l.current) == null || a.scrollIntoView());
+  }, [d]), x(() => () => {
+    m.current && clearTimeout(m.current);
+  }, []), /* @__PURE__ */ t(
+    s,
+    {
+      ref: l,
+      alignItems: "flex-end",
+      flexDirection: e ? "row-reverse" : "row",
+      pl: 4,
+      pr: 4,
+      gap: 1,
+      "aria-busy": n === "PENDING",
+      ...j,
+      inlineCSS: {
+        cursor: n === "PENDING" ? "wait" : "default",
+        overflowAnchor: "none",
+        ...T
+      },
+      children: [
+        /* @__PURE__ */ t(s, { alignItems: "flex-start", gap: 2.5, children: [
+          !e && k && h && /* @__PURE__ */ r(
+            _,
+            {
+              src: h,
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              alt: "째깍악어 선생님 심볼",
+              role: "presentation",
+              style: {
+                objectFit: "cover"
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            s,
+            {
+              pt: 2,
+              pb: 2,
+              pl: 3,
+              pr: 3,
+              ml: !e && !k && h ? 10.5 : void 0,
+              flexDirection: "column",
+              gap: 2.5,
+              inlineCSS: {
+                borderRadius: 12,
+                backgroundColor: e ? y.primary.pageControl : o[10]
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  v,
+                  {
+                    tag: "p",
+                    variant: "b3R",
+                    textAlign: e ? "right" : "left",
+                    inlineCSS: {
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-all"
+                    },
+                    children: P ? p.slice(0, N) + "..." : p
+                  }
+                ),
+                P && /* @__PURE__ */ r(
+                  J,
+                  {
+                    variant: "text",
+                    size: "xSmall",
+                    endAdornment: /* @__PURE__ */ r(I, { name: "ChevronRightLine" }),
+                    onClick: D,
+                    inlineCSS: {
+                      marginLeft: "auto"
+                    },
+                    children: "전체보기"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ t(O, { children: [
+          /* @__PURE__ */ t(
+            Y,
+            {
+              ref: E,
+              isMenuOpen: !!g,
+              menuId: `message-${C}-menu`,
+              onClick: B,
+              size: "xSmall",
+              inlineCSS: {
+                padding: w.content(0.5),
+                gap: w.content(0.5),
+                borderRadius: 200,
+                backgroundColor: g ? o[10] : "transparent",
+                cursor: "pointer",
+                ...G && {
+                  "&:hover": {
+                    backgroundColor: `${o[10]} !important`
+                  }
+                },
+                "&:active": {
+                  backgroundColor: `${o[10]} !important`
+                }
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  I,
+                  {
+                    name: "ResetLine",
+                    size: "xSmall",
+                    color: "grey.70",
+                    inlineCSS: {
+                      color: `${o[70]} !important`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  I,
+                  {
+                    name: "CloseLine",
+                    size: "xSmall",
+                    color: "etc.red",
+                    inlineCSS: {
+                      color: `${A.red} !important`
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            K,
+            {
+              id: `message-${C}-menu`,
+              anchorRef: E,
+              open: g,
+              onClose: i,
+              onChange: H,
+              width: 160,
+              placement: "bottom-left",
+              children: [
+                /* @__PURE__ */ r($, { value: "resend", children: "재전송" }),
+                /* @__PURE__ */ r($, { value: "delete", children: "삭제" })
+              ]
+            }
+          )
+        ] }),
+        !d && /* @__PURE__ */ t(
+          s,
+          {
+            flexDirection: "column",
+            alignItems: e ? "flex-end" : "flex-start",
+            inlineCSS: {
+              visibility: F ? "visible" : "hidden",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              e && f > 0 && n === "SUCCEEDED" && /* @__PURE__ */ r(
+                v,
+                {
+                  tag: "span",
+                  variant: "c5B",
+                  "aria-hidden": !0,
+                  inlineCSS: {
+                    color: y.primary.text
+                  },
+                  children: f
+                }
+              ),
+              e && f > 0 && n === "PENDING" && /* @__PURE__ */ r(
+                Q,
+                {
+                  size: "small",
+                  loop: !0,
+                  inlineCSS: {
+                    width: 12,
+                    height: 12
+                  }
+                }
+              ),
+              /* @__PURE__ */ r(v, { tag: "span", variant: "c5R", color: "etc.dimmed01", children: Z(z).format("A h:mm") })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ar as default
+};

package/dist/shared/components/ChatKit/Message/Message.utils.d.ts

@@ -0,0 +1,16 @@
+import { BaseMessageProps, MessageStatus } from '.';
+export declare function markMessageGroupBoundaries<T extends {
+    sender?: {
+        userId: number;
+    } | null;
+    id: number;
+    status: MessageStatus;
+}>(messages: [string, T[]][]): [
+    string,
+    (T & {
+        isFirstInGroup: boolean;
+        isLastInGroup: boolean;
+        status: MessageStatus;
+    })[]
+][];
+export declare function getMessageLabel({ mine, status, unreadUserCount, content, regDatetime }: Pick<BaseMessageProps, 'mine' | 'status' | 'unreadUserCount' | 'content' | 'regDatetime'>): string;

package/dist/shared/components/ChatKit/Message/Message.utils.mjs

@@ -0,0 +1,34 @@
+import f from "dayjs";
+function I(i) {
+  return i.map(([a, s]) => {
+    var d;
+    const n = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map();
+    for (let t = 0; t < s.length; t += 1) {
+      const o = s[t], r = (d = o.sender) == null ? void 0 : d.userId;
+      r != null && (n.has(r) || n.set(r, o.id), e.set(r, o.id));
+    }
+    const u = new Set(n.values()), c = new Set(e.values());
+    return [
+      a,
+      s.map((t) => ({
+        ...t,
+        // 역방향 스크롤에 따른 역순 처리
+        isFirstInGroup: c.has(t.id),
+        isLastInGroup: u.has(t.id)
+      }))
+    ];
+  });
+}
+function m({
+  mine: i,
+  status: a,
+  unreadUserCount: s,
+  content: n,
+  regDatetime: e
+}) {
+  return `${i ? "나" : "상대방"}, ${n}, ${s && s > 0 ? "읽지 않음" : "읽음"}, ${a === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${f(e).format("YYYY년 MM월 DD일 A h:mm")}`;
+}
+export {
+  m as getMessageLabel,
+  I as markMessageGroupBoundaries
+};

package/dist/shared/components/ChatKit/Message/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Message, BaseMessageProps, MessageProps, MessageStatus } from './Message';
+export { default as MessageFallback, type MessageFallbackProps } from './Message.fallback';
+export { markMessageGroupBoundaries, getMessageLabel } from './Message.utils';
+export type { BaseMessageProps, MessageProps, MessageStatus };
+export default Message;

package/dist/shared/components/ChatKit/Message/index.mjs

@@ -0,0 +1,9 @@
+import a from "./Message.mjs";
+import { default as o } from "./Message.fallback.mjs";
+import { getMessageLabel as f, markMessageGroupBoundaries as g } from "./Message.utils.mjs";
+export {
+  o as MessageFallback,
+  a as default,
+  f as getMessageLabel,
+  g as markMessageGroupBoundaries
+};

package/dist/shared/components/ChatKit/Seperator/Seperator.d.ts

@@ -0,0 +1,6 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface SeperatorProps extends FlexboxProps {
+    date: string;
+}
+declare function Seperator({ date, ...props }: SeperatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Seperator;

package/dist/shared/components/ChatKit/Seperator/Seperator.mjs

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Flexbox as o, Typography as i } from "@dotss/ui";
+import n from "@dotss/ui/core/useTheme";
+import p from "dayjs";
+function f({ date: t, ...e }) {
+  const {
+    palette: { grey: a }
+  } = n();
+  return /* @__PURE__ */ r(o, { role: "separator", ...e, children: /* @__PURE__ */ r(
+    o,
+    {
+      pt: 0.5,
+      pb: 0.5,
+      pl: 2,
+      pr: 2,
+      inlineCSS: {
+        maxWidth: "fit-content",
+        marginLeft: "auto",
+        marginRight: "auto",
+        borderRadius: 20,
+        backgroundColor: a[10]
+      },
+      children: /* @__PURE__ */ r(i, { tag: "p", variant: "c3M", color: "grey.70", children: p(t).format("YYYY년 M월 D일 dddd") })
+    }
+  ) });
+}
+export {
+  f as default
+};

package/dist/shared/components/ChatKit/Seperator/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Seperator, SeperatorProps } from './Seperator';
+export type { SeperatorProps };
+export default Seperator;

package/dist/shared/components/ChatKit/Seperator/index.mjs

@@ -0,0 +1,4 @@
+import e from "./Seperator.mjs";
+export {
+  e as default
+};