@salesforce/webapp-template-feature-react-chart-experimental 1.25.2 → 1.27.0

package/dist/.a4drules/graphql/tools/knowledge/lds-generate-graphql-mutationquery.md

@@ -123,7 +123,8 @@ mutation mutateEntityName(
 ## Mutation Standalone (Default) Output Format - CLEAN CODE ONLY
 
 ```javascript
-const QUERY_NAME = `
+import { gql } from 'api/graphql.ts';
+const QUERY_NAME = gql`
   mutation mutateEntity($input: EntityNameOperationInput!) {
     uiapi {
       EntityNameOperation(input: $input) {

package/dist/.a4drules/skills/install-feature/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: install-feature
-description: Install a feature into the current app. Use when the user asks to add a feature, capability, or functionality like authentication, search, charts, or navigation to their React web app.
+description: Install a feature into the current app. Use when the user asks to add a feature, capability, or functionality like authentication, search, charts, or navigation to their React web app. Do this when user wants to do _anything_ to webapplications/webapps.
 ---
 
 # Install feature
@@ -17,10 +17,12 @@ Available features (npm packages):
 | **Authentication**     | `@salesforce/webapp-template-feature-react-authentication-experimental` | Login, register, password reset, protected routes                      |
 | **Global search**      | `@salesforce/webapp-template-feature-react-global-search-experimental`  | Search Salesforce objects with filters and pagination                  |
 | **Navigation menu**    | `@salesforce/webapp-template-feature-react-nav-menu-experimental`       | App layout with responsive navigation menu                             |
-| **Analytics charts**   | `@salesforce/webapp-template-feature-react-chart-experimental`         | Recharts line/bar charts with theming (AnalyticsChart, ChartContainer) |
+| **Analytics charts**   | `@salesforce/webapp-template-feature-react-chart-experimental`          | Recharts line/bar charts with theming (AnalyticsChart, ChartContainer) |
+| **GraphQL data access**| `@salesforce/webapp-template-feature-graphql-experimental`              | executeGraphQL utilities, codegen tooling, and example AccountsTable   |
 | **Shared UI (shadcn)** | `@salesforce/webapp-template-feature-react-shadcn-experimental`         | Button, Card, Input, Select, Table, Tabs, etc.                         |
 
 
+
 If no feature matches, tell the user and offer to build it from scratch following the project's existing patterns.
 
 ## 2. Install the npm package
@@ -31,12 +33,18 @@ npm install <package-name>
 
 ## 3. Copy skills and rules from the package
 
-After install, check the package in `node_modules/<package-name>/` for:
+Run the script so skills and rules from the package are copied into your project. Pass `[skills-dir]` and `[rules-dir]` for your environment; the script reports what it copied.
+
+```bash
+# Default (e.g. Cline): .cline/skills, .clinerules
+bash <this-skill>/scripts/copy-feature-assets.sh <package-name>
 
-- `**skills/**` – If it exists, copy each skill folder into the current project's skills directory (e.g. `.cline/skills/` or `.cursor/skills/`).
-- `**rules/**` – If it exists, copy each rule file into the current project's rules directory (e.g. `.clinerules/` or `.cursor/rules/`).
+# Agentforce: .a4drules/ ([docs](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/devagent-rules.html))
+bash <this-skill>/scripts/copy-feature-assets.sh <package-name> .a4drules/skills .a4drules
 
-Not every package has skills or rules; skip this step if neither directory exists.
+# Cursor: .cursor/skills, .cursor/rules
+bash <this-skill>/scripts/copy-feature-assets.sh <package-name> .cursor/skills .cursor/rules
+```
 
 ## 4. Read the feature's exports and components
 

package/dist/.a4drules/skills/install-feature/scripts/copy-feature-assets.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+# Copies skills/ and rules/ from an installed npm package into the current project.
+# Usage: bash <this-script> <package-name> [skills-dir] [rules-dir]
+#
+# Examples:
+#   bash copy-feature-assets.sh @salesforce/webapp-template-feature-graphql-experimental
+#   bash copy-feature-assets.sh @salesforce/webapp-template-feature-graphql-experimental .cursor/skills .cursor/rules
+set -euo pipefail
+
+PKG="${1:?Usage: copy-feature-assets.sh <package-name> [skills-dir] [rules-dir]}"
+SKILLS_DIR="${2:-.cline/skills}"
+RULES_DIR="${3:-.clinerules}"
+
+PKG_DIR="node_modules/$PKG"
+
+if [ ! -d "$PKG_DIR" ]; then
+  echo "Error: Package not found at $PKG_DIR" >&2
+  echo "Run 'npm install $PKG' first." >&2
+  exit 1
+fi
+
+if [ -d "$PKG_DIR/skills" ] && [ "$(ls -A "$PKG_DIR/skills")" ]; then
+  mkdir -p "$SKILLS_DIR"
+  cp -r "$PKG_DIR"/skills/* "$SKILLS_DIR"/
+  echo "Copied skills → $SKILLS_DIR/"
+else
+  echo "No skills/ found in $PKG_DIR — nothing to copy."
+fi
+
+if [ -d "$PKG_DIR/rules" ] && [ "$(ls -A "$PKG_DIR/rules")" ]; then
+  mkdir -p "$RULES_DIR"
+  cp -r "$PKG_DIR"/rules/* "$RULES_DIR"/
+  echo "Copied rules  → $RULES_DIR/"
+else
+  echo "No rules/ found in $PKG_DIR — nothing to copy."
+fi

package/dist/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.27.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.26.0...v1.27.0) (2026-02-12)
+
+
+### Features
+
+* defining graphql feature @W-20226218@ ([#83](https://github.com/salesforce-experience-platform-emu/webapps/issues/83)) ([51a9273](https://github.com/salesforce-experience-platform-emu/webapps/commit/51a92733063e1adf0c6e44ceab37162baddc2ffb))
+
+
+
+
+
+# [1.26.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.25.2...v1.26.0) (2026-02-11)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.25.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.25.1...v1.25.2) (2026-02-11)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

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

@@ -1,9 +1,11 @@
-import { Outlet } from 'react-router';
+import { Outlet } from "react-router";
+import NavigationMenu from "./navigationMenu";
 
 export default function AppLayout() {
-  return (
-    <>
-      <Outlet />
-    </>
-  );
+	return (
+		<>
+			<NavigationMenu />
+			<Outlet />
+		</>
+	);
 }

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

@@ -0,0 +1,81 @@
+import { Link, useLocation } from "react-router";
+import { getAllRoutes } from "./router-utils";
+import { useState } from "react";
+
+export default function NavigationMenu() {
+	const [isOpen, setIsOpen] = useState(false);
+	const location = useLocation();
+
+	const isActive = (path: string) => location.pathname === path;
+
+	const toggleMenu = () => setIsOpen(!isOpen);
+
+	// Get all route configs and filter by showInNavigation
+	const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+		.filter(
+			(route) =>
+				route.handle?.showInNavigation === true &&
+				route.fullPath !== undefined &&
+				route.handle?.label !== undefined,
+		)
+		.map(
+			(route) =>
+				({
+					path: route.fullPath,
+					label: route.handle?.label,
+				}) as { path: string; label: string },
+		);
+
+	return (
+		<nav className="bg-white border-b border-gray-200">
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div className="flex justify-between items-center h-16">
+					<Link to="/" className="text-xl font-semibold text-gray-900">
+						React App
+					</Link>
+					<button
+						onClick={toggleMenu}
+						className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+						aria-label="Toggle menu"
+					>
+						<div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+							<span
+								className={`block h-0.5 w-6 bg-current transition-all ${
+									isOpen ? "rotate-45 translate-y-2" : ""
+								}`}
+							/>
+							<span
+								className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? "opacity-0" : ""}`}
+							/>
+							<span
+								className={`block h-0.5 w-6 bg-current transition-all ${
+									isOpen ? "-rotate-45 -translate-y-2" : ""
+								}`}
+							/>
+						</div>
+					</button>
+				</div>
+				{isOpen && (
+					<div className="pb-4">
+						<div className="flex flex-col space-y-2">
+							{navigationRoutes.map((item) => (
+								<Link
+									key={item.path}
+									to={item.path}
+									onClick={() => setIsOpen(false)}
+									className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+										isActive(item.path)
+											? "bg-blue-100 text-blue-700"
+											: "text-gray-700 hover:bg-gray-100"
+									}`}
+								>
+									{item.label}
+								</Link>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+		</nav>
+	);
+}

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

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

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

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

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

@@ -0,0 +1,34 @@
+import type { RouteObject } from "react-router";
+import { routes } from "./routes";
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (route: RouteObject, parentPath: string = ""): RouteWithFullPath[] => {
+	// Construct the full path for this route
+	let fullPath: string;
+
+	if (route.index) {
+		// Index routes use the parent path
+		fullPath = parentPath || "/";
+	} else if (route.path) {
+		// Combine parent path with current path
+		if (route.path.startsWith("/")) {
+			fullPath = route.path;
+		} else {
+			fullPath = parentPath === "/" ? `/${route.path}` : `${parentPath}/${route.path}`;
+		}
+	} else {
+		fullPath = parentPath;
+	}
+
+	const routeWithPath = { ...route, fullPath };
+
+	// Recursively process children
+	const childRoutes = route.children?.flatMap((child) => flatMapRoutes(child, fullPath)) || [];
+
+	return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+	return routes.flatMap((route) => flatMapRoutes(route));
+};

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

@@ -1,8 +1,9 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import Home from '@/pages/Home';
-import About from './pages/About';
+import About from './pages/about';
 import NotFound from './pages/NotFound';
+import New from "./pages/new";
 import ChartPage from "./pages/ChartPage";
 
 export const routes: RouteObject[] = [
@@ -16,14 +17,24 @@ export const routes: RouteObject[] = [
         handle: { showInNavigation: true, label: 'Home' }
       },
       {
-        path: 'about',
+        path: "about",
         element: <About />,
-        handle: { showInNavigation: true, label: 'About' }
+        handle: { showInNavigation: true, label: "About" }
       },
       {
         path: '*',
         element: <NotFound />
       },
+      {
+        path: "contact",
+        element: <h1>Hello World from Contact Page</h1>,
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "new",
+        element: <New />,
+        handle: { showInNavigation: true, label: "New Page" }
+      },
       {
         path: "chart",
         element: <ChartPage />,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.25.2",
+  "version": "1.27.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-chart-experimental",
-  "version": "1.25.2",
+  "version": "1.27.0",
   "description": "Chart feature with analytics chart components, agent skills, and rules (Recharts)",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,9 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "rules",
+    "skills"
   ],
   "publishConfig": {
     "access": "public"
@@ -28,7 +30,7 @@
     "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.25.2",
+    "@salesforce/webapp-experimental": "^1.27.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react-dom": "^19.2.1",
@@ -36,5 +38,5 @@
     "recharts": "^2.15.0",
     "vite": "^7.3.1"
   },
-  "gitHead": "6e4299053c2bdad6b1eb6d81c983368bd539e711"
+  "gitHead": "b162807f5062f6aee52605127b787de508035fc9"
 }

package/rules/analytics-charts-rule.md

@@ -0,0 +1,27 @@
+---
+paths:
+  - "**/*.tsx"
+  - "**/components/**/*.ts"
+---
+
+# Analytics charts (standards)
+
+When adding or editing chart UI in this project, follow these conventions.
+
+## Components and library
+
+- Use the shared **AnalyticsChart** component (and **ChartContainer** when a framed block is needed). Do not use raw Recharts components for standard line or bar charts.
+- The project must have **recharts** installed (`npm install recharts`).
+
+## Data shape
+
+- **Time-series** (line): data must be an array of `{ x: string, y: number }`. Map raw fields (e.g. `date`, `value`) to these keys before passing to the chart.
+- **Categorical** (bar): data must be an array of `{ name: string, value: number }`. Map raw fields (e.g. `category`, `total`) accordingly.
+
+## Theming
+
+- Use only the **theme** prop on AnalyticsChart: `red` (decline/loss), `green` (growth/gain), `neutral` (default or mixed). Do not introduce ad-hoc color schemes for these semantics.
+
+## Placement
+
+- Render charts inside the existing application frame (e.g. main content or a route). Do not replace the full app shell with a single chart.

package/skills/analytics-charts/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: analytics-charts
+description: Add or change charts from raw data. Use when the user asks for a chart, graph, or analytics visualization from JSON/data.
+---
+
+# Analytics charts (workflow)
+
+When the user wants a chart or visualization from data, follow this workflow. Charts use **Recharts** via the **AnalyticsChart** component.
+
+## Dependencies
+
+Ensure the following package is installed in the project:
+
+```bash
+npm install recharts
+```
+
+## 1. Interpret data type
+
+- **Time-series**: data over time or ordered (dates, timestamps). Use a line chart. Raw shape often has date-like keys and a numeric value.
+- **Categorical**: data by category (labels, segments). Use a bar chart. Raw shape often has a category name and a numeric value.
+
+If the user says "over time", "trend", or uses date-like keys → time-series. If they say "by category", "by X", or use label-like keys → categorical.
+
+## 2. Map data to chart shape
+
+- **Time-series**: produce `[{ x: string, y: number }, ...]` (e.g. map `date`→`x`, `value`→`y`).
+- **Categorical**: produce `[{ name: string, value: number }, ...]` (e.g. map `category`→`name`, `total`→`value`).
+
+See [schema-mapping.md](docs/schema-mapping.md) for examples.
+
+## 3. Choose theme
+
+- **red**: declining, loss, negative trend.
+- **green**: growth, gain, positive trend.
+- **neutral**: default or mixed.
+
+## 4. Generate and place the chart
+
+- Use **AnalyticsChart** with `chartType` (`"time-series"` or `"categorical"`), `data` (mapped array), `theme`, and optional `title`. Wrap in **ChartContainer** if the app uses it for chart blocks.
+- Insert the chart inside the existing app (e.g. main content or a route), not as the entire page.

package/skills/analytics-charts/docs/schema-mapping.md

@@ -0,0 +1,4 @@
+# Schema mapping (Recharts)
+
+- **Time-series**: `{ x: string, y: number }` — e.g. map `date`→`x`, `value`→`y`.
+- **Categorical**: `{ name: string, value: number }` — e.g. map `category`→`name`, `total`→`value`.