bsmnt 0.9.0 → 0.11.0

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/page-builder-config.ts

@@ -0,0 +1,144 @@
+import { contentIcon, pageIcon, type SanityStudioIcon } from "./icons";
+import { singletonComponents } from "./singletons";
+
+export type PageBuilderDocumentType =
+	| "hero"
+	| "description"
+	| "richTextBlock"
+	| "gatedContent"
+	| "blogContent"
+	| (typeof singletonComponents)[number]["schemaType"];
+
+type PageBuilderReferenceMember = {
+	documentType: PageBuilderDocumentType;
+	name: string;
+	title: string;
+	documentId?: string;
+	groups: PageBuilderGroupName[];
+};
+
+export type PageBuilderGroupName = "generic" | "blogEntry";
+
+export const pageBuilderPageTypes: Array<{
+	title: string;
+	value: PageBuilderGroupName;
+}> = [
+	{ title: "Generic", value: "generic" },
+	{ title: "Blog Entry", value: "blogEntry" },
+];
+
+const pageCategoryIcons: Record<PageBuilderGroupName, SanityStudioIcon> = {
+	generic: pageIcon,
+	blogEntry: contentIcon,
+};
+
+export const getPageCategoryIcon = (
+	pageType: PageBuilderGroupName | undefined | null,
+) => pageCategoryIcons[pageType ?? "generic"];
+
+const reusablePageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
+	{
+		documentType: "hero",
+		name: "heroReference",
+		title: "Heading",
+		groups: ["generic"],
+	},
+	{
+		documentType: "description",
+		name: "descriptionReference",
+		title: "Description",
+		groups: ["generic"],
+	},
+	{
+		documentType: "richTextBlock",
+		name: "richTextBlockReference",
+		title: "Rich Text",
+		groups: ["generic"],
+	},
+	{
+		documentType: "gatedContent",
+		name: "gatedContentReference",
+		title: "Gated Content",
+		groups: ["generic"],
+	},
+	{
+		documentType: "blogContent",
+		name: "blogContentReference",
+		title: "Blog Content",
+		groups: ["blogEntry"],
+	},
+];
+
+const singletonPageBuilderReferenceMembers: PageBuilderReferenceMember[] =
+	singletonComponents.map((component) => ({
+		documentType: component.schemaType,
+		name: `${component.schemaType}Reference`,
+		title: component.title,
+		documentId: component.documentId,
+		groups: ["generic"],
+	}));
+
+export const pageBuilderReferenceMembers: PageBuilderReferenceMember[] = [
+	...reusablePageBuilderReferenceMembers,
+	...singletonPageBuilderReferenceMembers,
+];
+
+export const getPageBuilderReferenceMember = (name: string) =>
+	pageBuilderReferenceMembers.find((member) => member.name === name);
+
+export const getPageBuilderReferenceMemberByDocumentType = (
+	documentType: PageBuilderDocumentType,
+) =>
+	pageBuilderReferenceMembers.find(
+		(member) => member.documentType === documentType,
+	);
+
+const isPageBuilderGroupVisible = (
+	pageType: PageBuilderGroupName | undefined,
+	group: PageBuilderGroupName,
+) => (pageType ?? "generic") === group;
+
+export const getVisiblePageBuilderReferenceMembers = (
+	pageType: PageBuilderGroupName | undefined,
+) =>
+	pageBuilderReferenceMembers.filter((member) =>
+		member.groups.some((group) => isPageBuilderGroupVisible(pageType, group)),
+	);
+
+export const getVisiblePageBuilderInsertMenuGroups = (
+	pageType: PageBuilderGroupName | undefined,
+) =>
+	pageBuilderInsertMenuGroups.filter(
+		(group) => group.name === (pageType ?? "generic"),
+	);
+
+export const getInvalidPageBuilderDocumentTypes = (
+	pageType: PageBuilderGroupName | undefined,
+	documentTypes: PageBuilderDocumentType[],
+) =>
+	documentTypes.filter((documentType) => {
+		const member = getPageBuilderReferenceMemberByDocumentType(documentType);
+
+		if (!member) return false;
+
+		return !member.groups.some((group) =>
+			isPageBuilderGroupVisible(pageType, group),
+		);
+	});
+
+export const pageBuilderInsertMenuGroups = [
+	{
+		name: "generic",
+		title: "Generic",
+		of: pageBuilderReferenceMembers
+			.filter((member) => member.groups.includes("generic"))
+			.map((member) => member.name),
+	},
+	{
+		name: "blogEntry",
+		title: "Blog Entry",
+		of: pageBuilderReferenceMembers
+			.filter((member) => member.groups.includes("blogEntry"))
+			.map((member) => member.name),
+	},
+];

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/page-category.ts

