@schandlergarcia/sf-web-components 2.2.1 → 2.3.0

package/brands/engine/app/features/object-search/components/PaginationControls.tsx

@@ -0,0 +1,109 @@
+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";
+
+interface PaginationControlsProps {
+	pageIndex: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	pageSize: number;
+	pageSizeOptions: readonly number[];
+	onNextPage: () => void;
+	onPreviousPage: () => void;
+	onPageSizeChange: (newPageSize: number) => void;
+	disabled?: boolean;
+}
+
+export default function PaginationControls({
+	pageIndex,
+	hasNextPage,
+	hasPreviousPage,
+	pageSize,
+	pageSizeOptions,
+	onNextPage,
+	onPreviousPage,
+	onPageSizeChange,
+	disabled = false,
+}: PaginationControlsProps) {
+	const handlePageSizeChange = (newValue: string) => {
+		const newSize = parseInt(newValue, 10);
+		if (!isNaN(newSize) && newSize !== pageSize) {
+			onPageSizeChange(newSize);
+		}
+	};
+	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">
+			<div
+				className="flex justify-center sm:justify-start items-center gap-2 shrink-0 row-2 sm:row-1"
+				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>
+			<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/brands/engine/app/features/object-search/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/brands/engine/app/features/object-search/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/brands/engine/app/features/object-search/components/filters/BooleanFilter.tsx

@@ -0,0 +1,78 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { cn } from "../../../../lib/utils";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+const ALL_VALUE = "__all__";
+
+interface BooleanFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+}
+
+export function BooleanFilter({ field, label, helpText, className, ...props }: BooleanFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	return (
+		<FilterFieldWrapper
+			label={label}
+			htmlFor={`filter-${field}`}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
+			<BooleanFilterSelect field={field} label={label} value={value} onChange={onChange} />
+		</FilterFieldWrapper>
+	);
+}
+
+interface BooleanFilterSelectProps {
+	field: string;
+	label: string;
+	value: ActiveFilterValue | undefined;
+	onChange: (value: ActiveFilterValue | undefined) => void;
+	triggerProps?: React.ComponentProps<typeof SelectTrigger>;
+	contentProps?: React.ComponentProps<typeof SelectContent>;
+}
+
+export function BooleanFilterSelect({
+	field,
+	label,
+	value,
+	onChange,
+	triggerProps,
+	contentProps,
+}: BooleanFilterSelectProps) {
+	return (
+		<Select
+			value={value?.value ?? ALL_VALUE}
+			onValueChange={(v) => {
+				if (v === ALL_VALUE) {
+					onChange(undefined);
+				} else {
+					onChange({ field, label, type: "boolean", value: v });
+				}
+			}}
+		>
+			<SelectTrigger
+				id={`filter-${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/brands/engine/app/features/object-search/components/filters/DateFilter.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { parseISO } from "date-fns";
+import {
+	DatePicker,
+	DatePickerTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
+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;
+	filterType?: FilterFieldType;
+}
+
+export function DateFilter({
+	field,
+	label,
+	helpText,
+	filterType = "date",
+	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: filterType,
+			value: op,
+			min: f === "min" ? dateStr : undefined,
+			max: f === "max" ? dateStr : undefined,
+		});
+	}
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+			<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>
+		</FilterFieldWrapper>
+	);
+}
+
+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/brands/engine/app/features/object-search/components/filters/DateRangeFilter.tsx

@@ -0,0 +1,70 @@
+import type { DateRange } from "react-day-picker";
+import {
+	DatePicker,
+	DatePickerRangeTrigger,
+	DatePickerContent,
+	DatePickerCalendar,
+} from "../../../../components/ui/datePicker";
+
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type { FilterFieldType } from "../../utils/filterUtils";
+import { toDate, toDateString } from "./DateFilter";
+
+interface DateRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+	field: string;
+	label: string;
+	helpText?: string;
+	filterType?: FilterFieldType;
+}
+
+export function DateRangeFilter({
+	field,
+	label,
+	helpText,
+	filterType = "daterange",
+	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: filterType,
+				min: toDateString(range?.from),
+				max: toDateString(range?.to),
+			});
+		}
+	}
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+			<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>
+		</FilterFieldWrapper>
+	);
+}

package/brands/engine/app/features/object-search/components/filters/FilterFieldWrapper.tsx

@@ -0,0 +1,33 @@
+import { Label } from "../../../../components/ui/label";
+import { cn } from "../../../../lib/utils";
+
+interface FilterFieldWrapperProps extends React.ComponentProps<"div"> {
+	label: string;
+	htmlFor?: string;
+	helpText?: string;
+	error?: string;
+}
+
+export function FilterFieldWrapper({
+	label,
+	htmlFor,
+	helpText,
+	error,
+	className,
+	children,
+	...props
+}: FilterFieldWrapperProps) {
+	return (
+		<div className={cn("space-y-1", className)} {...props}>
+			<Label htmlFor={htmlFor}>{label}</Label>
+			{children}
+			<div className="min-h-4">
+				{error ? (
+					<p className="text-xs text-destructive">{error}</p>
+				) : (
+					helpText && <p className="text-xs text-muted-foreground">{helpText}</p>
+				)}
+			</div>
+		</div>
+	);
+}

package/brands/engine/app/features/object-search/components/filters/MultiSelectFilter.tsx

@@ -0,0 +1,97 @@
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../components/ui/popover";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { Button } from "../../../../components/ui/button";
+import { cn } from "../../../../lib/utils";
+import { Label } from "../../../../components/ui/label";
+import { ChevronDown } from "lucide-react";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+
+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 (
+		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+			<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>
+		</FilterFieldWrapper>
+	);
+}