@btst/stack 1.0.1 → 1.1.1

package/src/plugins/blog/client/components/shared/search-input.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+import { usePostSearch } from "../../hooks/blog-hooks";
+import { stripHtml, stripMarkdown } from "../../../utils";
+import { HighlightText } from "./highlight-text";
+import { SearchModal, type SearchResult } from "./search-modal";
+import type { BlogPluginOverrides } from "../../overrides";
+import { useBasePath, usePluginOverrides } from "@btst/stack/context";
+
+// Simplified blog post search result interface
+interface BlogPostSearchResult extends SearchResult {
+	slug: string;
+	publishedAt?: string | null;
+	authorName?: string;
+	processedContent: string;
+	processedExcerpt?: string;
+}
+
+interface SearchInputProps {
+	className?: string;
+	triggerClassName?: string;
+	placeholder?: string;
+	buttonText?: string;
+	emptyMessage?: string;
+}
+
+const renderBlogResult = (
+	item: BlogPostSearchResult,
+	index: number,
+	query: string,
+): React.ReactNode => {
+	const q = (query || "").toLowerCase();
+	const excerptMatches = item.processedExcerpt
+		? item.processedExcerpt.toLowerCase().includes(q)
+		: false;
+	const contentMatches = item.processedContent
+		? item.processedContent.toLowerCase().includes(q)
+		: false;
+
+	return (
+		<button
+			data-testid="search-result"
+			type="button"
+			key={item.id}
+			className="flex w-full cursor-pointer flex-col gap-2 rounded-sm border-border border-b px-4 py-3 text-left transition-colors hover:bg-accent"
+			onClick={() => item.onClick?.()}
+		>
+			<div className="flex items-start justify-between gap-2">
+				<HighlightText
+					text={item.title}
+					searchQuery={query}
+					className="flex-1 font-medium text-sm leading-5"
+				/>
+				{item.publishedAt && (
+					<span className="whitespace-nowrap text-muted-foreground text-xs">
+						{new Date(item.publishedAt).toLocaleDateString()}
+					</span>
+				)}
+			</div>
+
+			{excerptMatches && (
+				<HighlightText
+					text={item.processedExcerpt || ""}
+					searchQuery={query}
+					className="text-muted-foreground text-xs leading-4"
+					maxLength={120}
+				/>
+			)}
+			{contentMatches && (
+				<HighlightText
+					text={item.processedContent}
+					searchQuery={query}
+					className="text-muted-foreground text-xs leading-4"
+					maxLength={120}
+				/>
+			)}
+			{!excerptMatches && !contentMatches && (
+				<HighlightText
+					text={item.processedExcerpt || item.processedContent}
+					searchQuery={query}
+					className="text-muted-foreground text-xs leading-4"
+					maxLength={120}
+				/>
+			)}
+		</button>
+	);
+};
+
+export function SearchInput({
+	className,
+	triggerClassName,
+	placeholder,
+	buttonText,
+	emptyMessage,
+}: SearchInputProps) {
+	const { navigate } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const basePath = useBasePath();
+	const [currentQuery, setCurrentQuery] = React.useState("");
+
+	const { data: searchResults = [], isLoading } = usePostSearch({
+		query: currentQuery,
+		enabled: currentQuery.trim().length > 0,
+		debounceMs: 300,
+		published: true,
+	});
+
+	const formattedResults: BlogPostSearchResult[] = React.useMemo(() => {
+		return searchResults.map((post) => ({
+			id: post.id,
+			title: post.title,
+			slug: post.slug,
+			publishedAt: post.publishedAt,
+			authorName: "",
+			processedContent: stripMarkdown(stripHtml(post.content || "")),
+			processedExcerpt: stripMarkdown(stripHtml(post.excerpt || "")),
+			onClick: () => navigate(`${basePath}/blog/${post.slug}`),
+		}));
+	}, [searchResults, navigate, basePath]);
+
+	// Search function that updates our query state
+	const handleSearch = React.useCallback(
+		(query: string): BlogPostSearchResult[] => {
+			setCurrentQuery(query);
+			return []; // Return empty since we use external async results
+		},
+		[],
+	);
+
+	return (
+		<SearchModal<BlogPostSearchResult>
+			placeholder={placeholder}
+			buttonText={buttonText}
+			emptyMessage={emptyMessage}
+			searchFn={handleSearch}
+			renderResult={renderBlogResult}
+			results={formattedResults}
+			isLoading={isLoading}
+			className={className}
+			triggerClassName={triggerClassName}
+			keyboardShortcut="⌘K"
+		/>
+	);
+}
+
+export default SearchInput;

