@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/_det_/_fmt_/FormattedEmail.tsx

@@ -1,17 +0,0 @@
-/** Email as mailto: link. */
-
-export interface FormattedEmailProps {
-	value: string;
-	className?: string;
-}
-
-export function FormattedEmail({ value, className }: FormattedEmailProps) {
-	const str = (value || "").trim();
-	if (!str) return null;
-	const href = `mailto:${encodeURIComponent(str)}`;
-	return (
-		<a href={href} className={className} aria-label={`Email ${str}`}>
-			{str}
-		</a>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/_det_/_fmt_/FormattedPhone.tsx

@@ -1,24 +0,0 @@
-/** Phone value as tel: link for dialer/VoIP. */
-
-export interface FormattedPhoneProps {
-	value: string;
-	className?: string;
-}
-
-/** Normalizes value for tel: (digits and + only). */
-function telHref(value: string): string {
-	const cleaned = value.replace(/[^\d+]/g, "");
-	return cleaned ? `tel:${cleaned}` : "#";
-}
-
-export function FormattedPhone({ value, className }: FormattedPhoneProps) {
-	if (!value) return null;
-	const trimmed = (value || "").trim();
-	const href = telHref(trimmed);
-	if (href === "#") return <span className={className}>{trimmed}</span>;
-	return (
-		<a href={href} className={className} aria-label={`Call ${trimmed}`}>
-			{trimmed}
-		</a>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/_det_/_fmt_/FormattedText.tsx

@@ -1,11 +0,0 @@
-/** Plain-text field value when dataType has no dedicated formatter. */
-
-export interface FormattedTextProps {
-	value: string | number | boolean | null | undefined;
-	className?: string;
-}
-
-export function FormattedText({ value, className }: FormattedTextProps) {
-	if (!value) return null;
-	return <span className={className}>{value as string}</span>;
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/_det_/_fmt_/FormattedUrl.tsx

@@ -1,29 +0,0 @@
-/** URL as external link (new tab, noopener noreferrer). Falls back to plain text if not http(s). */
-
-import { isAllowedLinkUrl } from "../../../utils/linkUtils";
-
-export interface FormattedUrlProps {
-	value: string;
-	className?: string;
-	/** Optional display text; defaults to the URL. */
-	displayText?: string;
-}
-
-export function FormattedUrl({ value, className, displayText }: FormattedUrlProps) {
-	const str = (value || "").trim();
-	if (!str) return null;
-	const href = str.startsWith("http://") || str.startsWith("https://") ? str : `https://${str}`;
-	if (!isAllowedLinkUrl(href)) return <span className={className}>{str}</span>;
-	const label = displayText ?? str;
-	return (
-		<a
-			href={href}
-			target="_blank"
-			rel="noopener noreferrer"
-			className={className}
-			aria-label={`Open link in new tab: ${label}`}
-		>
-			{label}
-		</a>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/filters/FilterField.tsx

@@ -1,54 +0,0 @@
-/**
- * FilterField Component
- *
- * Wrapper component that renders the appropriate filter input type based on filter affordance.
- * Routes to FilterInput for text fields or FilterSelect for picklist fields.
- *
- * @param filter - Filter definition containing field path, label, and affordance
- * @param value - Current filter value
- * @param picklistValues - Array of picklist options (for select fields)
- * @param onChange - Callback when filter value changes
- *
- * @remarks
- * - Automatically determines input type from filter.affordance
- * - Returns null if filter is invalid
- * - Defaults to text input if affordance is not 'select'
- *
- * @example
- * ```tsx
- * <FilterField
- *   filter={filter}
- *   value={filterValue}
- *   picklistValues={picklistOptions}
- *   onChange={(value) => setFilterValue(value)}
- * />
- * ```
- */
-import FilterInput from "./FilterInput";
-import FilterSelect from "./FilterSelect";
-import type { Filter } from "../../types/filters/filters";
-import type { PicklistValue } from "../../types/filters/picklist";
-
-interface FilterFieldProps {
-	filter: Filter;
-	value: string;
-	picklistValues: PicklistValue[];
-	onChange: (value: string) => void;
-}
-
-export default function FilterField({ filter, value, picklistValues, onChange }: FilterFieldProps) {
-	// Guard against invalid filter objects
-	if (!filter || !filter.targetFieldPath) {
-		return null;
-	}
-
-	const affordance = filter.affordance?.toLowerCase() || "";
-
-	if (affordance === "select") {
-		const options = picklistValues || [];
-		return <FilterSelect filter={filter} value={value} options={options} onChange={onChange} />;
-	}
-
-	// Default to text input
-	return <FilterInput filter={filter} value={value} onChange={onChange} />;
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/filters/FilterInput.tsx

@@ -1,55 +0,0 @@
-/**
- * FilterInput Component
- *
- * Renders a text input field for filter values.
- * Used for filters that don't have a picklist (affordance !== 'select').
- *
- * @param filter - Filter definition containing field path, label, and attributes
- * @param value - Current filter input value
- * @param onChange - Callback when input value changes
- *
- * @remarks
- * - Displays filter label or field path as the label
- * - Shows placeholder text from filter attributes or generates default
- * - Displays help message if available
- *
- * @example
- * ```tsx
- * <FilterInput
- *   filter={textFilter}
- *   value={filterValue}
- *   onChange={(value) => setFilterValue(value)}
- * />
- * ```
- */
-import { Input } from "../../../../components/ui/input";
-import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
-import type { Filter } from "../../types/filters/filters";
-
-interface FilterInputProps {
-	filter: Filter;
-	value: string;
-	onChange: (value: string) => void;
-}
-
-export default function FilterInput({ filter, value, onChange }: FilterInputProps) {
-	return (
-		<Field>
-			<FieldLabel htmlFor={filter.targetFieldPath}>
-				{filter.label || filter.targetFieldPath}
-			</FieldLabel>
-			<Input
-				id={filter.targetFieldPath}
-				type="text"
-				value={value}
-				onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-				placeholder={
-					filter.attributes?.placeholder ||
-					`Enter ${(filter.label || filter.targetFieldPath).toLowerCase()}`
-				}
-				aria-label={filter.label || filter.targetFieldPath}
-			/>
-			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
-		</Field>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/filters/FilterSelect.tsx

@@ -1,72 +0,0 @@
-/**
- * FilterSelect Component
- *
- * Renders a dropdown select field for filter values with picklist options.
- * Used for filters with affordance === 'select'.
- *
- * @param filter - Filter definition containing field path, label, and attributes
- * @param value - Currently selected filter value
- * @param options - Array of picklist values to display as options
- * @param onChange - Callback when selection changes
- *
- * @remarks
- * - Filters out invalid options (null/undefined values)
- * - Displays option label if available, otherwise uses value
- * - Shows placeholder from filter attributes or default "Select..."
- *
- * @example
- * ```tsx
- * <FilterSelect
- *   filter={selectFilter}
- *   value={selectedValue}
- *   options={picklistOptions}
- *   onChange={(value) => setSelectedValue(value)}
- * />
- * ```
- */
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../../../../components/ui/select";
-import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
-import type { Filter } from "../../types/filters/filters";
-import type { PicklistValue } from "../../types/filters/picklist";
-
-interface FilterSelectProps {
-	filter: Filter;
-	value: string;
-	options: PicklistValue[];
-	onChange: (value: string) => void;
-}
-
-export default function FilterSelect({ filter, value, options, onChange }: FilterSelectProps) {
-	return (
-		<Field>
-			<FieldLabel htmlFor={filter.targetFieldPath}>
-				{filter.label || filter.targetFieldPath}
-			</FieldLabel>
-			<Select value={value} onValueChange={onChange}>
-				<SelectTrigger
-					id={filter.targetFieldPath}
-					aria-label={filter.label || filter.targetFieldPath}
-				>
-					<SelectValue placeholder={filter.attributes?.placeholder || "Select..."} />
-				</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>
-			{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
-		</Field>
-	);
-}

package/lib/templates/project/reactb2x/_p_/_m_/_w_/_a_/src/_f_/_gs_/_c_/filters/FiltersPanel.tsx

@@ -1,380 +0,0 @@
-/**
- * FiltersPanel Component
- *
- * Displays a panel of filter inputs for refining search results.
- * Supports both text inputs and select dropdowns based on filter affordance.
- *
- * @param filters - Array of filter definitions to display
- * @param picklistValues - Record of picklist values keyed by field path
- * @param loading - Whether filters are currently loading
- * @param onApplyFilters - Callback when filters are applied, receives filter values object
- *
- * @remarks
- * - Automatically initializes filter values from defaultValues
- * - Shows loading skeleton while filters are being fetched
- * - Supports "Apply Filters" and "Reset" actions
- * - Uses TanStack Form for form state management (similar to Login page)
- * - Uses FiltersForm wrapper for consistent UX/UI (similar to AuthForm pattern)
- *
- * @example
- * ```tsx
- * <FiltersPanel
- *   filters={filters}
- *   picklistValues={picklistValues}
- *   loading={false}
- *   onApplyFilters={(values) => applyFilters(values)}
- * />
- * ```
- */
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
-import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "../../../../components/ui/card";
-import { Skeleton } from "../../../../components/ui/skeleton";
-import { FiltersForm } from "../forms/filters-form";
-import { Field, FieldLabel, FieldDescription } from "../../../../components/ui/field";
-import { useAppForm, validateRangeValues } from "../../hooks/form";
-import type { Filter, FilterCriteria } from "../../types/filters/filters";
-import type { PicklistValue } from "../../types/filters/picklist";
-import { parseFilterValue } from "../../utils/filterUtils";
-import { sanitizeFilterValue } from "../../utils/sanitizationUtils";
-import { getFormValueByPath } from "../../utils/formUtils";
-
-interface FiltersPanelProps {
-	filters: Filter[];
-	picklistValues: Record<string, PicklistValue[]>;
-	loading: boolean;
-	objectApiName: string;
-	onApplyFilters: (filterCriteria: FilterCriteria[]) => void;
-}
-
-export default function FiltersPanel({
-	filters,
-	picklistValues,
-	loading,
-	objectApiName,
-	onApplyFilters,
-}: FiltersPanelProps) {
-	const [submitError, setSubmitError] = useState<string | null>(null);
-	const [submitSuccess, setSubmitSuccess] = useState<string | null>(null);
-
-	const defaultValues = useMemo(() => {
-		if (!filters || !Array.isArray(filters)) {
-			return {};
-		}
-
-		const values: Record<string, string> = {};
-		filters.forEach((filter) => {
-			if (filter && filter.targetFieldPath) {
-				const affordance = filter.affordance?.toLowerCase() || "";
-
-				if (affordance === "range") {
-					const minFieldName = `${filter.targetFieldPath}_min`;
-					const maxFieldName = `${filter.targetFieldPath}_max`;
-
-					if (filter.defaultValues && filter.defaultValues.length >= 2) {
-						values[minFieldName] = filter.defaultValues[0] || "";
-						values[maxFieldName] = filter.defaultValues[1] || "";
-					} else {
-						values[minFieldName] = "";
-						values[maxFieldName] = "";
-					}
-				} else {
-					if (filter.defaultValues && filter.defaultValues.length > 0) {
-						values[filter.targetFieldPath] = filter.defaultValues[0];
-					} else {
-						values[filter.targetFieldPath] = "";
-					}
-				}
-			}
-		});
-		return values;
-	}, [filters]);
-
-	const form = useAppForm({
-		defaultValues,
-		onSubmit: async ({ value }) => {
-			setSubmitError(null);
-			setSubmitSuccess(null);
-			try {
-				const filterCriteria: FilterCriteria[] = [];
-
-				for (const filter of filters) {
-					if (!filter || !filter.targetFieldPath) {
-						continue;
-					}
-
-					const affordance = filter.affordance?.toLowerCase() || "";
-
-					if (affordance === "range") {
-						const minFieldName = `${filter.targetFieldPath}_min`;
-						const maxFieldName = `${filter.targetFieldPath}_max`;
-						const minValueRaw = value[minFieldName] || "";
-						const maxValueRaw = value[maxFieldName] || "";
-
-						const minValue = sanitizeFilterValue(minValueRaw);
-						const maxValue = sanitizeFilterValue(maxValueRaw);
-
-						if (minValue && maxValue) {
-							const rangeError = validateRangeValues(minValue, maxValue);
-							if (rangeError) {
-								setSubmitError(rangeError);
-								return;
-							}
-						}
-
-						if (minValue) {
-							const parsedMin = parseFilterValue(minValue);
-							if (parsedMin !== "") {
-								filterCriteria.push({
-									objectApiName,
-									fieldPath: filter.targetFieldPath,
-									operator: "gte",
-									values: [parsedMin],
-								});
-							}
-						}
-
-						if (maxValue) {
-							const parsedMax = parseFilterValue(maxValue);
-							if (parsedMax !== "") {
-								filterCriteria.push({
-									objectApiName,
-									fieldPath: filter.targetFieldPath,
-									operator: "lte",
-									values: [parsedMax],
-								});
-							}
-						}
-					} else {
-						const fieldValueRaw =
-							getFormValueByPath(value as Record<string, unknown>, filter.targetFieldPath) || "";
-						const fieldValue = sanitizeFilterValue(fieldValueRaw);
-
-						if (fieldValue) {
-							if (affordance === "select") {
-								filterCriteria.push({
-									objectApiName,
-									fieldPath: filter.targetFieldPath,
-									operator: "eq",
-									values: [fieldValue],
-								});
-							} else {
-								const likeValue = `%${fieldValue}%`;
-								filterCriteria.push({
-									objectApiName,
-									fieldPath: filter.targetFieldPath,
-									operator: "like",
-									values: [likeValue],
-								});
-							}
-						}
-					}
-				}
-
-				if (filterCriteria.length === 0) {
-					setSubmitSuccess("No filters applied. Showing all results.");
-				} else {
-					setSubmitSuccess("Filters applied successfully");
-				}
-
-				onApplyFilters(filterCriteria);
-			} catch (err) {
-				const errorMessage = err instanceof Error ? err.message : "Failed to apply filters";
-				setSubmitError(errorMessage);
-			}
-		},
-		onSubmitInvalid: () => {},
-	});
-
-	const previousDefaultValuesRef = useRef<Record<string, string>>({});
-	const previousLoadingRef = useRef<boolean>(true);
-
-	useEffect(() => {
-		const loadingJustCompleted = previousLoadingRef.current && !loading;
-		const defaultValuesChanged =
-			JSON.stringify(previousDefaultValuesRef.current) !== JSON.stringify(defaultValues);
-
-		if (loadingJustCompleted && defaultValues && Object.keys(defaultValues).length > 0) {
-			form.reset(defaultValues);
-			previousDefaultValuesRef.current = defaultValues;
-		} else if (defaultValuesChanged && !loading && Object.keys(defaultValues).length > 0) {
-			form.reset(defaultValues);
-			previousDefaultValuesRef.current = defaultValues;
-		}
-
-		previousLoadingRef.current = loading;
-	}, [loading, defaultValues]);
-
-	const handleSuccessDismiss = useCallback(() => {
-		setSubmitSuccess(null);
-	}, []);
-
-	const handleReset = useCallback(() => {
-		if (!filters || !Array.isArray(filters)) {
-			form.reset();
-			onApplyFilters([]);
-			setSubmitError(null);
-			setSubmitSuccess(null);
-			return;
-		}
-
-		const resetValues: Record<string, string> = {};
-		filters.forEach((filter) => {
-			if (filter && filter.targetFieldPath) {
-				const affordance = filter.affordance?.toLowerCase() || "";
-
-				if (affordance === "range") {
-					resetValues[`${filter.targetFieldPath}_min`] = "";
-					resetValues[`${filter.targetFieldPath}_max`] = "";
-				} else {
-					resetValues[filter.targetFieldPath] = "";
-				}
-			}
-		});
-		form.reset(resetValues);
-		onApplyFilters([]);
-		setSubmitError(null);
-		setSubmitSuccess(null);
-	}, [filters, onApplyFilters, form]);
-
-	if (loading) {
-		return (
-			<Card className="w-full" role="region" aria-label="Filters panel">
-				<CardHeader>
-					<CardTitle>Filters</CardTitle>
-				</CardHeader>
-				<CardContent
-					className="space-y-4"
-					role="status"
-					aria-live="polite"
-					aria-label="Loading filters"
-				>
-					<span className="sr-only">Loading filters</span>
-					{[1, 2, 3].map((i) => (
-						<div key={i} className="space-y-2" aria-hidden="true">
-							<Skeleton className="h-4 w-24" />
-							<Skeleton className="h-9 w-full" />
-						</div>
-					))}
-				</CardContent>
-			</Card>
-		);
-	}
-
-	if (!filters || !Array.isArray(filters) || filters.length === 0) {
-		return (
-			<Card className="w-full" role="region" aria-label="Filters panel">
-				<CardHeader>
-					<CardTitle>Filters</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<p className="text-sm text-muted-foreground">No filters available</p>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<form.AppForm>
-			<FiltersForm
-				title="Filters"
-				description="Refine your search results by applying filters"
-				error={submitError}
-				success={submitSuccess}
-				onSuccessDismiss={handleSuccessDismiss}
-				submit={{
-					text: "Apply Filters",
-					loadingText: "Applying filters…",
-				}}
-				reset={{
-					text: "Reset",
-					onReset: handleReset,
-				}}
-			>
-				{filters.map((filter) => {
-					if (!filter || !filter.targetFieldPath) {
-						return null;
-					}
-
-					const fieldPicklistValues = picklistValues[filter.targetFieldPath] || [];
-					const affordance = filter.affordance?.toLowerCase() || "";
-
-					if (affordance === "range") {
-						const minFieldName = `${filter.targetFieldPath}_min`;
-						const maxFieldName = `${filter.targetFieldPath}_max`;
-						const inputType = "text";
-						const placeholder =
-							filter.attributes?.placeholder === "null"
-								? undefined
-								: filter.attributes?.placeholder;
-
-						return (
-							<Field key={filter.targetFieldPath}>
-								<FieldLabel>{filter.label || filter.targetFieldPath}</FieldLabel>
-								{filter.helpMessage && <FieldDescription>{filter.helpMessage}</FieldDescription>}
-								<div
-									className="grid grid-cols-2 gap-3"
-									role="group"
-									aria-label={`${filter.label || filter.targetFieldPath} range filter`}
-								>
-									<form.AppField name={minFieldName}>
-										{(field) => (
-											<field.FilterRangeMinField
-												placeholder={placeholder || "Min"}
-												type={inputType}
-												aria-label={`${filter.label || filter.targetFieldPath} - Minimum`}
-											/>
-										)}
-									</form.AppField>
-									<form.AppField name={maxFieldName}>
-										{(field) => (
-											<field.FilterRangeMaxField
-												placeholder={placeholder || "Max"}
-												type={inputType}
-												aria-label={`${filter.label || filter.targetFieldPath} - Maximum`}
-											/>
-										)}
-									</form.AppField>
-								</div>
-							</Field>
-						);
-					}
-
-					if (affordance === "select") {
-						return (
-							<form.AppField key={filter.targetFieldPath} name={filter.targetFieldPath}>
-								{(field) => (
-									<field.FilterSelectField
-										label={filter.label || filter.targetFieldPath}
-										description={filter.helpMessage || undefined}
-										placeholder={filter.attributes?.placeholder || "Select..."}
-										options={fieldPicklistValues}
-									/>
-								)}
-							</form.AppField>
-						);
-					}
-
-					return (
-						<form.AppField key={filter.targetFieldPath} name={filter.targetFieldPath}>
-							{(field) => (
-								<field.FilterTextField
-									label={filter.label || filter.targetFieldPath}
-									description={filter.helpMessage || undefined}
-									placeholder={
-										filter.attributes?.placeholder ||
-										`Enter ${(filter.label || filter.targetFieldPath).toLowerCase()}`
-									}
-								/>
-							)}
-						</form.AppField>
-					);
-				})}
-			</FiltersForm>
-		</form.AppForm>
-	);
-}