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

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

@@ -0,0 +1,70 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { resolve } from "path";
+import tailwindcss from "@tailwindcss/vite";
+import salesforce from "@salesforce/vite-plugin-webapp-experimental";
+
+export default defineConfig(({ mode }) => {
+	return {
+		plugins: [tailwindcss(), react(), salesforce()],
+
+		build: {
+			outDir: resolve(__dirname, "dist"),
+			assetsDir: "assets",
+			sourcemap: false,
+		},
+
+		resolve: {
+			dedupe: ["react", "react-dom"],
+			alias: {
+				// Single React instance so recharts (and other deps) use the app's React
+				react: path.resolve(__dirname, "node_modules/react"),
+				"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+				"@": path.resolve(__dirname, "./src"),
+				"@api": path.resolve(__dirname, "./src/api"),
+				"@components": path.resolve(__dirname, "./src/components"),
+				"@utils": path.resolve(__dirname, "./src/utils"),
+				"@styles": path.resolve(__dirname, "./src/styles"),
+				"@assets": path.resolve(__dirname, "./src/assets"),
+			},
+		},
+
+		test: {
+			root: resolve(__dirname),
+			environment: "jsdom",
+			setupFiles: ["./src/test/setup.ts"],
+			include: [
+				"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+				"src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+			],
+			coverage: {
+				provider: "v8",
+				reporter: ["text", "html", "clover", "json"],
+				exclude: [
+					"node_modules/",
+					"src/test/",
+					"src/**/*.d.ts",
+					"src/main.tsx",
+					"src/vite-env.d.ts",
+					"src/components/**/index.ts",
+					"**/*.config.ts",
+					"build/",
+					"dist/",
+					"coverage/",
+					"eslint.config.js",
+				],
+				thresholds: {
+					global: {
+						branches: 85,
+						functions: 85,
+						lines: 85,
+						statements: 85,
+					},
+				},
+			},
+			testTimeout: 10000,
+			globals: true,
+		},
+	};
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="vitest" />
+/// <reference types="@testing-library/jest-dom" />

package/dist/force-app/main/default/webapplications/feature-react-chart/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+  },
+});

package/dist/force-app/main/default/webapplications/feature-react-chart/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

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

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "/index.html"
+  }
+}

package/dist/jest.config.js

@@ -0,0 +1,6 @@
+const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
+
+module.exports = {
+    ...jestConfig,
+    modulePathIgnorePatterns: ['<rootDir>/.localdevserver']
+};

package/dist/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
+  "version": "1.13.0",
+  "description": "Base SFDX project template",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'No build required for base-sfdx-project'",
+    "clean": "echo 'No clean required for base-sfdx-project'",
+    "lint": "eslint **/{aura,lwc}/**/*.js",
+    "test": "npm run test:unit",
+    "test:unit": "sfdx-lwc-jest -- --passWithNoTests",
+    "test:unit:watch": "sfdx-lwc-jest --watch",
+    "test:unit:debug": "sfdx-lwc-jest --debug",
+    "test:unit:coverage": "sfdx-lwc-jest --coverage",
+    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "precommit": "lint-staged"
+  },
+  "devDependencies": {
+    "@lwc/eslint-plugin-lwc": "^2.0.0",
+    "@prettier/plugin-xml": "^3.2.2",
+    "@salesforce/eslint-config-lwc": "^3.2.3",
+    "@salesforce/eslint-plugin-aura": "^2.0.0",
+    "@salesforce/eslint-plugin-lightning": "^1.0.0",
+    "@salesforce/sfdx-lwc-jest": "^7.0.1",
+    "eslint": "8.57.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^28.8.1",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-apex": "^2.0.1"
+  }
+}

package/dist/scripts/apex/hello.apex

@@ -0,0 +1,10 @@
+// Use .apex files to store anonymous Apex.
+// You can execute anonymous Apex in VS Code by selecting the
+//     apex text and running the command:
+//     SFDX: Execute Anonymous Apex with Currently Selected Text
+// You can also execute the entire file by running the command:
+//     SFDX: Execute Anonymous Apex with Editor Contents
+
+string tempvar = 'Enter_your_name_here';
+System.debug('Hello World!');
+System.debug('My name is ' + tempvar);

