@salesforce/webapp-template-app-react-sample-b2e-experimental 1.61.2 → 1.61.4

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.
Files changed (35) hide show
  1. package/dist/.a4drules/{graphql.md → features/feature-graphql-graphql-data-access-rule.md} +127 -117
  2. package/dist/.a4drules/features/feature-react-agentforce-conversation-client-embedded-agent-rule.md +32 -0
  3. package/dist/.a4drules/features/feature-react-chart-analytics-charts-rule.md +27 -0
  4. package/dist/.a4drules/skills/feature-graphql-graphql-data-access/SKILL.md +155 -0
  5. package/dist/.a4drules/{graphql/tools/knowledge/lds-explore-graphql-schema.md → skills/feature-graphql-graphql-data-access/docs/explore-schema.md} +58 -29
  6. package/dist/.a4drules/{graphql/tools/knowledge/lds-generate-graphql-mutationquery.md → skills/feature-graphql-graphql-data-access/docs/generate-mutation-query.md} +52 -42
  7. package/dist/.a4drules/{graphql/tools/knowledge/lds-generate-graphql-readquery.md → skills/feature-graphql-graphql-data-access/docs/generate-read-query.md} +32 -22
  8. package/dist/.a4drules/{graphql/tools/schemas/shared.graphqls → skills/feature-graphql-graphql-data-access/docs/shared-schema.graphqls} +1 -1
  9. package/dist/.a4drules/skills/feature-micro-frontend-micro-frontend/SKILL.md +137 -0
  10. package/dist/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/SKILL.md +108 -0
  11. package/dist/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/docs/embed-examples.md +182 -0
  12. package/dist/.a4drules/skills/feature-react-chart-analytics-charts/SKILL.md +41 -0
  13. package/dist/.a4drules/skills/feature-react-chart-analytics-charts/docs/schema-mapping.md +4 -0
  14. package/dist/.a4drules/webapp-code-quality.md +136 -0
  15. package/dist/.a4drules/{images.md → webapp-images.md} +6 -4
  16. package/dist/.a4drules/webapp-no-node-e.md +3 -2
  17. package/dist/.a4drules/webapp-react.md +149 -0
  18. package/dist/.a4drules/{typescript.md → webapp-typescript.md} +9 -17
  19. package/dist/.a4drules/webapp.md +62 -45
  20. package/dist/CHANGELOG.md +16 -0
  21. package/dist/force-app/main/default/webapplications/appreactsampleb2e/vite.config.ts +2 -2
  22. package/dist/package.json +1 -1
  23. package/package.json +2 -2
  24. package/dist/.a4drules/README.md +0 -35
  25. package/dist/.a4drules/a4d-webapp-generate.md +0 -27
  26. package/dist/.a4drules/build-validation.md +0 -78
  27. package/dist/.a4drules/code-quality.md +0 -136
  28. package/dist/.a4drules/graphql/tools/knowledge/lds-guide-graphql.md +0 -205
  29. package/dist/.a4drules/react.md +0 -388
  30. package/dist/.a4drules/react_image_processing.md +0 -45
  31. package/dist/.a4drules/ui-layout.md +0 -23
  32. package/dist/.a4drules/webapp-nav-and-placeholders.md +0 -33
  33. package/dist/.a4drules/webapp-ui-first.md +0 -32
  34. package/dist/force-app/main/default/webapplications/appreactsampleb2e/build/vite.config.d.ts +0 -2
  35. package/dist/force-app/main/default/webapplications/appreactsampleb2e/build/vite.config.js +0 -93
