@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.0 → 1.69.0

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/components/shared/GlobalSearchInput.tsx

@@ -0,0 +1,114 @@
+/**
+ * GlobalSearchInput Component
+ *
+ * Search input with two actions: Search (navigate to results for query) and
+ * Browse All (navigate to same results UI with all records for the object).
+ */
+import { useState, useCallback, useMemo, useId } from "react";
+import type { KeyboardEvent, ChangeEvent } from "react";
+import { useNavigate } from "react-router";
+import { Card, CardContent } from "../ui/card";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Search } from "lucide-react";
+import { OBJECT_API_NAMES } from "../../constants";
+import { useObjectInfoBatch } from "../../hooks/useObjectInfoBatch";
+
+const BROWSE_SEGMENT = "browse__all";
+
+const FALLBACK_LABEL_PLURAL = "records";
+
+export function GlobalSearchInput() {
+	const [searchQuery, setSearchQuery] = useState("");
+	const navigate = useNavigate();
+	const inputId = useId();
+	const searchButtonId = useId();
+	const browseButtonId = useId();
+	const inputDescriptionId = `${inputId}-description`;
+	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
+	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? FALLBACK_LABEL_PLURAL;
+
+	const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		setSearchQuery(e.target.value);
+	}, []);
+
+	const handleSearch = useCallback(() => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			navigate(`/global-search/${encodeURIComponent(trimmed)}`);
+		}
+	}, [searchQuery, navigate]);
+
+	const handleBrowseAll = useCallback(() => {
+		navigate(`/global-search/${BROWSE_SEGMENT}`);
+	}, [navigate]);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				handleSearch();
+			}
+		},
+		[handleSearch],
+	);
+
+	const isSearchDisabled = useMemo(() => !searchQuery.trim(), [searchQuery]);
+
+	return (
+		<div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+			<Card className="w-full">
+				<CardContent className="pt-6">
+					<div className="flex flex-col sm:flex-row gap-3">
+						<div className="flex-1 relative">
+							<Search
+								className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-600"
+								aria-hidden="true"
+							/>
+							<Input
+								id={inputId}
+								type="search"
+								placeholder={`Search for ${labelPlural}`}
+								value={searchQuery}
+								onChange={handleInputChange}
+								onKeyDown={handleKeyDown}
+								className="pl-10"
+								aria-label={`Search for ${labelPlural}`}
+								aria-describedby={inputDescriptionId}
+							/>
+							<p id={inputDescriptionId} className="sr-only">
+								Enter your search query and press Enter or click Search. Or click Browse All to see
+								all {labelPlural}.
+							</p>
+						</div>
+
+						<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
+							<Button
+								id={searchButtonId}
+								onClick={handleSearch}
+								disabled={isSearchDisabled}
+								className="w-full sm:w-auto"
+								aria-label="Search"
+								aria-describedby={inputDescriptionId}
+								variant="default"
+							>
+								<Search className="h-4 w-4 mr-2" aria-hidden="true" />
+								Search
+							</Button>
+							<Button
+								id={browseButtonId}
+								variant="outline"
+								onClick={handleBrowseAll}
+								className="w-full sm:w-auto"
+								aria-label={`Browse all ${labelPlural}`}
+								aria-describedby={inputDescriptionId}
+							>
+								Browse All {labelPlural}
+							</Button>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/constants.ts

@@ -0,0 +1,39 @@
+/**
+ * Application-wide Constants
+ *
+ * Defines constants used throughout the global search feature.
+ */
+
+/**
+ * Object API names to search across in the global search feature.
+ * Currently supports single object search.
+ *
+ * @remarks
+ * - Array of Salesforce object API names
+ * - First element is used as the primary search object
+ * - Can be extended to support multiple objects in the future
+ *
+ * @example
+ * ```tsx
+ * const objectApiName = OBJECT_API_NAMES[0]; // 'Account'
+ * ```
+ */
+export const OBJECT_API_NAMES = ["Account"] as const;
+
+/** Fallback title when record display name cannot be resolved (e.g. before load or no name field). */
+export const DEFAULT_DETAIL_PAGE_TITLE = "Untitled";
+
+/**
+ * Default page size for search results pagination.
+ * This should match one of the values in PAGE_SIZE_OPTIONS from paginationUtils.
+ *
+ * @remarks
+ * - Default value is 20 (second option in PAGE_SIZE_OPTIONS)
+ * - Can be changed by user via pagination controls
+ *
+ * @example
+ * ```tsx
+ * const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+ * ```
+ */
+export const DEFAULT_PAGE_SIZE = 20;

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/features/global-search/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Global Search Feature - Public API
+ *
+ * Main entry point for the global search feature.
+ * Exports all public APIs, components, and utilities that can be consumed by other packages.
+ *
+ * @remarks
+ * This is the public API of the feature. Components and utilities exported here
+ * can be imported by other packages that depend on this feature.
+ *
+ * @example
+ * ```tsx
+ * // In another package's appLayout.tsx
+ * import { GlobalSearchInput } from 'feature-react-global-search';
+ *
+ * export default function AppLayout() {
+ *   return (
+ *     <div>
+ *       <GlobalSearchInput />
+ *       <Outlet />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+export * from "../../api";
+export * from "../../hooks";
+export * from "../../utils";
+export * from "../../constants";
+export * from "../../routes";
+export * from "../../hooks";
+export * from "../../types";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/form.tsx

@@ -0,0 +1,204 @@
+import { useId } from "react";
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../components/ui/field";
+import { Input } from "../components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../components/ui/select";
+import { cn } from "../lib/utils";
+import type { PicklistValue } from "../types/filters/picklist";
+import { getUniqueErrors } from "../utils/formUtils";
+
+export type { FormError } from "../utils/formUtils";
+export { validateRangeValues } from "../utils/formUtils";
+
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+	createFormHookContexts();
+
+interface FilterTextFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterTextField({
+	label,
+	id: providedId,
+	description,
+	placeholder,
+	type = "text",
+	...props
+}: FilterTextFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<FieldLabel htmlFor={id}>{label}</FieldLabel>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				placeholder={placeholder}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+interface FilterSelectFieldProps {
+	label: string;
+	id?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+	options: PicklistValue[];
+}
+
+function FilterSelectField({
+	label,
+	id: providedId,
+	description,
+	placeholder = "Select...",
+	options,
+}: FilterSelectFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<FieldLabel htmlFor={id}>{label}</FieldLabel>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Select value={field.state.value ?? ""} onValueChange={(value) => field.handleChange(value)}>
+				<SelectTrigger
+					id={id}
+					aria-invalid={isInvalid}
+					aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				>
+					<SelectValue placeholder={placeholder} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((option) => {
+						if (!option || !option.value) return null;
+						return (
+							<SelectItem key={option.value} value={option.value}>
+								{option.label || option.value}
+							</SelectItem>
+						);
+					})}
+				</SelectContent>
+			</Select>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+interface FilterRangeFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterRangeFieldBase({
+	label,
+	id: providedId,
+	description,
+	placeholder,
+	type = "text",
+	...props
+}: FilterRangeFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	const uniqueErrors = getUniqueErrors(field.state.meta.errors);
+
+	return (
+		<div>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				placeholder={placeholder}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</div>
+	);
+}
+
+interface FilterRangeMinFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+interface FilterRangeMaxFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
+	label?: string;
+	description?: React.ReactNode;
+	placeholder?: string;
+}
+
+function FilterRangeMinField({ placeholder = "Min", ...props }: FilterRangeMinFieldProps) {
+	return <FilterRangeFieldBase placeholder={placeholder} {...props} />;
+}
+
+function FilterRangeMaxField({ placeholder = "Max", ...props }: FilterRangeMaxFieldProps) {
+	return <FilterRangeFieldBase placeholder={placeholder} {...props} />;
+}
+
+export const { useAppForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		FilterTextField,
+		FilterSelectField,
+		FilterRangeMinField,
+		FilterRangeMaxField,
+	},
+	formComponents: {},
+});

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/index.ts

@@ -0,0 +1,22 @@
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+export {
+	useObjectColumns,
+	useObjectSearchResults,
+	useObjectFilters,
+	useObjectListMetadata,
+} from "./useObjectSearchData";
+export type { ObjectListMetadata } from "./useObjectSearchData";
+export { useRecordListGraphQL } from "./useRecordListGraphQL";
+export type {
+	UseRecordListGraphQLReturn,
+	UseRecordListGraphQLOptions,
+} from "./useRecordListGraphQL";
+export { useRecordDetailLayout } from "./useRecordDetailLayout";
+export type {
+	UseRecordDetailLayoutReturn,
+	UseRecordDetailLayoutParams,
+} from "./useRecordDetailLayout";
+export { useObjectInfoBatch } from "./useObjectInfoBatch";
+export type { UseObjectInfoBatchResult } from "./useObjectInfoBatch";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/useGeocode.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+import { geocodeAddress, type GeocodeResult } from "@/utils/geocode";
+
+export function useGeocode(address: string | null | undefined): {
+	coords: GeocodeResult | null;
+	loading: boolean;
+} {
+	const [coords, setCoords] = useState<GeocodeResult | null>(null);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		if (!address?.trim()) {
+			setCoords(null);
+			setLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		geocodeAddress(address)
+			.then((result) => {
+				if (!cancelled) setCoords(result);
+			})
+			.catch(() => {
+				if (!cancelled) setCoords(null);
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [address?.trim() ?? ""]);
+
+	return { coords, loading };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/useMaintenanceRequests.ts

@@ -0,0 +1,39 @@
+/**
+ * Fetches Maintenance_Request__c list and exposes refetch for after create.
+ */
+import { useState, useEffect, useCallback } from "react";
+import {
+	queryMaintenanceRequests,
+	type MaintenanceRequestSummary,
+} from "@/api/maintenanceRequestApi";
+
+export function useMaintenanceRequests(): {
+	requests: MaintenanceRequestSummary[];
+	loading: boolean;
+	error: string | null;
+	refetch: () => Promise<void>;
+} {
+	const [requests, setRequests] = useState<MaintenanceRequestSummary[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const fetchList = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const list = await queryMaintenanceRequests(50, null);
+			setRequests(list);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Failed to load maintenance requests");
+			setRequests([]);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchList();
+	}, [fetchList]);
+
+	return { requests, loading, error, refetch: fetchList };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/hooks/useObjectInfoBatch.ts

@@ -0,0 +1,65 @@
+/**
+ * useObjectInfoBatch
+ *
+ * Fetches object metadata (label, labelPlural, fields, etc.) for the given object API names.
+ * Uses the shared cache in objectInfoService so List, Home, and Detail views reuse one request.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { objectInfoService } from "../api/objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+
+export interface UseObjectInfoBatchResult {
+	/** Object metadata in the same order as the requested objectApiNames. */
+	objectInfos: ObjectInfoResult[];
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Fetches batch object info for the given object API names. Results are cached;
+ * multiple callers (List, Home, Detail) share the same request.
+ *
+ * @param objectApiNames - Array of object API names (e.g. OBJECT_API_NAMES)
+ * @returns objectInfos (same order as input), loading, error
+ */
+export function useObjectInfoBatch(objectApiNames: string[]): UseObjectInfoBatchResult {
+	const [state, setState] = useState<UseObjectInfoBatchResult>({
+		objectInfos: [],
+		loading: objectApiNames.length > 0,
+		error: null,
+	});
+	const isCancelled = useRef(false);
+
+	useEffect(() => {
+		isCancelled.current = false;
+		const names = objectApiNames.filter(Boolean);
+		if (names.length === 0) {
+			setState({ objectInfos: [], loading: false, error: null });
+			return;
+		}
+		setState((s) => ({ ...s, loading: true, error: null }));
+		objectInfoService
+			.getObjectInfoBatch(names.join(","))
+			.then((res) => {
+				if (isCancelled.current) return;
+				const objectInfos = names
+					.map((apiName) => res.results?.find((r) => r.result?.apiName === apiName)?.result)
+					.filter((r) => r != null) as ObjectInfoResult[];
+				setState({ objectInfos, loading: false, error: null });
+			})
+			.catch((err) => {
+				if (isCancelled.current) return;
+				setState({
+					objectInfos: [],
+					loading: false,
+					error: err instanceof Error ? err.message : (err as string),
+				});
+			});
+		return () => {
+			isCancelled.current = true;
+		};
+	}, [objectApiNames.join(",")]);
+
+	return state;
+}