@salesforce/webapp-template-feature-react-global-search-experimental 1.112.5 → 1.112.7

package/dist/.a4drules/webapp-data.md

@@ -74,10 +74,10 @@ Map user intent to PascalCase names ("accounts" → `Account`), then **run the s
 
 ```bash
 # From project root — look up all relevant schema info for one or more entities
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account
+bash scripts/graphql-search.sh Account
 
 # Multiple entities at once
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account Contact Opportunity
+bash scripts/graphql-search.sh Account Contact Opportunity
 ```
 
 The script outputs five sections per entity:
@@ -213,7 +213,7 @@ const fields = response?.data?.uiapi?.objectInfos?.[0]?.fields ?? [];
 
 ```bash
 # From project root — re-check the entity that caused the error
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
+bash scripts/graphql-search.sh <EntityName>
 ```
 
 Then fix the query using the exact names from the script output.
@@ -310,7 +310,7 @@ const response = await sdk.graphql?.(GET_CURRENT_USER);
 |---------|----------|-----|
 | `npm run graphql:schema` | webapp dir | Script in webapp's package.json |
 | `npx eslint <file>` | webapp dir | Reads eslint.config.js |
-| `bash .a4drules/skills/using-salesforce-data/graphql-search.sh <Entity>` | project root | Schema lookup |
+| `bash scripts/graphql-search.sh <Entity>` | project root | Schema lookup |
 | `sf api request rest` | project root | Needs sfdx-project.json |
 
 ---
@@ -322,7 +322,7 @@ const response = await sdk.graphql?.(GET_CURRENT_USER);
 Run the search script to get all relevant schema info in one step:
 
 ```bash
-bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
+bash scripts/graphql-search.sh <EntityName>
 ```
 
 | Script Output Section | Used For |

package/dist/.a4drules/webapp-ui.md

@@ -8,9 +8,9 @@ When any task involves creating a new UI, frontend, page, dashboard, form, or us
 2. The app must live under `<sfdx-source>/webapplications/<AppName>/` as a WebApplication bundle.
 3. Do not build new UIs as LWC components, Aura components, or Visualforce pages.
 
-Invoke the `creating-webapp` skill (`.a4drules/skills/creating-webapp/`) for the full setup workflow.
+For setup from the project root, use `node scripts/setup-cli.mjs --help` and the options documented there.
 
 ## Data Access (MUST FOLLOW)
 
 - **Never hardcode data in the app.** All data displayed in the UI must come from live Salesforce data fetching — no static arrays, mock objects, or placeholder values in production code.
-- **Always invoke the `using-salesforce-data` skill** (`.a4drules/skills/using-salesforce-data/`) before writing any data access code. All implementation must be derived from that skill.
+- **Follow `.a4drules/webapp-data.md`** before writing any data access code. All implementation must match those rules (Data SDK, supported APIs, GraphQL workflow).

package/dist/AGENT.md

@@ -54,22 +54,18 @@ cd <sfdx-source>/webapplications/<appName>
 
 **Before finishing changes:** run `npm run build` and `npm run lint` from the web app directory; both must succeed.
 
-## Agent skills (.a4drules/skills/)
+## Agent rules (.a4drules/)
 