package/dist/scripts/soql/account.soql

@@ -0,0 +1,6 @@
+// Use .soql files to store SOQL queries.
+// You can execute queries in VS Code by selecting the
+//     query text and running the command:
+//     SFDX: Execute SOQL Query with Currently Selected Text
+
+SELECT Id, Name FROM Account

package/dist/sfdx-project.json

@@ -0,0 +1,12 @@
+{
+  "packageDirectories": [
+    {
+      "path": "force-app",
+      "default": true
+    }
+  ],
+  "name": "MyProject",
+  "namespace": "",
+  "sfdcLoginUrl": "https://login.salesforce.com",
+  "sourceApiVersion": "66.0"
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@salesforce/webapp-template-feature-react-chart-experimental",
+  "version": "1.13.0",
+  "description": "Chart feature with analytics chart components, agent skills, and rules (Recharts)",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "",
+  "type": "module",
+  "main": "src/force-app/main/default/webapplications/feature-react-chart/src/index.ts",
+  "types": "src/force-app/main/default/webapplications/feature-react-chart/src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/force-app/main/default/webapplications/feature-react-chart/src/index.ts",
+      "import": "./src/force-app/main/default/webapplications/feature-react-chart/src/index.ts",
+      "default": "./src/force-app/main/default/webapplications/feature-react-chart/src/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npx tsx ../../cli/src/index.ts apply-patches packages/template/feature/feature-react-chart packages/template/base-app/base-react-app packages/template/feature/feature-react-chart/dist --reset",
+    "clean": "rm -rf dist",
+    "dev": "cd dist/force-app/main/default/webapplications/feature-react-chart && npm install && npm run dev",
+    "watch": "npx tsx ../../cli/src/index.ts watch-patches packages/template/feature/feature-react-chart packages/template/base-app/base-react-app packages/template/feature/feature-react-chart/dist"
+  },
+  "devDependencies": {
+    "@salesforce/webapp-experimental": "^1.13.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "recharts": "^2.15.0",
+    "vite": "^7.3.1"
+  },
+  "gitHead": "f5823a67b25f01d2c4510377cb4d2c34e7ace922"
+}

package/src/force-app/main/default/webapplications/feature-react-chart/src/components/AnalyticsChart.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import {
+	LineChart,
+	Line,
+	BarChart,
+	Bar,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Legend,
+} from "recharts";
+import type {
+	ChartTheme,
+	TimeSeriesDataPoint,
+	CategoricalDataPoint,
+	AnalyticsChartProps,
+} from "../types/chart";
+
+const THEME_COLORS: Record<ChartTheme, { stroke: string; fill: string }> = {
+	red: { stroke: "#dc2626", fill: "#fecaca" },
+	green: { stroke: "#16a34a", fill: "#bbf7d0" },
+	neutral: { stroke: "#64748b", fill: "#cbd5e1" },
+};
+
+function isTimeSeries(data: AnalyticsChartProps["data"]): data is TimeSeriesDataPoint[] {
+	return data.length > 0 && "x" in data[0] && "y" in data[0];
+}
+
+/** Line (time-series) or bar (categorical) chart with theme. */
+export function AnalyticsChart({
+	chartType,
+	data,
+	theme = "neutral",
+	title,
+	className = "",
+}: AnalyticsChartProps) {
+	const colors = THEME_COLORS[theme];
+
+	if (!data || data.length === 0) {
+		return (
+			<div className={className} style={{ padding: "1rem", color: "#64748b" }}>
+				{title ? <h3 style={{ margin: "0 0 0.5rem 0" }}>{title}</h3> : null}
+				<p style={{ margin: 0 }}>No data to display.</p>
+			</div>
+		);
+	}
+
+	const content =
+		chartType === "time-series" && isTimeSeries(data) ? (
+			<ResponsiveContainer width="100%" height={300}>
+				<LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+					<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+					<XAxis dataKey="x" stroke="#64748b" fontSize={12} />
+					<YAxis stroke="#64748b" fontSize={12} />
+					<Tooltip
+						contentStyle={{
+							backgroundColor: "#fff",
+							border: "1px solid #e2e8f0",
+							borderRadius: "6px",
+						}}
+					/>
+					<Legend />
+					<Line
+						type="monotone"
+						dataKey="y"
+						stroke={colors.stroke}
+						strokeWidth={2}
+						dot={{ fill: colors.stroke }}
+						name="Value"
+					/>
+				</LineChart>
+			</ResponsiveContainer>
+		) : (
+			<ResponsiveContainer width="100%" height={300}>
+				<BarChart
+					data={data as CategoricalDataPoint[]}
+					margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+				>
+					<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+					<XAxis dataKey="name" stroke="#64748b" fontSize={12} />
+					<YAxis stroke="#64748b" fontSize={12} />
+					<Tooltip
+						contentStyle={{
+							backgroundColor: "#fff",
+							border: "1px solid #e2e8f0",
+							borderRadius: "6px",
+						}}
+					/>
+					<Legend />
+					<Bar
+						dataKey="value"
+						fill={colors.fill}
+						stroke={colors.stroke}
+						strokeWidth={1}
+						name="Value"
+					/>
+				</BarChart>
+			</ResponsiveContainer>
+		);
+
+	return (
+		<div className={className} style={{ padding: "1rem" }}>
+			{title ? <h3 style={{ margin: "0 0 0.75rem 0", fontSize: "1.125rem" }}>{title}</h3> : null}
+			{content}
+		</div>
+	);
+}
+
+export default AnalyticsChart;

