@salesforce/ui-bundle-template-feature-react-search 11.3.0

package/dist/scripts/sf-project-setup.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+/**
+ * Run from SFDX project root: install dependencies, build, and launch the dev server
+ * for the UI bundle in force-app/main/default/uiBundles/.
+ *
+ * Usage: npm run sf-project-setup
+ * (from the directory that contains force-app/ and sfdx-project.json)
+ */
+
+import { spawnSync } from 'node:child_process';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readdirSync, existsSync, readFileSync, writeFileSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+
+/**
+ * npm strips .gitignore from published packages — generate them on first run.
+ * Templates are stored in scripts/gitignore-templates.json (generated at build
+ * time from the actual .gitignore files). The JSON may not exist in git-cloned
+ * distributions where .gitignore is already present, so loading is best-effort.
+ */
+function loadGitignoreTemplates() {
+  const templatesPath = resolve(__dirname, 'gitignore-templates.json');
+  if (!existsSync(templatesPath)) return null;
+  try {
+    return JSON.parse(readFileSync(templatesPath, 'utf8'));
+  } catch {
+    return null;
+  }
+}
+
+function ensureGitignore(dir, content) {
+  if (!content) return;
+  const gitignorePath = resolve(dir, '.gitignore');
+  if (!existsSync(gitignorePath)) {
+    writeFileSync(gitignorePath, content, 'utf8');
+    console.log(`Created .gitignore in ${dir}`);
+  }
+}
+
+function resolveUIBundlesDir() {
+  const sfdxPath = resolve(ROOT, 'sfdx-project.json');
+  if (!existsSync(sfdxPath)) {
+    console.error('Error: sfdx-project.json not found at project root.');
+    process.exit(1);
+  }
+  const sfdxProject = JSON.parse(readFileSync(sfdxPath, 'utf8'));
+  const pkgDir = sfdxProject?.packageDirectories?.[0]?.path;
+  if (!pkgDir) {
+    console.error('Error: No packageDirectories[].path found in sfdx-project.json.');
+    process.exit(1);
+  }
+  return resolve(ROOT, pkgDir, 'main', 'default', 'uiBundles');
+}
+
+function discoverUIBundleDir() {
+  const uiBundlesDir = resolveUIBundlesDir();
+  if (!existsSync(uiBundlesDir)) {
+    console.error(`Error: uiBundles directory not found: ${uiBundlesDir}`);
+    process.exit(1);
+  }
+  const entries = readdirSync(uiBundlesDir, { withFileTypes: true });
+  const dirs = entries.filter((e) => e.isDirectory() && !e.name.startsWith('.'));
+  if (dirs.length === 0) {
+    console.error(`Error: No UI bundle folder found under ${uiBundlesDir}`);
+    process.exit(1);
+  }
+  if (dirs.length > 1) {
+    console.log(`Multiple UI bundles found; using first: ${dirs[0].name}`);
+  }
+  return resolve(uiBundlesDir, dirs[0].name);
+}
+
+function run(label, cmd, args, opts) {
+  console.log(`\n--- ${label} ---\n`);
+  const result = spawnSync(cmd, args, { stdio: 'inherit', ...opts });
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}
+
+// Ensure .gitignore files exist (npm strips them from published packages).
+const gitignoreTemplates = loadGitignoreTemplates();
+if (gitignoreTemplates) {
+  ensureGitignore(ROOT, gitignoreTemplates.sfdx);
+  const bundlesDir = resolveUIBundlesDir();
+  if (existsSync(bundlesDir)) {
+    for (const entry of readdirSync(bundlesDir, { withFileTypes: true })) {
+      if (entry.isDirectory() && !entry.name.startsWith('.')) {
+        ensureGitignore(resolve(bundlesDir, entry.name), gitignoreTemplates.webapp);
+      }
+    }
+  }
+}
+
+const uiBundleDir = discoverUIBundleDir();
+console.log('SFDX project root:', ROOT);
+console.log('UI bundle directory:', uiBundleDir);
+
+run('npm install', 'npm', ['install', '--registry', 'https://registry.npmjs.org/'], { cwd: uiBundleDir });
+run('npm run build', 'npm', ['run', 'build'], { cwd: uiBundleDir });

package/dist/scripts/soql/account.soql

@@ -0,0 +1,6 @@
+// Use .soql files to store SOQL queries.
+// You can execute queries in VS Code by selecting the
+//     query text and running the command:
+//     SFDX: Execute SOQL Query with Currently Selected Text
+
+SELECT Id, Name FROM Account

package/dist/scripts/validate-org-setup-config.mjs

