bsmnt 0.13.1 → 0.15.0

package/src/modules/features/cms/sanity-pagebuilder-cache/files/lib/integrations/sanity/components/page-builder-insert-menu.tsx

@@ -12,6 +12,11 @@ import {
 } from "@sanity/ui";
 import { useMemo, useState } from "react";
 import type { ArrayInputFunctionsProps, ArraySchemaType } from "sanity";
+import {
+	getComponentPreviewPath,
+	getLibraryEntry,
+} from "@/components/page-builder/library";
+import { ComponentPreviewFrame } from "./component-preview-frame";
 
 type ArrayItem = { _key: string };
 type MemberSchemaType = ArraySchemaType["of"][number];
@@ -24,18 +29,22 @@ type InsertMenuSection = {
 	members: MemberSchemaType[];
 };
 
-const SCROLL_HEIGHT = "min(60vh, 34rem)";
-const TILE_ASPECT_RATIO = "3 / 2";
+const DIALOG_HEIGHT = "min(70vh, 42rem)";
+const CHOICE_LIST_WIDTH = 260;
 
 const memberTitle = (member: MemberSchemaType) => member.title ?? member.name;
 
-function BlockTile({
+function ChoiceRow({
+	active,
 	member,
-	previewUrl,
+	notes,
+	onAdd,
 	onSelect,
 }: {
+	active: boolean;
 	member: MemberSchemaType;
-	previewUrl: string | undefined;
+	notes: string | undefined;
+	onAdd: () => void;
 	onSelect: () => void;
 }) {
 	const Icon = member.icon;
@@ -43,63 +52,42 @@ function BlockTile({
 	return (
 		<Card
 			as="button"
-			border
 			onClick={onSelect}
-			overflow="hidden"
-			padding={0}
+			onDoubleClick={onAdd}
+			padding={2}
+			pressed={active}
 			radius={2}
 			style={{ cursor: "pointer", textAlign: "left", width: "100%" }}
+			tone={active ? "primary" : "default"}
 			type="button"
 		>
-			<Stack space={0}>
-				<Box
-					style={{
-						aspectRatio: TILE_ASPECT_RATIO,
-						background: "var(--card-muted-bg-color)",
-						position: "relative",
-					}}
-				>
-					{previewUrl ? (
-						// biome-ignore lint/performance/noImgElement: Studio-only CMS asset
-						<img
-							alt=""
-							src={`${previewUrl}?w=640&fit=max&auto=format`}
-							style={{
-								height: "100%",
-								inset: 0,
-								objectFit: "contain",
-								position: "absolute",
-								width: "100%",
-							}}
-						/>
-					) : (
-						<Flex
-							align="center"
-							justify="center"
-							style={{ inset: 0, position: "absolute" }}
-						>
-							{Icon ? <Icon /> : null}
-						</Flex>
-					)}
-				</Box>
-				<Box padding={2}>
-					<Text size={1} textOverflow="ellipsis" weight="medium">
+			<Flex align="flex-start" gap={3}>
+				{Icon ? (
+					<Text size={2}>
+						<Icon />
+					</Text>
+				) : null}
+				<Stack flex={1} space={2}>
+					<Text size={1} weight="medium">
 						{memberTitle(member)}
 					</Text>
-				</Box>
-			</Stack>
+					{notes ? (
+						<Text muted size={0} style={{ lineHeight: 1.4 }}>
+							{notes}
+						</Text>
+					) : null}
+				</Stack>
+			</Flex>
 		</Card>
 	);
 }
 
 function InsertMenuDialog({
 	sections,
-	previewImageUrl,
 	onSelect,
 	onClose,
 }: {
 	sections: InsertMenuSection[];
-	previewImageUrl: ((schemaTypeName: string) => string | undefined) | undefined;
 	onSelect: (member: MemberSchemaType) => void;
 	onClose: () => void;
 }) {
@@ -118,60 +106,108 @@ function InsertMenuDialog({
 			.filter((section) => section.members.length > 0);
 	}, [search, sections]);
 
+	const visibleMembers = visibleSections.flatMap((section) => section.members);
+	const [selectedName, setSelectedName] = useState(
+		() => visibleMembers[0]?.name,
+	);
+
+	const selected =
+		visibleMembers.find((member) => member.name === selectedName) ??
+		visibleMembers[0];
+
+	const selectedEntry = selected ? getLibraryEntry(selected.name) : null;
+
 	return (
 		<Dialog
+			footer={
+				<Flex gap={2} justify="flex-end" padding={3}>
+					<Button mode="bleed" onClick={onClose} text="Cancel" />
+					<Button
+						disabled={!selected}
+						onClick={() => selected && onSelect(selected)}
+						text="Add component"
+						tone="primary"
+					/>
+				</Flex>
+			}
 			header="Components"
 			id="page-builder-insert"
 			onClose={onClose}
 			open
-			width={3}
+			width={4}
 		>
-			<Stack padding={4} space={4}>
-				<TextInput
-					autoFocus
-					icon={SearchIcon}
-					onChange={(event) => setSearch(event.currentTarget.value)}
-					placeholder="Search components…"
-					value={search}
-				/>
-				<Box style={{ height: SCROLL_HEIGHT, overflowY: "auto" }}>
-					{visibleSections.length === 0 ? (
-						<Text muted size={1}>
-							No components match “{search}”.
-						</Text>
+			<Flex gap={3} padding={3} style={{ height: DIALOG_HEIGHT }}>
+				<Stack
+					space={3}
+					style={{ flex: `0 0 ${CHOICE_LIST_WIDTH}px`, minWidth: 0 }}
+				>
+					<TextInput
+						autoFocus
+						icon={SearchIcon}
+						onChange={(event) => setSearch(event.currentTarget.value)}
+						placeholder="Search components…"
+						value={search}
+					/>
+					<Box style={{ flex: 1, overflowY: "auto" }}>
+						{visibleSections.length === 0 ? (
+							<Text muted size={1}>
+								No components match “{search}”.
+							</Text>
+						) : (
+							<Stack space={4}>
+								{visibleSections.map((section) => (
+									<Stack key={section.name} space={2}>
+										<Text muted size={0} weight="semibold">
+											{section.title.toUpperCase()}
+										</Text>
+										<Stack space={1}>
+											{section.members.map((member) => (
+												<ChoiceRow
+													active={member.name === selected?.name}
+													key={member.name}
+													member={member}
+													notes={getLibraryEntry(member.name)?.notes}
+													onAdd={() => onSelect(member)}
+													onSelect={() => setSelectedName(member.name)}
+												/>
+											))}
+										</Stack>
+									</Stack>
+								))}
+							</Stack>
+						)}
+					</Box>
+				</Stack>
+
+				<Card
+					border
+					flex={1}
+					radius={2}
+					style={{ overflow: "hidden" }}
+					tone="transparent"
+				>
+					{selected && selectedEntry ? (
+						<ComponentPreviewFrame
+							key={selected.name}
+							notes={selectedEntry.notes}
+							path={getComponentPreviewPath(selected.name)}
+						/>
 					) : (
-						<Stack space={5}>
-							{visibleSections.map((section) => (
-								<Stack key={section.name} space={3}>
-									<Text muted size={1} weight="semibold">
-										{section.title}
-									</Text>
-									<Grid columns={[2, 3, 4]} gap={3}>
-										{section.members.map((member) => (
-											<BlockTile
-												key={member.name}
-												member={member}
-												onSelect={() => onSelect(member)}
-												previewUrl={previewImageUrl?.(member.name)}
-											/>
-										))}
-									</Grid>
-								</Stack>
-							))}
-						</Stack>
+						<Flex align="center" height="fill" justify="center" padding={4}>
+							<Text muted size={1}>
+								No preview for this component yet.
+							</Text>
+						</Flex>
 					)}
-				</Box>
-			</Stack>
+				</Card>
+			</Flex>
 		</Dialog>
 	);
 }
 
 /**
- * Pass as `arrayFunctions`. Reads `insertMenu.groups` and `insertMenu.views`, so
- * a schema already configuring the built-in menu needs no extra wiring.
- *
- * Replaces the built-in popover, which is anchored to the array grid element and
- * so clips on page scroll and resizes when switching tabs.
+ * Pass as `arrayFunctions`. Replaces the built-in popover, which is anchored to
+ * the array grid element and so clips on page scroll.
  */
 export function PageBuilderInsertMenu(
 	props: ArrayInputFunctionsProps<ArrayItem, ArraySchemaType>,
@@ -199,13 +235,6 @@ export function PageBuilderInsertMenu(
 			.filter((section) => section.members.length > 0);
 	}, [members, insertMenu]);
 
-	const previewImageUrl = useMemo(() => {
-		const gridView = insertMenu?.views?.find((view) => view.name === "grid");
-		return gridView && "previewImageUrl" in gridView
-			? gridView.previewImageUrl
-			: undefined;
-	}, [insertMenu]);
-
 	const insert = (member: MemberSchemaType) => {
 		onItemAppend((onValueCreate as unknown as CreateItem)(member));
 		setOpen(false);
@@ -233,7 +262,6 @@ export function PageBuilderInsertMenu(
 				<InsertMenuDialog
 					onClose={() => setOpen(false)}
 					onSelect={insert}
-					previewImageUrl={previewImageUrl}
 					sections={sections}
 				/>
 			)}