package/src/force-app/main/default/webapplications/feature-react-chart/src/components/ChartContainer.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+export interface ChartContainerProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+/** Wrapper for chart components (e.g. AnalyticsChart). */
+export function ChartContainer({ children, className = "" }: ChartContainerProps) {
+	return (
+		<div
+			className={className}
+			style={{
+				border: "1px solid #e2e8f0",
+				borderRadius: "8px",
+				backgroundColor: "#fff",
+				overflow: "hidden",
+			}}
+		>
+			{children}
+		</div>
+	);
+}
+
+export default ChartContainer;

package/src/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/src/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/src/force-app/main/default/webapplications/feature-react-chart/src/routes.tsx

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

package/src/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/src/force-app/main/default/webapplications/feature-react-chart/vite.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { resolve } from "path";
+import tailwindcss from "@tailwindcss/vite";
+import salesforce from "@salesforce/vite-plugin-webapp-experimental";
+
+export default defineConfig(({ mode }) => {
+	return {
+		plugins: [tailwindcss(), react(), salesforce()],
+
+		build: {
+			outDir: resolve(__dirname, "dist"),
+			assetsDir: "assets",
+			sourcemap: false,
+		},
+
+		resolve: {
+			dedupe: ["react", "react-dom"],
+			alias: {
+				// Single React instance so recharts (and other deps) use the app's React
+				react: path.resolve(__dirname, "node_modules/react"),
+				"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+				"@": path.resolve(__dirname, "./src"),
+				"@api": path.resolve(__dirname, "./src/api"),
+				"@components": path.resolve(__dirname, "./src/components"),
+				"@utils": path.resolve(__dirname, "./src/utils"),
+				"@styles": path.resolve(__dirname, "./src/styles"),
+				"@assets": path.resolve(__dirname, "./src/assets"),
+			},
+		},
+
+		test: {
+			root: resolve(__dirname),
+			environment: "jsdom",
+			setupFiles: ["./src/test/setup.ts"],
+			include: [
+				"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+				"src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+			],
+			coverage: {
+				provider: "v8",
+				reporter: ["text", "html", "clover", "json"],
+				exclude: [
+					"node_modules/",
+					"src/test/",
+					"src/**/*.d.ts",
+					"src/main.tsx",
+					"src/vite-env.d.ts",
+					"src/components/**/index.ts",
+					"**/*.config.ts",
+					"build/",
+					"dist/",
+					"coverage/",
+					"eslint.config.js",
+				],
+				thresholds: {
+					global: {
+						branches: 85,
+						functions: 85,
+						lines: 85,
+						statements: 85,
+					},
+				},
+			},
+			testTimeout: 10000,
+			globals: true,
+		},
+	};
+});