@@ -0,0 +1,38 @@
+/**
+ * Build / CI gate: validate this package's org-setup.config.json against the
+ * shared schema (W-23043729, spec §5.2).
+ *
+ * Ships inside the SFDX project template, so a generated app can self-check its
+ * org-setup.config.json in its own CI:
+ *   npm run validate:org-setup-config
+ *
+ * Uses the SAME validateConfig + schema as org-setup.mjs runtime, so build-time
+ * and runtime checks can never drift. A missing config file is OK (not every
+ * project ships one); a present-but-invalid config fails the gate.
+ */
+
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { validateConfig } from './org-setup-config-schema.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const configPath = resolve(__dirname, 'org-setup.config.json');
+
+if (!existsSync(configPath)) {
+  console.log('✓ org-setup.config.json: not present (nothing to validate)');
+  process.exit(0);
+}
+
+const result = validateConfig(readFileSync(configPath, 'utf8'), configPath);
+if (result.ok) {
+  console.log('✓ org-setup.config.json');
+  process.exit(0);
+}
+
+console.error('❌ org-setup.config.json is invalid:');
+for (const err of result.errors) {
+  console.error(`   - ${err}`);
+}
+process.exit(1);

package/dist/sfdx-project.json

@@ -0,0 +1,12 @@
+{
+  "packageDirectories": [
+    {
+      "path": "force-app",
+      "default": true
+    }
+  ],
+  "name": "MyProject",
+  "namespace": "",
+  "sfdcLoginUrl": "https://login.salesforce.com",
+  "sourceApiVersion": "67.0"
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@salesforce/ui-bundle-template-feature-react-search",
+  "version": "11.3.0",
+  "description": "Configuration-driven multi-source search for UI Bundles",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "",
+  "type": "module",
+  "main": "src/force-app/main/default/uiBundles/feature-react-search/src/features/search/index.ts",
+  "types": "src/force-app/main/default/uiBundles/feature-react-search/src/features/search/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/force-app/main/default/uiBundles/feature-react-search/src/features/search/index.ts",
+      "import": "./src/force-app/main/default/uiBundles/feature-react-search/src/features/search/index.ts",
+      "default": "./src/force-app/main/default/uiBundles/feature-react-search/src/features/search/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@radix-ui/react-label": "^2.1.10",
+    "@types/react": "^19.2.17",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^1.20.0",
+    "radix-ui": "^1.6.0",
+    "react-router": "^7.18.0"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "executor": "@salesforce/ui-bundle-template-cli:apply-patches"
+      },
+      "watch": {
+        "executor": "@salesforce/ui-bundle-template-cli:watch-patches"
+      },
+      "build:dist-app": {
+        "executor": "@salesforce/ui-bundle-template-cli:build-dist-app"
+      },
+      "dev": {
+        "executor": "@salesforce/ui-bundle-template-cli:dev-server"
+      }
+    }
+  }
+}

package/src/force-app/main/default/uiBundles/feature-react-search/src/__inherit__appLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router";
+
+export default function AppLayout() {
+	return (
+		<>
+			<Outlet />
+		</>
+	);
+}

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__alert.tsx

@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	role,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return <> </>;
+}
+
+interface AlertTitleProps extends React.ComponentProps<"div"> {
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p";
+}
+function AlertTitle({ className, as: Component = "div", ...props }: AlertTitleProps) {
+	return <></>;
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return <></>;
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__button.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline:
+					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-8",
+				"icon-xs":
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm":
+					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+	return <> </>;
+}
+
+export { Button, buttonVariants };

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__checkbox.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+
+function Checkbox({}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return <></>;
+}
+
+export { Checkbox };

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__input.tsx

