@salesforce/templates 66.5.6 → 66.6.0

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

@@ -1,127 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card";
-import { Button } from "../../../components/ui/button";
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger,
-} from "../../../components/ui/collapsible";
-import { cn } from "../../../lib/utils";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-import type { FilterFieldConfig, ActiveFilterValue } from "../utils/filterUtils";
-import { TextFilter } from "./filters/TextFilter";
-import { SelectFilter } from "./filters/SelectFilter";
-import { NumericRangeFilter } from "./filters/NumericRangeFilter";
-import { BooleanFilter } from "./filters/BooleanFilter";
-import { DateFilter } from "./filters/DateFilter";
-import { DateRangeFilter } from "./filters/DateRangeFilter";
-import { MultiSelectFilter } from "./filters/MultiSelectFilter";
-import { SearchFilter } from "./filters/SearchFilter";
-
-interface FilterPanelProps extends Omit<React.ComponentProps<"div">, "onReset"> {
-	configs: FilterFieldConfig[];
-	filters: ActiveFilterValue[];
-	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
-	onReset: () => void;
-	headerProps?: React.ComponentProps<typeof CardHeader>;
-	titleProps?: React.ComponentProps<typeof CardTitle>;
-	contentProps?: React.ComponentProps<typeof CardContent>;
-	resetButtonProps?: React.ComponentProps<typeof Button>;
-	toggleButtonProps?: React.ComponentProps<typeof Button>;
-}
-
-function getFilterValue(
-	filters: ActiveFilterValue[],
-	field: string,
-): ActiveFilterValue | undefined {
-	return filters.find((f) => f.field === field);
-}
-
-function renderFilter(
-	config: FilterFieldConfig,
-	value: ActiveFilterValue | undefined,
-	onChange: (value: ActiveFilterValue | undefined) => void,
-) {
-	switch (config.type) {
-		case "text":
-			return <TextFilter config={config} value={value} onChange={onChange} />;
-		case "picklist":
-			return <SelectFilter config={config} value={value} onChange={onChange} />;
-		case "numeric":
-			return <NumericRangeFilter config={config} value={value} onChange={onChange} />;
-		case "boolean":
-			return <BooleanFilter config={config} value={value} onChange={onChange} />;
-		case "date":
-			return <DateFilter config={config} value={value} onChange={onChange} />;
-		case "daterange":
-			return <DateRangeFilter config={config} value={value} onChange={onChange} />;
-		case "multipicklist":
-			return <MultiSelectFilter config={config} value={value} onChange={onChange} />;
-		case "search":
-			return <SearchFilter config={config} value={value} onChange={onChange} />;
-	}
-}
-
-export function FilterPanel({
-	configs,
-	filters,
-	onFilterChange,
-	onReset,
-	className,
-	headerProps,
-	titleProps,
-	contentProps,
-	resetButtonProps,
-	toggleButtonProps,
-	...props
-}: FilterPanelProps) {
-	const [open, setOpen] = useState(true);
-	const hasActiveFilters = filters.length > 0;
-
-	return (
-		<Card className={cn(className)} {...props}>
-			<Collapsible open={open} onOpenChange={setOpen}>
-				<CardHeader
-					{...headerProps}
-					className={cn(
-						"flex flex-row items-center justify-between space-y-0 pb-2",
-						headerProps?.className,
-					)}
-				>
-					<CardTitle
-						{...titleProps}
-						className={cn("text-base font-semibold", titleProps?.className)}
-					>
-						{titleProps?.children ?? <h2>Filters</h2>}
-					</CardTitle>
-					<div className="flex items-center gap-1">
-						{hasActiveFilters && (
-							<Button variant="destructive" size="sm" onClick={onReset} {...resetButtonProps}>
-								{resetButtonProps?.children ?? "Reset"}
-							</Button>
-						)}
-						<CollapsibleTrigger asChild>
-							<Button variant="ghost" size="icon" {...toggleButtonProps}>
-								<ChevronDown
-									className={`h-4 w-4 transition-transform ${open ? "" : "-rotate-90"}`}
-								/>
-								<span className="sr-only">Toggle filters</span>
-							</Button>
-						</CollapsibleTrigger>
-					</div>
-				</CardHeader>
-				<CollapsibleContent>
-					<CardContent {...contentProps} className={cn("space-y-4 pt-0", contentProps?.className)}>
-						{configs.map((config) => (
-							<div key={config.field}>
-								{renderFilter(config, getFilterValue(filters, config.field), (value) =>
-									onFilterChange(config.field, value),
-								)}
-							</div>
-						))}
-					</CardContent>
-				</CollapsibleContent>
-			</Collapsible>
-		</Card>
-	);
-}

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