@@ -1,78 +0,0 @@
1
- # AI Rule: Build Validation
2
-
3
- Build validation for successful deployments with minimal friction.
4
-
5
- ## Targets
6
- - `force-app/main/default/webapplications/*/**/*`
7
- - `**/*.{js,ts,jsx,tsx}`
8
-
9
- ## MANDATORY: Build Success
10
-
11
- **Before completing any coding session** (from the web app directory `force-app/main/default/webapplications/<appName>/`):
12
- ```bash
13
- npm run build # MUST succeed with no errors
14
- ```
15
-
16
- ## Quick Quality Checks
17
- Run from the web app directory (`force-app/main/default/webapplications/<appName>/`):
18
- ```bash
19
- npm run lint # ESLint; fix issues before completing
20
- npm run build # Runs tsc -b && vite build; catches TypeScript and build issues
21
- ```
22
-
23
- ## Requirements
24
-
25
- **Must Pass:**
26
- - `npm run build` completes successfully
27
- - No TypeScript compilation errors
28
- - No critical ESLint errors
29
-
30
- **Can Be Warnings:**
31
- - ESLint warnings
32
- - Minor TypeScript warnings
33
-
34
- ## Fix Commands (when available in the web app's package.json)
35
- ```bash
36
- npm run lint # Run ESLint (always available)
37
- # If your project adds Prettier/format scripts, use those before completing
38
- ```
39
-
40
- ## Workflow
41
-
42
- **During Development:**
43
- 1. Write code with AI assistance
44
- 2. Save frequently (auto-format on save)
45
- 3. Check periodically: `npm run lint` (optional)
46
-
47
- **Before Completion:**
48
- 1. Run `npm run build` from the web app directory
49
- 2. If it fails: fix TypeScript/ESLint errors (run `npm run lint`), then retry build
50
-
51
- ## Error Priority
52
-
53
- **Fix Immediately:**
54
- - TypeScript compilation errors
55
- - Import/export errors
56
- - Syntax errors
57
-
58
- **Fix When Convenient:**
59
- - ESLint warnings
60
- - Unused variables
61
-
62
- ## Hard Requirements
63
- - Build must complete without errors
64
- - No broken imports
65
- - Basic TypeScript type safety
66
-
67
- ## Key Commands (web app directory)
68
- ```bash
69
- npm run dev # Start development server (vite)
70
- npm run build # TypeScript + Vite build; check deployment readiness
71
- npm run lint # Run ESLint
72
- ```
73
-
74
- ## Troubleshooting Import Errors
75
- ```bash
76
- npm install # Check missing dependencies
77
- # Verify file exists, case sensitivity, export/import match
78
- ```
@@ -1,136 +0,0 @@
1
- # AI Rule: Code Quality Standards
2
-
3
- Enforces ESLint, Prettier, and coding best practices for consistent, maintainable code.
4
-
5
- **Execution rule:** Do not use `node -e` for any file or config edits. Use `replace_in_file` or `write_to_file` only (see **webapp-no-node-e.md**).
6
-
7
- ## Targets
8
- - `force-app/main/default/webapplications/*/**/*`
9
- - `**/*.{js,ts,jsx,tsx,json,md}`
10
-
11
- ## MANDATORY Checks
12
-
13
- **Before completing code** (run from the web app directory `force-app/main/default/webapplications/<appName>/`):
14
- ```bash
15
- npm run lint # MUST result in: 0 errors (0 warnings preferred)
16
- npm run build # MUST succeed (includes TypeScript check)
17
- ```
18
-
19
- If your project adds Prettier, use a consistent config (e.g. `.prettierrc` with `semi`, `singleQuote`, `printWidth`, etc.) and run format checks before completing.
20
-
21
- ## Lint / Fix
22
-
23
- ```bash
24
- npm run lint # Run ESLint (always available in the template web app)
25
- # Use your editor's format-on-save or add npm scripts for Prettier if desired
26
- ```
27
-
28
- ## Import Order (MANDATORY)
29
- ```typescript
30
- // 1. React ecosystem
31
- import { useState, useEffect } from 'react';
32
-
33
- // 2. External libraries (alphabetical)
34
- import clsx from 'clsx';
35
-
36
- // 3. UI components (alphabetical)
37
- import { Button } from '@/components/ui/button';
38
- import { Card } from '@/components/ui/card';
39
-
40
- // 4. Internal utilities (alphabetical)
41
- import { useAuth } from '../hooks/useAuth';
42
- import { formatDate } from '../utils/dateUtils';
43
-
44
- // 5. Relative imports
45
- import { ComponentA } from './ComponentA';
46
-
47
- // 6. Type imports (separate, at end)
48
- import type { User, ApiResponse } from '../types';
49
- ```
50
-
51
- ## Naming Conventions
52
- ```typescript
53
- // PascalCase: Components, classes
54
- const UserProfile = () => {};
55
- const ApiClient = class {};
56
-
57
- // camelCase: Variables, functions, properties
58
- const userName = 'john';
59
- const fetchUserData = async () => {};
60
-
61
- // SCREAMING_SNAKE_CASE: Constants
62
- const API_BASE_URL = 'https://api.example.com';
63
-
64
- // kebab-case: Files
65
- // user-profile.tsx, api-client.ts
66
- ```
67
-
68
- ## React Component Structure
69
- ```typescript
70
- interface ComponentProps {
71
- // Props interface first
72
- }
73
-
74
- const Component: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
75
- // 1. Hooks
76
- // 2. Computed values
77
- // 3. Event handlers
78
- // 4. JSX return
79
-
80
- return <div />;
81
- };
82
-
83
- export default Component;
84
- ```
85
-
86
- ## JSX Standards
87
- ```typescript
88
- // Self-closing tags
89
- <Button onClick={handleClick} />
90
-
91
- // Conditional rendering
92
- {isLoading && <Spinner />}
93
- {error ? <ErrorMessage error={error} /> : <Content />}
94
-
95
- // Lists with keys
96
- {items.map(item => <Item key={item.id} data={item} />)}
97
- ```
98
-
99
- ## Error Handling
100
- ```typescript
101
- // Async functions with try-catch
102
- const fetchData = async (id: string): Promise<Data> => {
103
- try {
104
- const response = await api.get(`/data/${id}`);
105
- return response.data;
106
- } catch (error) {
107
- console.error('Failed to fetch data:', error);
108
- throw error;
109
- }
110
- };
111
- ```
112
-
113
- ## Anti-Patterns (FORBIDDEN)
114
- ```typescript
115
- // NEVER disable ESLint without justification
116
- // eslint-disable-next-line
117
-
118
- // NEVER mutate state directly
119
- state.items.push(newItem); // Wrong
120
- setItems(prev => [...prev, newItem]); // Correct
121
-
122
- // NEVER use magic numbers/strings
123
- setTimeout(() => {}, 5000); // Wrong
124
- const DEBOUNCE_DELAY = 5000; // Correct
125
- ```
126
-
127
- ## Quality Workflow
128
-
129
- **Before Committing:**
130
- 1. `npm run lint` - 0 errors (and 0 warnings when possible)
131
- 2. `npm run build` - Build must succeed (TypeScript + Vite)
132
-
133
- ## Zero Tolerance Policy
134
- - ESLint errors: MUST be 0
135
- - ESLint warnings: MUST be 0 (fix when convenient)
136
- - TypeScript errors: MUST be 0 (enforced by `npm run build`)
@@ -1,205 +0,0 @@
1
- # GraphQL Query Generation Guidelines
2
-
3
- You are a GraphQL expert, and your role is to help craft GraphQL queries that match Salesforce schema requirements and specificities.
4
-
5
- This is the main instructions source, and you will leverage the following rules to complete your task:
6
- - The `LDS_Explore_GraphQLSchema` rule provides Salesforce's static GraphQL schema information
7
- - The `LDS_Generate_GraphQLReadQuery` rule is specialized in GraphQL read query generation
8
- - The `LDS_Generate_GraphQLMutationQuery` rule is specialized in GraphQL mutation query generation
9
-
10
-
11
- **CRITICAL ENFORCEMENT RULES:**
12
- - **Workflow Enforcement** - You **MUST** follow the workflow steps below, in order
13
- - **Workflow Steps are Mandatory** - All workflow steps are mandatory, none can be skipped
14
- - **Workflow Steps Chaining** - Steps need to be chained one after the other
15
- - **Hard Stop on Failed Step** - Any failed step blocks the workflow until remediation actions are completed
16
- - **Step Status Reporting** - Each step must report final status in a clear and concise way
17
- - **Common Knowledge** - You **MUST NOT** rely on common Salesforce knowledge related to entities, always ask for introspection data - if not available, **FAIL** the query generation (hard stop)
18
- - **Never guess** - You **MUST NOT** guess field type, always rely on introspection data (e.g. Owner doesn't mean User, the field might have a different type or be polymorphic)
19
-
20
-
21
- ## STEP 1: General Query Information
22
-
23
- ### Information Workflow
24
-
25
- 1. Identify namespace: one of `uiapi` or `setup`, defaults to `uiapi`
26
- 2. Identify query type: one of `read` or `mutation`, defaults to `read`
27
- 3. Identify desired output
28
- 4. Use the [information report template](#information-report-template) below to report result
29
-
30
- ### Information Report Template
31
-
32
- You want to build a GraphQL {type} query on entities hosted in the {namespace} namespace.
33
-
34
-
35
- ## STEP 2: Select Introspection Method
36
-
37
- **IMPORTANT** - This is an **interactive step**, you **MUST** wait for the user to answer your questions, and you **MUST** pause until they do:
38
- Ask the user how they want to retrieve the introspection information using the following list:
39
- 1. ***Manually*** - User will execute the queries for you
40
- 2. ***Connect API*** - You will execute introspection queries using the `graphql`Connect API endpoint
41
- 3. ***Salesforce CLI*** - You will execute introspection queries using Salesforce CLI
42
-
43
- **WAIT** for the user's answer.
44
-
45
- If user picks option 2, Connect API:
46
- 1. ***Local org details*** - Ask for server url, API version (e.g. 65) and a valid OAuth token, and store these in url, version and token variables
47
- 2. ***Default API Version*** - If no API version is provided, use 66 as the default value
48
- 3. ***Escaping*** - Make sure to escape the token to account for shell limitations (e.g. the `!` character might need to be escaped when using bash)
49
- **WAIT** for the user's answer.
50
-
51
- **Report** - Mention the method you will use to retrieve introspection data, one of `Salesforce CLI`, `Connect API` or `user manual request`; if `Connect API`, mention server url `{url}/services/data/v{version}.0/graphql` and token
52
-
53
-
54
- ## STEP 3: Entities Identification
55
-
56
- **CRITICAL** Your goal is to extract and list **entities** involved in the query to generate:
57
- - **Entity Names** must obey CamelCase convention
58
- - **Introspection** - If some entity names are not provided and can't be deduced from context, use the [Map Entity Names](#map-entity-names) workflow
59
- - **Resolution** - If some entity names are resolved by the previous introspection sub step, ask the user for their names
60
- - Do **NOT** try to resolve exact field names, as this will be completed as part of [STEP 4](#step-4-iterative-entities-introspection)
61
- - **Report** - Use the [Identification Report Template](#identification-report-template) to report final step status
62
-
63
- ### Map Entity Names
64
-
65
- **List Accessible Entities** - Get a list of accessible entities using one of the following options, depending on the method selected by [STEP 2](#step-2-select-introspection-method):
66
- 1. If `Salesforce CLI` was selected, use the `sf sobject list --sobject all` command
67
- 2. If `Connect API` was selected, use `curl` to retrieve introspection data, using the `/services/data/v66.0/ui-api/object-info/` endpoint
68
- 3. Otherwise, you **MUST** ask the user to retrieve the list of accessible entities for you, and wait for their answer
69
-
70
- **Report Status** - Use the [report template](#identification-report-template) to report status
71
- **HARD STOP** - Evaluate [hard stop rules](#identification-hard-stop-rules)
72
-
73
- ### Identification Hard Stop Rules
74
-
75
- **Triggering conditions** - ALWAYS
76
-
77
- If the unknown entity list is not empty:
78
- - the global step status is `FAILED`
79
- - stop generation
80
- - go through [remediation actions](#identification-remediation-actions)
81
-
82
- ### Identification Report Template
83
-
84
- **Triggering conditions** - ALWAYS
85
-
86
- List identified entities:
87
- - `Entity1` (`Field1.1`, `Field1.2`, ...)
88
- List unknown entities:
89
- - entity textual name
90
-
91
- ### Identification Remediation Actions
92
-
93
- **Triggering conditions** - Only if the global status for the step is `FAILED`
94
-
95
- **Interactive** - Ask the user for clarification on any unknown entities, and restart [STEP 3](#step-3-entities-identification)
96
-
97
-
98
- ## STEP 4: Iterative Entities Introspection
99
-
100
- **CRITICAL** Your goal is to extract and list entity **fields** involved in the query to generate
101
-
102
- ### Introspection Workflow
103
-
104
- **Triggering conditions** - ALWAYS
105
-
106
- Rules:
107
- 1. Start with the list of entities from [STEP 3](#step-3-entities-identification)
108
- 2. **NO ASSUMPTIONS** - You ***MUST*** rely only on introspection data for field name and type
109
- 3. **NO COMMON KNOWLEDGE** - You ***MUST*** rely only on introspection data for field name and type
110
- 4. You **MUST** follow the workflow below until all entities involved in the query to generate are properly described
111
-
112
- **CRITICAL** - **WORKFLOW** - using the list of unknown entities, ***strictly*** follow the following steps, in order:
113
- 1. **Cleanup** - Remove from the list all entities for which you already retrieved introspection information
114
- 2. **Introspection Phase** - Request introspection data for all unknown entities
115
- 1. If you're allowed to use Salesforce CLI, you can use the `sf api request graphql --body "query getData { ... }"` using the [Introspection GraphQL Query](#introspection-graphql-query) query template to replace the $query variable
116
- 2. If you have valid url, version and token variables, use `curl` to retrieve introspection data, using the [Introspection GraphQL Query](#introspection-graphql-query) query template and proper escaping to avoid shell issues with token characters
117
- 3. If you don't have valid url, version or token info, you **MUST** ask the user to run the query for you using the [Introspection GraphQL Query](#introspection-graphql-query) query template and **WAIT** for them to provide the required data
118
- 4. **HARD STOP** - If you didn't get any introspection data back, **STOP** here, and jump to point 8 below
119
- 3. **Fields Identification** - Using introspection data, retrieve requested field types
120
- 4. **Reference Fields** - Using introspection data, identify reference requested fields (`dataType="REFERENCE"`)
121
- 1. **IMPORTANT** - Two fields with the same name from two different entities might have different types
122
- 2. retrieve possible types using the `referenceToInfos` attribute
123
- 3. **Polymorphic Fields** - Reference fields with more than entry in the `referenceToInfos` attribute are polymorphic
124
- 4. add any unknown entity references to the list of entities to introspect
125
- 5. **Child Relationships** - Using introspection data, identify all requested fields that are child relationships using the `childObjectApiName` attribute
126
- 1. add any unknown types to the list of types to discover
127
- 6. **Secondary Introspection Phase** - If list of types to discover is not empty, resume the process from point 1 above
128
- 7. **Field Type Information** - Retrieve GraphQL detailed type information for all non reference non child relationships requested fields using the `LDS_Explore_GraphQLSchema` rule
129
- 8. **Report** - Use the [Introspection Report Template](#introspection-report-template) to report on retrieved information
130
- 9. **Evaluate** - Evaluate the [Introspection Hard Stop Rules](#introspection-hard-stop-rules)
131
-
132
- ### Introspection Hard Stop Rules
133
-
134
- **Triggering conditions** - ALWAYS
135
-
136
- **Critical rule** - If the global status is `FAILED`, **STOP** generation here, and go through [introspection remediation actions](#introspection-remediation-actions)
137
-
138
- ### Introspection Remediation Actions
139
-
140
- **Triggering conditions** - Only if the global status for the step is `FAILED`
141
-
142
- **Action** - Ask for clarification on any unknown fields, and resume the [Introspection Workflow](#introspection-workflow).
143
-
144
- ### Introspection Report Template
145
-
146
- **Critical rule** An entity is ✅ only if it has no unknown fields, otherwise it is ❌
147
- **Critical rule** If any of the entities is not checked in the report, the global status is `FAILED`
148
-
149
- Introspection phase:
150
- {✅|❌} `Entity1`
151
- - Standard fields: `Field1` (`type`), `Field2` (`type`)...
152
- - Reference fields: `Field3` (`referenceToInfos` information from introspection)...
153
- - Child relationships: `Field4` (`childObjectApiName` from introspection)
154
- - Unknown fields: `Field5`...
155
- {✅|❌} `Entity2`
156
- - ...
157
- Introspection workflow status: {SUCCESS|FAILED}
158
-
159
- ### Introspection GraphQL Query
160
-
161
- **CRITICAL RULES**
162
- - When using the request below, proceed with batches of 3 entities max in order to limit the payload size.
163
- - When introspecting for mutation create queries, add `required` and `createable` to the `fields` field.
164
- - When introspecting for mutation update queries, add `updateable` to the `fields` field.
165
- - When introspecting for mutation create or update queries, make sure you query for all fields (no pre-filtering).
166
- - You don't need introspection for mutation delete queries, as you only need the `Id` field.
167
-
168
- ```graphql
169
- query getData {
170
- uiapi {
171
- objectInfos(apiNames: ["EntityName1", "EntityName2", ...]) {
172
- ApiName
173
- childRelationships { childObjectApiName, fieldName, relationshipName }
174
- fields { ApiName, dataType, relationshipName, referenceToInfos { ApiName } }
175
- }
176
- }
177
- }
178
- ```
179
-
180
-
181
- ## STEP 5: Read Query Generation
182
-
183
- **Triggering conditions**
184
- 1. Only if the [iterative entities introspection](#step-4-iterative-entities-introspection) step global status is `SUCCESS`
185
- 2. Only if the query to generate is a read query
186
-
187
- Run the `LDS_Generate_GraphQLReadQuery` rule.
188
-
189
-
190
- ## STEP 6: Mutation Query Generation
191
-
192
- **Triggering conditions**
193
- 1. Only if the [iterative entities introspection](#step-4-iterative-entities-introspection) step global status is `SUCCESS`
194
- 2. Only if the query to generate is a mutation query
195
-
196
- Run the `LDS_Generate_GraphQLMutationQuery` rule.
197
-
198
-
199
- ## COMMON WORKFLOW VIOLATIONS TO AVOID
200
-
201
- - **Bypass Hard Stop Rules** - When a [workflow](#introspection-workflow) step fails to complete, you **MUST** stop here and wait for the remediation action to be completed - **NEVER** attempt to proceed with subsequent rules
202
- - **Guess Field Name or Type** - You **MUST NOT** try to guess field name or type based on assumptions, only leverage introspection and schema data
203
- - **Skip Introspection Phase** - **NEVER** bypass introspection phase - only use data from introspection, whether you auto executed the query or asked the user to run it for you
204
- - **Invalid Type Consistency** - Strong typing must be enforced at all times, and type information must come either from introspection or using the GraphQL schema
205
- - **Bypass Workflow** - You **MUST** follow strictly steps in the [introspection workflow](#introspection-workflow), **NEVER** try to bypass any step, or continue with subsequent steps if the current one exited with a failed status