bsmnt 0.4.3 → 0.5.0

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/page-tree-pane.tsx

@@ -0,0 +1,420 @@
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/ssr";
+import {
+	Badge,
+	Box,
+	Card,
+	Flex,
+	Spinner,
+	Stack,
+	Text,
+	TextInput,
+} from "@sanity/ui";
+import { useEffect, useRef, useState } from "react";
+import { asyncScheduler, from, merge, of } from "rxjs";
+import { switchMap, throttleTime } from "rxjs/operators";
+import { type SanityClient, useClient } from "sanity";
+import { usePaneRouter } from "sanity/structure";
+import { apiVersion } from "./env";
+import { pageFolderIcon, pinIcon } from "./icons";
+import {
+	getPageCategoryIcon,
+	type PageBuilderGroupName,
+} from "./page-builder-config";
+import { pageCategoryExpression } from "./page-category";
+import {
+	PINNED_PAGE_ENTRIES,
+	PINNED_PAGE_IDS,
+	type PinnedPageEntry,
+} from "./pinned-pages";
+
+const NO_MATCHES = "No matches found";
+const NO_PAGES_OR_FOLDERS = "No pages or folders here yet";
+
+interface PageTreeItem {
+	_id: string;
+	_originalId?: string;
+	_type: "page" | "pageFolder";
+	title?: string | null;
+	slug?: string | null;
+	pageType?: PageBuilderGroupName | null;
+}
+
+// `_originalId` is prefixed `drafts.` when an unpublished edit exists.
+const isDraftItem = (item: PageTreeItem) =>
+	!!item._originalId?.startsWith("drafts.");
+
+type ActiveState = "leaf" | "ancestor" | "none";
+
+const PAGE_TREE_ITEM_ID_PREFIX = {
+	page: "page-tree-",
+	pageFolder: "page-folder-tree-",
+} as const;
+
+const PAGE_TREE_PANE_STYLE_ID = "page-tree-pane-style";
+
+// Constrain the tree pane width so the slug/title rows stay readable. Runs once
+// (id-guarded) from inside the component so the injection lives in React's tree.
+const usePaneWidthStyle = () => {
+	useEffect(() => {
+		if (
+			typeof document === "undefined" ||
+			document.getElementById(PAGE_TREE_PANE_STYLE_ID)
+		) {
+			return;
+		}
+		const style = document.createElement("style");
+		style.id = PAGE_TREE_PANE_STYLE_ID;
+		style.textContent = `[data-ui="Pane"][id^="page-tree-"]{max-width:350px;}`;
+		document.head.appendChild(style);
+	}, []);
+};
+
+const PAGE_TREE_QUERY = `
+  *[
+    (
+      _type == "pageFolder" &&
+      (
+        ($folderId == null && !defined(parentFolder._ref)) ||
+        parentFolder._ref == $folderId
+      )
+    ) ||
+    (
+      _type == "page" &&
+      (
+        ($folderId == null && !defined(pageFolder._ref)) ||
+        pageFolder._ref == $folderId
+      )
+    )
+  ]{
+    _id,
+    _originalId,
+    _type,
+    title,
+    "slug": slug.current,
+    "pageType": ${pageCategoryExpression}
+  }
+`;
+
+const normalizeId = (id: string) => id.replace(/^drafts\./, "");
+
+const getItemId = (item: Pick<PageTreeItem, "_id" | "_type">) =>
+	`${PAGE_TREE_ITEM_ID_PREFIX[item._type]}${normalizeId(item._id)}`;
+
+const sortItems = (items: PageTreeItem[]) =>
+	[...items].sort((a, b) => {
+		if (a._type !== b._type) return a._type === "page" ? -1 : 1;
+		// Pages without a slug (e.g. the homepage) float to the top.
+		if (!a.slug && a._type === "page") return -1;
+		if (!b.slug && b._type === "page") return 1;
+		return (a.title ?? "").localeCompare(b.title ?? "");
+	});
+
+interface PageTreePaneProps {
+	options?: Record<string, unknown>;
+}
+
+export const PageTreePane = ({ options }: PageTreePaneProps) => {
+	const folderId = (options?.folderId as string | null | undefined) ?? null;
+
+	usePaneWidthStyle();
+
+	const [items, setItems] = useState<PageTreeItem[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [query, setQuery] = useState("");
+
+	const baseClient = useClient({ apiVersion });
+	// Pinned to drafts so the tree shows in-progress edits and the Draft badge.
+	const clientRef = useRef<SanityClient | null>(null);
+	if (!clientRef.current) {
+		clientRef.current = baseClient.withConfig({ perspective: "drafts" });
+	}
+	const client = clientRef.current;
+
+	const { ChildLink, routerPanesState, groupIndex } = usePaneRouter();
+	const activeChildId = routerPanesState[groupIndex + 1]?.[0]?.id ?? null;
+	const isLeafPane = routerPanesState.length === groupIndex + 2;
+
+	useEffect(() => {
+		setLoading(true);
+		// Initial fetch, then refetch on each folder-scoped mutation to stay live.
+		const subscription = merge(
+			of(null),
+			client
+				.listen<PageTreeItem>(
+					folderId == null
+						? `*[_type in ["page", "pageFolder"] && !defined(parentFolder._ref) && !defined(pageFolder._ref)]`
+						: `*[_type in ["page", "pageFolder"] && (parentFolder._ref == $folderId || pageFolder._ref == $folderId)]`,
+					{ folderId },
+					{ visibility: "query", events: ["mutation"], includeResult: false },
+				)
+				.pipe(
+					// leading+trailing: react to the first edit at once, coalesce the rest.
+					throttleTime(300, asyncScheduler, {
+						leading: true,
+						trailing: true,
+					}),
+				),
+		)
+			.pipe(
+				switchMap(() =>
+					from(client.fetch<PageTreeItem[]>(PAGE_TREE_QUERY, { folderId })),
+				),
+			)
+			.subscribe({
+				next: (data) => {
+					setItems(data);
+					setLoading(false);
+				},
+				error: () => setLoading(false),
+			});
+
+		return () => subscription.unsubscribe();
+	}, [folderId, client]);
+
+	// Pinned pages get their own section, so drop them from the dynamic list.
+	const visible =
+		folderId == null
+			? items.filter((item) => !PINNED_PAGE_IDS.has(item._id))
+			: items;
+	const sorted = sortItems(visible);
+	const term = query.toLowerCase().trim();
+	const filtered = term
+		? sorted.filter(
+				(item) =>
+					item.title?.toLowerCase().includes(term) ||
+					item.slug?.toLowerCase().includes(term),
+			)
+		: sorted;
+	const showPinned = folderId == null && !term;
+
+	return (
+		<Flex direction="column" style={{ height: "100%" }}>
+			<PageTreeSearch
+				query={query}
+				onQueryChange={setQuery}
+				autoFocus={folderId == null}
+			/>
+			<Box style={{ borderBottom: "1px solid var(--card-border-color)" }} />
+			{showPinned && (
+				<Stack>
+					{PINNED_PAGE_ENTRIES.map((entry) => {
+						const activeState: ActiveState =
+							activeChildId === entry.id
+								? isLeafPane
+									? "leaf"
+									: "ancestor"
+								: "none";
+						return (
+							<PinnedRow
+								key={entry.id}
+								entry={entry}
+								ChildLink={ChildLink}
+								activeState={activeState}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+			<TreeBody
+				loading={loading}
+				items={filtered}
+				emptyMessage={term ? NO_MATCHES : NO_PAGES_OR_FOLDERS}
+				ChildLink={ChildLink}
+				activeChildId={activeChildId}
+				isLeafPane={isLeafPane}
+			/>
+		</Flex>
+	);
+};
+
+interface PageTreeSearchProps {
+	query: string;
+	onQueryChange: (value: string) => void;
+	autoFocus?: boolean;
+}
+
+const PageTreeSearch = ({
+	query,
+	onQueryChange,
+	autoFocus,
+}: PageTreeSearchProps) => (
+	<Box padding={3}>
+		<TextInput
+			icon={MagnifyingGlassIcon}
+			placeholder="Filter pages and folders…"
+			value={query}
+			onChange={(e) => onQueryChange(e.currentTarget.value)}
+			clearButton={!!query}
+			onClear={() => onQueryChange("")}
+			autoFocus={autoFocus}
+		/>
+	</Box>
+);
+
+interface TreeBodyProps {
+	loading: boolean;
+	items: PageTreeItem[];
+	emptyMessage: string;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeChildId: string | null;
+	isLeafPane: boolean;
+}
+
+const TreeBody = ({
+	loading,
+	items,
+	emptyMessage,
+	ChildLink,
+	activeChildId,
+	isLeafPane,
+}: TreeBodyProps) => (
+	<Box style={{ flex: 1, overflowY: "auto" }}>
+		{loading && <Loading />}
+		{!loading && items.length === 0 && <Empty message={emptyMessage} />}
+		{!loading && items.length > 0 && (
+			<Stack>
+				{items.map((item) => {
+					const isActive = getItemId(item) === activeChildId;
+					let activeState: ActiveState = "none";
+					if (isActive) activeState = isLeafPane ? "leaf" : "ancestor";
+					return (
+						<ItemRow
+							key={item._id}
+							item={item}
+							ChildLink={ChildLink}
+							activeState={activeState}
+						/>
+					);
+				})}
+			</Stack>
+		)}
+	</Box>
+);
+
+const Loading = () => (
+	<Flex justify="center" padding={4}>
+		<Spinner />
+	</Flex>
+);
+
+const Empty = ({ message }: { message: string }) => (
+	<Flex padding={4} justify="center">
+		<Text muted size={1}>
+			{message}
+		</Text>
+	</Flex>
+);
+
+interface ItemRowProps {
+	item: PageTreeItem;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}
+
+const ItemIcon = ({ item }: { item: PageTreeItem }) => {
+	const Icon =
+		item._type === "pageFolder"
+			? pageFolderIcon
+			: getPageCategoryIcon(item.pageType);
+	return <Icon />;
+};
+
+const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
+	const fallback = item._type === "page" ? "Untitled Page" : "Untitled Folder";
+	const isLeaf = activeState === "leaf";
+	const isAncestor = activeState === "ancestor";
+
+	return (
+		<ChildLink childId={getItemId(item)}>
+			<Card
+				as="div"
+				padding={3}
+				radius={0}
+				pressed={isLeaf}
+				selected={isAncestor}
+				tone={isLeaf ? "primary" : "default"}
+				style={{
+					cursor: "pointer",
+					display: "block",
+					...(isLeaf && {
+						backgroundColor: "var(--card-badge-primary-bg-color)",
+						color: "var(--card-badge-primary-fg-color)",
+					}),
+					...(isAncestor && {
+						backgroundColor: "var(--card-muted-bg-color)",
+					}),
+				}}
+			>
+				<Flex align="center" gap={3}>
+					<Box style={{ flexShrink: 0 }}>
+						<ItemIcon item={item} />
+					</Box>
+					<Stack space={2} flex={1}>
+						<Flex align="center" gap={2}>
+							<Text size={1} weight="medium">
+								{item.title ?? fallback}
+							</Text>
+							{isDraftItem(item) && (
+								<Badge fontSize={0} mode="outline" tone="caution">
+									Draft
+								</Badge>
+							)}
+						</Flex>
+						{item.slug && (
+							<Text size={0} muted weight="regular">
+								/{item.slug}
+							</Text>
+						)}
+					</Stack>
+				</Flex>
+			</Card>
+		</ChildLink>
+	);
+};
+
+interface PinnedRowProps {
+	entry: PinnedPageEntry;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}
+
+const PinnedRow = ({ entry, ChildLink, activeState }: PinnedRowProps) => {
+	const isLeaf = activeState === "leaf";
+	const isAncestor = activeState === "ancestor";
+	const Icon = pinIcon;
+
+	return (
+		<ChildLink childId={entry.id}>
+			<Card
+				as="div"
+				padding={3}
+				radius={0}
+				pressed={isLeaf}
+				selected={isAncestor}
+				tone={isLeaf ? "primary" : "default"}
+				style={{
+					cursor: "pointer",
+					display: "block",
+					...(isLeaf && {
+						backgroundColor: "var(--card-badge-primary-bg-color)",
+						color: "var(--card-badge-primary-fg-color)",
+					}),
+					...(isAncestor && {
+						backgroundColor: "var(--card-muted-bg-color)",
+					}),
+				}}
+			>
+				<Flex align="center" gap={3}>
+					<Box style={{ flexShrink: 0 }}>
+						<Icon />
+					</Box>
+					<Stack space={2} flex={1}>
+						<Text size={1} weight="medium">
+							{entry.title}
+						</Text>
+					</Stack>
+				</Flex>
+			</Card>
+		</ChildLink>
+	);
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/pinned-pages.ts

@@ -0,0 +1,54 @@
+import { pageIcon, type SanityStudioIcon } from "./icons";
+
+export type PinnedPageEntry = {
+	/** Sanity document _id. Doubles as the Studio template id. */
+	id: string;
+	/** Sanity document draft _id (`drafts.${id}`). */
+	draftId: string;
+	/** Title shown in Studio listings and used as the initial `title` value. */
+	title: string;
+	/** Icon shown in Studio. */
+	icon: SanityStudioIcon;
+	/** Public URL path. Used for link resolution + presentation. */
+	path: string;
+	/** Slug.current seeded into the template. `null` means no slug (homepage). */
+	slug: string | null;
+};
+
+export const HOMEPAGE_PINNED_PAGE: PinnedPageEntry = {
+	id: "page-homepage",
+	draftId: "drafts.page-homepage",
+	title: "Homepage",
+	icon: pageIcon,
+	path: "/",
+	slug: null,
+};
+
+export const BLOG_INDEX_PINNED_PAGE: PinnedPageEntry = {
+	id: "page-blog-index",
+	draftId: "drafts.page-blog-index",
+	title: "Blog Index",
+	icon: pageIcon,
+	path: "/blog",
+	slug: "blog",
+};
+
+export const PINNED_PAGE_ENTRIES: PinnedPageEntry[] = [
+	HOMEPAGE_PINNED_PAGE,
+	BLOG_INDEX_PINNED_PAGE,
+];
+
+export const PINNED_PAGE_IDS: ReadonlySet<string> = new Set(
+	PINNED_PAGE_ENTRIES.flatMap((entry) => [entry.id, entry.draftId]),
+);
+
+const pinnedPageById = new Map(
+	PINNED_PAGE_ENTRIES.flatMap((entry) => [
+		[entry.id, entry] as const,
+		[entry.draftId, entry] as const,
+	]),
+);
+
+/** Look up a pinned page entry by either its published or draft id. */
+export const getPinnedPageById = (id: string | null | undefined) =>
+	id ? (pinnedPageById.get(id) ?? null) : null;

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/presentation.ts

@@ -0,0 +1,119 @@
+import type { Observable } from "rxjs";
+import { map } from "rxjs/operators";
+import type { DocumentStore } from "sanity";
+import {
+	type DocumentLocationsState,
+	defineDocuments,
+	presentationTool,
+} from "sanity/presentation";
+import { previewURL } from "./env";
+import { getPinnedPageById, HOMEPAGE_PINNED_PAGE } from "./pinned-pages";
+
+const MAX_FOLDER_DEPTH = 6;
+
+const buildNestedSlugExpression = (
+	parentReferenceField: string,
+	leafSlugField: string,
+) => {
+	const cases = Array.from({ length: MAX_FOLDER_DEPTH }, (_, index) => {
+		const depth = MAX_FOLDER_DEPTH - index;
+		const parentSlugRefs = Array.from({ length: depth }, (_, parentIndex) => {
+			const remainingDepth = depth - parentIndex - 1;
+			return `${parentReferenceField}${"->parentFolder".repeat(remainingDepth)}->slug.current`;
+		});
+
+		const pathDefinedChecks = parentSlugRefs
+			.map((field) => `defined(${field})`)
+			.join(" && ");
+
+		const childPath = [...parentSlugRefs, leafSlugField].join(' + "/" + ');
+		const folderRootPath = parentSlugRefs.join(' + "/" + ');
+
+		return [
+			`${pathDefinedChecks} && ${leafSlugField} == "/" => ${folderRootPath}`,
+			`${pathDefinedChecks} && defined(${leafSlugField}) => ${childPath}`,
+		];
+	}).flat();
+
+	return `select(${cases.join(",\n      ")},${leafSlugField})`;
+};
+
+const pageResolvedSlugExpression = buildNestedSlugExpression(
+	"pageFolder",
+	"slug.current",
+);
+
+const CONTENT_TYPE_PREFIXES: Record<string, string> = {
+	blogContent: "blog",
+};
+
+const resolveSlugLocation = <T extends { title?: string }>(
+	documentStore: DocumentStore,
+	id: string,
+	projection: string,
+	toHref: (doc: T) => string | null,
+	fallbackTitle: string,
+): Observable<DocumentLocationsState> =>
+	documentStore
+		.listenQuery(`*[_id == $id][0]{ ${projection} }`, { id }, {})
+		.pipe(
+			map((doc: T | null) => {
+				const href = doc ? toHref(doc) : null;
+				if (!href) return { locations: [] };
+				return { locations: [{ title: doc?.title || fallbackTitle, href }] };
+			}),
+		);
+
+export const presentation = presentationTool({
+	name: "preview",
+	title: "Preview",
+	resolve: {
+		mainDocuments: defineDocuments([
+			{
+				route: "/",
+				filter: `_type == "page" && _id == "${HOMEPAGE_PINNED_PAGE.id}"`,
+			},
+			...Object.entries(CONTENT_TYPE_PREFIXES).map(([type, prefix]) => ({
+				route: `/${prefix}/:slug`,
+				filter: `_type == "${type}" && slug.current == $slug`,
+			})),
+			{
+				route: "/:slug+",
+				filter: `_type == "page" && ${pageResolvedSlugExpression} == $slug`,
+			},
+		]),
+		locations: (params, { documentStore }) => {
+			if (params.type === "page") {
+				const pinned = getPinnedPageById(params.id);
+				if (pinned) {
+					return { locations: [{ title: pinned.title, href: pinned.path }] };
+				}
+				return resolveSlugLocation<{ title?: string; resolvedSlug?: string }>(
+					documentStore,
+					params.id,
+					`title, "resolvedSlug": ${pageResolvedSlugExpression}`,
+					(doc) => (doc.resolvedSlug ? `/${doc.resolvedSlug}` : null),
+					"Page",
+				);
+			}
+
+			const prefix = CONTENT_TYPE_PREFIXES[params.type];
+			if (!prefix) return null;
+
+			return resolveSlugLocation<{ title?: string; slug?: string }>(
+				documentStore,
+				params.id,
+				`title, "slug": slug.current`,
+				(doc) => (doc.slug ? `/${prefix}/${doc.slug}` : null),
+				"Untitled",
+			);
+		},
+	},
+	previewUrl: {
+		origin: previewURL,
+		draftMode: {
+			enable: "/api/draft-mode/enable",
+			disable: "/api/draft-mode/disable",
+		},
+	},
+});