@schandlergarcia/sf-web-components 2.3.17 → 2.4.0

package/brands/engine/app/features/object-search/__examples__/pages/Home.tsx

@@ -1,34 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { SearchBar } from "../../components/SearchBar";
-import { Button } from "../../../../components/ui/button";
-
-export default function HomePage() {
-	const navigate = useNavigate();
-	const [text, setText] = useState("");
-
-	const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		const params = text ? `?q=${encodeURIComponent(text)}` : "";
-		navigate(`/accounts${params}`);
-	};
-
-	return (
-		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-			<div className="flex items-center gap-6 mb-6">
-				<h1 className="text-2xl font-bold">Account Search</h1>
-				<Button variant="outline" size="sm" onClick={() => navigate("/accounts")}>
-					Browse All Accounts
-				</Button>
-			</div>
-			<form onSubmit={handleSubmit} className="flex gap-2">
-				<SearchBar
-					placeholder="Search by name, phone, or industry..."
-					value={text}
-					handleChange={setText}
-				/>
-				<Button type="submit">Search</Button>
-			</form>
-		</div>
-	);
-}

package/brands/engine/app/features/object-search/api/objectSearchService.ts

@@ -1,84 +0,0 @@
-import { createDataSDK } from "@salesforce/sdk-data";
-
-export interface ObjectSearchOptions<TWhere, TOrderBy> {
-	where?: TWhere;
-	orderBy?: TOrderBy;
-	first?: number;
-	after?: string;
-}
-
-export type PicklistOption = { value: string; label: string };
-
-/**
- * Executes a GraphQL search query and extracts the result for the given object name
- * from the standard `uiapi.query.<ObjectName>` response shape.
- */
-export async function searchObjects<TResult, TQuery, TVariables>(
-	query: string,
-	objectName: string,
-	options: ObjectSearchOptions<unknown, unknown> = {},
-): Promise<TResult> {
-	const { where, orderBy, first = 20, after } = options;
-
-	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery, TVariables>(query, {
-		first,
-		after,
-		where,
-		orderBy,
-	} as TVariables);
-
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
-	}
-
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
-		| Record<string, unknown>
-		| undefined;
-	const queryResult = (result?.query as Record<string, unknown> | undefined)?.[objectName] as
-		| TResult
-		| undefined;
-
-	if (!queryResult) {
-		throw new Error(`No ${objectName} data returned`);
-	}
-
-	return queryResult;
-}
-
-/**
- * Executes a GraphQL aggregate/groupBy query and extracts picklist options
- * from the standard `uiapi.aggregate.<ObjectName>` response shape.
- */
-export async function fetchDistinctValues<TQuery>(
-	query: string,
-	objectName: string,
-	fieldName: string,
-): Promise<PicklistOption[]> {
-	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery>(query);
-	const errors = response?.errors;
-
-	if (errors?.length) {
-		throw new Error(errors.map((e) => e.message).join("; "));
-	}
-
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
-		| Record<string, unknown>
-		| undefined;
-	const aggregate = (result?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
-		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
-		| undefined;
-
-	const edges = aggregate?.edges ?? [];
-	return edges
-		.map((edge) => {
-			const field = edge?.node?.aggregate?.[fieldName] as
-				| { value?: string | null; displayValue?: string | null; label?: string | null }
-				| undefined;
-			const value = field?.value;
-			if (!value) return null;
-			return { value, label: field.label ?? field.displayValue ?? value };
-		})
-		.filter((opt): opt is PicklistOption => opt !== null);
-}

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

@@ -1,89 +0,0 @@
-import { X } from "lucide-react";
-import { Button } from "../../../components/ui/button";
-import { cn } from "../../../lib/utils";
-import type { ActiveFilterValue } from "../utils/filterUtils";
-
-function formatFilterLabel(filter: ActiveFilterValue): string {
-	const { label, type, value, min, max } = filter;
-
-	switch (type) {
-		case "search":
-			return `Search: ${value}`;
-		case "text":
-		case "picklist":
-			return `${label}: ${value}`;
-		case "multipicklist": {
-			const values = value ? value.split(",") : [];
-			if (values.length <= 2) return `${label}: ${values.join(", ")}`;
-			return `${label}: ${values.length} selected`;
-		}
-		case "boolean":
-			return `${label}: ${value === "true" ? "Yes" : "No"}`;
-		case "numeric": {
-			if (min && max) return `${label}: ${min} - ${max}`;
-			if (min) return `${label}: >= ${min}`;
-			return `${label}: <= ${max}`;
-		}
-		case "date": {
-			if (min && max) return `${label}: ${min} to ${max}`;
-			if (min) return `${label}: from ${min}`;
-			return `${label}: until ${max}`;
-		}
-		default:
-			return label;
-	}
-}
-
-interface ActiveFiltersProps extends React.ComponentProps<"div"> {
-	filters: ActiveFilterValue[];
-	onRemove: (field: string) => void;
-	buttonProps?: Omit<React.ComponentProps<typeof ActiveFilterButton>, "filter" | "onRemove">;
-}
-
-export function ActiveFilters({
-	filters,
-	onRemove,
-	className,
-	buttonProps,
-	...props
-}: ActiveFiltersProps) {
-	if (filters.length === 0) return null;
-
-	return (
-		<div className={cn("flex flex-wrap gap-2", className)} {...props}>
-			{filters.map((filter) => (
-				<ActiveFilterButton
-					key={filter.field}
-					filter={filter}
-					onRemove={onRemove}
-					{...buttonProps}
-				/>
-			))}
-		</div>
-	);
-}
-
-interface ActiveFilterButtonProps extends React.ComponentProps<typeof Button> {
-	filter: ActiveFilterValue;
-	onRemove: (field: string) => void;
-}
-
-export function ActiveFilterButton({
-	filter,
-	onRemove,
-	className,
-	...props
-}: ActiveFilterButtonProps) {
-	return (
-		<Button
-			variant="outline"
-			size="sm"
-			className={cn("gap-1 h-7 text-xs", className)}
-			onClick={() => onRemove(filter.field)}
-			{...props}
-		>
-			{formatFilterLabel(filter)}
-			<X className="h-3 w-3" />
-		</Button>
-	);
-}

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

@@ -1,83 +0,0 @@
-import { createContext, useContext, useCallback, type ReactNode } from "react";
-import { Button } from "../../../components/ui/button";
-import type { ActiveFilterValue } from "../utils/filterUtils";
-
-interface FilterContextValue {
-	filters: ActiveFilterValue[];
-	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
-	onFilterRemove: (field: string) => void;
-	onReset: () => void;
-}
-
-const FilterContext = createContext<FilterContextValue | null>(null);
-
-interface FilterProviderProps {
-	filters: ActiveFilterValue[];
-	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
-	onFilterRemove: (field: string) => void;
-	onReset: () => void;
-	children: ReactNode;
-}
-
-export function FilterProvider({
-	filters,
-	onFilterChange,
-	onFilterRemove,
-	onReset,
-	children,
-}: FilterProviderProps) {
-	return (
-		<FilterContext.Provider
-			value={{
-				filters,
-				onFilterChange,
-				onFilterRemove,
-				onReset,
-			}}
-		>
-			{children}
-		</FilterContext.Provider>
-	);
-}
-
-function useFilterContext() {
-	const ctx = useContext(FilterContext);
-	if (!ctx) throw new Error("useFilterField must be used within a FilterProvider");
-	return ctx;
-}
-
-export function useFilterField(field: string) {
-	const { filters, onFilterChange, onFilterRemove } = useFilterContext();
-	const value = filters.find((f) => f.field === field);
-	const onChange = useCallback(
-		(next: ActiveFilterValue | undefined) => {
-			if (next) {
-				onFilterChange(field, next);
-			} else {
-				onFilterRemove(field);
-			}
-		},
-		[field, onFilterChange, onFilterRemove],
-	);
-	return { value, onChange };
-}
-
-export function useFilterPanel() {
-	const { filters, onReset } = useFilterContext();
-	return {
-		hasActiveFilters: filters.length > 0,
-		resetAll: onReset,
-	};
-}
-
-type FilterResetButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick">;
-
-export function FilterResetButton({ children, ...props }: FilterResetButtonProps) {
-	const { hasActiveFilters, resetAll } = useFilterPanel();
-	if (!hasActiveFilters) return null;
-	return (
-		<Button onClick={resetAll} aria-label="Reset filters" variant="destructive" {...props}>
-			{children ?? "Reset"}
-		</Button>
-	);
-}

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

@@ -1,66 +0,0 @@
-import { Link } from "react-router";
-import {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbPage,
-} from "../../../components/ui/breadcrumb";
-import { Skeleton } from "../../../components/ui/skeleton";
-
-interface ObjectBreadcrumbProps {
-	listPath: string;
-	listLabel: string;
-	recordName?: string;
-	loading?: boolean;
-	includeHome?: boolean; // default is true
-	homeLabel?: string; // default is "Home"
-}
-
-export function ObjectBreadcrumb({
-	listPath,
-	listLabel,
-	recordName,
-	loading,
-	includeHome = true,
-	homeLabel = "Home",
-}: ObjectBreadcrumbProps) {
-	const isDetailView = loading || recordName;
-
-	return (
-		<Breadcrumb className="mb-3">
-			<BreadcrumbList>
-				{includeHome && (
-					<BreadcrumbItem>
-						<BreadcrumbLink asChild>
-							<Link to="/">{homeLabel}</Link>
-						</BreadcrumbLink>
-					</BreadcrumbItem>
-				)}
-				<BreadcrumbSeparator />
-				{isDetailView ? (
-					<>
-						<BreadcrumbItem>
-							<BreadcrumbLink asChild>
-								<Link to={listPath}>{listLabel}</Link>
-							</BreadcrumbLink>
-						</BreadcrumbItem>
-						<BreadcrumbSeparator />
-						<BreadcrumbItem>
-							{loading && !recordName ? (
-								<Skeleton className="h-4 w-32" />
-							) : (
-								<BreadcrumbPage>{recordName}</BreadcrumbPage>
-							)}
-						</BreadcrumbItem>
-					</>
-				) : (
-					<BreadcrumbItem>
-						<BreadcrumbPage>{listLabel}</BreadcrumbPage>
-					</BreadcrumbItem>
-				)}
-			</BreadcrumbList>
-		</Breadcrumb>
-	);
-}

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

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

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

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