@salesforce/templates 66.5.4 → 66.5.6

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_os_/components/PaginationControls.tsx

@@ -0,0 +1,151 @@
+import type { ReactNode } from "react";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+} from "../../../components/ui/pagination";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Label } from "../../../components/ui/label";
+import { Button } from "../../../components/ui/button";
+
+/** Shared props: pagination state is from useObjectSearchParams (synced to URL). */
+interface PaginationControlsBase {
+	pageSize: number;
+	pageSizeOptions: readonly number[];
+	onPageSizeChange: (newPageSize: number) => void;
+	disabled?: boolean;
+}
+
+/** Default mode: Previous, Page N, Next (cursor-based, state in URL). */
+interface PaginationControlsDefaultProps extends PaginationControlsBase {
+	variant?: "default";
+	pageIndex: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	onNextPage: () => void;
+	onPreviousPage: () => void;
+}
+
+/** Load More mode: optional page size + Load More button (or custom slot). */
+interface PaginationControlsLoadMoreProps extends PaginationControlsBase {
+	variant: "loadMore";
+	hasNextPage: boolean;
+	onLoadMore: () => void;
+	loadMoreLoading?: boolean;
+	/** Custom content for load-more (e.g. custom button). If not set, renders default Load More button. */
+	loadMoreSlot?: ReactNode;
+}
+
+export type PaginationControlsProps =
+	| PaginationControlsDefaultProps
+	| PaginationControlsLoadMoreProps;
+
+function isLoadMoreProps(props: PaginationControlsProps): props is PaginationControlsLoadMoreProps {
+	return props.variant === "loadMore";
+}
+
+export default function PaginationControls(props: PaginationControlsProps) {
+	const { pageSize, pageSizeOptions, onPageSizeChange, disabled = false } = props;
+
+	const handlePageSizeChange = (newValue: string) => {
+		const newSize = parseInt(newValue, 10);
+		if (!isNaN(newSize) && newSize !== pageSize) {
+			onPageSizeChange(newSize);
+		}
+	};
+
+	const pageSizeBlock = (
+		<div
+			className="flex justify-center sm:justify-start items-center gap-2 shrink-0"
+			role="group"
+			aria-label="Page size selector"
+		>
+			<Label htmlFor="page-size-select" className="text-sm font-normal whitespace-nowrap">
+				Results per page:
+			</Label>
+			<Select value={pageSize.toString()} onValueChange={handlePageSizeChange} disabled={disabled}>
+				<SelectTrigger
+					id="page-size-select"
+					className="w-16"
+					aria-label="Select number of results per page"
+				>
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					{pageSizeOptions.map((size) => (
+						<SelectItem key={size} value={size.toString()}>
+							{size}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</div>
+	);
+
+	if (isLoadMoreProps(props)) {
+		const { hasNextPage, onLoadMore, loadMoreLoading = false, loadMoreSlot } = props;
+		return (
+			<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2">
+				{pageSizeBlock}
+				<div className="flex justify-center sm:justify-end">
+					{loadMoreSlot !== undefined ? (
+						loadMoreSlot
+					) : hasNextPage ? (
+						<Button
+							onClick={onLoadMore}
+							disabled={loadMoreLoading}
+							aria-label={loadMoreLoading ? "Loading..." : "Load More"}
+						>
+							{loadMoreLoading ? "Loading..." : "Load More"}
+						</Button>
+					) : null}
+				</div>
+			</div>
+		);
+	}
+
+	const { pageIndex, hasNextPage, hasPreviousPage, onNextPage, onPreviousPage } = props;
+	const currentPage = pageIndex + 1;
+	const prevDisabled = disabled || !hasPreviousPage;
+	const nextDisabled = disabled || !hasNextPage;
+
+	return (
+		<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2">
+			{pageSizeBlock}
+			<Pagination className="w-full mx-0 sm:justify-end">
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							onClick={prevDisabled ? undefined : onPreviousPage}
+							aria-disabled={prevDisabled}
+							className={prevDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+						/>
+					</PaginationItem>
+					<PaginationItem>
+						<span
+							className="min-w-16 text-center text-sm text-muted-foreground px-2"
+							aria-current="page"
+						>
+							Page {currentPage}
+						</span>
+					</PaginationItem>
+					<PaginationItem>
+						<PaginationNext
+							onClick={nextDisabled ? undefined : onNextPage}
+							aria-disabled={nextDisabled}
+							className={nextDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+		</div>
+	);
+}

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_os_/components/SearchBar.tsx

@@ -0,0 +1,41 @@
+import { Search } from "lucide-react";
+import { Input } from "../../../components/ui/input";
+import { cn } from "../../../lib/utils";
+
+interface SearchBarProps extends React.ComponentProps<"div"> {
+	value: string;
+	handleChange: (value: string) => void;
+	placeholder?: string;
+	iconProps?: React.ComponentProps<typeof Search>;
+	inputProps?: Omit<React.ComponentProps<typeof Input>, "value">;
+}
+
+export function SearchBar({
+	value,
+	handleChange,
+	placeholder,
+	className,
+	iconProps,
+	inputProps,
+	...props
+}: SearchBarProps) {
+	return (
+		<div className={cn("relative flex-1", className)} title={placeholder} {...props}>
+			<Search
+				{...iconProps}
+				className={cn(
+					"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground",
+					iconProps?.className,
+				)}
+			/>
+			<Input
+				type="text"
+				value={value}
+				onChange={(e) => handleChange(e.target.value)}
+				placeholder={placeholder}
+				{...inputProps}
+				className={cn("pl-9", inputProps?.className)}
+			/>
+		</div>
+	);
+}

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_os_/components/SortControl.tsx

@@ -0,0 +1,143 @@
+import { ArrowUp, ArrowDown } from "lucide-react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../components/ui/select";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+import type { SortFieldConfig, SortState } from "../utils/sortUtils";
+
+const NONE_VALUE = "__none__";
+
+interface SortControlProps extends React.ComponentProps<"div"> {
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	onSortChange: (sort: SortState | null) => void;
+	labelProps?: React.ComponentProps<"span">;
+	selectProps?: Omit<
+		React.ComponentProps<typeof SortControlSelect>,
+		"configs" | "sort" | "onSortChange"
+	>;
+	directionButtonProps?: Omit<
+		React.ComponentProps<typeof SortDirectionButton>,
+		"sort" | "onSortChange"
+	>;
+}
+
+export function SortControl({
+	configs,
+	sort,
+	onSortChange,
+	className,
+	labelProps,
+	selectProps,
+	directionButtonProps,
+	...props
+}: SortControlProps) {
+	return (
+		<div className={cn("flex items-center gap-2", className)} {...props}>
+			<span
+				{...labelProps}
+				className={cn("text-sm text-muted-foreground whitespace-nowrap", labelProps?.className)}
+			>
+				{labelProps?.children ?? "Sort by"}
+			</span>
+			<SortControlSelect
+				configs={configs}
+				sort={sort}
+				onSortChange={onSortChange}
+				{...selectProps}
+			/>
+			{sort && (
+				<SortDirectionButton sort={sort} onSortChange={onSortChange} {...directionButtonProps} />
+			)}
+		</div>
+	);
+}
+
+interface SortControlSelectProps {
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	onSortChange: (sort: SortState | null) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+	selectValueProps?: React.ComponentProps<typeof SelectValue>;
+	selectItemProps?: Omit<React.ComponentProps<typeof SelectItem>, "value">;
+}
+
+export function SortControlSelect({
+	configs,
+	sort,
+	onSortChange,
+	triggerProps,
+	contentProps,
+	selectValueProps,
+	selectItemProps,
+}: SortControlSelectProps) {
+	return (
+		<Select
+			value={sort?.field ?? NONE_VALUE}
+			onValueChange={(v) => {
+				if (v === NONE_VALUE) {
+					onSortChange(null);
+				} else {
+					onSortChange({
+						field: v,
+						direction: sort?.direction ?? "ASC",
+					});
+				}
+			}}
+		>
+			<SelectTrigger
+				size="sm"
+				{...triggerProps}
+				className={cn("w-[160px]", triggerProps?.className)}
+			>
+				<SelectValue placeholder="Default" {...selectValueProps} />
+			</SelectTrigger>
+			<SelectContent {...contentProps}>
+				<SelectItem value={NONE_VALUE} {...selectItemProps}>
+					Default
+				</SelectItem>
+				{configs.map((c) => (
+					<SelectItem key={c.field} value={c.field} {...selectItemProps}>
+						{c.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}
+
+interface SortDirectionButtonProps extends React.ComponentProps<typeof Button> {
+	sort: SortState;
+	onSortChange: (sort: SortState) => void;
+}
+
+export function SortDirectionButton({
+	sort,
+	onSortChange,
+	className,
+	...props
+}: SortDirectionButtonProps) {
+	return (
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			className={cn(className)}
+			onClick={() =>
+				onSortChange({
+					...sort,
+					direction: sort.direction === "ASC" ? "DESC" : "ASC",
+				})
+			}
+			aria-label={`Sort ${sort.direction === "ASC" ? "descending" : "ascending"}`}
+			{...props}
+		>
+			{sort.direction === "ASC" ? <ArrowUp /> : <ArrowDown />}
+		</Button>
+	);
+}

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

@@ -0,0 +1,94 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+
+const ALL_VALUE = "__all__";
+
+interface BooleanFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	config: FilterFieldConfig;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	labelProps?: React.ComponentProps<typeof Label>;
+	controlProps?: Omit<
+		React.ComponentProps<typeof BooleanFilterSelect>,
+		"config" | "value" | "onChange"
+	>;
+	helpTextProps?: React.ComponentProps<"p">;
+}
+
+export function BooleanFilter({
+	config,
+	value,
+	onChange,
+	className,
+	labelProps,
+	controlProps,
+	helpTextProps,
+	...props
+}: BooleanFilterProps) {
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label htmlFor={`filter-${config.field}`} {...labelProps}>
+				{labelProps?.children ?? config.label}
+			</Label>
+			<BooleanFilterSelect config={config} value={value} onChange={onChange} {...controlProps} />
+			{config.helpText && (
+				<p
+					{...helpTextProps}
+					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
+				>
+					{helpTextProps?.children ?? config.helpText}
+				</p>
+			)}
+		</div>
+	);
+}
+
+interface BooleanFilterSelectProps {
+	config: FilterFieldConfig;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+}
+
+export function BooleanFilterSelect({
+	config,
+	value,
+	onChange,
+	triggerProps,
+	contentProps,
+}: BooleanFilterSelectProps) {
+	return (
+		<Select
+			value={value?.value ?? ALL_VALUE}
+			onValueChange={(v) => {
+				if (v === ALL_VALUE) {
+					onChange(undefined);
+				} else {
+					onChange({ field: config.field, label: config.label, type: "boolean", value: v });
+				}
+			}}
+		>
+			<SelectTrigger
+				id={`filter-${config.field}`}
+				{...triggerProps}
+				className={cn("w-full", triggerProps?.className)}
+			>
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent {...contentProps}>
+				<SelectItem value={ALL_VALUE}>All</SelectItem>
+				<SelectItem value="true">Yes</SelectItem>
+				<SelectItem value="false">No</SelectItem>
+			</SelectContent>
+		</Select>
+	);
+}

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

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import { parseISO } from "date-fns";
+import { ChevronDown, Check } from "lucide-react";
+import { Label } from "../../../../components/ui/label";
+import { Button } from "../../../../components/ui/button";
+import {
+	Popover,
+	PopoverTrigger,
+	PopoverContent,
+} from "../../../../components/ui/popover";
+import {
+	DatePicker,
+	DatePickerTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+import { cn } from "../../../../lib/utils";
+import type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+
+type DateOperator = "gt" | "lt";
+
+const OPERATOR_OPTIONS: { value: DateOperator; label: string }[] = [
+	{ value: "gt", label: "After" },
+	{ value: "lt", label: "Before" },
+];
+
+/** Maps operator to the ActiveFilterValue field used to carry the date. */
+function operatorToField(op: DateOperator): "min" | "max" {
+	return op === "gt" ? "min" : "max";
+}
+
+interface DateFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	config: FilterFieldConfig;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	labelProps?: React.ComponentProps<typeof Label>;
+	helpTextProps?: React.ComponentProps<"p">;
+}
+
+export function DateFilter({
+	config,
+	value,
+	onChange,
+	className,
+	labelProps,
+	helpTextProps,
+	...props
+}: DateFilterProps) {
+	// Derive initial operator from the existing value (min → gt, max → lt)
+	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 field = operatorToField(op);
+		onChange({
+			field: config.field,
+			label: config.label,
+			type: "date",
+			value: op,
+			min: field === "min" ? dateStr : undefined,
+			max: field === "max" ? dateStr : undefined,
+		});
+	}
+
+	const [operatorOpen, setOperatorOpen] = useState(false);
+	const operatorLabel = OPERATOR_OPTIONS.find((o) => o.value === operator)?.label ?? "After";
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
+			<div className="flex min-w-0 gap-2">
+				<Popover open={operatorOpen} onOpenChange={setOperatorOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							className="h-9 w-[7rem] shrink-0 justify-between px-2.5 font-normal"
+							aria-label="Date operator"
+						>
+							<span className="truncate">{operatorLabel}</span>
+							<ChevronDown className="ml-1 size-4 shrink-0 opacity-50" />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent align="start" className="w-auto min-w-[7rem] p-1">
+						{OPERATOR_OPTIONS.map((opt) => (
+							<button
+								key={opt.value}
+								type="button"
+								className={cn(
+									"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-accent",
+									opt.value === operator && "font-medium",
+								)}
+								onClick={() => {
+									handleOperatorChange(opt.value);
+									setOperatorOpen(false);
+								}}
+							>
+								<Check
+									className={cn(
+										"size-4 shrink-0",
+										opt.value === operator ? "opacity-100" : "opacity-0",
+									)}
+								/>
+								{opt.label}
+							</button>
+						))}
+					</PopoverContent>
+				</Popover>
+				<DatePicker>
+					<DatePickerTrigger
+						className="min-w-0 flex-1 basis-0 !w-auto max-w-full"
+						date={currentDate}
+						dateFormat="MMM do, yyyy"
+						placeholder="Pick a date"
+						aria-label={config.label}
+					/>
+					<DatePickerContent>
+						<DatePickerCalendar
+							mode="single"
+							captionLayout="dropdown"
+							selected={currentDate}
+							onSelect={handleDateChange}
+						/>
+					</DatePickerContent>
+				</DatePicker>
+			</div>
+			{config.helpText && (
+				<p
+					{...helpTextProps}
+					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
+				>
+					{helpTextProps?.children ?? config.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/reactb2e/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/DateRangeFilter.tsx

@@ -0,0 +1,78 @@
+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 type { FilterFieldConfig, ActiveFilterValue } from "../../utils/filterUtils";
+import { toDate, toDateString } from "./DateFilter";
+
+interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	config: FilterFieldConfig;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	labelProps?: React.ComponentProps<typeof Label>;
+	helpTextProps?: React.ComponentProps<"p">;
+}
+
+export function DateRangeFilter({
+	config,
+	value,
+	onChange,
+	className,
+	labelProps,
+	helpTextProps,
+	...props
+}: DateRangeFilterProps) {
+	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: config.field,
+				label: config.label,
+				type: "daterange",
+				min: toDateString(range?.from),
+				max: toDateString(range?.to),
+			});
+		}
+	}
+
+	return (
+		<div className={cn("space-y-1.5", className)} {...props}>
+			<Label {...labelProps}>{labelProps?.children ?? config.label}</Label>
+			<DatePicker>
+				<DatePickerRangeTrigger
+					className="w-full"
+					dateRange={dateRange}
+					placeholder="Pick a date range"
+					aria-label={config.label}
+				/>
+				<DatePickerContent align="start">
+					<DatePickerCalendar
+						mode="range"
+						captionLayout="dropdown"
+						defaultMonth={dateRange?.from}
+						selected={dateRange}
+						onSelect={handleRangeSelect}
+						numberOfMonths={2}
+					/>
+				</DatePickerContent>
+			</DatePicker>
+			{config.helpText && (
+				<p
+					{...helpTextProps}
+					className={cn("text-xs text-muted-foreground", helpTextProps?.className)}
+				>
+					{helpTextProps?.children ?? config.helpText}
+				</p>
+			)}
+		</div>
+	);
+}