@blocklet/discuss-kit-ux 2.4.36 → 2.4.38

package/dist/components/blog/cover-image.mjs

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, IconButton, Skeleton } from "@mui/material";
+import UploadIcon from "virtual:icons/material-symbols/upload";
+import { useState } from "react";
+import { DeleteOutlineOutlined as DeleteOutlineOutlinedIcon } from "@mui/icons-material";
+import { UploaderTrigger, getUploadedImageUrl } from "../uploader/index.mjs";
+export function CoverImage({
+  url,
+  aspectRatio = 16 / 9,
+  width = 320,
+  sx,
+  fetchpriority = "auto",
+  loading = "eager",
+  shadow = false,
+  fallback,
+  onClick,
+  ...rest
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: [
+        {
+          height: 0,
+          pt: `${100 / aspectRatio}%`,
+          overflow: "hidden",
+          position: "relative",
+          borderRadius: 1,
+          ...shadow && { boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px" },
+          // https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari
+          transform: "translateZ(0)"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...rest,
+      children: [
+        (!loaded || !url) && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%"
+            }
+          }
+        ),
+        !!url && // add box because img can't add :after
+        /* @__PURE__ */ jsx(Box, { onClick: () => onClick?.(), sx: { cursor: onClick ? "pointer" : "inherit" }, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url ? getUploadedImageUrl(url, width) : "",
+            loading,
+            fetchpriority,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "center",
+              visibility: loaded ? "visible" : "hidden"
+            },
+            alt: "cover",
+            onLoad: () => setLoaded(true),
+            onError: () => setErrored(true)
+          }
+        ) }),
+        (!url || errored) && /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: () => onClick?.(),
+            sx: {
+              cursor: onClick ? "pointer" : "inherit",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%"
+            },
+            children: fallback
+          }
+        )
+      ]
+    }
+  );
+}
+export function CoverImageUpload({ url, onChange, width, ...rest }) {
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsxs(
+    UploaderTrigger,
+    {
+      onChange: ({ response }) => {
+        const filename = response?.data?.filename;
+        onChange(`/${filename}`);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: url ? "none" : "block",
+              position: "relative",
+              height: 0,
+              pt: "56%",
+              overflow: "hidden",
+              borderRadius: 1,
+              bgcolor: "grey.300",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  color: "grey.500"
+                },
+                children: /* @__PURE__ */ jsx(UploadIcon, { style: { fontSize: 24 } })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: url ? "block" : "none",
+              position: "relative",
+              cursor: "pointer",
+              "&:hover .cover-image-delete": { display: "block" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(CoverImage, { url, width }),
+              /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 8, right: 8, display: "none" }, className: "cover-image-delete", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  color: "inherit",
+                  sx: { ml: 1, bgcolor: "grey.100", borderRadius: 1, "&:hover": { bgcolor: "grey.200" } },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onChange(null);
+                  },
+                  children: /* @__PURE__ */ jsx(DeleteOutlineOutlinedIcon, { sx: { fontSize: 18, color: "grey.700" } })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}

package/dist/components/blog/index.mjs

@@ -0,0 +1,4 @@
+export { default as BlogList, BlogCard } from "./blog-list.mjs";
+export { PostPermaLink } from "./permalink.mjs";
+export { getBlogLink } from "./blog-link.mjs";
+export * from "./cover-image.mjs";

package/dist/components/blog/permalink.d.ts

@@ -1,8 +1,9 @@
-import { BoxProps } from '@mui/material';
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
 interface Props extends Omit<BoxProps, 'onChange'> {
     slug: string;
     onChange: (slug: string) => void;
     prefix?: string;
 }
-export declare function PostPermaLink({ slug, onChange, prefix, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function PostPermaLink({ slug, onChange, prefix, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/blog/permalink.mjs

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, InputBase, IconButton } from "@mui/material";
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material";
+import { joinURL } from "ufo";
+import { discussKitMountPoint, copy } from "../utils.mjs";
+const baseURL = joinURL(window.location.origin, discussKitMountPoint || "");
+const SLUG_VALIDATION_REGEX = /^[a-zA-Z0-9-]+$/;
+export function PostPermaLink({ slug, onChange, prefix = "blog", ...rest }) {
+  return /* @__PURE__ */ jsx(Box, { ...rest, className: "blog-permalink-container", children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "form",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        border: "1px solid #bbb",
+        borderRadius: 1,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              width: 140,
+              alignSelf: "stretch",
+              px: 1.25,
+              bgcolor: "grey.100"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "input",
+                value: joinURL(baseURL, prefix),
+                readOnly: true,
+                sx: {
+                  width: 1,
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  border: 0,
+                  bgcolor: "inherit",
+                  outline: "none",
+                  fontSize: 14,
+                  color: "text.secondary"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputBase,
+          {
+            value: slug,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (event) => {
+              if (!SLUG_VALIDATION_REGEX.test(event.key)) {
+                event.preventDefault();
+              }
+            },
+            sx: { ml: 0.5, flex: 1, bgcolor: "transparent", input: { py: 1, fontSize: 14 } }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: { px: 1 },
+            onClick: () => {
+              copy(joinURL(baseURL, prefix, slug));
+            },
+            children: /* @__PURE__ */ jsx(ContentCopyIcon, { sx: { fontSize: 18 } })
+          }
+        )
+      ]
+    }
+  ) });
+}

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

@@ -1,4 +1,4 @@
-import { User } from '../../types';
+import type { User } from '../../types';
 export interface BlogPost {
     id: string;
     slug: string;

package/dist/components/button-group/button-group.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface ButtonItem {
     id: string;
     title: string;
@@ -13,5 +14,5 @@ interface Props {
     allButton?: boolean;
     urlParams?: boolean;
 }
-export default function ButtonGroup({ data, theme, urlName, defaultButton, urlParams, allButton, onSelectTab, type, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ButtonGroup({ data, theme, urlName, defaultButton, urlParams, allButton, onSelectTab, type, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/button-group/button-group.mjs

@@ -0,0 +1,195 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Box, Button } from "@mui/material";
+import { css } from "@emotion/css";
+import { useEffect, useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { BorderColorOutlined as BorderColorOutlinedIcon } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { AccessControl } from "../authz/index.mjs";
+export default function ButtonGroup({
+  data,
+  theme = "dark",
+  urlName,
+  defaultButton,
+  urlParams = true,
+  allButton = true,
+  onSelectTab,
+  type,
+  ...rest
+}) {
+  const { t } = useLocaleContext();
+  const downSm = useMediaQuery((mainTheme) => mainTheme.breakpoints.down("sm"));
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { boardId } = useParams();
+  const selectedString = searchParams.get(urlName);
+  const dataWithDefault = defaultButton && data?.length > 0 ? [defaultButton, ...data] : data;
+  const selectedArray = selectedString !== null && selectedString !== "" ? selectedString.split(",") : dataWithDefault?.map((item) => item.id);
+  const [selectTab, setSelectTab] = useState(urlParams ? selectedArray : [boardId]);
+  const [selectAll, setSelectAll] = useState(false);
+  const updateUrl = (url, newSelectTab) => {
+    const formatNewSelectTab = newSelectTab.filter(Boolean);
+    if (urlParams) {
+      setSearchParams({
+        ...searchParams,
+        [url]: formatNewSelectTab.join(",")
+      });
+    } else if (formatNewSelectTab.length === 0) {
+      navigate(`/${type}`);
+    } else {
+      navigate(`/${type}/boards/${formatNewSelectTab.join(",")}`);
+    }
+  };
+  const handleClick = (item) => {
+    setSelectTab([item.id]);
+    updateUrl(urlName, [item.id]);
+  };
+  const handleSelectAll = () => {
+    setSelectAll((prevSelectAll) => {
+      const newSelectAll = !prevSelectAll;
+      const newSelectTab = newSelectAll ? dataWithDefault?.map((item) => item.id) : [];
+      setSelectTab(newSelectTab);
+      updateUrl(urlName, [""]);
+      return newSelectAll;
+    });
+  };
+  useEffect(() => {
+    if (JSON.stringify(selectedArray) !== JSON.stringify(selectTab)) {
+      if (urlParams) {
+        setSelectTab(selectedArray || []);
+      } else if (boardId) {
+        if (data?.find((item) => item.id === boardId) || boardId === "default") {
+          setSelectTab([boardId]);
+        } else {
+          navigate(`/${type}/`);
+        }
+      } else {
+        setSelectTab(dataWithDefault?.map((item) => item.id));
+      }
+    }
+  }, [data, boardId]);
+  useEffect(() => {
+    if (urlParams) {
+      if (selectedString === null || selectedString === "") {
+        setSelectAll(true);
+      } else if (selectTab?.length === dataWithDefault?.length) {
+        setSelectAll(true);
+      } else {
+        setSelectAll(false);
+      }
+    } else if (boardId) {
+      setSelectAll(false);
+    } else {
+      setSelectAll(true);
+    }
+    if (onSelectTab) onSelectTab(selectTab);
+  }, [selectTab, selectedArray, boardId]);
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    /* @__PURE__ */ jsxs(Box, { className: Group, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            bgcolor: theme === "dark" ? "#F9FAFB" : "",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            borderRadius: "99999px",
+            borderTopRightRadius: downSm ? 0 : "99999px",
+            borderBottomRightRadius: downSm ? 0 : "99999px",
+            overflow: "scroll",
+            whiteSpace: "nowrap",
+            mr: 2
+          },
+          children: [
+            allButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSelectAll,
+                sx: {
+                  backgroundColor: selectAll ? "#ffffff" : "",
+                  color: selectAll ? "#030712" : "#4b5563",
+                  border: selectAll ? "1px solid #e5e7eb!important" : "1px solid transparent"
+                },
+                ...rest,
+                children: t("all")
+              }
+            ),
+            dataWithDefault?.map((item, index) => {
+              const isActive = urlParams ? !selectAll && selectTab?.includes(item.id) : boardId === item.id;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => handleClick(item),
+                  sx: {
+                    ...isActive && {
+                      backgroundColor: "#ffffff",
+                      color: "#030712",
+                      border: "1px solid #e5e7eb!important"
+                    }
+                  },
+                  ...rest,
+                  children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    item?.icon,
+                    " ",
+                    item?.title
+                  ] })
+                },
+                index
+              );
+            })
+          ]
+        }
+      ),
+      urlName !== "type" && /* @__PURE__ */ jsx(AccessControl, { roles: ["admin", "owner"], children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          component: Link,
+          color: "inherit",
+          size: "small",
+          to: `/boards?type=${type}`,
+          sx: { color: "grey.500" },
+          children: /* @__PURE__ */ jsx(BorderColorOutlinedIcon, { sx: { fontSize: 16 } })
+        }
+      ) })
+    ] })
+  );
+}
+const Group = css`
+  display: flex;
+  flex-direction: row;
+  .MuiButtonBase-root {
+    border-radius: 9999px;
+    color: #4b5563;
+    margin: 5px 8px 5px 5px;
+    padding: 5px 12px;
+    line-height: 22px;
+    font-size: 13px;
+    border: 1px solid transparent;
+  }
+
+  .MuiButtonBase-root:last-of-type {
+    margin-right: 0;
+  }
+
+  .MuiButtonBase-root:first-of-type {
+    margin-left: 0;
+  }
+
+  .MuiButtonBase-root:hover {
+    background-color: #ffffff;
+    color: #030712;
+    border: 1px solid #e5e7eb;
+  }
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+
+  *::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+`;

