@salesforce/webapp-template-feature-react-chart-experimental 1.13.0

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/select.tsx

@@ -0,0 +1,151 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1 bg-white", className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1 bg-white", className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white text-gray-900 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1 bg-white",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "../../lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return <div className={cn("animate-pulse rounded-md bg-gray-200", className)} {...props} />;
+}
+
+export { Skeleton };

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/spinner.tsx

@@ -0,0 +1,21 @@
+import { LoaderIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+	return (
+		<LoaderIcon
+			role="status"
+			aria-label="Loading"
+			className={cn(
+				"size-4 animate-spin",
+				// A11y: Respect user's motion preferences
+				"motion-reduce:animate-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Spinner };

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Shadcn-style Table components
+ * These components follow shadcn/ui patterns for consistent styling
+ */
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="relative w-full overflow-auto">
+			<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<thead
+		ref={ref}
+		className={cn(
+			// 1. Existing border style
+			"[&_tr]:border-b",
+
+			// 2. Make headers sticky
+			// We apply this to the 'th' children using the [&_th] selector
+			// This is often more robust across browsers than applying sticky to the <thead> itself
+			"[&_th]:sticky [&_th]:top-0 [&_th]:z-10",
+			// 3. CRITICAL: Add background color
+			// Without this, content scrolls "under" the transparent text
+			"[&_th]:bg-background",
+
+			// 4. Optional: Add a subtle shadow for better visual separation when scrolling
+			"[&_th]:shadow-[0_1px_0_0_theme(colors.border)]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tfoot
+		ref={ref}
+		className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/ui/tabs.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+interface TabsContextValue {
+	value: string;
+	onValueChange: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
+
+interface TabsProps extends React.ComponentProps<"div"> {
+	value?: string;
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+}
+
+function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps) {
+	const [internalValue, setInternalValue] = React.useState(defaultValue || "");
+	const controlled = value !== undefined;
+	const currentValue = controlled ? value : internalValue;
+
+	const handleValueChange = React.useCallback(
+		(newValue: string) => {
+			if (!controlled) {
+				setInternalValue(newValue);
+			}
+			onValueChange?.(newValue);
+		},
+		[controlled, onValueChange],
+	);
+
+	return (
+		<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+			<div data-slot="tabs" className={cn("w-full", className)} {...props}>
+				{children}
+			</div>
+		</TabsContext.Provider>
+	);
+}
+
+function useTabsContext() {
+	const context = React.useContext(TabsContext);
+	if (!context) {
+		throw new Error("Tabs components must be used within a Tabs component");
+	}
+	return context;
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="tabs-list"
+			className={cn(
+				"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+interface TabsTriggerProps extends React.ComponentProps<"button"> {
+	value: string;
+}
+
+function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
+	const { value: selectedValue, onValueChange } = useTabsContext();
+	const isSelected = selectedValue === value;
+
+	return (
+		<button
+			data-slot="tabs-trigger"
+			data-selected={isSelected}
+			type="button"
+			role="tab"
+			aria-selected={isSelected}
+			className={cn(
+				"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+				isSelected
+					? "bg-background text-foreground shadow-sm"
+					: "text-muted-foreground hover:bg-background/50",
+				className,
+			)}
+			onClick={() => onValueChange(value)}
+			{...props}
+		/>
+	);
+}
+
+interface TabsContentProps extends React.ComponentProps<"div"> {
+	value: string;
+}
+
+function TabsContent({ className, value, children, ...props }: TabsContentProps) {
+	const { value: selectedValue } = useTabsContext();
+	if (selectedValue !== value) {
+		return null;
+	}
+
+	return (
+		<div
+			data-slot="tabs-content"
+			role="tabpanel"
+			className={cn(
+				"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/force-app/main/default/webapplications/feature-react-chart/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * feature-react-chart – Analytics chart components
+ */
+
+export { AnalyticsChart } from "./components/AnalyticsChart";
+export { ChartContainer } from "./components/ChartContainer";
+export type {
+	AnalyticsChartProps,
+	ChartDataType,
+	ChartTheme,
+	TimeSeriesDataPoint,
+	CategoricalDataPoint,
+	ChartDataPoint,
+} from "./types/chart";

package/dist/force-app/main/default/webapplications/feature-react-chart/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/src/pages/About.tsx

@@ -0,0 +1,12 @@
+function About() {
+  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">About</h1>
+        <p className="text-lg text-gray-600">This is the about page.</p>
+      </div>
+    </div>
+  );
+}
+
+export default About;

package/dist/force-app/main/default/webapplications/feature-react-chart/src/pages/ChartPage.tsx

@@ -0,0 +1,51 @@
+import { ChartContainer } from "../components/ChartContainer";
+import { AnalyticsChart } from "../components/AnalyticsChart";
+import type { TimeSeriesDataPoint, CategoricalDataPoint } from "../types/chart";
+
+const sampleTimeSeries: TimeSeriesDataPoint[] = [
+	{ x: "Jan", y: 42 },
+	{ x: "Feb", y: 38 },
+	{ x: "Mar", y: 55 },
+	{ x: "Apr", y: 61 },
+	{ x: "May", y: 58 },
+	{ x: "Jun", y: 72 },
+];
+
+const sampleCategorical: CategoricalDataPoint[] = [
+	{ name: "Product A", value: 120 },
+	{ name: "Product B", value: 85 },
+	{ name: "Product C", value: 95 },
+	{ name: "Product D", value: 64 },
+	{ name: "Product E", value: 110 },
+];
+
+export default function ChartPage() {
+	return (
+		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="mb-8">
+				<h1 className="text-4xl font-bold text-gray-900 mb-2">Analytics</h1>
+				<p className="text-lg text-gray-600">Sample time-series and categorical charts.</p>
+			</div>
+
+			<div className="space-y-8">
+				<ChartContainer className="max-w-3xl">
+					<AnalyticsChart
+						chartType="time-series"
+						data={sampleTimeSeries}
+						theme="green"
+						title="Monthly trend"
+					/>
+				</ChartContainer>
+
+				<ChartContainer className="max-w-3xl">
+					<AnalyticsChart
+						chartType="categorical"
+						data={sampleCategorical}
+						theme="neutral"
+						title="By category"
+					/>
+				</ChartContainer>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+export default function Home() {
+  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">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  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">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/src/routes.tsx

@@ -0,0 +1,34 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from '@/pages/Home';
+import About from './pages/About';
+import NotFound from './pages/NotFound';
+import ChartPage from "./pages/ChartPage";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' }
+      },
+      {
+        path: 'about',
+        element: <About />,
+        handle: { showInNavigation: true, label: 'About' }
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      },
+      {
+        path: "chart",
+        element: <ChartPage />,
+        handle: { showInNavigation: true, label: "Chart" }
+      }
+    ]
+  }
+];

package/dist/force-app/main/default/webapplications/feature-react-chart/src/styles/global.css

@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/src/types/chart.ts

@@ -0,0 +1,22 @@
+export type ChartDataType = "time-series" | "categorical";
+export type ChartTheme = "red" | "green" | "neutral";
+
+export interface TimeSeriesDataPoint {
+	x: string;
+	y: number;
+}
+
+export interface CategoricalDataPoint {
+	name: string;
+	value: number;
+}
+
+export type ChartDataPoint = TimeSeriesDataPoint | CategoricalDataPoint;
+
+export interface AnalyticsChartProps {
+	chartType: ChartDataType;
+	data: ChartDataPoint[];
+	theme?: ChartTheme;
+	title?: string;
+	className?: string;
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
+    }
+  },
+  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/force-app/main/default/webapplications/feature-react-chart/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />