@btst/stack 2.6.2 → 2.8.0

package/dist/packages/stack/src/plugins/comments/client/components/pages/resource-comments-page.internal.cjs

@@ -0,0 +1,191 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const useComments = require('../../hooks/use-comments.cjs');
+const commentThread = require('../comment-thread.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const badge = require('../../../../../../../ui/src/components/badge.cjs');
+const avatar = require('../../../../../../../ui/src/components/avatar.cjs');
+const LucideIcons = require('lucide-react');
+const dateFns = require('date-fns');
+const sonner = require('sonner');
+const index = require('../../localization/index.cjs');
+const utils = require('../../utils.cjs');
+
+function ResourceCommentsPage({
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  headers,
+  currentUserId,
+  loginHref,
+  localization: localizationProp
+}) {
+  const loc = { ...index.COMMENTS_LOCALIZATION, ...localizationProp };
+  const config = { apiBaseURL, apiBasePath, headers };
+  const {
+    comments: pendingComments,
+    total: pendingTotal,
+    refetch
+  } = useComments.useSuspenseComments(config, {
+    resourceId,
+    resourceType,
+    status: "pending"
+  });
+  const updateStatus = useComments.useUpdateCommentStatus(config);
+  const deleteMutation = useComments.useDeleteComment(config);
+  const handleApprove = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "approved" });
+      sonner.toast.success(loc.COMMENTS_RESOURCE_TOAST_APPROVED);
+      refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_RESOURCE_TOAST_APPROVE_ERROR);
+    }
+  };
+  const handleSpam = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "spam" });
+      sonner.toast.success(loc.COMMENTS_RESOURCE_TOAST_SPAM);
+      refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_RESOURCE_TOAST_SPAM_ERROR);
+    }
+  };
+  const handleDelete = async (id) => {
+    if (!window.confirm(loc.COMMENTS_RESOURCE_DELETE_CONFIRM)) return;
+    try {
+      await deleteMutation.mutateAsync(id);
+      sonner.toast.success(loc.COMMENTS_RESOURCE_TOAST_DELETED);
+      refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_RESOURCE_TOAST_DELETE_ERROR);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "w-full max-w-3xl space-y-8",
+      "data-testid": "resource-comments-page",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: loc.COMMENTS_RESOURCE_TITLE }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm mt-1", children: [
+            resourceType,
+            "/",
+            resourceId
+          ] })
+        ] }),
+        pendingTotal > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-base font-semibold flex items-center gap-2", children: [
+            loc.COMMENTS_RESOURCE_PENDING_SECTION,
+            /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", children: pendingTotal })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border rounded-lg border", children: pendingComments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(
+            PendingCommentRow,
+            {
+              comment,
+              loc,
+              onApprove: () => handleApprove(comment.id),
+              onSpam: () => handleSpam(comment.id),
+              onDelete: () => handleDelete(comment.id),
+              isUpdating: updateStatus.isPending,
+              isDeleting: deleteMutation.isPending
+            },
+            comment.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold mb-4", children: loc.COMMENTS_RESOURCE_THREAD_SECTION }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            commentThread.CommentThread,
+            {
+              resourceId,
+              resourceType,
+              apiBaseURL,
+              apiBasePath,
+              headers,
+              currentUserId,
+              loginHref,
+              localization: loc
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PendingCommentRow({
+  comment,
+  loc,
+  onApprove,
+  onSpam,
+  onDelete,
+  isUpdating,
+  isDeleting
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 p-4", "data-testid": "pending-comment-row", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-8 w-8 shrink-0 mt-0.5", children: [
+      comment.resolvedAvatarUrl && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: comment.resolvedAvatarUrl }),
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-xs", children: utils.getInitials(comment.resolvedAuthorName) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: comment.resolvedAuthorName }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: dateFns.formatDistanceToNow(new Date(comment.createdAt), {
+          addSuffix: true
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-green-600 border-green-200 hover:bg-green-50",
+            onClick: onApprove,
+            disabled: isUpdating,
+            "data-testid": "approve-button",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_APPROVE
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-orange-500 border-orange-200 hover:bg-orange-50",
+            onClick: onSpam,
+            disabled: isUpdating,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ShieldOff, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_SPAM
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-destructive border-destructive/30 hover:bg-destructive/5",
+            onClick: onDelete,
+            disabled: isDeleting,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_DELETE
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+exports.ResourceCommentsPage = ResourceCommentsPage;

package/dist/packages/stack/src/plugins/comments/client/components/pages/resource-comments-page.internal.mjs

@@ -0,0 +1,189 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSuspenseComments, useUpdateCommentStatus, useDeleteComment } from '../../hooks/use-comments.mjs';
+import { CommentThread } from '../comment-thread.mjs';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
+import { Avatar, AvatarImage, AvatarFallback } from '../../../../../../../ui/src/components/avatar.mjs';
+import { CheckCircle, ShieldOff, Trash2 } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { toast } from 'sonner';
+import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
+import { getInitials } from '../../utils.mjs';
+
+function ResourceCommentsPage({
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  headers,
+  currentUserId,
+  loginHref,
+  localization: localizationProp
+}) {
+  const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+  const config = { apiBaseURL, apiBasePath, headers };
+  const {
+    comments: pendingComments,
+    total: pendingTotal,
+    refetch
+  } = useSuspenseComments(config, {
+    resourceId,
+    resourceType,
+    status: "pending"
+  });
+  const updateStatus = useUpdateCommentStatus(config);
+  const deleteMutation = useDeleteComment(config);
+  const handleApprove = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "approved" });
+      toast.success(loc.COMMENTS_RESOURCE_TOAST_APPROVED);
+      refetch();
+    } catch {
+      toast.error(loc.COMMENTS_RESOURCE_TOAST_APPROVE_ERROR);
+    }
+  };
+  const handleSpam = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "spam" });
+      toast.success(loc.COMMENTS_RESOURCE_TOAST_SPAM);
+      refetch();
+    } catch {
+      toast.error(loc.COMMENTS_RESOURCE_TOAST_SPAM_ERROR);
+    }
+  };
+  const handleDelete = async (id) => {
+    if (!window.confirm(loc.COMMENTS_RESOURCE_DELETE_CONFIRM)) return;
+    try {
+      await deleteMutation.mutateAsync(id);
+      toast.success(loc.COMMENTS_RESOURCE_TOAST_DELETED);
+      refetch();
+    } catch {
+      toast.error(loc.COMMENTS_RESOURCE_TOAST_DELETE_ERROR);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full max-w-3xl space-y-8",
+      "data-testid": "resource-comments-page",
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: loc.COMMENTS_RESOURCE_TITLE }),
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm mt-1", children: [
+            resourceType,
+            "/",
+            resourceId
+          ] })
+        ] }),
+        pendingTotal > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-base font-semibold flex items-center gap-2", children: [
+            loc.COMMENTS_RESOURCE_PENDING_SECTION,
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: pendingTotal })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "divide-y divide-border rounded-lg border", children: pendingComments.map((comment) => /* @__PURE__ */ jsx(
+            PendingCommentRow,
+            {
+              comment,
+              loc,
+              onApprove: () => handleApprove(comment.id),
+              onSpam: () => handleSpam(comment.id),
+              onDelete: () => handleDelete(comment.id),
+              isUpdating: updateStatus.isPending,
+              isDeleting: deleteMutation.isPending
+            },
+            comment.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold mb-4", children: loc.COMMENTS_RESOURCE_THREAD_SECTION }),
+          /* @__PURE__ */ jsx(
+            CommentThread,
+            {
+              resourceId,
+              resourceType,
+              apiBaseURL,
+              apiBasePath,
+              headers,
+              currentUserId,
+              loginHref,
+              localization: loc
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PendingCommentRow({
+  comment,
+  loc,
+  onApprove,
+  onSpam,
+  onDelete,
+  isUpdating,
+  isDeleting
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 p-4", "data-testid": "pending-comment-row", children: [
+    /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 shrink-0 mt-0.5", children: [
+      comment.resolvedAvatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: comment.resolvedAvatarUrl }),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(comment.resolvedAuthorName) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: comment.resolvedAuthorName }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDistanceToNow(new Date(comment.createdAt), {
+          addSuffix: true
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mt-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-green-600 border-green-200 hover:bg-green-50",
+            onClick: onApprove,
+            disabled: isUpdating,
+            "data-testid": "approve-button",
+            children: [
+              /* @__PURE__ */ jsx(CheckCircle, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_APPROVE
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-orange-500 border-orange-200 hover:bg-orange-50",
+            onClick: onSpam,
+            disabled: isUpdating,
+            children: [
+              /* @__PURE__ */ jsx(ShieldOff, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_SPAM
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "h-7 text-xs text-destructive border-destructive/30 hover:bg-destructive/5",
+            onClick: onDelete,
+            disabled: isDeleting,
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 mr-1" }),
+              loc.COMMENTS_RESOURCE_ACTION_DELETE
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { ResourceCommentsPage };

package/dist/packages/stack/src/plugins/comments/client/components/pages/resource-comments-page.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { usePluginOverrides } from '@btst/stack/context';
+import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
+import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { useResolvedCurrentUserId } from '../../utils.mjs';
+
+const ResourceCommentsPageInternal = lazy(
+  () => import('./resource-comments-page.internal.mjs').then((m) => ({
+    default: m.ResourceCommentsPage
+  }))
+);
+function ResourceCommentsSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto space-y-4 animate-pulse", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-8 w-48 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 w-64 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border h-32 bg-muted" })
+  ] });
+}
+function ResourceCommentsPageComponent({
+  resourceId,
+  resourceType
+}) {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: `/comments/${resourceType}/${resourceId}`,
+      PageComponent: () => /* @__PURE__ */ jsx(
+        ResourceCommentsPageWrapper,
+        {
+          resourceId,
+          resourceType
+        }
+      ),
+      LoadingComponent: ResourceCommentsSkeleton,
+      onError: (error) => console.error("[btst/comments] Resource comments error:", error)
+    }
+  );
+}
+function ResourceCommentsPageWrapper({
+  resourceId,
+  resourceType
+}) {
+  const overrides = usePluginOverrides("comments");
+  const loc = { ...COMMENTS_LOCALIZATION, ...overrides.localization };
+  const resolvedUserId = useResolvedCurrentUserId(overrides.currentUserId);
+  useRouteLifecycle({
+    routeName: "resourceComments",
+    context: {
+      path: `/comments/${resourceType}/${resourceId}`,
+      params: { resourceId, resourceType },
+      isSSR: typeof window === "undefined"
+    },
+    overrides,
+    beforeRenderHook: (o, context) => {
+      if (o.onBeforeResourceCommentsRendered) {
+        return o.onBeforeResourceCommentsRendered(
+          resourceType,
+          resourceId,
+          context
+        );
+      }
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(
+    ResourceCommentsPageInternal,
+    {
+      resourceId,
+      resourceType,
+      apiBaseURL: overrides.apiBaseURL,
+      apiBasePath: overrides.apiBasePath,
+      headers: overrides.headers,
+      currentUserId: resolvedUserId,
+      loginHref: overrides.loginHref,
+      localization: loc
+    }
+  ) });
+}
+
+export { ResourceCommentsPageComponent };

package/dist/packages/stack/src/plugins/comments/client/components/shared/page-wrapper.cjs

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const pageWrapper = require('../../../../../../../ui/src/components/page-wrapper.cjs');
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution } = context.usePluginOverrides("comments", {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pageWrapper.PageWrapper,
+    {
+      className,
+      testId,
+      showAttribution,
+      children
+    }
+  );
+}
+
+exports.PageWrapper = PageWrapper;

package/dist/packages/stack/src/plugins/comments/client/components/shared/page-wrapper.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { PageWrapper as PageWrapper$1 } from '../../../../../../../ui/src/components/page-wrapper.mjs';
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution } = usePluginOverrides("comments", {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsx(
+    PageWrapper$1,
+    {
+      className,
+      testId,
+      showAttribution,
+      children
+    }
+  );
+}
+
+export { PageWrapper };

package/dist/packages/stack/src/plugins/comments/client/components/shared/pagination.cjs

@@ -0,0 +1,37 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const index = require('../../localization/index.cjs');
+const paginationControls = require('../../../../../../../ui/src/components/pagination-controls.cjs');
+
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  total,
+  limit,
+  offset
+}) {
+  const { localization: customLocalization } = context.usePluginOverrides("comments");
+  const localization = { ...index.COMMENTS_LOCALIZATION, ...customLocalization };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    paginationControls.PaginationControls,
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      total,
+      limit,
+      offset,
+      labels: {
+        previous: localization.COMMENTS_MODERATION_PAGINATION_PREVIOUS,
+        next: localization.COMMENTS_MODERATION_PAGINATION_NEXT,
+        showing: localization.COMMENTS_MODERATION_PAGINATION_SHOWING
+      }
+    }
+  );
+}
+
+exports.Pagination = Pagination;

package/dist/packages/stack/src/plugins/comments/client/components/shared/pagination.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
+import { PaginationControls } from '../../../../../../../ui/src/components/pagination-controls.mjs';
+
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  total,
+  limit,
+  offset
+}) {
+  const { localization: customLocalization } = usePluginOverrides("comments");
+  const localization = { ...COMMENTS_LOCALIZATION, ...customLocalization };
+  return /* @__PURE__ */ jsx(
+    PaginationControls,
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      total,
+      limit,
+      offset,
+      labels: {
+        previous: localization.COMMENTS_MODERATION_PAGINATION_PREVIOUS,
+        next: localization.COMMENTS_MODERATION_PAGINATION_NEXT,
+        showing: localization.COMMENTS_MODERATION_PAGINATION_SHOWING
+      }
+    }
+  );
+}
+
+export { Pagination };