package/dist/components/button-group/index.mjs

@@ -0,0 +1 @@
+export { default as ButtonGroup } from "./button-group.mjs";

package/dist/components/chat/channel-group.d.ts

@@ -1,8 +1,9 @@
-import { Chat } from './types';
+/// <reference types="react" />
+import type { Chat } from './types';
 interface Props {
     chat: Chat;
     size?: 'sm' | 'normal';
     children?: React.ReactNode;
 }
-export default function ChannelGroup({ size, chat, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ChannelGroup({ size, chat, children, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/chat/channel-group.mjs

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { amber } from "@mui/material/colors";
+import UsersGroupIcon from "virtual:icons/tabler/users-group";
+export default function ChannelGroup({ size = "normal", chat, children, ...rest }) {
+  const sm = size === "sm";
+  const iconSize = sm ? 40 : 48;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          color: "#fff",
+          bgcolor: "rgba(254, 244, 199, 1)",
+          width: iconSize,
+          height: iconSize,
+          p: 0.8,
+          borderRadius: "100%"
+        },
+        children: /* @__PURE__ */ jsx(Box, { component: UsersGroupIcon, sx: { fontSize: 16, color: amber[700], width: iconSize } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            lineHeight: 1.5,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold", wordBreak: "break-word" }, children: chat?.name })
+        }
+      ),
+      children && /* @__PURE__ */ jsx(Box, { children })
+    ] })
+  ] });
+}