package/src/plugins/blog/client/components/shared/search-modal.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { useDebounce } from "../../hooks/use-debounce";
+
+import {
+	CommandDialog,
+	CommandEmpty,
+	CommandInput,
+	CommandList,
+} from "@workspace/ui/components/command";
+
+export interface SearchResult {
+	id: string;
+	title: string;
+	subtitle?: string;
+	content?: string;
+	onClick?: () => void;
+}
+
+export interface SearchModalProps<T = SearchResult> {
+	placeholder?: string;
+	emptyMessage?: string;
+	buttonText?: string;
+	keyboardShortcut?: string;
+	searchFn: (query: string) => T[];
+	renderResult: (item: T, index: number, query: string) => React.ReactNode;
+	results?: T[];
+	isLoading?: boolean;
+	groupTitle?: string;
+	className?: string;
+	triggerClassName?: string;
+}
+
+export function SearchModal<T extends SearchResult>({
+	placeholder = "Type to search...",
+	emptyMessage = "No results found.",
+	buttonText = "Search",
+	keyboardShortcut = "⌘K",
+	searchFn,
+	renderResult,
+	results: externalResults,
+	isLoading = false,
+	className,
+	triggerClassName,
+}: SearchModalProps<T>) {
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const [results, setResults] = React.useState<T[]>([]);
+
+	// Only debounce if not using external results
+	const shouldDebounce = externalResults === undefined;
+	const debouncedQuery = useDebounce(query, shouldDebounce ? 300 : 0);
+
+	// Handle keyboard shortcut
+	React.useEffect(() => {
+		const down = (e: KeyboardEvent) => {
+			const cleanShortcut = keyboardShortcut
+				.replace("⌘", "")
+				.replace("⇧", "")
+				.toLowerCase();
+			if (e.key === cleanShortcut && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+
+				setOpen((open) => !open);
+			}
+		};
+
+		document.addEventListener("keydown", down);
+		return () => document.removeEventListener("keydown", down);
+	}, [keyboardShortcut]);
+
+	React.useEffect(() => {
+		if (!open) {
+			setQuery("");
+			setResults([]);
+			return;
+		}
+	}, [open]);
+
+	React.useEffect(() => {
+		if (!open) return;
+
+		// Always call searchFn to notify parent component of the search query
+		const searchResults = searchFn(debouncedQuery);
+
+		// If external results are provided, use them; otherwise use searchFn results
+		if (externalResults !== undefined) {
+			setResults(externalResults);
+		} else {
+			setResults(searchResults);
+		}
+	}, [debouncedQuery, open, searchFn, externalResults]);
+
+	// Base button classes for better readability
+	const buttonClasses = [
+		"border-input bg-background text-foreground",
+		"placeholder:text-muted-foreground",
+		"focus-visible:border-ring focus-visible:ring-ring/50",
+		"inline-flex h-9 w-fit rounded-md border px-3 py-2 text-sm",
+		"shadow-xs transition-[color,box-shadow] outline-none",
+		"focus-visible:ring-[3px]",
+		triggerClassName,
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	// Determine what to show based on state
+	const showEmpty = debouncedQuery && !isLoading && results.length === 0;
+	const currentEmptyMessage = isLoading ? "Searching..." : emptyMessage;
+
+	return (
+		<>
+			<button
+				data-testid="search-button"
+				type="button"
+				className={buttonClasses}
+				onClick={() => setOpen(true)}
+			>
+				<span className="flex grow items-center">
+					<SearchIcon
+						className="-ms-1 me-3 text-muted-foreground"
+						size={16}
+						aria-hidden="true"
+					/>
+					<span className="font-normal text-muted-foreground">
+						{buttonText}
+					</span>
+				</span>
+				{keyboardShortcut && (
+					<kbd className="-me-1 ms-12 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground">
+						{keyboardShortcut}
+					</kbd>
+				)}
+			</button>
+			<CommandDialog
+				data-testid="search-modal"
+				open={open}
+				onOpenChange={setOpen}
+				className={className}
+			>
+				<CommandInput
+					data-testid="search-input"
+					placeholder={placeholder}
+					value={query}
+					onValueChange={setQuery}
+				/>
+				<CommandList className="max-h-[400px]">
+					{showEmpty && <CommandEmpty>{currentEmptyMessage}</CommandEmpty>}
+
+					{results.length > 0 &&
+						results.map((item, index) =>
+							renderResult(item, index, debouncedQuery),
+						)}
+				</CommandList>
+			</CommandDialog>
+		</>
+	);
+}
+
+export default SearchModal;

package/src/plugins/blog/client/components/shared/tags-list.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { DefaultLink } from "./defaults";
+import { Badge } from "@workspace/ui/components/badge";
+import { useSuspenseTags } from "../../hooks/blog-hooks";
+
+export function TagsList() {
+	const { tags } = useSuspenseTags();
+	const { Link } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		Link: DefaultLink,
+	});
+	const basePath = useBasePath();
+
+	if (!tags || tags.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className="flex flex-wrap gap-2 justify-center">
+			{tags.map((tag) => (
+				<Link key={tag.id} href={`${basePath}/blog/tag/${tag.slug}`}>
+					<Badge variant="secondary" className="text-xs">
+						{tag.name}
+					</Badge>
+				</Link>
+			))}
+		</div>
+	);
+}