@@ -0,0 +1,5 @@
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return <> </>;
+}
+
+export { Input };

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__label.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return <> </>;
+}
+
+export { Label };

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__pagination.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Button } from "./__inherit__button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => <></>;
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+	({ className, ...props }, ref) => <></>,
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+	({ className, ...props }, ref) => <></>,
+);
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & React.ComponentProps<"button">;
+
+const PaginationLink = ({ className, isActive, disabled, ...props }: PaginationLinkProps) => <></>;
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	disabled,
+	...props
+}: React.ComponentProps<typeof Button>) => <></>;
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, disabled, ...props }: React.ComponentProps<typeof Button>) => (
+	<></>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => <></>;
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__select.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+function Select({}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <></>;
+}
+
+function SelectGroup({}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <></>;
+}
+
+function SelectValue({}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <></>;
+}
+
+function SelectTrigger({}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return <></>;
+}
+
+function SelectContent({}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return <></>;
+}
+
+function SelectLabel({}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return <></>;
+}
+
+function SelectItem({}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return <></>;
+}
+
+function SelectSeparator({}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return <></>;
+}
+
+function SelectScrollUpButton({}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return <></>;
+}
+
+function SelectScrollDownButton({}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return <></>;
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

package/src/force-app/main/default/uiBundles/feature-react-search/src/components/ui/__inherit__skeleton.tsx

@@ -0,0 +1,5 @@
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return <></>;
+}
+
+export { Skeleton };

package/src/force-app/main/default/uiBundles/feature-react-search/src/features/search/api/distinctValuesService.ts

@@ -0,0 +1,84 @@
+/**
+ * Fetches distinct values for a picklist field via the uiapi aggregate
+ * `groupBy` query.
+ *
+ * Used by the auto-render pathway when a picklist filter does not declare
+ * inline `options`. Each call hits the GraphQL endpoint once and returns the
+ * sorted set of distinct values plus their display labels.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+
+export interface PicklistOption {
+	value: string;
+	label: string;
+}
+
+const KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+function assertValidIdentifier(name: string, kind: string): void {
+	if (!KEY_PATTERN.test(name)) {
+		throw new Error(
+			`Invalid ${kind} "${name}". Must match /^[A-Za-z_][A-Za-z0-9_]*$/ to be a valid GraphQL identifier.`,
+		);
+	}
+}
+
+/**
+ * Builds and executes a `uiapi.aggregate.<objectName>(groupBy: { <field>: { group: true } })`
+ * query and extracts the distinct values.
+ */
+export async function fetchDistinctValues(
+	objectName: string,
+	fieldName: string,
+): Promise<PicklistOption[]> {
+	assertValidIdentifier(objectName, "objectName");
+	assertValidIdentifier(fieldName, "fieldName");
+
+	const document = `query DistinctValues {
+		uiapi {
+			aggregate {
+				${objectName}(groupBy: { ${fieldName}: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								${fieldName} @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}`;
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown>({ query: document });
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const aggregate = (root?.uiapi as Record<string, unknown> | undefined)?.aggregate as
+		| Record<string, unknown>
+		| undefined;
+	const objectAgg = aggregate?.[objectName] as
+		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
+		| undefined;
+	const edges = objectAgg?.edges ?? [];
+
+	return edges
+		.map((edge) => {
+			const field = edge?.node?.aggregate?.[fieldName] as
+				| { value?: string | null; displayValue?: string | null; label?: string | null }
+				| undefined;
+			const value = field?.value;
+			if (value == null || value === "") return null;
+			return { value, label: field?.label ?? field?.displayValue ?? value };
+		})
+		.filter((opt): opt is PicklistOption => opt !== null);
+}

package/src/force-app/main/default/uiBundles/feature-react-search/src/features/search/api/searchService.ts

@@ -0,0 +1,71 @@
+/**
+ * Executes a search request and parses results into a per-source map.
+ *
+ * Today there's only one adapter — SObjects via the platform-sdk uiapi GraphQL
+ * bridge. Future adapters (CMS, REST, etc.) can run alongside this one and
+ * have their results merged into the same `Record<sourceKey, SourceResult>`
+ * by the hook.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+import { buildSearchQuery, type SourceRequest } from "../queryBuilder";
+import type { SourceResult } from "../types";
+
+interface RawSourceResult {
+	edges?: Array<{ node?: unknown }> | null;
+	pageInfo?: {
+		hasNextPage?: boolean | null;
+		hasPreviousPage?: boolean | null;
+		startCursor?: string | null;
+		endCursor?: string | null;
+	} | null;
+	totalCount?: number | null;
+}
+
+/**
+ * Runs a single multi-aliased GraphQL request against uiapi.query.
+ *
+ * Returns a plain object keyed by source.key. A source whose alias is missing
+ * from the response (e.g. due to a partial GraphQL error) is omitted; the
+ * caller can detect this by `result[sourceKey] == null`.
+ */
+export async function runSearch(requests: SourceRequest[]): Promise<Record<string, SourceResult>> {
+	const { document, variables } = buildSearchQuery(requests);
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown, Record<string, unknown>>({
+		query: document,
+		variables,
+	});
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const queryRoot = (root?.uiapi as Record<string, unknown> | undefined)?.query as
+		| Record<string, RawSourceResult | null | undefined>
+		| undefined;
+
+	const out: Record<string, SourceResult> = {};
+	for (const request of requests) {
+		const raw = queryRoot?.[request.source.key];
+		if (raw == null) continue;
+		const nodes = (raw.edges ?? [])
+			.map((edge) => edge?.node)
+			.filter((node): node is unknown => node != null);
+		out[request.source.key] = {
+			nodes,
+			pageInfo: raw.pageInfo
+				? {
+						hasNextPage: raw.pageInfo.hasNextPage ?? false,
+						hasPreviousPage: raw.pageInfo.hasPreviousPage ?? false,
+						startCursor: raw.pageInfo.startCursor ?? null,
+						endCursor: raw.pageInfo.endCursor ?? null,
+					}
+				: null,
+			totalCount: raw.totalCount ?? null,
+		};
+	}
+	return out;
+}