package/dist/components/chat/chat-client.d.ts

@@ -1,6 +1,6 @@
 import { Emitter } from 'mitt';
-import { User } from '../../types';
-import { Chat, Message, Channel, ChannelUpdatePayload } from './types';
+import type { User } from '../../types';
+import type { Chat, Message, Channel, ChannelUpdatePayload } from './types';
 type Events = {
     message: {
         chatId: string;

package/dist/components/chat/chat-client.mjs

@@ -0,0 +1,33 @@
+import mitt from "mitt";
+export default class ChatClient {
+  // @ts-ignore FIXME: @wangqi
+  emitter = mitt();
+  // init: () => ChatInitialState;
+  async init() {
+    const chats = await this.fetchChats();
+    return { chats };
+  }
+  destroy() {
+    this.emitter.all.clear();
+  }
+  onMessage(callback) {
+    this.emitter.on("message", callback);
+    return () => this.emitter.off("message", callback);
+  }
+  onJoinChannel(callback) {
+    this.emitter.on("joinChannel", callback);
+    return () => this.emitter.off("joinChannel", callback);
+  }
+  onLeaveChannel(callback) {
+    this.emitter.on("leaveChannel", callback);
+    return () => this.emitter.off("leaveChannel", callback);
+  }
+  onDeleteChannel(callback) {
+    this.emitter.on("deleteChannel", callback);
+    return () => this.emitter.off("deleteChannel", callback);
+  }
+  onUpdateLastAckTime(callback) {
+    this.emitter.on("updateLastAckTime", callback);
+    return () => this.emitter.off("updateLastAckTime", callback);
+  }
+}

package/dist/components/chat/chat-header-addon.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 interface Props {
 }
-export default function ChatHeaderAddon({ ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default function ChatHeaderAddon({ ...rest }: Props): import("react").JSX.Element | null;
 export {};

package/dist/components/chat/chat-header-addon.mjs

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import { Badge } from "@mui/material";
+import { AddonButton } from "@arcblock/ux/lib/Header/addon-button";
+import MessageCircleIcon from "virtual:icons/tabler/message-circle";
+import { useUnreadNotification } from "./unread-notification.mjs";
+import preferences from "../../preferences.mjs";
+export default function ChatHeaderAddon({ ...rest }) {
+  const { unread, unreadMessageCount } = useUnreadNotification();
+  if (!preferences.enableNotificationBadge || !preferences.chatEnabled) {
+    return null;
+  }
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsx(
+      AddonButton,
+      {
+        size: "medium",
+        icon: /* @__PURE__ */ jsx(Badge, { color: "error", invisible: !unread, badgeContent: unreadMessageCount, children: /* @__PURE__ */ jsx(MessageCircleIcon, {}) }),
+        ...rest,
+        component: Link,
+        to: "/chat"
+      }
+    )
+  );
+}

package/dist/components/chat/chat-in-wallet.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface ChatProps {
     sx: SxProps;
 }
-export default function ChatInWallet({ sx, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatInWallet({ sx, ...rest }: ChatProps): import("react").JSX.Element;
 export {};