@blocklet/discuss-kit-ux 2.4.36 → 2.4.37

package/dist/components/avatars/system-user.mjs

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import DID from "@arcblock/ux/lib/DID";
+import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
+export default function SystemUser({
+  name = "System",
+  showDidAddress = true,
+  showIcon = true,
+  size = "normal",
+  icon,
+  ...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: [
+    showIcon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          flex: "0 0 auto",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: iconSize,
+          height: iconSize,
+          p: 1,
+          color: "#fff",
+          bgcolor: "secondary.main",
+          borderRadius: "100%"
+        },
+        children: icon || /* @__PURE__ */ jsx(NotificationsActiveOutlinedIcon, { sx: { fontSize: size === "sm" ? 16 : 18 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            lineHeight: 1.5,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name })
+        }
+      ),
+      showDidAddress && /* @__PURE__ */ jsx(
+        DID,
+        {
+          style: { lineHeight: 1.5, minHeight: 20, maxWidth: 200 },
+          size: 14,
+          did: window.blocklet.appId,
+          copyable: false,
+          compact: true
+        }
+      )
+    ] })
+  ] });
+}

package/dist/components/back.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps, ButtonProps } from '@mui/material';
 interface BackProps {
     url?: string;
@@ -6,5 +7,5 @@ interface BackProps {
     sx?: SxProps;
     icon?: React.ReactNode;
 }
-export declare function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }: BackProps & ButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }: BackProps & ButtonProps): import("react").JSX.Element | null;
 export {};

package/dist/components/back.mjs

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocation, useNavigate } from "react-router-dom";
+import { ArrowBackIos as ArrowBackIosIcon } from "@mui/icons-material";
+import { Button } from "@mui/material";
+import { isInArcSphere } from "./arcsphere/index.mjs";
+export function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const mergedSx = [{}, ...Array.isArray(sx) ? sx : [sx]];
+  if (isInArcSphere) {
+    return null;
+  }
+  const handleClick = () => {
+    if (url) {
+      navigate(url, { replace: true });
+    } else if (location.state?.from) {
+      navigate(-1);
+    } else {
+      navigate(fallbackUrl || "/");
+    }
+  };
+  icon = icon || /* @__PURE__ */ jsx(ArrowBackIosIcon, { style: { fontSize: 13 } });
+  if (iconOnly) {
+    mergedSx.push({ minWidth: "initial", py: 1 });
+    return /* @__PURE__ */ jsx(Button, { onClick: handleClick, variant: "text", color: "inherit", sx: mergedSx, ...rest, children: icon });
+  }
+  return /* @__PURE__ */ jsx(Button, { onClick: handleClick, variant: "outlined", color: "primary", startIcon: icon, sx: mergedSx, ...rest, children: "Back" });
+}

package/dist/components/blog/blog-link.mjs

@@ -0,0 +1,16 @@
+import dayjs from "../dayjs.mjs";
+import { blogPath } from "../routes.mjs";
+export const getBlogLink = (post, locale) => {
+  const mergedLocale = locale || post.locale || "en";
+  const slug = post.slug || post.id;
+  const datePrefix = `${dayjs(post.createdAt).format("YYYY-MM-DD")}-`;
+  if (slug.startsWith(datePrefix)) {
+    return blogPath(
+      `/${mergedLocale || "en"}/post/${dayjs(post.createdAt).format("YYYY/MM/DD")}/${slug.replace(datePrefix, "")}`
+    );
+  }
+  if (mergedLocale) {
+    return blogPath(`/${mergedLocale}/${slug}`);
+  }
+  return blogPath(`/${slug}`);
+};

package/dist/components/blog/blog-list.d.ts

