@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateFilter.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { parseISO } from "date-fns";
+import { Label } from "../../../../components/ui/label";
+import {
+	DatePicker,
+	DatePickerTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+
+type DateOperator = "gt" | "lt";
+
+const OPERATOR_OPTIONS: { value: DateOperator; label: string }[] = [
+	{ value: "gt", label: "After" },
+	{ value: "lt", label: "Before" },
+];
+
+function operatorToField(op: DateOperator): "min" | "max" {
+	return op === "gt" ? "min" : "max";
+}
+
+interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+}
+
+export function DateFilter({ field, label, helpText, className, ...props }: DateFilterProps) {
+	const { value, onChange } = useFilterField(field);
+
+	const initialOp: DateOperator = value?.min ? "gt" : "lt";
+	const [operator, setOperator] = useState<DateOperator>(initialOp);
+
+	const currentDate = toDate(value?.min ?? value?.max);
+
+	function handleOperatorChange(op: DateOperator) {
+		setOperator(op);
+		if (currentDate) {
+			emitChange(op, currentDate);
+		}
+	}
+
+	function handleDateChange(date: Date | undefined) {
+		if (!date) {
+			onChange(undefined);
+		} else {
+			emitChange(operator, date);
+		}
+	}
+
+	function emitChange(op: DateOperator, date: Date) {
+		const dateStr = toDateString(date);
+		const f = operatorToField(op);
+		onChange({
+			field,
+			label,
+			type: "date",
+			value: op,
+			min: f === "min" ? dateStr : undefined,
+			max: f === "max" ? dateStr : undefined,
+		});
+	}
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label>{label}</Label>
+			<div className="flex gap-2">
+				<Select value={operator} onValueChange={(v) => handleOperatorChange(v as DateOperator)}>
+					<SelectTrigger className="w-full flex-1">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						{OPERATOR_OPTIONS.map((opt) => (
+							<SelectItem key={opt.value} value={opt.value}>
+								{opt.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<DatePicker>
+					<DatePickerTrigger
+						className="w-full flex-2"
+						date={currentDate}
+						dateFormat="MMM do, yyyy"
+						placeholder="Pick a date"
+						aria-label={label}
+					/>
+					<DatePickerContent>
+						<DatePickerCalendar
+							mode="single"
+							captionLayout="dropdown"
+							selected={currentDate}
+							onSelect={handleDateChange}
+						/>
+					</DatePickerContent>
+				</DatePicker>
+			</div>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}
+
+export function toDate(value: string | undefined): Date | undefined {
+	if (!value) return undefined;
+	const parsed = parseISO(value);
+	return isNaN(parsed.getTime()) ? undefined : parsed;
+}
+
+export function toDateString(date: Date | undefined): string {
+	if (!date) return "";
+	return date.toISOString().split("T")[0];
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateRangeFilter.tsx

@@ -0,0 +1,69 @@
+import type { DateRange } from "react-day-picker";
+import { Label } from "../../../../components/ui/label";
+import {
+	DatePicker,
+	DatePickerRangeTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import { toDate, toDateString } from "./DateFilter";
+
+interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+}
+
+export function DateRangeFilter({
+	field,
+	label,
+	helpText,
+	className,
+	...props
+}: DateRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+
+	const dateRange: DateRange | undefined =
+		value?.min || value?.max ? { from: toDate(value?.min), to: toDate(value?.max) } : undefined;
+
+	function handleRangeSelect(range: DateRange | undefined) {
+		if (!range?.from && !range?.to) {
+			onChange(undefined);
+		} else {
+			onChange({
+				field,
+				label,
+				type: "daterange",
+				min: toDateString(range?.from),
+				max: toDateString(range?.to),
+			});
+		}
+	}
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label>{label}</Label>
+			<DatePicker>
+				<DatePickerRangeTrigger
+					className="w-full"
+					dateRange={dateRange}
+					placeholder="Pick a date range"
+					aria-label={label}
+				/>
+				<DatePickerContent align="start">
+					<DatePickerCalendar
+						mode="range"
+						captionLayout="dropdown"
+						defaultMonth={dateRange?.from}
+						selected={dateRange}
+						onSelect={handleRangeSelect}
+						numberOfMonths={2}
+					/>
+				</DatePickerContent>
+			</DatePicker>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/MultiSelectFilter.tsx

@@ -0,0 +1,98 @@
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../components/ui/popover";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { Label } from "../../../../components/ui/label";
+import { Button } from "../../../../components/ui/button";
+import { cn } from "../../../../lib/utils";
+import { ChevronDown } from "lucide-react";
+import { useFilterField } from "../FilterContext";
+
+interface MultiSelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}
+
+export function MultiSelectFilter({
+	field,
+	label,
+	options,
+	helpText,
+	className,
+	...props
+}: MultiSelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const selected = value?.value ? value.value.split(",") : [];
+
+	const triggerLabel =
+		selected.length === 0
+			? `Select ${label.toLowerCase()}`
+			: selected.length === 1
+				? (options.find((o) => o.value === selected[0])?.label ?? selected[0])
+				: `${selected.length} selected`;
+
+	function handleToggle(optionValue: string) {
+		const next = selected.includes(optionValue)
+			? selected.filter((v) => v !== optionValue)
+			: [...selected, optionValue];
+
+		if (next.length === 0) {
+			onChange(undefined);
+		} else {
+			onChange({
+				field,
+				label,
+				type: "multipicklist",
+				value: next.join(","),
+			});
+		}
+	}
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label>{label}</Label>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						variant="outline"
+						role="combobox"
+						className={cn(
+							"w-full justify-between font-normal",
+							selected.length === 0 && "text-muted-foreground",
+						)}
+					>
+						<span className="truncate">{triggerLabel}</span>
+						<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="p-2" align="start">
+					<div className="max-h-48 overflow-y-auto space-y-1">
+						{options.map((opt) => {
+							const id = `filter-${field}-${opt.value}`;
+							return (
+								<div
+									key={opt.value}
+									className="flex items-center gap-2 rounded px-1 py-0.5 hover:bg-accent"
+								>
+									<Checkbox
+										id={id}
+										checked={selected.includes(opt.value)}
+										onCheckedChange={() => handleToggle(opt.value)}
+									/>
+									<Label htmlFor={id} className="text-sm font-normal cursor-pointer w-full">
+										{opt.label}
+									</Label>
+								</div>
+							);
+						})}
+					</div>
+				</PopoverContent>
+			</Popover>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/NumericRangeFilter.tsx

@@ -0,0 +1,85 @@
+import { Input } from "../../../../components/ui/input";
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+}
+
+export function NumericRangeFilter({
+	field,
+	label,
+	helpText,
+	className,
+	...props
+}: NumericRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label>{label}</Label>
+			<NumericRangeFilterInputs field={field} label={label} value={value} onChange={onChange} />
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}
+
+interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	minInputProps?: React.ComponentProps<typeof Input>;
+	maxInputProps?: React.ComponentProps<typeof Input>;
+}
+
+export function NumericRangeFilterInputs({
+	field,
+	label,
+	value,
+	onChange,
+	className,
+	minInputProps,
+	maxInputProps,
+	...props
+}: NumericRangeFilterInputsProps) {
+	const handleChange = (bound: "min" | "max", v: string) => {
+		const next = {
+			field,
+			label,
+			type: "numeric" as const,
+			min: value?.min ?? "",
+			max: value?.max ?? "",
+			[bound]: v,
+		};
+		if (!next.min && !next.max) {
+			onChange(undefined);
+		} else {
+			onChange(next);
+		}
+	};
+
+	return (
+		<div className={cn("flex gap-2", className)} {...props}>
+			<Input
+				type="number"
+				placeholder="Min"
+				value={value?.min ?? ""}
+				onChange={(e) => handleChange("min", e.target.value)}
+				aria-label={`${label} minimum`}
+				{...minInputProps}
+			/>
+			<Input
+				type="number"
+				placeholder="Max"
+				value={value?.max ?? ""}
+				onChange={(e) => handleChange("max", e.target.value)}
+				aria-label={`${label} maximum`}
+				{...maxInputProps}
+			/>
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -0,0 +1,37 @@
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import { SearchBar } from "../SearchBar";
+import { useFilterField } from "../FilterContext";
+
+interface SearchFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	placeholder?: string;
+}
+
+export function SearchFilter({
+	field,
+	label,
+	placeholder,
+	className,
+	...props
+}: SearchFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<SearchBar
+				value={value?.value ?? ""}
+				handleChange={(v) => {
+					if (v) {
+						onChange({ field, label, type: "search", value: v });
+					} else {
+						onChange(undefined);
+					}
+				}}
+				placeholder={placeholder}
+				inputProps={{ id: `filter-${field}` }}
+			/>
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SelectFilter.tsx

@@ -0,0 +1,93 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+const ALL_VALUE = "__all__";
+
+interface SelectFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}
+
+export function SelectFilter({
+	field,
+	label,
+	options,
+	helpText,
+	className,
+	...props
+}: SelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<SelectFilterControl
+				field={field}
+				label={label}
+				options={options}
+				value={value}
+				onChange={onChange}
+			/>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}
+
+interface SelectFilterControlProps {
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+}
+
+export function SelectFilterControl({
+	field,
+	label,
+	options,
+	value,
+	onChange,
+	triggerProps,
+	contentProps,
+}: SelectFilterControlProps) {
+	return (
+		<Select
+			value={value?.value ?? ALL_VALUE}
+			onValueChange={(v) => {
+				if (v === ALL_VALUE) {
+					onChange(undefined);
+				} else {
+					onChange({ field, label, type: "picklist", value: v });
+				}
+			}}
+		>
+			<SelectTrigger
+				id={`filter-${field}`}
+				{...triggerProps}
+				className={cn("w-full", triggerProps?.className)}
+			>
+				<SelectValue placeholder={`Select ${label.toLowerCase()}`} />
+			</SelectTrigger>
+			<SelectContent {...contentProps}>
+				<SelectItem value={ALL_VALUE}>All</SelectItem>
+				{options.map((opt) => (
+					<SelectItem key={opt.value} value={opt.value}>
+						{opt.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/TextFilter.tsx

@@ -0,0 +1,74 @@
+import { Input } from "../../../../components/ui/input";
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+interface TextFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	placeholder?: string;
+	helpText?: string;
+}
+
+export function TextFilter({
+	field,
+	label,
+	placeholder,
+	helpText,
+	className,
+	...props
+}: TextFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label htmlFor={`filter-${field}`}>{label}</Label>
+			<TextFilterInput
+				field={field}
+				label={label}
+				placeholder={placeholder}
+				value={value}
+				onChange={onChange}
+			/>
+			{helpText && <p className="text-xs text-muted-foreground">{helpText}</p>}
+		</div>
+	);
+}
+
+interface TextFilterInputProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"onChange" | "value"
+> {
+	field: string;
+	label: string;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+}
+
+export function TextFilterInput({
+	field,
+	label,
+	value,
+	onChange,
+	className,
+	...props
+}: TextFilterInputProps) {
+	return (
+		<Input
+			id={`filter-${field}`}
+			type="text"
+			placeholder={props.placeholder ?? `Filter by ${label.toLowerCase()}...`}
+			value={value?.value ?? ""}
+			onChange={(e) => {
+				const v = e.target.value;
+				if (v) {
+					onChange({ field, label, type: "text", value: v });
+				} else {
+					onChange(undefined);
+				}
+			}}
+			className={cn(className)}
+			{...props}
+		/>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useAsyncData.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from "react";
+
+interface UseAsyncDataResult<T> {
+	data: T | null;
+	loading: boolean;
+	error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+	fetcher: () => Promise<T>,
+	deps: React.DependencyList,
+): UseAsyncDataResult<T> {
+	const [data, setData] = useState<T | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	// Re-create the fetcher reference only when deps change.
+	// eslint-disable-next-line react-hooks/exhaustive-deps --- deps are explicitly managed by the caller
+	const memoizedFetcher = useCallback(fetcher, deps);
+
+	useEffect(() => {
+		// Guard against setting state after unmount or dep change.
+		let cancelled = false;
+		setLoading(true);
+		setError(null);
+
+		memoizedFetcher()
+			.then((result) => {
+				if (!cancelled) setData(result);
+			})
+			.catch((err) => {
+				console.error(err);
+				if (!cancelled) setError(err instanceof Error ? err.message : "An error occurred");
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [memoizedFetcher]);
+
+	return { data, loading, error };
+}