-This project includes **.a4drules/skills/** at the project root. Follow them when generating or editing code.
+Markdown rules at the project root under **.a4drules/** define platform constraints:
 
-- **Creating Webapp** (`.a4drules/skills/creating-webapp/`): First steps, skills-first protocol, React/TypeScript constraints, deployment order, navigation, aesthetics, and code quality.
-- **Building React Components** (`.a4drules/skills/building-react-components/`): Component/page/header-footer workflow, TypeScript standards, and mandatory lint+build verification.
-- **Accessing Data** (`.a4drules/skills/accessing-data/`): Use for all Salesforce data fetches. Enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`); GraphQL preferred, fetch when GraphQL is not sufficient.
-- **Fetching REST API** (`.a4drules/skills/fetching-rest-api/`): Use when implementing Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM calls via `sdk.fetch`.
-- **Using GraphQL** (`.a4drules/skills/using-graphql/`): Use when implementing Salesforce GraphQL queries or mutations. Sub-skills: `exploring-graphql-schema`, `generating-graphql-read-query`, `generating-graphql-mutation-query`.
-- **Deploying to Salesforce** (`.a4drules/skills/deploying-to-salesforce/`): Use when deploying metadata, fetching GraphQL schema, or generating deploy/setup commands. Enforces deploy → permset → schema → codegen order; schema refetch after metadata deployment.
+- **`.a4drules/webapp-ui.md`** — Salesforce Web Application UI (scaffold with `sf webapp generate`, no LWC/Aura for new UI).
+- **`.a4drules/webapp-data.md`** — Salesforce data access (Data SDK only, supported APIs, GraphQL workflow, `scripts/graphql-search.sh` for schema lookup).
 
 When rules refer to "web app directory" or `<sfdx-source>/webapplications/<appName>/`, resolve `<sfdx-source>` from `sfdx-project.json` and use the **actual app folder name** for this project.
 
 ## Deploying
 
-**Deployment order:** Metadata (objects, permission sets) must be deployed before GraphQL schema fetch. After any metadata deployment, re-run `npm run graphql:schema` and `npm run graphql:codegen` from the webapp dir. **One-command setup:** `node scripts/setup-cli.mjs --target-org <alias>` runs deploy → permset → schema → codegen in the correct order. Invoke the `deploying-to-salesforce` skill for full guidance.
+**Deployment order:** Metadata (objects, permission sets) must be deployed before GraphQL schema fetch. After any metadata deployment, re-run `npm run graphql:schema` and `npm run graphql:codegen` from the webapp dir. **One-command setup:** `node scripts/setup-cli.mjs --target-org <alias>` runs deploy → permset → schema → codegen in the correct order.
 
 From **this project root** (resolve the actual SFDX source path from `sfdx-project.json`):
 
@@ -88,4 +84,4 @@ sf project deploy start --source-dir <packageDir> --target-org <alias>
 
 - **UI**: shadcn/ui + Tailwind. Import from `@/components/ui/...`.
 - **Entry**: Keep `App.tsx` and routes in `src/`; add features as new routes or sections, don't replace the app shell but you may modify it to match the requested design.
-- **Data (Salesforce)**: Invoke the `accessing-data` skill for all Salesforce data fetches. The skill enforces use of the Data SDK (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`) — never use `fetch` or `axios` directly. GraphQL is preferred; use `sdk.fetch` when GraphQL is not sufficient (e.g., Chatter, Connect REST). For GraphQL implementation, invoke the `using-graphql` skill.
+- **Data (Salesforce)**: Follow `.a4drules/webapp-data.md` for all Salesforce data access. Use the Data SDK (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`) — never use `fetch` or `axios` directly. GraphQL is preferred; use `sdk.fetch` when GraphQL is not sufficient.

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.112.7](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.6...v1.112.7) (2026-03-23)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.112.6](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.5...v1.112.6) (2026-03-23)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.112.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.112.4...v1.112.5) (2026-03-21)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/feature-react-global-search/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.112.5",
-    "@salesforce/webapp-experimental": "^1.112.5",
+    "@salesforce/sdk-data": "^1.112.7",
+    "@salesforce/webapp-experimental": "^1.112.7",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -43,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.112.5",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.112.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/feature-react-global-search/src/api/graphqlClient.ts

@@ -0,0 +1,25 @@
+/**
+ * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ */
+import { createDataSDK } from '@salesforce/sdk-data';
+
+export async function executeGraphQL<TData, TVariables>(
+  query: string,
+  variables?: TVariables
+): Promise<TData> {
+  const data = await createDataSDK();
+  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
+  const response = await data.graphql?.<TData, TVariables>(query, variables);
+
+  if (!response) {
+    throw new Error('GraphQL response is undefined');
+  }
+
+  if (response?.errors?.length) {
+    const msg = response.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
+  }
+
+  return response.data;
+}

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.112.5",
+  "version": "1.112.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.112.5",
+      "version": "1.112.7",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.112.5",
+  "version": "1.112.7",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/dist/{.a4drules/skills/using-salesforce-data → scripts}/graphql-search.sh

@@ -2,12 +2,12 @@
 # graphql-search.sh — Look up one or more Salesforce entities in schema.graphql.
 #
 # Run from the SFDX project root (where schema.graphql lives):
-#   bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account
-#   bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account Contact Opportunity
+#   bash scripts/graphql-search.sh Account
+#   bash scripts/graphql-search.sh Account Contact Opportunity
 #
 # Pass a custom schema path with -s / --schema:
-#   bash .a4drules/skills/using-salesforce-data/graphql-search.sh -s /path/to/schema.graphql Account
-#   bash .a4drules/skills/using-salesforce-data/graphql-search.sh --schema ./other/schema.graphql Account Contact
+#   bash scripts/graphql-search.sh -s /path/to/schema.graphql Account
+#   bash scripts/graphql-search.sh --schema ./other/schema.graphql Account Contact
 #
 # Output sections per entity:
 #   1. Type definition   — all fields and relationships

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-global-search-experimental",
-  "version": "1.112.5",
+  "version": "1.112.7",
   "description": "Global search feature for Salesforce objects with filtering and pagination",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/.a4drules/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/dist/.a4drules/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 |