@@ -0,0 +1,28 @@
+import type { PageBuilderGroupName } from "@/lib/integrations/sanity/page-builder-config";
+
+type PageCategoryParams = {
+	slug?: string | null;
+	folder?: string | null;
+};
+
+export const isEmptyPageSlug = (slug?: string | null) =>
+	slug == null || slug === "" || slug === "/";
+
+export const getGeneratedPageCategory = ({
+	slug,
+	folder,
+}: PageCategoryParams): PageBuilderGroupName => {
+	if (!isEmptyPageSlug(slug) && folder === "blog") return "blogEntry";
+
+	return "generic";
+};
+
+export const pageCategoryExpression = `
+  select(
+    defined(slug.current) &&
+      slug.current != "" &&
+      slug.current != "/" &&
+      pageFolder->slug.current == "blog" => "blogEntry",
+    "generic"
+  )
+`;

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

@@ -0,0 +1,431 @@
+import {
+	MagnifyingGlassIcon,
+	PushPinIcon,
+} from "@phosphor-icons/react/dist/ssr";
+import {
+	Badge,
+	Box,
+	Card,
+	Flex,
+	Spinner,
+	Stack,
+	Text,
+	TextInput,
+} from "@sanity/ui";
+import { type ReactNode, 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 } 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) => {
+						let activeState: ActiveState = "none";
+						if (activeChildId === entry.id) {
+							activeState = isLeafPane ? "leaf" : "ancestor";
+						}
+						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 />;
+};
+
+// One presentation for every row in the tree, so pinned entries and documents
+// can't drift apart on spacing or which lines they show.
+const TreeRow = ({
+	childId,
+	icon,
+	title,
+	path,
+	badge,
+	ChildLink,
+	activeState,
+}: {
+	childId: string;
+	icon: ReactNode;
+	title: string;
+	path: string | null;
+	badge?: ReactNode;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}) => {
+	const isLeaf = activeState === "leaf";
+	const isAncestor = activeState === "ancestor";
+
+	return (
+		<ChildLink childId={childId}>
+			<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}>
+					{/* Sized here rather than by the caller: Phosphor icons are 1em, so
+					    one left to inherit the ambient font size renders wider than one
+					    wrapped in <Text> and pushes its whole row out of line. */}
+					<Box style={{ flexShrink: 0 }}>
+						<Text size={1}>{icon}</Text>
+					</Box>
+					<Stack space={2} flex={1}>
+						<Flex align="center" gap={2}>
+							<Text size={1} weight="medium">
+								{title}
+							</Text>
+							{badge}
+						</Flex>
+						{path && (
+							<Text size={0} muted weight="regular">
+								{path}
+							</Text>
+						)}
+					</Stack>
+				</Flex>
+			</Card>
+		</ChildLink>
+	);
+};
+
+const ItemRow = ({ item, ChildLink, activeState }: ItemRowProps) => {
+	const fallback = item._type === "page" ? "Untitled Page" : "Untitled Folder";
+
+	return (
+		<TreeRow
+			childId={getItemId(item)}
+			icon={<ItemIcon item={item} />}
+			title={item.title ?? fallback}
+			path={item.slug ? `/${item.slug}` : null}
+			badge={
+				isDraftItem(item) ? (
+					<Badge fontSize={0} mode="outline" tone="caution">
+						Draft
+					</Badge>
+				) : undefined
+			}
+			ChildLink={ChildLink}
+			activeState={activeState}
+		/>
+	);
+};
+
+const PinnedRow = ({
+	entry,
+	ChildLink,
+	activeState,
+}: {
+	entry: PinnedPageEntry;
+	ChildLink: ReturnType<typeof usePaneRouter>["ChildLink"];
+	activeState: ActiveState;
+}) => (
+	<TreeRow
+		childId={entry.id}
+		icon={<PushPinIcon />}
+		title={entry.title}
+		path={entry.path}
+		ChildLink={ChildLink}
+		activeState={activeState}
+	/>
+);

package/src/modules/features/cms/sanity-pagebuilder-cache/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;