@@ -1,4 +1,5 @@
-import { BlogPost } from './types';
+/// <reference types="react" />
+import type { BlogPost } from './types';
 interface BlogListProps {
     posts: BlogPost[];
     boardId?: string;
@@ -21,8 +22,8 @@ type CardProps = {
 };
 export declare function BlogCard({ ref, post, hideAuthor, linkTarget, compactLayout, loading, }: CardProps & {
     ref?: React.RefObject<HTMLDivElement | null>;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export default function BlogListWrapper({ variant, cardsLayout, ...rest }: BlogListProps & {
     variant?: 'card' | 'list';
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/components/blog/blog-list.mjs

@@ -0,0 +1,441 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link, useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import { ChatBubbleOutlineOutlined as ChatBubbleOutlineOutlinedIcon } from "@mui/icons-material";
+import Skeleton from "@mui/material/Skeleton";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Labels2 } from "@blocklet/labels";
+import RelativeTime from "../shared/relative-time.mjs";
+import { AuthorInfo } from "../avatars/index.mjs";
+import { CoverImage } from "./cover-image.mjs";
+import { getBlogLink } from "./blog-link.mjs";
+import useMeasure from "../hooks/measure.mjs";
+import { useResponsiveValue } from "../hooks/responsive.mjs";
+const lineClamp2 = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical"
+};
+function BlogItem({
+  data: item,
+  hideAuthor,
+  itemLinkTarget,
+  prepend,
+  loading = false,
+  displayLabels = true
+}) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down("md"));
+  const { locale } = useLocaleContext();
+  const navigate = useNavigate();
+  const coverImgWidths = { xs: 84, md: 180, lg: 200 };
+  const coverImgWidth = useResponsiveValue(coverImgWidths);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "block", color: "inherit", textDecoration: "none", "& + &": { mt: { xs: 2.5, md: 6 } } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, pr: { xs: 2, md: 4 } }, children: [
+        hideAuthor === "1" || /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              display: "flex"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 40, height: 40 }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    flex: 1,
+                    ml: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Skeleton, { height: 20, width: 40 }),
+                    /* @__PURE__ */ jsx(Skeleton, { height: 20, width: 100 })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Skeleton, { height: 30 }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: { xs: "inline-block", md: "none" },
+              mt: 0.5,
+              fontSize: 12,
+              color: "grey.500",
+              lineHeight: 1
+            },
+            children: /* @__PURE__ */ jsx(Skeleton, { height: 14, width: 60 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto", width: { xs: 84, md: 180, lg: 200 } }, children: /* @__PURE__ */ jsx(Skeleton, { height: 130 }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: Link,
+      target: itemLinkTarget,
+      to: getBlogLink(item),
+      sx: { display: "block", color: "inherit", textDecoration: "none", "& + &": { mt: { xs: 2.5, md: 6 } } },
+      className: "blog-list-item",
+      children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0, pr: { xs: 2, md: 4 } }, children: [
+          typeof prepend === "function" ? prepend(item) : prepend,
+          hideAuthor === "1" || /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(AuthorInfo, { user: item.author, createdAt: downMd ? void 0 : item.publishTime, size: "sm", responsive: true }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h3", sx: { ...lineClamp2, my: 0.5 }, className: "item-title", children: item.title }),
+          item.excerpt && /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              className: "item-excerpt",
+              variant: "body1",
+              sx: {
+                ...lineClamp2,
+                WebkitLineClamp: { xs: 2, md: 3 },
+                fontSize: { xs: 12, md: 14 },
+                color: "text.secondary"
+              },
+              children: [
+                item.excerpt,
+                "..."
+              ]
+            }
+          ),
+          displayLabels && !!item.labels?.length && /* @__PURE__ */ jsx(
+            Labels2,
+            {
+              labels: item.labels,
+              renderLabel: (node, element) => {
+                const { id } = node.data;
+                return /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      navigate(`/tags/${locale}/${id}`);
+                    },
+                    children: element
+                  },
+                  id
+                );
+              },
+              sx: { display: "inline-flex", mt: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: { xs: "inline-block", md: "none" },
+                mt: 0.5,
+                fontSize: 12,
+                color: "grey.500",
+                lineHeight: 1
+              },
+              children: /* @__PURE__ */ jsx(RelativeTime, { value: item.publishTime })
+            }
+          )
+        ] }),
+        item.cover && /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto", width: coverImgWidths }, children: /* @__PURE__ */ jsx(CoverImage, { url: item.cover, aspectRatio: downMd ? 1 : 3 / 2, loading: "lazy", width: coverImgWidth * 2 }) })
+      ] })
+    },
+    item.id
+  );
+}
+function BlogList({
+  posts,
+  loadMore,
+  boardId,
+  hideAuthor,
+  itemLinkTarget,
+  prepend,
+  loading = false,
+  displayLabels = true,
+  defaultLoadingCount = 4,
+  ...rest
+}) {
+  let content = null;
+  if (loading) {
+    content = Array(defaultLoadingCount).fill("").map((item, index) => /* @__PURE__ */ jsx(
+      BlogItem,
+      {
+        loading: true,
+        data: item,
+        hideAuthor,
+        itemLinkTarget,
+        prepend
+      },
+      index
+    ));
+  } else {
+    content = posts.map((item) => /* @__PURE__ */ jsx(
+      BlogItem,
+      {
+        data: item,
+        hideAuthor,
+        itemLinkTarget,
+        prepend,
+        displayLabels
+      },
+      item.id
+    ));
+  }
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: content });
+}
+export function BlogCard({
+  ref = void 0,
+  post,
+  hideAuthor,
+  linkTarget,
+  compactLayout,
+  loading = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", color: "inherit", textDecoration: "none" }, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          width: 320,
+          maxWidth: 320,
+          borderRadius: 1,
+          overflow: "hidden",
+          boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: 180 }) }),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+            /* @__PURE__ */ jsx(Skeleton, {})
+          ] }),
+          compactLayout === "1" || /* @__PURE__ */ jsxs(Box, { sx: { mt: "auto", px: 2 }, children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: "30%" }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mt: 2,
+                  py: 2,
+                  borderTop: "1px solid #eee"
+                },
+                children: [
+                  hideAuthor === "1" || /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        flex: 1,
+                        display: "flex"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 40, height: 40 }),
+                        /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            sx: {
+                              flex: 1,
+                              ml: 1
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(Skeleton, { height: 20, width: 40 }),
+                              /* @__PURE__ */ jsx(Skeleton, { height: 20, width: 100 })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 0.5,
+                        color: "grey.500"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ChatBubbleOutlineOutlinedIcon, { sx: { mt: 0.25, fontSize: 18, color: "grey.600" } }),
+                        /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12 }, children: /* @__PURE__ */ jsx(Skeleton, { width: 20 }) })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      component: Link,
+      target: linkTarget,
+      to: getBlogLink(post),
+      sx: { display: "flex", justifyContent: "center", color: "inherit", textDecoration: "none" },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            width: 320,
+            maxWidth: 320,
+            borderRadius: 1,
+            overflow: "hidden",
+            boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(CoverImage, { url: post.cover, sx: { borderRadius: 0 }, loading: "lazy", width: 640 }) }),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { ...lineClamp2, my: 0.5 }, children: post.title }),
+              post.excerpt && /* @__PURE__ */ jsxs(Typography, { variant: "body1", sx: { ...lineClamp2, fontSize: { xs: 13, md: 14 }, color: "grey.600" }, children: [
+                post.excerpt,
+                "..."
+              ] }),
+              compactLayout === "1" || /* @__PURE__ */ jsxs(Box, { sx: { mt: "auto" }, children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      mt: 2,
+                      fontSize: 12,
+                      color: "grey.500",
+                      lineHeight: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: "posted" }),
+                      " ",
+                      /* @__PURE__ */ jsx(RelativeTime, { value: post.publishTime })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      mt: 2,
+                      pt: 2,
+                      borderTop: "1px solid #eee"
+                    },
+                    children: [
+                      hideAuthor === "1" || /* @__PURE__ */ jsx(AuthorInfo, { user: post.author, size: "sm", responsive: true }),
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 0.5,
+                            color: "grey.500"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ChatBubbleOutlineOutlinedIcon, { sx: { mt: 0.25, fontSize: 18, color: "grey.600" } }),
+                            /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12 }, children: post.commentCount || 0 })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        post.id
+      )
+    }
+  );
+}
+function BlogCardList({
+  posts,
+  loadMore,
+  hideAuthor,
+  boardId,
+  itemLinkTarget,
+  cardsLayout = "multiRow",
+  compactLayout,
+  loading = false,
+  ...rest
+}) {
+  const theme = useTheme();
+  const downLg = useMediaQuery(theme.breakpoints.down("md"));
+  const [containerRef, { width }] = useMeasure();
+  if (!posts) {
+    return null;
+  }
+  const capacity = Math.floor(width / (280 + 16));
+  const fewPosts = posts.length < capacity && !loading;
+  const singleRowLayout = cardsLayout === "singleRow" && !fewPosts;
+  const visiblePosts = singleRowLayout ? posts.slice(0, capacity) : posts;
+  let content = null;
+  if (loading) {
+    content = Array(capacity).fill("").map((item, index) => /* @__PURE__ */ jsx(
+      BlogCard,
+      {
+        post: item,
+        loading: true,
+        linkTarget: itemLinkTarget,
+        hideAuthor,
+        compactLayout
+      },
+      index
+    ));
+  } else {
+    content = visiblePosts.map((item) => {
+      return /* @__PURE__ */ jsx(
+        BlogCard,
+        {
+          post: item,
+          linkTarget: itemLinkTarget,
+          hideAuthor,
+          compactLayout
+        },
+        item.id
+      );
+    });
+  }
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: [{}, ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]], children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: containerRef,
+      sx: {
+        boxSizing: "border-box",
+        display: fewPosts && !downLg ? "flex" : "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+        gap: 2
+      },
+      children: content
+    }
+  ) });
+}
+export default function BlogListWrapper({
+  variant = "list",
+  cardsLayout,
+  ...rest
+}) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsx(BlogCardList, { ...rest, cardsLayout });
+  }
+  return /* @__PURE__ */ jsx(BlogList, { ...rest });
+}

package/dist/components/blog/cover-image.d.ts

@@ -1,4 +1,5 @@
-import { BoxProps } from '@mui/material/Box';
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material/Box';
 interface CoverImageUploadProps extends Omit<BoxProps, 'onChange'> {
     url?: string;
     onChange: (url: string | null) => void;
@@ -13,6 +14,6 @@ export declare function CoverImage({ url, aspectRatio, width, sx, fetchpriority,
     shadow?: boolean;
     fallback?: React.ReactNode;
     onClick?: () => void;
-} & BoxProps): import("react/jsx-runtime").JSX.Element;
-export declare function CoverImageUpload({ url, onChange, width, ...rest }: CoverImageUploadProps): import("react/jsx-runtime").JSX.Element;
+} & BoxProps): import("react").JSX.Element;
+export declare function CoverImageUpload({ url, onChange, width, ...rest }: CoverImageUploadProps): import("react").JSX.Element;
 export {};