package/src/plugins/blog/client/components/shared/use-route-lifecycle.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides, RouteContext } from "../../overrides";
+
+/**
+ * Hook to handle route lifecycle events
+ * - Calls authorization check before render
+ * - Calls onRouteRender on mount
+ * - Handles errors with onRouteError
+ */
+export function useRouteLifecycle({
+	routeName,
+	context,
+	beforeRenderHook,
+}: {
+	routeName: string;
+	context: RouteContext;
+	beforeRenderHook?: (
+		overrides: BlogPluginOverrides,
+		context: RouteContext,
+	) => boolean;
+}) {
+	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+
+	// Authorization check - runs synchronously before render
+	if (beforeRenderHook) {
+		const canRender = beforeRenderHook(overrides, context);
+		if (!canRender) {
+			const error = new Error(`Unauthorized: Cannot render ${routeName}`);
+			// Call error hook synchronously
+			if (overrides.onRouteError) {
+				try {
+					const result = overrides.onRouteError(routeName, error, context);
+					if (result instanceof Promise) {
+						result.catch(() => {}); // Ignore promise rejection
+					}
+				} catch {
+					// Ignore errors in error hook
+				}
+			}
+			throw error;
+		}
+	}
+
+	// Lifecycle hook - runs on mount
+	useEffect(() => {
+		if (overrides.onRouteRender) {
+			try {
+				const result = overrides.onRouteRender(routeName, context);
+				if (result instanceof Promise) {
+					result.catch((error) => {
+						// If onRouteRender throws, call onRouteError
+						if (overrides.onRouteError) {
+							overrides.onRouteError(routeName, error, context);
+						}
+					});
+				}
+			} catch (error) {
+				// If onRouteRender throws, call onRouteError
+				if (overrides.onRouteError) {
+					overrides.onRouteError(routeName, error as Error, context);
+				}
+			}
+		}
+	}, [routeName, overrides, context]);
+}