@schandlergarcia/sf-web-components 2.3.17 → 2.4.0

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

@@ -1,78 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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>
-	);
-}

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

@@ -1,163 +0,0 @@
-import { useEffect, useState } from "react";
-import { Input } from "../../../../components/ui/input";
-
-import { useFilterField } from "../FilterContext";
-import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
-import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import type { ActiveFilterValue } from "../../utils/filterUtils";
-
-interface NumericRangeFilterProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	field: string;
-	label: string;
-	helpText?: string;
-	min?: number;
-	max?: number;
-}
-
-export function NumericRangeFilter({
-	field,
-	label,
-	helpText,
-	min,
-	max,
-	className,
-	...props
-}: NumericRangeFilterProps) {
-	const { value, onChange } = useFilterField(field);
-	return (
-		<NumericRangeFilterInputs
-			field={field}
-			label={label}
-			helpText={helpText}
-			value={value}
-			onChange={onChange}
-			min={min}
-			max={max}
-			className={className}
-			{...props}
-		/>
-	);
-}
-
-interface NumericRangeFilterInputsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
-	field: string;
-	label: string;
-	helpText?: string;
-	value: ActiveFilterValue | undefined;
-	onChange: (value: ActiveFilterValue | undefined) => void;
-	min?: number;
-	max?: number;
-	minInputProps?: React.ComponentProps<typeof Input>;
-	maxInputProps?: React.ComponentProps<typeof Input>;
-}
-
-export function NumericRangeFilterInputs({
-	field,
-	label,
-	helpText,
-	value,
-	onChange,
-	min: boundMin,
-	max: boundMax,
-	className,
-	...props
-}: NumericRangeFilterInputsProps) {
-	const [localMin, setLocalMin] = useState(value?.min ?? "");
-	const [localMax, setLocalMax] = useState(value?.max ?? "");
-
-	const externalMin = value?.min ?? "";
-	const externalMax = value?.max ?? "";
-	useEffect(() => {
-		setLocalMin(externalMin);
-	}, [externalMin]);
-	useEffect(() => {
-		setLocalMax(externalMax);
-	}, [externalMax]);
-
-	const isOutOfBounds = (v: string) => {
-		if (v === "") return false;
-		const n = Number(v);
-		return (boundMin != null && n < boundMin) || (boundMax != null && n > boundMax);
-	};
-	const minOutOfBounds = isOutOfBounds(localMin);
-	const maxOutOfBounds = isOutOfBounds(localMax);
-	const isRangeInverted = localMin !== "" && localMax !== "" && Number(localMin) > Number(localMax);
-	const hasError = minOutOfBounds || maxOutOfBounds || isRangeInverted;
-
-	const debouncedOnChange = useDebouncedCallback((min: string, max: string) => {
-		if (!min && !max) {
-			onChange(undefined);
-			return;
-		}
-		const minNum = min !== "" ? Number(min) : null;
-		const maxNum = max !== "" ? Number(max) : null;
-		if (minNum != null && maxNum != null && minNum > maxNum) return;
-		if (
-			minNum != null &&
-			((boundMin != null && minNum < boundMin) || (boundMax != null && minNum > boundMax))
-		)
-			return;
-		if (
-			maxNum != null &&
-			((boundMin != null && maxNum < boundMin) || (boundMax != null && maxNum > boundMax))
-		)
-			return;
-		onChange({ field, label, type: "numeric" as const, min, max });
-	});
-
-	const boundsLabel =
-		boundMin != null && boundMax != null
-			? `${boundMin}–${boundMax}`
-			: boundMin != null
-				? `${boundMin} or more`
-				: boundMax != null
-					? `${boundMax} or less`
-					: null;
-
-	const errorMessage = isRangeInverted
-		? "Min must not exceed max"
-		: (minOutOfBounds || maxOutOfBounds) && boundsLabel
-			? `Value must be between ${boundsLabel}`
-			: undefined;
-
-	return (
-		<FilterFieldWrapper
-			label={label}
-			helpText={helpText}
-			error={errorMessage}
-			className={className}
-			{...props}
-		>
-			<div className="flex gap-2">
-				<Input
-					type="number"
-					placeholder="Min"
-					value={localMin}
-					min={boundMin}
-					max={boundMax}
-					onChange={(e) => {
-						const v = e.target.value;
-						setLocalMin(v);
-						debouncedOnChange(v, localMax);
-					}}
-					aria-label={`${label} minimum`}
-					aria-invalid={hasError || undefined}
-				/>
-				<Input
-					type="number"
-					placeholder="Max"
-					value={localMax}
-					min={boundMin}
-					max={boundMax}
-					onChange={(e) => {
-						const v = e.target.value;
-						setLocalMax(v);
-						debouncedOnChange(localMin, v);
-					}}
-					aria-label={`${label} maximum`}
-					aria-invalid={hasError || undefined}
-				/>
-			</div>
-		</FilterFieldWrapper>
-	);
-}

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

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { SearchBar } from "../SearchBar";
-import { useFilterField } from "../FilterContext";
-import { FilterFieldWrapper } from "./FilterFieldWrapper";
-import { useDebouncedCallback } from "../../hooks/useDebouncedCallback";
-
-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);
-	const [localValue, setLocalValue] = useState(value?.value ?? "");
-
-	const externalValue = value?.value ?? "";
-	useEffect(() => {
-		setLocalValue(externalValue);
-	}, [externalValue]);
-
-	const debouncedOnChange = useDebouncedCallback((v: string) => {
-		if (v) {
-			onChange({ field, label, type: "search", value: v });
-		} else {
-			onChange(undefined);
-		}
-	});
-
-	return (
-		<FilterFieldWrapper label={label} htmlFor={`filter-${field}`} className={className} {...props}>
-			<SearchBar
-				value={localValue}
-				handleChange={(v) => {
-					setLocalValue(v);
-					debouncedOnChange(v);
-				}}
-				placeholder={placeholder}
-				inputProps={{ id: `filter-${field}` }}
-			/>
-		</FilterFieldWrapper>
-	);
-}