@btst/stack 2.12.1 → 3.0.0-rc.1

package/src/plugins/comments/client/components/comment-count.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { MessageSquare } from "lucide-react";
+import { useStack } from "@btst/stack/context";
 import { useCommentCount } from "../hooks/use-comments";
 
 export interface CommentCountProps {
@@ -8,9 +9,6 @@ export interface CommentCountProps {
 	resourceType: string;
 	/** Only count approved comments (default) */
 	status?: "pending" | "approved" | "spam";
-	apiBaseURL: string;
-	apiBasePath: string;
-	headers?: HeadersInit;
 	/** Optional className for the wrapper span */
 	className?: string;
 }
@@ -24,8 +22,6 @@ export interface CommentCountProps {
  * <CommentCount
  *   resourceId={post.slug}
  *   resourceType="blog-post"
- *   apiBaseURL="https://example.com"
- *   apiBasePath="/api/data"
  * />
  * ```
  */
@@ -33,13 +29,11 @@ export function CommentCount({
 	resourceId,
 	resourceType,
 	status = "approved",
-	apiBaseURL,
-	apiBasePath,
-	headers,
 	className,
 }: CommentCountProps) {
+	const { api } = useStack();
 	const { count, isLoading } = useCommentCount(
-		{ apiBaseURL, apiBasePath, headers },
+		{ apiBaseURL: api?.baseURL ?? "", apiBasePath: api?.basePath ?? "" },
 		{ resourceId, resourceType, status },
 	);
 

package/src/plugins/comments/client/components/comment-form.tsx

@@ -3,10 +3,9 @@
 import { useState, type ComponentType } from "react";
 import { Button } from "@workspace/ui/components/button";
 import { Textarea } from "@workspace/ui/components/textarea";
-import {
-	COMMENTS_LOCALIZATION,
-	type CommentsLocalization,
-} from "../localization";
+import { useTranslate } from "@btst/stack/context";
+import type { StackError } from "@btst/stack/plugins/client";
+import type { CommentsLocalization } from "../localization";
 
 export interface CommentFormProps {
 	/** Current user's ID — required to post */
@@ -39,14 +38,17 @@ export function CommentForm({
 	onSubmit,
 	onCancel,
 	InputComponent,
-	localization: localizationProp,
+	localization,
 }: CommentFormProps) {
-	const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+	const t = useTranslate();
 	const [body, setBody] = useState(initialBody);
 	const [isPending, setIsPending] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 
-	const resolvedSubmitLabel = submitLabel ?? loc.COMMENTS_FORM_POST_COMMENT;
+	const resolvedSubmitLabel =
+		submitLabel ??
+		localization?.COMMENTS_FORM_POST_COMMENT ??
+		t("comments.form.postComment", "Post comment");
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
@@ -57,8 +59,16 @@ export function CommentForm({
 			await onSubmit(body.trim());
 			setBody("");
 		} catch (err) {
+			// Server-side Zod failures arrive as a StackError with a field-error
+			// map — surface the `body` message inline instead of the generic one.
+			const bodyError = (err as StackError)?.errors?.body;
+			const bodyMessage = Array.isArray(bodyError) ? bodyError[0] : bodyError;
 			setError(
-				err instanceof Error ? err.message : loc.COMMENTS_FORM_SUBMIT_ERROR,
+				bodyMessage ??
+					(err instanceof Error && err.message
+						? err.message
+						: (localization?.COMMENTS_FORM_SUBMIT_ERROR ??
+							t("comments.form.submitError", "Failed to submit comment"))),
 			);
 		} finally {
 			setIsPending(false);
@@ -76,20 +86,33 @@ export function CommentForm({
 					value={body}
 					onChange={setBody}
 					disabled={isPending}
-					placeholder={loc.COMMENTS_FORM_PLACEHOLDER}
+					placeholder={
+						localization?.COMMENTS_FORM_PLACEHOLDER ??
+						t("comments.form.placeholder", "Write a comment…")
+					}
 				/>
 			) : (
 				<Textarea
 					value={body}
 					onChange={(e) => setBody(e.target.value)}
-					placeholder={loc.COMMENTS_FORM_PLACEHOLDER}
+					placeholder={
+						localization?.COMMENTS_FORM_PLACEHOLDER ??
+						t("comments.form.placeholder", "Write a comment…")
+					}
 					disabled={isPending}
 					rows={3}
 					className="resize-none"
 				/>
 			)}
 
-			{error && <p className="text-sm text-destructive">{error}</p>}
+			{error && (
+				<p
+					className="text-sm text-destructive"
+					data-testid="comment-form-error"
+				>
+					{error}
+				</p>
+			)}
 
 			<div className="flex gap-2 justify-end">
 				{onCancel && (
@@ -100,11 +123,15 @@ export function CommentForm({
 						onClick={onCancel}
 						disabled={isPending}
 					>
-						{loc.COMMENTS_FORM_CANCEL}
+						{localization?.COMMENTS_FORM_CANCEL ??
+							t("comments.form.cancel", "Cancel")}
 					</Button>
 				)}
 				<Button type="submit" size="sm" disabled={isPending || !body.trim()}>
-					{isPending ? loc.COMMENTS_FORM_POSTING : resolvedSubmitLabel}
+					{isPending
+						? (localization?.COMMENTS_FORM_POSTING ??
+							t("comments.form.posting", "Posting…"))
+						: resolvedSubmitLabel}
 				</Button>
 			</div>
 		</form>

package/src/plugins/comments/client/components/comment-thread.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import type { SerializedComment } from "../../types";
-import { getInitials } from "../utils";
+import { getInitials, useCurrentUserId } from "../utils";
 import { CommentForm } from "./comment-form";
 import {
 	useComments,
@@ -31,11 +31,12 @@ import {
 	useDeleteComment,
 	useToggleLike,
 } from "../hooks/use-comments";
+import type { CommentsLocalization } from "../localization";
 import {
-	COMMENTS_LOCALIZATION,
-	type CommentsLocalization,
-} from "../localization";
-import { usePluginOverrides } from "@btst/stack/context";
+	usePluginOverrides,
+	useStack,
+	useTranslate,
+} from "@btst/stack/context";
 import type { CommentsPluginOverrides } from "../overrides";
 
 /** Custom input component props */
@@ -62,19 +63,6 @@ export interface CommentThreadProps {
 	resourceId: string;
 	/** Discriminates resources across plugins (e.g. "blog-post", "kanban-task") */
 	resourceType: string;
-	/** Base URL for API calls */
-	apiBaseURL: string;
-	/** Path where the API is mounted */
-	apiBasePath: string;
-	/** Currently authenticated user ID. Omit for read-only / unauthenticated. */
-	currentUserId?: string;
-	/**
-	 * URL to redirect unauthenticated users to.
-	 * When provided and currentUserId is absent, shows a "Please login to comment" prompt.
-	 */
-	loginHref?: string;
-	/** Optional HTTP headers for API calls (e.g. forwarding cookies) */
-	headers?: HeadersInit;
 	/** Swap in custom Input / Renderer components */
 	components?: CommentComponents;
 	/** Optional className applied to the root wrapper */
@@ -111,6 +99,13 @@ export interface CommentThreadProps {
 	sort?: "asc" | "desc";
 }
 
+type ResolvedCommentThreadProps = CommentThreadProps & {
+	apiBaseURL: string;
+	apiBasePath: string;
+	currentUserId?: string;
+	loginHref?: string;
+};
+
 const DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (
 	<p className="text-sm whitespace-pre-wrap wrap-break-word">{body}</p>
 );
@@ -124,9 +119,8 @@ function CommentCard({
 	apiBasePath,
 	resourceId,
 	resourceType,
-	headers,
 	components,
-	loc,
+	localization,
 	infiniteKey,
 	onReplyClick,
 	allowPosting,
@@ -138,9 +132,8 @@ function CommentCard({
 	apiBasePath: string;
 	resourceId: string;
 	resourceType: string;
-	headers?: HeadersInit;
 	components?: CommentComponents;
-	loc: CommentsLocalization;
+	localization?: Partial<CommentsLocalization>;
 	/** Infinite thread query key — pass for top-level comments so like optimistic
 	 *  updates target the correct InfiniteData cache entry. */
 	infiniteKey?: readonly unknown[];
@@ -148,10 +141,11 @@ function CommentCard({
 	allowPosting: boolean;
 	allowEditing: boolean;
 }) {
+	const t = useTranslate();
 	const [isEditing, setIsEditing] = useState(false);
 	const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
 
-	const config = { apiBaseURL, apiBasePath, headers };
+	const config = { apiBaseURL, apiBasePath };
 
 	const updateMutation = useUpdateComment(config);
 	const deleteMutation = useDeleteComment(config);
@@ -173,7 +167,10 @@ function CommentCard({
 	};
 
 	const handleDelete = async () => {
-		if (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;
+		const confirmMessage =
+			localization?.COMMENTS_DELETE_CONFIRM ??
+			t("comments.thread.deleteConfirm", "Delete this comment?");
+		if (!window.confirm(confirmMessage)) return;
 		await deleteMutation.mutateAsync(comment.id);
 	};
 
@@ -215,7 +212,8 @@ function CommentCard({
 					</span>
 					{comment.editedAt && (
 						<span className="text-xs text-muted-foreground italic">
-							{loc.COMMENTS_EDITED_BADGE}
+							{localization?.COMMENTS_EDITED_BADGE ??
+								t("comments.thread.editedBadge", "(edited)")}
 						</span>
 					)}
 					{isPending && isOwn && (
@@ -224,7 +222,8 @@ function CommentCard({
 							className="text-xs"
 							data-testid="pending-badge"
 						>
-							{loc.COMMENTS_PENDING_BADGE}
+							{localization?.COMMENTS_PENDING_BADGE ??
+								t("comments.thread.pendingBadge", "Pending approval")}
 						</Badge>
 					)}
 				</div>
@@ -233,9 +232,12 @@ function CommentCard({
 					<CommentForm
 						authorId={currentUserId ?? ""}
 						initialBody={comment.body}
-						submitLabel={loc.COMMENTS_SAVE_EDIT}
+						submitLabel={
+							localization?.COMMENTS_SAVE_EDIT ??
+							t("comments.thread.saveEdit", "Save")
+						}
 						InputComponent={components?.Input}
-						localization={loc}
+						localization={localization}
 						onSubmit={handleEdit}
 						onCancel={() => setIsEditing(false)}
 					/>
@@ -253,8 +255,10 @@ function CommentCard({
 								onClick={handleLike}
 								aria-label={
 									comment.isLikedByCurrentUser
-										? loc.COMMENTS_UNLIKE_ARIA
-										: loc.COMMENTS_LIKE_ARIA
+										? (localization?.COMMENTS_UNLIKE_ARIA ??
+											t("comments.thread.unlikeAria", "Unlike"))
+										: (localization?.COMMENTS_LIKE_ARIA ??
+											t("comments.thread.likeAria", "Like"))
 								}
 								data-testid="like-button"
 							>
@@ -279,7 +283,8 @@ function CommentCard({
 									data-testid="reply-button"
 								>
 									<MessageSquare className="h-3.5 w-3.5 mr-1" />
-									{loc.COMMENTS_REPLY_BUTTON}
+									{localization?.COMMENTS_REPLY_BUTTON ??
+										t("comments.thread.replyButton", "Reply")}
 								</Button>
 							)}
 
@@ -294,7 +299,8 @@ function CommentCard({
 										data-testid="edit-button"
 									>
 										<Pencil className="h-3.5 w-3.5 mr-1" />
-										{loc.COMMENTS_EDIT_BUTTON}
+										{localization?.COMMENTS_EDIT_BUTTON ??
+											t("comments.thread.editButton", "Edit")}
 									</Button>
 								)}
 								<Button
@@ -306,7 +312,8 @@ function CommentCard({
 									data-testid="delete-button"
 								>
 									<X className="h-3.5 w-3.5 mr-1" />
-									{loc.COMMENTS_DELETE_BUTTON}
+									{localization?.COMMENTS_DELETE_BUTTON ??
+										t("comments.thread.deleteButton", "Delete")}
 								</Button>
 							</>
 						)}
@@ -330,14 +337,14 @@ function CommentThreadInner({
 	apiBasePath,
 	currentUserId,
 	loginHref,
-	headers,
 	components,
 	localization: localizationProp,
 	pageSize: pageSizeProp,
 	allowPosting: allowPostingProp,
 	allowEditing: allowEditingProp,
 	sort: sortProp,
-}: CommentThreadProps) {
+}: ResolvedCommentThreadProps) {
+	const t = useTranslate();
 	const overrides = usePluginOverrides<
 		CommentsPluginOverrides,
 		Partial<CommentsPluginOverrides>
@@ -347,14 +354,16 @@ function CommentThreadInner({
 	const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
 	const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
 	const sort = sortProp ?? overrides.defaultCommentSort ?? "desc";
-	const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+	// Per-instance prop wins over the plugin-level override strings; missing
+	// keys fall through to `t()` inside each child component.
+	const localization = { ...overrides.localization, ...localizationProp };
 	const [replyingTo, setReplyingTo] = useState<string | null>(null);
 	const [expandedReplies, setExpandedReplies] = useState<Set<string>>(
 		new Set(),
 	);
 	const [replyOffsets, setReplyOffsets] = useState<Record<string, number>>({});
 
-	const config = { apiBaseURL, apiBasePath, headers };
+	const config = { apiBaseURL, apiBasePath };
 
 	const {
 		comments,
@@ -408,7 +417,12 @@ function CommentThreadInner({
 			<div className="flex items-center gap-2 mb-4">
 				<MessageSquare className="h-5 w-5 text-muted-foreground" />
 				<h3 className="font-semibold text-sm">
-					{total === 0 ? loc.COMMENTS_TITLE : `${total} ${loc.COMMENTS_TITLE}`}
+					{(() => {
+						const title =
+							localization?.COMMENTS_TITLE ??
+							t("comments.thread.title", "Comments");
+						return total === 0 ? title : `${total} ${title}`;
+					})()}
 				</h3>
 			</div>
 
@@ -438,9 +452,8 @@ function CommentThreadInner({
 								apiBasePath={apiBasePath}
 								resourceId={resourceId}
 								resourceType={resourceType}
-								headers={headers}
 								components={components}
-								loc={loc}
+								localization={localization}
 								infiniteKey={threadQueryKey}
 								onReplyClick={(parentId) => {
 									setReplyingTo(replyingTo === parentId ? null : parentId);
@@ -457,9 +470,8 @@ function CommentThreadInner({
 								apiBaseURL={apiBaseURL}
 								apiBasePath={apiBasePath}
 								currentUserId={currentUserId}
-								headers={headers}
 								components={components}
-								loc={loc}
+								localization={localization}
 								expanded={expandedReplies.has(comment.id)}
 								replyCount={comment.replyCount}
 								onToggle={() => {
@@ -492,9 +504,12 @@ function CommentThreadInner({
 									<CommentForm
 										authorId={currentUserId}
 										parentId={comment.id}
-										submitLabel={loc.COMMENTS_FORM_POST_REPLY}
+										submitLabel={
+											localization?.COMMENTS_FORM_POST_REPLY ??
+											t("comments.form.postReply", "Post reply")
+										}
 										InputComponent={components?.Input}
-										localization={loc}
+										localization={localization}
 										onSubmit={(body) => handleReply(body, comment.id)}
 										onCancel={() => setReplyingTo(null)}
 									/>
@@ -507,7 +522,8 @@ function CommentThreadInner({
 
 			{!isLoading && comments.length === 0 && (
 				<p className="text-sm text-muted-foreground py-4 text-center">
-					{loc.COMMENTS_EMPTY}
+					{localization?.COMMENTS_EMPTY ??
+						t("comments.thread.empty", "Be the first to comment.")}
 				</p>
 			)}
 
@@ -520,7 +536,11 @@ function CommentThreadInner({
 						disabled={isLoadingMore}
 						data-testid="load-more-comments"
 					>
-						{isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE}
+						{isLoadingMore
+							? (localization?.COMMENTS_LOADING_MORE ??
+								t("comments.thread.loadingMore", "Loading…"))
+							: (localization?.COMMENTS_LOAD_MORE ??
+								t("comments.thread.loadMore", "Load more comments"))}
 					</Button>
 				</div>
 			)}
@@ -533,9 +553,12 @@ function CommentThreadInner({
 						<div data-testid="comment-form-wrapper">
 							<CommentForm
 								authorId={currentUserId}
-								submitLabel={loc.COMMENTS_FORM_POST_COMMENT}
+								submitLabel={
+									localization?.COMMENTS_FORM_POST_COMMENT ??
+									t("comments.form.postComment", "Post comment")
+								}
 								InputComponent={components?.Input}
-								localization={loc}
+								localization={localization}
 								onSubmit={handlePost}
 							/>
 						</div>
@@ -546,7 +569,11 @@ function CommentThreadInner({
 						>
 							<LogIn className="h-6 w-6 text-muted-foreground" />
 							<p className="text-sm text-muted-foreground">
-								{loc.COMMENTS_LOGIN_PROMPT}
+								{localization?.COMMENTS_LOGIN_PROMPT ??
+									t(
+										"comments.thread.loginPrompt",
+										"Please sign in to leave a comment.",
+									)}
 							</p>
 							{loginHref && (
 								<a
@@ -554,7 +581,8 @@ function CommentThreadInner({
 									className="inline-flex items-center gap-1 text-sm font-medium text-primary underline underline-offset-4"
 									data-testid="login-link"
 								>
-									{loc.COMMENTS_LOGIN_LINK}
+									{localization?.COMMENTS_LOGIN_LINK ??
+										t("comments.thread.loginLink", "Sign in")}
 								</a>
 							)}
 						</div>
@@ -574,9 +602,8 @@ function RepliesSection({
 	apiBaseURL,
 	apiBasePath,
 	currentUserId,
-	headers,
 	components,
-	loc,
+	localization,
 	expanded,
 	replyCount,
 	onToggle,
@@ -589,9 +616,8 @@ function RepliesSection({
 	apiBaseURL: string;
 	apiBasePath: string;
 	currentUserId?: string;
-	headers?: HeadersInit;
 	components?: CommentComponents;
-	loc: CommentsLocalization;
+	localization?: Partial<CommentsLocalization>;
 	expanded: boolean;
 	/** Pre-computed from the parent comment — avoids an extra fetch on mount. */
 	replyCount: number;
@@ -599,7 +625,8 @@ function RepliesSection({
 	onOffsetChange: (offset: number) => void;
 	allowEditing: boolean;
 }) {
-	const config = { apiBaseURL, apiBasePath, headers };
+	const t = useTranslate();
+	const config = { apiBaseURL, apiBasePath };
 	const [replyOffset, setReplyOffset] = useState(0);
 	const [loadedReplies, setLoadedReplies] = useState<SerializedComment[]>([]);
 	// Only fetch reply bodies once the section is expanded.
@@ -692,8 +719,15 @@ function RepliesSection({
 					<ChevronDown className="h-3 w-3 mr-1" />
 				)}
 				{expanded
-					? loc.COMMENTS_HIDE_REPLIES
-					: `${displayCount} ${displayCount === 1 ? loc.COMMENTS_REPLIES_SINGULAR : loc.COMMENTS_REPLIES_PLURAL}`}
+					? (localization?.COMMENTS_HIDE_REPLIES ??
+						t("comments.thread.hideReplies", "Hide replies"))
+					: `${displayCount} ${
+							displayCount === 1
+								? (localization?.COMMENTS_REPLIES_SINGULAR ??
+									t("comments.thread.repliesSingular", "reply"))
+								: (localization?.COMMENTS_REPLIES_PLURAL ??
+									t("comments.thread.repliesPlural", "replies"))
+						}`}
 			</Button>
 			{expanded && (
 				<div
@@ -709,9 +743,8 @@ function RepliesSection({
 							apiBasePath={apiBasePath}
 							resourceId={resourceId}
 							resourceType={resourceType}
-							headers={headers}
 							components={components}
-							loc={loc}
+							localization={localization}
 							onReplyClick={() => {}} // No nested replies in v1
 							allowPosting={false}
 							allowEditing={allowEditing}
@@ -730,8 +763,10 @@ function RepliesSection({
 								data-testid="load-more-replies"
 							>
 								{isFetchingReplies
-									? loc.COMMENTS_LOADING_MORE
-									: loc.COMMENTS_LOAD_MORE}
+									? (localization?.COMMENTS_LOADING_MORE ??
+										t("comments.thread.loadingMore", "Loading…"))
+									: (localization?.COMMENTS_LOAD_MORE ??
+										t("comments.thread.loadMore", "Load more comments"))}
 							</Button>
 						</div>
 					)}
@@ -747,17 +782,13 @@ function RepliesSection({
  * Embeddable threaded comment section.
  *
  * Lazy-mounts when the component scrolls into the viewport (via WhenVisible).
- * Requires `currentUserId` to allow posting; shows a "Please login" prompt otherwise.
+ * Uses the top-level StackProvider API and auth configuration.
  *
  * @example
  * ```tsx
  * <CommentThread
  *   resourceId={post.slug}
  *   resourceType="blog-post"
- *   apiBaseURL="https://example.com"
- *   apiBasePath="/api/data"
- *   currentUserId={session?.userId}
- *   loginHref="/login"
  * />
  * ```
  */
@@ -804,10 +835,24 @@ function CommentThreadSkeleton() {
 }
 
 export function CommentThread(props: CommentThreadProps) {
+	const { api, auth } = useStack();
+	const { currentUserId, isPending: isIdentityPending } = useCurrentUserId();
+	const resolvedProps: ResolvedCommentThreadProps = {
+		...props,
+		apiBaseURL: api?.baseURL ?? "",
+		apiBasePath: api?.basePath ?? "",
+		currentUserId,
+		loginHref: auth?.loginPath,
+	};
+
 	return (
 		<div id="comments" className={props.className}>
 			<WhenVisible fallback={<CommentThreadSkeleton />} rootMargin="300px">
-				<CommentThreadInner {...props} />
+				{isIdentityPending ? (
+					<CommentThreadSkeleton />
+				) : (
+					<CommentThreadInner {...resolvedProps} />
+				)}
 			</WhenVisible>
 		</div>
 	);