@salesforce/templates 66.5.6 → 66.6.1

package/lib/templates/project/reactb2x/_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/reactb2x/_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/reactb2x/_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/reactb2x/_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.

package/lib/templates/project/reactb2x/_r_/skills/building-data-visualization/implementation/bar-line-chart.md

@@ -1,316 +0,0 @@
-# Bar & Line / Area Chart — Implementation Guide
-
-Requires **recharts** (install from the web app directory; see SKILL.md Step 2).
-
----
-
-## Data shapes
-
-### Time-series (line / area chart)
-
-Use when data represents a trend over time or ordered sequence.
-
-```ts
-interface TimeSeriesDataPoint {
-  x: string;   // date or label on the x-axis
-  y: number;   // numeric value
-}
-```
-
-Map raw fields to this shape: e.g. `date` → `x`, `revenue` → `y`.
-
-### Categorical (bar chart)
-
-Use when data compares discrete categories.
-
-```ts
-interface CategoricalDataPoint {
-  name: string;   // category label
-  value: number;  // numeric value
-}
-```
-
-Map raw fields to this shape: e.g. `product` → `name`, `sales` → `value`.
-
-### How to decide
-
-| Signal | Type |
-|--------|------|
-| "over time", "trend", date-like keys | Time-series → line chart |
-| "by category", "by X", label-like keys | Categorical → bar chart |
-
----
-
-## Theme colors
-
-Pick a theme based on the data's sentiment:
-
-| Theme | Stroke / Fill | When to use |
-|-------|---------------|-------------|
-| `green` | `#22c55e` | Growth, gain, positive trend |
-| `red` | `#ef4444` | Decline, loss, negative trend |
-| `neutral` | `#6366f1` | Default or mixed data |
-
-Define colors as constants — do not use inline hex values.
-
-```ts
-const THEME_COLORS = {
-  red: "#ef4444",
-  green: "#22c55e",
-  neutral: "#6366f1",
-} as const;
-
-type ChartTheme = keyof typeof THEME_COLORS;
-```
-
----
-
-## Line chart component
-
-Create at `components/LineChart.tsx` (or colocate with the page):
-
-```tsx
-import React from "react";
-import {
-  LineChart as RechartsLineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-
-const THEME_COLORS = {
-  red: "#ef4444",
-  green: "#22c55e",
-  neutral: "#6366f1",
-} as const;
-
-type ChartTheme = keyof typeof THEME_COLORS;
-
-interface TimeSeriesDataPoint {
-  x: string;
-  y: number;
-}
-
-interface TimeSeriesChartProps {
-  data: TimeSeriesDataPoint[];
-  theme?: ChartTheme;
-  title?: string;
-  className?: string;
-}
-
-export function TimeSeriesChart({
-  data,
-  theme = "neutral",
-  title,
-  className = "",
-}: TimeSeriesChartProps) {
-  if (data.length === 0) {
-    return <p className="text-muted-foreground text-center py-8">No data to display</p>;
-  }
-
-  const color = THEME_COLORS[theme];
-
-  return (
-    <div className={className}>
-      {title && (
-        <h3 className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
-          {title}
-        </h3>
-      )}
-      <ResponsiveContainer width="100%" height={300}>
-        <RechartsLineChart data={data}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="x" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Line type="monotone" dataKey="y" stroke={color} strokeWidth={2} dot={false} />
-        </RechartsLineChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
-```
-
----
-
-## Bar chart component
-
-Create at `components/BarChart.tsx` (or colocate with the page):
-
-```tsx
-import React from "react";
-import {
-  BarChart as RechartsBarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from "recharts";
-
-const THEME_COLORS = {
-  red: "#ef4444",
-  green: "#22c55e",
-  neutral: "#6366f1",
-} as const;
-
-type ChartTheme = keyof typeof THEME_COLORS;
-
-interface CategoricalDataPoint {
-  name: string;
-  value: number;
-}
-
-interface CategoricalChartProps {
-  data: CategoricalDataPoint[];
-  theme?: ChartTheme;
-  title?: string;
-  className?: string;
-}
-
-export function CategoricalChart({
-  data,
-  theme = "neutral",
-  title,
-  className = "",
-}: CategoricalChartProps) {
-  if (data.length === 0) {
-    return <p className="text-muted-foreground text-center py-8">No data to display</p>;
-  }
-
-  const color = THEME_COLORS[theme];
-
-  return (
-    <div className={className}>
-      {title && (
-        <h3 className="text-sm font-medium text-primary mb-2 uppercase tracking-wide">
-          {title}
-        </h3>
-      )}
-      <ResponsiveContainer width="100%" height={300}>
-        <RechartsBarChart data={data}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Bar dataKey="value" fill={color} radius={[4, 4, 0, 0]} />
-        </RechartsBarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
-```
-
----
-
-## Area chart variant
-
-For a filled area chart (useful for volume-over-time), swap `Line` for `Area`:
-
-```tsx
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
-
-<ResponsiveContainer width="100%" height={300}>
-  <AreaChart data={data}>
-    <CartesianGrid strokeDasharray="3 3" />
-    <XAxis dataKey="x" />
-    <YAxis />
-    <Tooltip />
-    <Area type="monotone" dataKey="y" stroke={color} fill={color} fillOpacity={0.2} />
-  </AreaChart>
-</ResponsiveContainer>
-```
-
----
-
-## Chart container wrapper
-
-Wrap any chart in a styled card for consistent spacing:
-
-```tsx
-import { Card } from "@/components/ui/card";
-
-interface ChartContainerProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function ChartContainer({ children, className = "" }: ChartContainerProps) {
-  return (
-    <Card className={`p-4 border-gray-200 shadow-sm ${className}`}>
-      {children}
-    </Card>
-  );
-}
-```
-
-Usage:
-
-```tsx
-<ChartContainer>
-  <TimeSeriesChart data={monthlyData} theme="green" title="Monthly Revenue" />
-</ChartContainer>
-```
-
----
-
-## Preparing raw data
-
-Map API responses to the expected shape before passing to the chart:
-
-```tsx
-const timeSeriesData = useMemo(
-  () => apiRecords.map((r) => ({ x: r.date, y: r.revenue })),
-  [apiRecords],
-);
-
-const categoricalData = useMemo(
-  () => apiRecords.map((r) => ({ name: r.product, value: r.sales })),
-  [apiRecords],
-);
-```
-
----
-
-## Key Recharts concepts
-
-| Component | Purpose |
-|-----------|---------|
-| `ResponsiveContainer` | Wraps chart to fill parent width |
-| `CartesianGrid` | Background grid lines |
-| `XAxis` / `YAxis` | Axis labels; `dataKey` maps to the data field |
-| `Tooltip` | Hover info |
-| `Legend` | Series labels |
-| `Line` | Line series; `type="monotone"` for smooth curves |
-| `Bar` | Bar series; `radius` rounds top corners |
-| `Area` | Filled area; `fillOpacity` controls transparency |
-
----
-
-## Accessibility
-
-- Always include a text legend (not just colors).
-- Chart should be wrapped in a section with a visible heading.
-- For critical data, provide a text summary or table alternative.
-- Use sufficient color contrast between the chart stroke/fill and background.
-- Consider `prefers-reduced-motion` for chart animations.
-
----
-
-## Common mistakes
-
-| Mistake | Fix |
-|---------|-----|
-| Missing `ResponsiveContainer` | Chart won't resize; always wrap |
-| Fixed width/height on chart | Let `ResponsiveContainer` control sizing |
-| No empty-data handling | Show "No data" message when `data.length === 0` |
-| Inline colors | Extract to `THEME_COLORS` constant |
-| Using raw Recharts for every chart type | Use `DonutChart` (see `donut-chart.md`) for pie/donut |