@salesforce/templates 66.5.4 → 66.5.6

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

@@ -1,73 +0,0 @@
-/**
- * Picks formatter by dataType (Address, Phone, Url, Email) or plain text. Empty values show "—" with a11y label.
- */
-import { FormattedAddress } from "./FormattedAddress";
-import { FormattedEmail } from "./FormattedEmail";
-import { FormattedPhone } from "./FormattedPhone";
-import { FormattedText } from "./FormattedText";
-import { FormattedUrl } from "./FormattedUrl";
-
-/** Salesforce UI API dataType values that have dedicated formatters. */
-const DATA_TYPES = {
-	Address: "Address",
-	Email: "Email",
-	Phone: "Phone",
-	Url: "Url",
-} as const;
-
-/** Normalize dataType to canonical casing so "PHONE" / "phone" match Phone, etc. */
-function normalizeDataType(dataType: string | undefined): string | undefined {
-	if (dataType == null || dataType === "") return dataType;
-	const lower = dataType.toLowerCase();
-	const canonical: Record<string, string> = {
-		phone: DATA_TYPES.Phone,
-		email: DATA_TYPES.Email,
-		url: DATA_TYPES.Url,
-		address: DATA_TYPES.Address,
-	};
-	return canonical[lower] ?? dataType;
-}
-
-export interface FieldValueDisplayProps {
-	/** Resolved display value (string, number, boolean, or null). */
-	value: string | number | boolean | null | undefined;
-	/** Field dataType from object info (e.g. Phone, Email, Url, Address). */
-	dataType?: string;
-	className?: string;
-}
-
-const DEFAULT_CLASS = "text-sm text-foreground";
-const LINK_CLASS =
-	"text-sm text-foreground text-primary underline underline-offset-2 hover:opacity-80";
-
-export function FieldValueDisplay({
-	value,
-	dataType,
-	className = DEFAULT_CLASS,
-}: FieldValueDisplayProps) {
-	const str = value || null;
-
-	if (str === null) {
-		return (
-			<span className={className} aria-label="No value">
-				—
-			</span>
-		);
-	}
-
-	const linkClassName = className === DEFAULT_CLASS ? LINK_CLASS : className;
-	const normalizedType = normalizeDataType(dataType);
-
-	switch (normalizedType) {
-		case DATA_TYPES.Address:
-			return <FormattedAddress value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Phone:
-			return <FormattedPhone value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Url:
-			return <FormattedUrl value={str as string} className={linkClassName} />;
-		case DATA_TYPES.Email:
-			return <FormattedEmail value={str as string} className={linkClassName} />;
-		default:
-			return <FormattedText value={value} className={className} />;
-	}
-}

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

@@ -1,29 +0,0 @@
-/** Address as link to Google Maps search. External link: target _blank, rel noopener noreferrer. */
-
-const GOOGLE_MAPS_SEARCH_BASE = "https://www.google.com/maps/search/?api=1&query=";
-
-export interface FormattedAddressProps {
-	/** Full address string (e.g. "10 Main Rd.\nNew York, NY 31349\nUSA"). */
-	value: string;
-	className?: string;
-}
-
-export function FormattedAddress({ value, className }: FormattedAddressProps) {
-	if (!value || !value.trim()) return null;
-	const url = GOOGLE_MAPS_SEARCH_BASE + encodeURIComponent(value.trim());
-	return (
-		<a
-			href={url}
-			target="_blank"
-			rel="noopener noreferrer"
-			className={className}
-			aria-label="Open address in Google Maps"
-		>
-			{value.split("\n").map((line, i) => (
-				<span key={i} className="block">
-					{line}
-				</span>
-			))}
-		</a>
-	);
-}

package/lib/templates/project/reactb2e/_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/reactb2e/_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/reactb2e/_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/reactb2e/_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/reactb2e/_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/reactb2e/_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/reactb2e/_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>
-	);
-}