@@ -1,151 +0,0 @@
-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/filters/DateFilter.tsx

@@ -1,165 +0,0 @@
-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/SearchFilter.tsx

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

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

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

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/pages/TestAccPage.tsx

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-
-import AgentforceConversationClient from "../components/AgentforceConversationClient";
-
-export default function TestAccPage() {
-	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-			<div className="text-center">
-				<h1 className="text-4xl font-bold text-gray-900 mb-4">ACC</h1>
-				<p className="text-lg text-gray-600 mb-8">Welcome to your ACC application.</p>
-			</div>
-			<AgentforceConversationClient agentId="0Xx000000000000AAA" />
-		</div>
-	);
-}

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -1,38 +0,0 @@
-import type { RouteObject } from 'react-router';
-import AppLayout from './appLayout';
-import Home from './features/object-search/__examples__/pages/Home';
-import NotFound from './pages/NotFound';
-import TestAccPage from "./pages/TestAccPage";
-import AccountSearch from "./features/object-search/__examples__/pages/AccountSearch";
-import AccountObjectDetail from "./features/object-search/__examples__/pages/AccountObjectDetailPage";
-
-export const routes: RouteObject[] = [
-  {
-    path: "/",
-    element: <AppLayout />,
-    children: [
-      {
-        index: true,
-        element: <Home />,
-        handle: { showInNavigation: true, label: "Home" }
-      },
-      {
-        path: '*',
-        element: <NotFound />
-      },
-      {
-        path: "test-acc",
-        element: <TestAccPage />,
-        handle: { showInNavigation: true, label: "Test ACC" }
-      },
-      {
-        path: "accounts/:recordId",
-        element: <AccountObjectDetail />
-      },
-      {
-        path: "accounts",
-        element: <AccountSearch />
-      }
-    ]
-  }
-];

package/lib/templates/project/reactb2e/_r_/skills/building-data-visualization/SKILL.md

@@ -1,72 +0,0 @@
----
-name: building-data-visualization
-description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
----
-
-# Data Visualization
-
-## When to Use
-
-Use this skill when:
-- Adding charts (donut, pie, bar, line, area) to a dashboard or analytics page
-- Displaying KPI/metric stat cards with trend indicators
-- Building a dashboard layout with mixed chart types and summary cards
-
----
-
-## Step 1 — Determine the visualization type
-
-Identify what the user needs:
-
-- **Donut / pie chart** — categorical breakdown (e.g. issue types, status distribution)
-- **Bar chart** — comparison across categories or time periods
-- **Line / area chart** — trends over time
-- **Stat card** — single KPI metric with optional trend indicator
-- **Combined dashboard** — stat cards + one or more charts
-
-If unclear, ask:
-
-> "What data should the chart display, and would a donut chart, bar chart, line chart, or stat cards work best?"
-
----
-
-## Step 2 — Install dependencies
-
-All chart types in this skill use **recharts**. Install once from the web app directory:
-
-```bash
-npm install recharts
-```
-
-Recharts is built on D3 and provides declarative React components. No additional CSS is needed.
-
----
-
-## Step 3 — Choose implementation path
-
-Read the corresponding guide:
-
-- **Bar chart** — read `implementation/bar-line-chart.md` (categorical data)
-- **Line / area chart** — read `implementation/bar-line-chart.md` (time-series data)
-- **Donut / pie chart** — read `implementation/donut-chart.md`
-- **Stat card with trend** — read `implementation/stat-card.md`
-- **Dashboard layout** — read `implementation/dashboard-layout.md`
-
----
-
-## Verification
-
-Before completing:
-
-1. Chart renders with correct data and colors.
-2. Chart is responsive (resizes with container).
-3. Legend labels match the data categories.
-4. Stat card trends display correct positive/negative indicators.
-5. Run from the web app directory:
-
-```bash
-cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
-```
-
-- **Lint:** MUST result in 0 errors.
-- **Build:** MUST succeed.