@salesforce/webapp-template-feature-react-file-upload-experimental 1.107.2 → 1.107.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.a4drules/skills/creating-webapp/SKILL.md +20 -0
- package/dist/.a4drules/skills/deploying-to-salesforce/SKILL.md +229 -0
- package/dist/.a4drules/skills/exploring-graphql-schema/SKILL.md +7 -18
- package/dist/.a4drules/skills/using-graphql/SKILL.md +2 -1
- package/dist/.a4drules/webapp-code-quality.md +5 -2
- package/dist/.a4drules/webapp-data-access.md +25 -0
- package/dist/.a4drules/webapp-deployment.md +32 -0
- package/dist/.a4drules/webapp-react-typescript.md +4 -12
- package/dist/.a4drules/webapp-react.md +7 -13
- package/dist/AGENT.md +3 -0
- package/dist/CHANGELOG.md +11 -0
- package/dist/eslint.config.js +7 -0
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/eslint.config.js +2 -0
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/package.json +3 -9
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/app.tsx +4 -1
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/alerts/status-alert.tsx +1 -1
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/tsconfig.json +7 -1
- package/dist/package-lock.json +9995 -0
- package/dist/package.json +7 -7
- package/package.json +2 -2
- package/dist/.a4drules/skills/generating-micro-frontend-lwc/SKILL.md +0 -137
- package/dist/force-app/main/default/webapplications/feature-react-file-upload/tsconfig.tsbuildinfo +0 -1
|
@@ -5,10 +5,30 @@ paths:
|
|
|
5
5
|
- "**/webapplications/**/*"
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
# First Steps (MUST FOLLOW)
|
|
9
|
+
|
|
10
|
+
**Always run `npm install` before doing anything else** when working in a web app directory (e.g. `force-app/main/default/webapplications/<appName>/` or a dist app path). Dependencies must be installed before running `npm run dev`, `npm run build`, `npm run lint`, or any other script. If `node_modules` is missing or stale, commands will fail.
|
|
11
|
+
|
|
8
12
|
# Skills-First (MUST FOLLOW)
|
|
9
13
|
|
|
10
14
|
**Before writing any code or running any command**, search for relevant skills (`SKILL.md` files) that cover your task. Read the full skill and follow its instructions. Skills live in `.a4drules/skills/` and `feature/*/skills/`. See **webapp-skills-first.md** for the full protocol and a task-to-skill lookup table.
|
|
11
15
|
|
|
16
|
+
# Deployment Order (MUST FOLLOW)
|
|
17
|
+
|
|
18
|
+
**Metadata deployments must complete before fetching GraphQL schema or running codegen.** The schema reflects the current org state; custom objects and fields appear only after metadata is deployed. Running schema fetch or codegen too early produces incomplete or incorrect types.
|
|
19
|
+
|
|
20
|
+
**Invoke the `deploying-to-salesforce` skill** (`.a4drules/skills/deploying-to-salesforce/`) whenever the task involves:
|
|
21
|
+
- Deploying metadata (objects, permission sets, layouts)
|
|
22
|
+
- Fetching GraphQL schema (`npm run graphql:schema`)
|
|
23
|
+
- Running GraphQL codegen (`npm run graphql:codegen`)
|
|
24
|
+
- Generating deploy/setup commands or syncing with the org
|
|
25
|
+
|
|
26
|
+
The skill enforces the correct sequence: **deploy metadata → assign permset → schema fetch → codegen**.
|
|
27
|
+
|
|
28
|
+
**Critical rules:**
|
|
29
|
+
- Do **not** run `npm run graphql:schema` before metadata (objects, permission sets) is deployed — the schema will not include custom objects/fields.
|
|
30
|
+
- Do **not** skip schema refetch after any metadata deployment — re-run `npm run graphql:schema` and `npm run graphql:codegen` from the webapp dir.
|
|
31
|
+
|
|
12
32
|
# Web App Generation
|
|
13
33
|
|
|
14
34
|
## Before `sf webapp generate`
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: deploying-to-salesforce
|
|
3
|
+
description: Enforces the correct order for deploying metadata, assigning permission sets, and fetching GraphQL schema. Use for ANY deployment to a Salesforce org — webapps, LWC, Aura, Apex, metadata, schema fetch, or org sync. Codifies setup-cli.mjs.
|
|
4
|
+
paths:
|
|
5
|
+
- "**/*"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Deploying to Salesforce
|
|
9
|
+
|
|
10
|
+
Guidance for AI agents deploying metadata to a Salesforce org or syncing with the org. **The order of operations is critical.** This skill codifies the exact sequence from `scripts/setup-cli.mjs` and documents **every Salesforce interaction**.
|
|
11
|
+
|
|
12
|
+
## When to Use
|
|
13
|
+
|
|
14
|
+
Invoke this skill whenever the task involves:
|
|
15
|
+
|
|
16
|
+
- Deploying metadata (objects, permission sets, layouts, Apex, web applications)
|
|
17
|
+
- Generating deploy commands or setup instructions
|
|
18
|
+
- Fetching the GraphQL schema (`npm run graphql:schema`)
|
|
19
|
+
- Running GraphQL codegen (`npm run graphql:codegen`)
|
|
20
|
+
- Full org setup (login, deploy, permset, data, schema, build)
|
|
21
|
+
- Any manual step that touches the Salesforce org
|
|
22
|
+
|
|
23
|
+
## Canonical Sequence (from setup-cli.mjs)
|
|
24
|
+
|
|
25
|
+
Execute steps in this **exact order**. Steps marked **(SF)** perform a Salesforce API or CLI interaction.
|
|
26
|
+
|
|
27
|
+
### Step 1: Login — org authentication
|
|
28
|
+
|
|
29
|
+
| Action | Salesforce interaction? | Command |
|
|
30
|
+
|--------|-------------------------|---------|
|
|
31
|
+
| Check if org is connected | **(SF)** | `sf org display --target-org <alias> --json` |
|
|
32
|
+
| If not connected: authenticate | **(SF)** | `sf org login web --alias <alias>` |
|
|
33
|
+
|
|
34
|
+
- **Run when:** Org is not connected. **Omit when:** Org is already authenticated (check via `sf org display`).
|
|
35
|
+
- All subsequent steps require an authenticated org.
|
|
36
|
+
|
|
37
|
+
### Step 2: Webapp build — pre-deploy (required for entity deployment)
|
|
38
|
+
|
|
39
|
+
| Action | Salesforce interaction? | Command |
|
|
40
|
+
|--------|-------------------------|---------|
|
|
41
|
+
| Install dependencies | No | `npm install` (in each webapp dir) |
|
|
42
|
+
| Build web app | No | `npm run build` (in each webapp dir) |
|
|
43
|
+
|
|
44
|
+
- Produces `dist/` so `sf project deploy start` can deploy web application entities. Run **before** deploy when deploying web apps.
|
|
45
|
+
- **Run when:** Deploying web apps AND (`dist/` does not exist OR webapp source has changed since last build). **Omit when:** Not deploying, or `dist/` is current and no source changes.
|
|
46
|
+
|
|
47
|
+
### Step 3: Deploy metadata
|
|
48
|
+
|
|
49
|
+
| Action | Salesforce interaction? | Command |
|
|
50
|
+
|--------|-------------------------|---------|
|
|
51
|
+
| Deploy metadata | **(SF)** | See below |
|
|
52
|
+
|
|
53
|
+
**Check for a manifest (package.xml) first.** Only use it if present:
|
|
54
|
+
|
|
55
|
+
- **If `manifest/package.xml` (or `package.xml`) exists:** Deploy using the manifest:
|
|
56
|
+
```bash
|
|
57
|
+
sf project deploy start --manifest manifest/package.xml --target-org <alias>
|
|
58
|
+
```
|
|
59
|
+
- **If no manifest exists:** Deploy all metadata from the project (packageDirectories in sfdx-project.json):
|
|
60
|
+
```bash
|
|
61
|
+
sf project deploy start --target-org <alias>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Do not assume a manifest exists. Check the project root and common locations (e.g., `manifest/`, `config/`) before choosing the deploy command.
|
|
65
|
+
|
|
66
|
+
- Deploys objects, layouts, permission sets, Apex classes, web applications, and all other metadata.
|
|
67
|
+
- **Must complete successfully before schema fetch** — the schema reflects org state; custom objects/fields appear only after deployment.
|
|
68
|
+
- **Run when:** Metadata has changed since last deploy, or never deployed. **Omit when:** No metadata changes and deploy has already run successfully.
|
|
69
|
+
|
|
70
|
+
### Step 4: Post-deployment configuration — assign permissions and configure
|
|
71
|
+
|
|
72
|
+
| Action | Salesforce interaction? | Command |
|
|
73
|
+
|--------|-------------------------|---------|
|
|
74
|
+
| Assign permission set or group | **(SF)** | `sf org assign permset --name <name> --target-org <alias>` (works for both permsets and permset groups) |
|
|
75
|
+
| Assign profile to user | **(SF)** | `sf data update record` or at user creation |
|
|
76
|
+
| Other post-deploy config | **(SF)** | Varies (e.g., named credentials, connected apps, custom settings) |
|
|
77
|
+
|
|
78
|
+
**Example commands:**
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
# Permission set (assigns to default user of target org)
|
|
82
|
+
sf org assign permset --name Property_Management_Access --target-org myorg
|
|
83
|
+
|
|
84
|
+
# Permission set group (same command; pass the group name)
|
|
85
|
+
sf org assign permset --name My_Permset_Group --target-org myorg
|
|
86
|
+
|
|
87
|
+
# Assign to a specific user
|
|
88
|
+
sf org assign permset --name Property_Management_Access --target-org myorg --on-behalf-of user@example.com
|
|
89
|
+
|
|
90
|
+
# Profile — update existing user's profile (requires ProfileId and User Id)
|
|
91
|
+
sf data update record --sobject User --record-id <userId> --values "ProfileId=<profileId>" --target-org myorg
|
|
92
|
+
|
|
93
|
+
# Profile — get ProfileId first
|
|
94
|
+
sf data query --query "SELECT Id, Name FROM Profile WHERE Name='Standard User'" --target-org myorg
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
- **Deploying does not mean assigning.** Even after permission sets, permission set groups, and profiles are deployed to the org, they must be explicitly assigned or configured for users. Deployment makes them available; assignment/configuration grants access.
|
|
98
|
+
- **Permission sets** — Assign to users so they have access to custom objects and fields. Required for GraphQL introspection to return the correct schema.
|
|
99
|
+
- **Permission set groups** — Assign to users when using grouped permission sets.
|
|
100
|
+
- **Profiles** — Ensure users have the correct profile; profile assignment may be done at user creation or via Setup.
|
|
101
|
+
- **Other post-deploy configuration** — Named credentials, connected apps, custom settings, flow activation, and any metadata that requires manual configuration after deploy.
|
|
102
|
+
- All of the above must exist in the org (deployed in Step 3).
|
|
103
|
+
- **Run when:** Any permission set, permission set group, profile, or other post-deploy config was deployed or changed and not yet assigned/configured. **Omit when:** All required assignments and configuration are already in place.
|
|
104
|
+
|
|
105
|
+
**Proactive behavior:** After a successful deploy, discover permission sets in the project (e.g., `force-app/main/default/permissionsets/*.permissionset-meta.xml`) and assign each one. Extract the API name from the filename (e.g., `Property_Management_Access.permissionset-meta.xml` → `Property_Management_Access`). If the user has not explicitly requested a full setup, you may ask: "Do you want me to assign the permission sets to your org?" — but do not skip this step silently; either run it or ask.
|
|
106
|
+
|
|
107
|
+
### Step 5: Data — prepare and import (optional)
|
|
108
|
+
|
|
109
|
+
| Action | Salesforce interaction? | Command |
|
|
110
|
+
|--------|-------------------------|---------|
|
|
111
|
+
| Prepare unique fields | No | `node scripts/prepare-import-unique-fields.js --data-dir <dataDir>` |
|
|
112
|
+
| Clean existing records | **(SF)** | `sf apex run --target-org <alias> --file <apex>` (per sobject, reverse plan order) |
|
|
113
|
+
| Import records | **(SF)** | `sf apex run --target-org <alias> --file <apex>` (per batch) |
|
|
114
|
+
|
|
115
|
+
- Only runs if `data/data-plan.json` and `data/` exist.
|
|
116
|
+
- Delete runs in reverse plan order (children before parents).
|
|
117
|
+
- Import uses Anonymous Apex with `Database.DMLOptions.duplicateRuleHeader.allowSave = true`.
|
|
118
|
+
- **Run when:** Data plan exists AND (never imported OR data files or plan changed). **Omit when:** No data plan, or data already imported and unchanged.
|
|
119
|
+
|
|
120
|
+
**Proactive behavior:** If `data/data-plan.json` and `data/` exist, you MUST ask the user: "Do you want me to import the sample data now? This will prepare unique fields, optionally clean existing records, and import data. Reply yes to proceed." Do not skip this step silently; either run it (after confirmation) or ask. Never import or clean without explicit user confirmation.
|
|
121
|
+
|
|
122
|
+
### Step 6: GraphQL schema and codegen
|
|
123
|
+
|
|
124
|
+
| Action | Salesforce interaction? | Command |
|
|
125
|
+
|--------|-------------------------|---------|
|
|
126
|
+
| Install webapp deps | No | `npm install` (in webapp dir) |
|
|
127
|
+
| Set default org | **(SF)** | `sf config set target-org <alias> --global` |
|
|
128
|
+
| Fetch schema (introspection) | **(SF)** | `npm run graphql:schema` (from webapp dir) |
|
|
129
|
+
| Generate types | No | `npm run graphql:codegen` (from webapp dir) |
|
|
130
|
+
|
|
131
|
+
- `graphql:schema` performs GraphQL introspection against the org — a **Salesforce API call**.
|
|
132
|
+
- Schema is written to `schema.graphql` at the SFDX project root.
|
|
133
|
+
- Codegen reads the schema file locally; no Salesforce interaction.
|
|
134
|
+
- **Run when:** Schema does not exist, OR metadata was deployed/changed since last schema fetch, OR permissions or post-deploy config was assigned since last schema fetch. **Omit when:** Schema exists and is current relative to org state.
|
|
135
|
+
|
|
136
|
+
### Step 7: Webapp build (if not done in Step 2)
|
|
137
|
+
|
|
138
|
+
| Action | Salesforce interaction? | Command |
|
|
139
|
+
|--------|-------------------------|---------|
|
|
140
|
+
| Build web app | No | `npm run build` (in webapp dir) |
|
|
141
|
+
|
|
142
|
+
- **Run when:** Build is needed (e.g., for dev server or deploy) AND (`dist/` does not exist OR webapp source has changed since last build). **Omit when:** `dist/` is current and no build needed.
|
|
143
|
+
|
|
144
|
+
### Step 8: Dev server (optional)
|
|
145
|
+
|
|
146
|
+
| Action | Salesforce interaction? | Command |
|
|
147
|
+
|--------|-------------------------|---------|
|
|
148
|
+
| Launch dev server | No | `npm run dev` (in webapp dir) |
|
|
149
|
+
|
|
150
|
+
- **Run when:** User requests to launch the dev server. **Omit when:** Not requested.
|
|
151
|
+
|
|
152
|
+
## Summary: All Salesforce Interactions (in order)
|
|
153
|
+
|
|
154
|
+
1. `sf org display` — check org connection
|
|
155
|
+
2. `sf org login web` — authenticate (if needed)
|
|
156
|
+
3. `sf project deploy start` — deploy metadata
|
|
157
|
+
4. `sf org assign permset` (permsets and permset groups) / profile assignment / other post-deploy config — assign permissions and configure
|
|
158
|
+
5. `sf apex run` — delete existing data (if data plan)
|
|
159
|
+
6. `sf apex run` — import data (if data plan)
|
|
160
|
+
7. `sf config set target-org` — set default org for schema
|
|
161
|
+
8. `npm run graphql:schema` — GraphQL introspection (Salesforce API)
|
|
162
|
+
|
|
163
|
+
## Post-Deploy Checklist (MUST NOT SKIP)
|
|
164
|
+
|
|
165
|
+
After **every successful metadata deploy**, the agent MUST address these before considering the task complete:
|
|
166
|
+
|
|
167
|
+
1. **Permission sets** — Discover `force-app/main/default/permissionsets/*.permissionset-meta.xml`, extract API names, and assign each via `sf org assign permset --name <name> --target-org <alias>`. If unsure, ask: "Do you want me to assign the permission sets (e.g., Property_Management_Access, Tenant_Maintenance_Access) to your org?"
|
|
168
|
+
2. **Data import** — If `data/data-plan.json` exists, ask: "Do you want me to import the sample data now? Reply yes to proceed." Do not import without confirmation.
|
|
169
|
+
3. **Schema refetch** — Run `npm run graphql:schema` and `npm run graphql:codegen` from the webapp dir (required after deploy).
|
|
170
|
+
|
|
171
|
+
Do not silently skip permission set assignment or data import. Either run them or ask the user.
|
|
172
|
+
|
|
173
|
+
## Agent Decision Criteria
|
|
174
|
+
|
|
175
|
+
Evaluate each step before running it. Ask:
|
|
176
|
+
|
|
177
|
+
- **Has this step ever run before?** If not, it is likely needed.
|
|
178
|
+
- **Have changes been made that require this step?** (e.g., metadata edits → deploy; deploy → schema refetch)
|
|
179
|
+
- **Is the current state sufficient?** (e.g., org connected, schema exists and is current, permissions and post-deploy config assigned)
|
|
180
|
+
|
|
181
|
+
Do not rely on CLI flags. Decide based on project state and what has changed.
|
|
182
|
+
|
|
183
|
+
## Evaluation: When Each Step Touches Salesforce
|
|
184
|
+
|
|
185
|
+
| Step | Salesforce interaction | Run when |
|
|
186
|
+
|------|------------------------|----------|
|
|
187
|
+
| 1. Login | Yes | Org not connected |
|
|
188
|
+
| 2. Webapp build | No | Deploying web apps AND dist missing or source changed |
|
|
189
|
+
| 3. Deploy | Yes | Metadata changed or never deployed |
|
|
190
|
+
| 4. Post-deploy config | Yes | Permission sets, permset groups, profiles, or other config deployed/changed and not assigned |
|
|
191
|
+
| 5. Data | Yes | Data plan exists AND (never imported OR data changed) |
|
|
192
|
+
| 6. GraphQL | Yes (schema only) | Schema missing or metadata/permissions changed since last fetch |
|
|
193
|
+
| 7. Webapp build | No | Build needed AND dist missing or source changed |
|
|
194
|
+
| 8. Dev | No | User requests dev server |
|
|
195
|
+
|
|
196
|
+
**Critical rule:** Steps 3 (deploy) and 4 (post-deploy config) must complete **before** step 6 (graphql:schema). The schema reflects the org state; running introspection too early yields an incomplete schema.
|
|
197
|
+
|
|
198
|
+
## Schema Refetch Rule (CRITICAL)
|
|
199
|
+
|
|
200
|
+
**After any metadata deployment**, you MUST re-run schema fetch and codegen:
|
|
201
|
+
|
|
202
|
+
- New custom objects
|
|
203
|
+
- New custom fields
|
|
204
|
+
- New or updated permission sets
|
|
205
|
+
- Any change to metadata that affects the GraphQL schema
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
# From webapp dir (force-app/main/default/webapplications/<appName>/)
|
|
209
|
+
npm run graphql:schema
|
|
210
|
+
npm run graphql:codegen
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
Do **not** assume the existing `schema.graphql` is current after metadata changes.
|
|
214
|
+
|
|
215
|
+
## One-Command Setup (Reference)
|
|
216
|
+
|
|
217
|
+
The project includes `scripts/setup-cli.mjs` which runs this sequence in batch. Use it when the user wants a full setup; otherwise, follow this skill and run only the steps that are needed based on current state.
|
|
218
|
+
|
|
219
|
+
## Prohibited Actions
|
|
220
|
+
|
|
221
|
+
- **Do not** run `npm run graphql:schema` before metadata is deployed — the schema will not include custom objects/fields
|
|
222
|
+
- **Do not** skip schema refetch after deploying new metadata — types and queries will be out of sync
|
|
223
|
+
- **Do not** assign permissions or configure before deploying — permission sets, permset groups, and profiles must exist in the org first
|
|
224
|
+
- **Do not** run GraphQL introspection before assigning permissions — the user may lack FLS for custom fields
|
|
225
|
+
|
|
226
|
+
## Related Skills
|
|
227
|
+
|
|
228
|
+
- **exploring-graphql-schema** — Schema exploration (grep-only) after schema exists
|
|
229
|
+
- **using-graphql** — Full GraphQL workflow (explore, query, codegen, lint)
|
|
@@ -11,6 +11,13 @@ paths:
|
|
|
11
11
|
|
|
12
12
|
Guidance for AI agents working with the Salesforce GraphQL API schema. **GREP ONLY** — the schema file is very large (~265,000+ lines). All lookups MUST use grep; do NOT open, read, stream, or parse the file.
|
|
13
13
|
|
|
14
|
+
## Deployment Prerequisites
|
|
15
|
+
|
|
16
|
+
The schema reflects the **current org state**. Custom objects and fields appear only after metadata is deployed.
|
|
17
|
+
|
|
18
|
+
- **Before** running `npm run graphql:schema`: Deploy all metadata (objects, permission sets, layouts) and assign the permission set to the target user. Invoke the `deploying-to-salesforce` skill for the full sequence.
|
|
19
|
+
- **After** any metadata deployment: Re-run `npm run graphql:schema` and `npm run graphql:codegen` so types and queries stay in sync.
|
|
20
|
+
|
|
14
21
|
## Schema File Location
|
|
15
22
|
|
|
16
23
|
**Location:** `schema.graphql` at the **SFDX project root** (NOT inside the webapp dir). All grep commands **must be run from the project root** where `schema.graphql` lives.
|
|
@@ -93,24 +100,6 @@ Search for `input <ObjectName>CreateInput` or `input <ObjectName>UpdateInput`:
|
|
|
93
100
|
grep -nE '^input[[:space:]]+AccountCreateInput\b' ./schema.graphql -A 30
|
|
94
101
|
```
|
|
95
102
|
|
|
96
|
-
## Common Operator Types
|
|
97
|
-
|
|
98
|
-
- **StringOperators**: `eq`, `ne`, `like`, `lt`, `gt`, `lte`, `gte`, `in`, `nin`
|
|
99
|
-
- **OrderByClause**: `order: ResultOrder` (ASC/DESC), `nulls: NullOrder` (FIRST/LAST)
|
|
100
|
-
|
|
101
|
-
## Field Value Wrappers
|
|
102
|
-
|
|
103
|
-
Salesforce GraphQL returns field values wrapped in typed objects:
|
|
104
|
-
|
|
105
|
-
| Wrapper Type | Access Pattern |
|
|
106
|
-
| --------------- | ---------------------------------- |
|
|
107
|
-
| `StringValue` | `FieldName { value }` |
|
|
108
|
-
| `IntValue` | `FieldName { value }` |
|
|
109
|
-
| `BooleanValue` | `FieldName { value }` |
|
|
110
|
-
| `DateTimeValue` | `FieldName { value displayValue }` |
|
|
111
|
-
| `PicklistValue` | `FieldName { value displayValue }` |
|
|
112
|
-
| `CurrencyValue` | `FieldName { value displayValue }` |
|
|
113
|
-
|
|
114
103
|
## Agent Workflow for Building Queries (grep-only)
|
|
115
104
|
|
|
116
105
|
**Pre-requisites (MANDATORY):**
|
|
@@ -59,7 +59,8 @@ The base React app (`base-react-app`) ships with all GraphQL dependencies and to
|
|
|
59
59
|
Before using this skill, ensure:
|
|
60
60
|
|
|
61
61
|
1. The `@salesforce/sdk-data` package is available (provides `createDataSDK`, `gql`, `NodeOfConnection`)
|
|
62
|
-
2.
|
|
62
|
+
2. **Deployment order**: Metadata must be deployed before schema fetch; schema must be refetched after any metadata deployment. Invoke the `deploying-to-salesforce` skill when deploying or syncing with the org.
|
|
63
|
+
3. A `schema.graphql` file exists at the project root. If missing, generate it:
|
|
63
64
|
```bash
|
|
64
65
|
# Run from webapp dir (force-app/main/default/webapplications/<app-name>/)
|
|
65
66
|
npm run graphql:schema
|
|
@@ -15,7 +15,6 @@ Enforces ESLint, TypeScript, and build validation for consistent, maintainable c
|
|
|
15
15
|
```bash
|
|
16
16
|
npm run lint # MUST result in 0 errors
|
|
17
17
|
npm run build # MUST succeed (includes TypeScript check)
|
|
18
|
-
npm run graphql:codegen # MUST succeed (verifies graphql queries)
|
|
19
18
|
```
|
|
20
19
|
|
|
21
20
|
**Must Pass:**
|
|
@@ -25,4 +24,8 @@ npm run graphql:codegen # MUST succeed (verifies graphql queries)
|
|
|
25
24
|
|
|
26
25
|
**Can Be Warnings:**
|
|
27
26
|
- ESLint warnings (fix when convenient)
|
|
28
|
-
- Minor TypeScript warnings
|
|
27
|
+
- Minor TypeScript warnings
|
|
28
|
+
|
|
29
|
+
## When Failures Occur
|
|
30
|
+
|
|
31
|
+
If `npm run lint` or `npm run build` fails, the agent **must** attempt to resolve the issues and retry. Do not leave the session with failing quality gates. Fix the reported errors (TypeScript, ESLint), then re-run the failing command. Repeat until all steps pass.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Salesforce data access for web apps — when and how to use the accessing-data skill
|
|
3
|
+
paths:
|
|
4
|
+
- "**/*"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Web App Data Access
|
|
8
|
+
|
|
9
|
+
For all Salesforce data access from web apps (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`), GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
|
|
10
|
+
|
|
11
|
+
## Sub-skills
|
|
12
|
+
|
|
13
|
+
- **GraphQL** — For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). Covers schema exploration, query patterns, codegen, and type generation.
|
|
14
|
+
- **REST / UI API** — When GraphQL cannot cover the use case, use `sdk.fetch?.()`. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for Chatter, Connect REST, Apex REST, UI API REST, and Einstein LLM.
|
|
15
|
+
|
|
16
|
+
## Clarifying Vague Data Requests
|
|
17
|
+
|
|
18
|
+
When a user asks about data and the request is vague, **clarify before implementing**. Ask which of the following they want:
|
|
19
|
+
|
|
20
|
+
- **Application code** — Add or modify code in a specific web app so the app performs the data interaction at runtime (e.g., GraphQL query in the React app)
|
|
21
|
+
- **Local SF CLI** — Run Salesforce CLI commands locally (e.g., `sf data query`, `sf data import tree`) to interact with the org from the terminal
|
|
22
|
+
- **Local example data** — Update or add local fixture/example data files (e.g., JSON in `data/`) for development or testing
|
|
23
|
+
- **Other** — Data export, report generation, setup script, etc.
|
|
24
|
+
|
|
25
|
+
Do not assume. A request like "fetch accounts" could mean: (1) add a GraphQL query to the app, (2) run `sf data query` in the terminal, or (3) update sample data files. Confirm the intent before proceeding.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Always invoke the deploying-to-salesforce skill for deployment, schema fetch, or org sync
|
|
3
|
+
paths:
|
|
4
|
+
- "**/*"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Web App Deployment
|
|
8
|
+
|
|
9
|
+
**This rule always applies.** Before running any deployment, schema fetch, codegen, or org sync command, you MUST invoke the **deploying-to-salesforce** skill (`.a4drules/skills/deploying-to-salesforce/SKILL.md`).
|
|
10
|
+
|
|
11
|
+
## When to Invoke
|
|
12
|
+
|
|
13
|
+
Invoke the skill whenever the task involves:
|
|
14
|
+
|
|
15
|
+
- Deploying metadata (`sf project deploy start`)
|
|
16
|
+
- Assigning permission sets, permission set groups, or profiles
|
|
17
|
+
- Fetching GraphQL schema (`npm run graphql:schema`)
|
|
18
|
+
- Running GraphQL codegen (`npm run graphql:codegen`)
|
|
19
|
+
- Data import or cleaning existing records
|
|
20
|
+
- Any command that touches the Salesforce org
|
|
21
|
+
|
|
22
|
+
## Required Behavior
|
|
23
|
+
|
|
24
|
+
1. **Read the skill first** — Open and read the full deploying-to-salesforce skill before executing deployment-related steps.
|
|
25
|
+
2. **Follow the canonical sequence** — Execute steps in the exact order defined in the skill.
|
|
26
|
+
3. **Evaluate before each step** — Use the skill's "Run when" / "Omit when" criteria; do not run steps blindly.
|
|
27
|
+
4. **Proactive post-deploy actions** — After a successful deploy, the agent MUST either run or explicitly offer:
|
|
28
|
+
- **Permission set assignment:** Discover permsets in `force-app/main/default/permissionsets/` and assign each to the org (or ask: "Do you want me to assign the permission sets?")
|
|
29
|
+
- **Data import:** If `data/data-plan.json` exists, ask: "Do you want me to import the sample data now?" — never import without explicit user confirmation.
|
|
30
|
+
5. **Ask before data operations** — Never import data or clean existing records without explicit user confirmation.
|
|
31
|
+
|
|
32
|
+
Do not bypass this skill. It enforces the correct deployment order and prevents schema/codegen failures.
|
|
@@ -9,7 +9,7 @@ paths:
|
|
|
9
9
|
### Never Use `any`
|
|
10
10
|
```typescript
|
|
11
11
|
// FORBIDDEN
|
|
12
|
-
const
|
|
12
|
+
const result: any = getSomething();
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## React TypeScript Patterns
|
|
@@ -27,25 +27,17 @@ const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
|
|
|
27
27
|
const [user, setUser] = useState<User | null>(null);
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
### GraphQL via DataSDK
|
|
31
|
-
|
|
32
|
-
See **webapp-react.md** for DataSDK usage patterns. Type your GraphQL responses:
|
|
33
|
-
|
|
34
|
-
```typescript
|
|
35
|
-
const response = await sdk.graphql?.<GetAccountsQuery>(QUERY, variables);
|
|
36
|
-
```
|
|
37
|
-
|
|
38
30
|
### Type Assertions
|
|
39
31
|
```typescript
|
|
40
32
|
// FORBIDDEN: Unsafe assertions
|
|
41
|
-
const user =
|
|
33
|
+
const user = obj as User;
|
|
42
34
|
|
|
43
35
|
// REQUIRED: Type guards
|
|
44
36
|
function isUser(obj: unknown): obj is User {
|
|
45
37
|
return typeof obj === 'object' && obj !== null && typeof (obj as User).id === 'string';
|
|
46
38
|
}
|
|
47
39
|
|
|
48
|
-
if (isUser(
|
|
49
|
-
console.log(
|
|
40
|
+
if (isUser(obj)) {
|
|
41
|
+
console.log(obj.name); // Now safely typed
|
|
50
42
|
}
|
|
51
43
|
```
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
---
|
|
2
|
-
description: React-specific patterns
|
|
2
|
+
description: React-specific patterns for SFDX web apps
|
|
3
3
|
paths:
|
|
4
4
|
- "**/webapplications/**/*"
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
# React Web App (SFDX)
|
|
8
8
|
|
|
9
|
-
For layout, navigation, and generation rules, see **webapp.md
|
|
9
|
+
For layout, navigation, and generation rules, see **creating-webapp** (`.a4drules/skills/creating-webapp/SKILL.md`).
|
|
10
|
+
|
|
11
|
+
## Deployment
|
|
12
|
+
|
|
13
|
+
For deployment, schema fetch, codegen, or org sync, invoke the **`deploying-to-salesforce`** skill (`.a4drules/skills/deploying-to-salesforce/`).
|
|
10
14
|
|
|
11
15
|
## Routing (React Router)
|
|
12
16
|
|
|
@@ -21,14 +25,4 @@ Use a **single** router package for the app. When using `createBrowserRouter` an
|
|
|
21
25
|
|
|
22
26
|
React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only)
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
For all Salesforce data access (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage, GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
|
|
27
|
-
|
|
28
|
-
### GraphQL (Preferred)
|
|
29
|
-
|
|
30
|
-
For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). It covers schema exploration, query patterns, codegen, type generation, and guardrails.
|
|
31
|
-
|
|
32
|
-
### UI API (Fallback)
|
|
33
|
-
|
|
34
|
-
When GraphQL cannot cover the use case, use `sdk.fetch?.()` for UI API endpoints. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for full REST API documentation.
|
|
28
|
+
For Salesforce data access, see **webapp-data-access** (`.a4drules/webapp-data-access.md`).
|
package/dist/AGENT.md
CHANGED
|
@@ -61,11 +61,14 @@ This project includes **.a4drules/** at the project root. Follow them when gener
|
|
|
61
61
|
- **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.
|
|
62
62
|
- **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`.
|
|
63
63
|
- **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`.
|
|
64
|
+
- **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.
|
|
64
65
|
|
|
65
66
|
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.
|
|
66
67
|
|
|
67
68
|
## Deploying
|
|
68
69
|
|
|
70
|
+
**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.
|
|
71
|
+
|
|
69
72
|
From **this project root** (resolve the actual SFDX source path from `sfdx-project.json`):
|
|
70
73
|
|
|
71
74
|
```bash
|
package/dist/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.107.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.107.2...v1.107.3) (2026-03-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **lint-and-metadata:** Linting in template apps, metadata and query fixes, and skills for deployment orders ([#304](https://github.com/salesforce-experience-platform-emu/webapps/issues/304)) ([980b931](https://github.com/salesforce-experience-platform-emu/webapps/commit/980b9318cba0f7d5d93620e08bf4138df51b3700))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.107.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.107.1...v1.107.2) (2026-03-18)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
|
|
@@ -15,14 +15,8 @@
|
|
|
15
15
|
"graphql:schema": "node scripts/get-graphql-schema.mjs"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@salesforce/
|
|
19
|
-
"@salesforce/
|
|
20
|
-
"@salesforce/sdk-chat": "file:../../../../../../../../../sdk/sdk-chat",
|
|
21
|
-
"@salesforce/sdk-core": "file:../../../../../../../../../sdk/sdk-core",
|
|
22
|
-
"@salesforce/sdk-data": "file:../../../../../../../../../sdk/sdk-data",
|
|
23
|
-
"@salesforce/sdk-lightning": "file:../../../../../../../../../sdk/sdk-lightning",
|
|
24
|
-
"@salesforce/sdk-view": "file:../../../../../../../../../sdk/sdk-view",
|
|
25
|
-
"@salesforce/webapp-experimental": "file:../../../../../../../../../webapps",
|
|
18
|
+
"@salesforce/sdk-data": "^1.107.3",
|
|
19
|
+
"@salesforce/webapp-experimental": "^1.107.3",
|
|
26
20
|
"@tailwindcss/vite": "^4.1.17",
|
|
27
21
|
"@tanstack/react-form": "^1.28.5",
|
|
28
22
|
"class-variance-authority": "^0.7.1",
|
|
@@ -48,7 +42,7 @@
|
|
|
48
42
|
"@graphql-eslint/eslint-plugin": "^4.1.0",
|
|
49
43
|
"@graphql-tools/utils": "^11.0.0",
|
|
50
44
|
"@playwright/test": "^1.49.0",
|
|
51
|
-
"@salesforce/vite-plugin-webapp-experimental": "
|
|
45
|
+
"@salesforce/vite-plugin-webapp-experimental": "^1.107.3",
|
|
52
46
|
"@testing-library/jest-dom": "^6.6.3",
|
|
53
47
|
"@testing-library/react": "^16.1.0",
|
|
54
48
|
"@testing-library/user-event": "^14.5.2",
|
|
@@ -4,7 +4,10 @@ import { StrictMode } from 'react';
|
|
|
4
4
|
import { createRoot } from 'react-dom/client';
|
|
5
5
|
import './styles/global.css';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
// Normalize basename: strip trailing slash so it matches URLs like /lwr/application/ai/c-app
|
|
8
|
+
const rawBasePath = (globalThis as any).SFDC_ENV?.basePath;
|
|
9
|
+
const basename =
|
|
10
|
+
typeof rawBasePath === 'string' ? rawBasePath.replace(/\/+$/, '') : undefined;
|
|
8
11
|
const router = createBrowserRouter(routes, { basename });
|
|
9
12
|
|
|
10
13
|
createRoot(document.getElementById('root')!).render(
|
|
@@ -26,10 +26,10 @@ interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
|
|
|
26
26
|
* Returns null if no children are provided.
|
|
27
27
|
*/
|
|
28
28
|
export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
|
|
29
|
+
const descriptionId = useId();
|
|
29
30
|
if (!children) return null;
|
|
30
31
|
|
|
31
32
|
const isError = variant === 'error';
|
|
32
|
-
const descriptionId = useId();
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
35
|
<Alert
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
"@assets/*": ["./src/assets/*"]
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
|
-
"include": [
|
|
34
|
+
"include": [
|
|
35
|
+
"src",
|
|
36
|
+
"e2e",
|
|
37
|
+
"vite-env.d.ts",
|
|
38
|
+
"vitest-env.d.ts",
|
|
39
|
+
"vitest.setup.ts"
|
|
40
|
+
],
|
|
35
41
|
"references": [{ "path": "./tsconfig.node.json" }]
|
|
36
42
|
}
|