@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactb2e/_r_/skills/feature-micro-frontend-micro-frontend/SKILL.md

@@ -1,137 +0,0 @@
----
-name: feature-micro-frontend-micro-frontend
-description: Generate a Micro Frontend LWC component for a Web Application.
-license: Proprietary. LICENSE.txt has complete terms
-metadata:
-  author: salesforce-experience-platform-emu/lwc-admins
----
-
-# Micro Frontend generation (workflow)
-
-When the user wants a Micro Frontend for a Web Application, follow this workflow.
-
-## 1. Install the dependency
-
-Micro Frontends are generated using the `generate-micro-frontend` CLI command from the `@salesforce/micro-frontends-experimental` package.
-
-```bash
-npm install @salesforce/micro-frontends-experimental
-```
-
-The dependency should be added to the project's `package.json` dependencies.
-
-## 2. Identify the Web Application
-
-- Verify the Web Application exists in `force-app/main/default/webapplications/<web-app-name>/`.
-- Confirm the Web Application has a `lightningOut` target in its `webapplication-meta.xml` file.
-- If no Web Application exists, the user must create one first using the Web Apps template system.
-
-## 3. Generate the Micro Frontend component
-
-Run the `generate-micro-frontend` command with the Web Application name from the root of an SFDX project:
-
-```bash
-npx generate-micro-frontend <web-app-name>
-```
-
-This creates:
-
-- A custom wrapper LWC component in `force-app/main/default/lwc/<webAppName>/`. This is the "Micro Frontend component".
-- The static `microFrontendShell` component that handles iframe communication.
-
-Notes:
-
-- The command may be added to the project's `package.json` scripts for convenience.
-- The Micro Frontend component uses the Web Application name (e.g. `my-web-app/`) in camelCase for its folder and file names (e.g. `myWebApp/myWebApp.js`, `myWebApp/myWebApp.html`).
-
-## 4. Customize the Micro Frontend component metadata
-
-Edit the `<webAppName>.js-meta.xml` file to:
-
-- Set appropriate `targets` (e.g. `lightning__HomePage`, `lightning__AppPage`, `lightning__RecordPage`, `lightningCommunity__Page`)
-- Add `targetConfigs` for page-specific properties
-- Optionally update the `masterLabel` and `description`
-
-Example:
-
-```xml
-<targetConfigs>
-    <targetConfig targets="lightning__HomePage">
-        <property name="height" type="Integer" min="0" max="600" default="300" />
-    </targetConfig>
-</targetConfigs>
-```
-
-## 5. Pass properties to the Micro Frontend component
-
-Edit the `<webAppName>.js` file to customize the `properties` getter:
-
-```javascript
-@api height;
-
-@api get properties() {
-    return {
-        height: this.height,
-        // Add any other data your Web Application needs
-    };
-}
-```
-
-All properties are passed to the embedded Web Application via `postMessage` and can be accessed in the app's code.
-
-## 6. Deploy and test
-
-Deploy the Micro Frontend component using standard SF CLI commands:
-
-```bash
-sf project deploy start --source-dir force-app/main/default
-```
-
-Add the component to a page using Lightning App Builder or Experience Builder and verify it loads correctly.
-
-# Micro Frontend component customization examples
-
-## Record page example
-
-Command to generate a Micro Frontend component for the `my-site` Web Application:
-
-```bash
-npx generate-micro-frontend my-site
-```
-
-`mySite.js-meta.xml` file with a `lightning__RecordPage` target:
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>66.0</apiVersion>
-    <isExposed>true</isExposed>
-    <masterLabel>Micro Frontend for "My Site"</masterLabel>
-    <targets>
-        <target>lightning__RecordPage</target>
-    </targets>
-        <targetConfigs>
-        <targetConfig targets="lightning__RecordPage">
-            <property name="mode" type="String" default="dark" />
-        </targetConfig>
-    </targetConfigs>
-</LightningComponentBundle>
-```
-
-`mySite.js` file with public properties and `properties` getter:
-
-```js
-// Micro Frontend component
-export default class mySite extends LightningElement {
-  @api recordId;
-  @api mode;
-
-  @api get properties() {
-    // This data is passed to the Micro Frontend
-    return {
-      recordId: this.recordId, // automatically populated for lightning__RecordPage target
-      mode: this.mode, // matches the mode targetConfig
-    };
-  }
-}
-```

package/lib/templates/project/reactb2e/_r_/skills/feature-react-chart-analytics-charts/SKILL.md

@@ -1,41 +0,0 @@
----
-name: feature-react-chart-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/lib/templates/project/reactb2e/_r_/skills/feature-react-chart-analytics-charts/docs/schema-mapping.md

@@ -1,4 +0,0 @@
-# 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`.

package/lib/templates/project/reactb2e/_r_/skills/feature-react-file-upload-file-upload/SKILL.md

@@ -1,396 +0,0 @@
----
-name: feature-react-file-upload-file-upload
-description: Add file upload functionality to React webapps with progress tracking and Salesforce ContentVersion integration. Use when the user wants to upload files, attach documents, handle file input, create file dropzones, track upload progress, or link files to Salesforce records. This feature provides programmatic APIs ONLY — no components or hooks are exported. Build your own custom UI using the upload() API. ALWAYS use this feature instead of building file upload from scratch with FormData or XHR.
----
-
-# File Upload API (workflow)
-
-When the user wants file upload functionality in a React webapp, follow this workflow. This feature provides **APIs only** — you must build the UI components yourself using the provided APIs.
-
-## CRITICAL: This is an API-only package
-
-The package exports **programmatic APIs**, not React components or hooks. You will:
-
-- Use the `upload()` function to handle file uploads with progress tracking
-- Build your own custom UI (file input, dropzone, progress bars, etc.)
-- Track upload progress through the `onProgress` callback
-
-**Do NOT:**
-
-- Expect pre-built components like `<FileUpload />` — they are not exported
-- Try to import React hooks like `useFileUpload` — they are not exported
-- Look for dropzone components — they are not exported
-
-The source code contains reference components for demonstration, but they are **not available** as imports. Use them as examples to build your own UI.
-
-## 1. Install the package
-
-```bash
-npm install @salesforce/webapp-template-feature-react-file-upload-experimental
-```
-
-Dependencies are automatically installed:
-
-- `@salesforce/webapp-experimental` (API client)
-- `@salesforce/sdk-data` (data SDK)
-
-## 2. Understand the three upload patterns
-
-### Pattern A: Basic upload (no record linking)
-
-Upload files to Salesforce and get back `contentBodyId` for each file. No ContentVersion record is created.
-
-**When to use:**
-
-- User wants to upload files first, then create/link them to a record later
-- Building a multi-step form where the record doesn't exist yet
-- Deferred record linking scenarios
-
-```tsx
-import { upload } from "@salesforce/webapp-template-feature-react-file-upload-experimental";
-
-const results = await upload({
-  files: [file1, file2],
-  onProgress: (progress) => {
-    console.log(`${progress.fileName}: ${progress.status} - ${progress.progress}%`);
-  },
-});
-
-// results[0].contentBodyId: "069..." (always available)
-// results[0].contentVersionId: undefined (no record linked)
-```
-
-### Pattern B: Upload with immediate record linking
-
-Upload files and immediately link them to an existing Salesforce record by creating ContentVersion records.
-
-**When to use:**
-
-- Record already exists (Account, Opportunity, Case, etc.)
-- User wants files immediately attached to the record
-- Direct upload-and-attach scenarios
-
-```tsx
-import { upload } from "@salesforce/webapp-template-feature-react-file-upload-experimental";
-
-const results = await upload({
-  files: [file1, file2],
-  recordId: "001xx000000yyyy", // Existing record ID
-  onProgress: (progress) => {
-    console.log(`${progress.fileName}: ${progress.status} - ${progress.progress}%`);
-  },
-});
-
-// results[0].contentBodyId: "069..." (always available)
-// results[0].contentVersionId: "068..." (linked to record)
-```
-
-### Pattern C: Deferred record linking (record creation flow)
-
-Upload files without a record, then link them after the record is created.
-
-**When to use:**
-
-- Building a "create record with attachments" form
-- Record doesn't exist until form submission
-- Need to upload files before knowing the final record ID
-
-```tsx
-import {
-  upload,
-  createContentVersion,
-} from "@salesforce/webapp-template-feature-react-file-upload-experimental";
-
-// Step 1: Upload files (no recordId)
-const uploadResults = await upload({
-  files: [file1, file2],
-  onProgress: (progress) => console.log(progress),
-});
-
-// Step 2: Create the record
-const newRecordId = await createRecord(formData);
-
-// Step 3: Link uploaded files to the new record
-for (const file of uploadResults) {
-  const contentVersionId = await createContentVersion(
-    new File([""], file.fileName),
-    file.contentBodyId,
-    newRecordId,
-  );
-}
-```
-
-## 3. Build your custom UI
-
-The package provides the backend — you build the frontend. Here's a minimal example:
-
-```tsx
-import {
-  upload,
-  type FileUploadProgress,
-} from "@salesforce/webapp-template-feature-react-file-upload-experimental";
-import { useState } from "react";
-
-function CustomFileUpload({ recordId }: { recordId?: string }) {
-  const [progress, setProgress] = useState<Map<string, FileUploadProgress>>(new Map());
-
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-
-    await upload({
-      files,
-      recordId,
-      onProgress: (fileProgress) => {
-        setProgress((prev) => new Map(prev).set(fileProgress.fileName, fileProgress));
-      },
-    });
-  };
-
-  return (
-    <div>
-      <input type="file" multiple onChange={handleFileSelect} />
-
-      {Array.from(progress.entries()).map(([fileName, fileProgress]) => (
-        <div key={fileName}>
-          {fileName}: {fileProgress.status} - {fileProgress.progress}%
-          {fileProgress.error && <span>Error: {fileProgress.error}</span>}
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-## 4. Track upload progress
-
-The `onProgress` callback fires multiple times for each file as it moves through stages:
-
-| Status         | When                                           | Progress Value       |
-| -------------- | ---------------------------------------------- | -------------------- |
-| `"pending"`    | File queued for upload                         | `0`                  |
-| `"uploading"`  | Upload in progress (XHR)                       | `0-100` (percentage) |
-| `"processing"` | Creating ContentVersion (if recordId provided) | `0`                  |
-| `"success"`    | Upload complete                                | `100`                |
-| `"error"`      | Upload failed                                  | `0`                  |
-
-**Always provide visual feedback:**
-
-- Show file name
-- Display current status
-- Render progress bar for "uploading" status
-- Show error message if status is "error"
-
-## 5. Cancel uploads (optional)
-
-Use an `AbortController` to allow users to cancel uploads:
-
-```tsx
-const abortController = new AbortController();
-
-const handleUpload = async (files: File[]) => {
-  try {
-    await upload({
-      files,
-      signal: abortController.signal,
-      onProgress: (progress) => console.log(progress),
-    });
-  } catch (error) {
-    console.error("Upload cancelled or failed:", error);
-  }
-};
-
-const cancelUpload = () => {
-  abortController.abort();
-};
-```
-
-## 6. Link to current user (special case)
-
-If the user wants to upload files to their own profile or personal library:
-
-```tsx
-import {
-  upload,
-  getCurrentUserId,
-} from "@salesforce/webapp-template-feature-react-file-upload-experimental";
-
-const userId = await getCurrentUserId();
-await upload({ files, recordId: userId });
-```
-
-## API Reference
-
-### upload(options)
-
-Main upload API that handles complete flow with progress tracking.
-
-```typescript
-interface UploadOptions {
-  files: File[];
-  recordId?: string | null; // If provided, creates ContentVersion
-  onProgress?: (progress: FileUploadProgress) => void;
-  signal?: AbortSignal; // Optional cancellation
-}
-
-interface FileUploadProgress {
-  fileName: string;
-  status: "pending" | "uploading" | "processing" | "success" | "error";
-  progress: number; // 0-100 for uploading, 0 for other states
-  error?: string;
-}
-
-interface FileUploadResult {
-  fileName: string;
-  size: number;
-  contentBodyId: string; // Always available
-  contentVersionId?: string; // Only if recordId was provided
-}
-```
-
-**Returns:** `Promise<FileUploadResult[]>`
-
-### createContentVersion(file, contentBodyId, recordId)
-
-Manually create a ContentVersion record from a previously uploaded file.
-
-```typescript
-async function createContentVersion(
-  file: File,
-  contentBodyId: string,
-  recordId: string,
-): Promise<string | undefined>;
-```
-
-**Parameters:**
-
-- `file` — File object (used for metadata like name)
-- `contentBodyId` — ContentBody ID from previous upload
-- `recordId` — Record ID for FirstPublishLocationId
-
-**Returns:** ContentVersion ID if successful
-
-### getCurrentUserId()
-
-Get the current user's Salesforce ID.
-
-```typescript
-async function getCurrentUserId(): Promise<string>;
-```
-
-**Returns:** Current user ID
-
-## Common UI patterns
-
-### File input with button
-
-```tsx
-<input type="file" multiple accept=".pdf,.doc,.docx,.jpg,.png" onChange={handleFileSelect} />
-```
-
-### Drag-and-drop zone
-
-Build your own dropzone using native events:
-
-```tsx
-function DropZone({ onDrop }: { onDrop: (files: File[]) => void }) {
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    const files = Array.from(e.dataTransfer.files);
-    onDrop(files);
-  };
-
-  return (
-    <div
-      onDrop={handleDrop}
-      onDragOver={(e) => e.preventDefault()}
-      style={{ border: "2px dashed #ccc", padding: "2rem" }}
-    >
-      Drop files here
-    </div>
-  );
-}
-```
-
-### Progress bar
-
-```tsx
-{
-  progress.status === "uploading" && (
-    <div style={{ width: "100%", background: "#eee" }}>
-      <div
-        style={{
-          width: `${progress.progress}%`,
-          background: "#0176d3",
-          height: "8px",
-        }}
-      />
-    </div>
-  );
-}
-```
-
-## Decision tree for agents
-
-**User asks for file upload functionality:**
-
-1. **Ask about record context:**
-   - "Do you want to link uploaded files to a specific record, or upload them first and link later?"
-
-2. **Based on response:**
-   - **Link to existing record** → Use Pattern B with `recordId`
-   - **Upload first, link later** → Use Pattern A (no recordId), then Pattern C for linking
-   - **Link to current user** → Use Pattern B with `getCurrentUserId()`
-
-3. **Build the UI:**
-   - Create file input or dropzone (not provided by package)
-   - Add progress display for each file (status + progress bar)
-   - Handle errors in the UI
-
-4. **Test the implementation:**
-   - Verify progress callbacks fire correctly
-   - Check that `contentBodyId` is returned
-   - If `recordId` was provided, verify `contentVersionId` is returned
-
-## Reference implementation
-
-The package includes a reference implementation in `src/features/fileupload/` with:
-
-- `FileUpload.tsx` — Complete component with dropzone and dialog
-- `FileUploadDialog.tsx` — Progress tracking dialog
-- `FileUploadDropZone.tsx` — Drag-and-drop zone
-- `useFileUpload.ts` — React hook for state management
-
-**These are NOT exported** but can be viewed as examples. Read the source files to understand patterns for building your own UI.
-
-## Troubleshooting
-
-**Upload fails with CORS error:**
-
-- Ensure the webapp is properly deployed to Salesforce or running on `localhost`
-- Check that the org allows the origin in CORS settings
-
-**No progress updates:**
-
-- Verify `onProgress` callback is provided
-- Check that the callback function updates React state correctly
-
-**ContentVersion not created:**
-
-- Verify `recordId` is provided to `upload()` function
-- Check that the record ID is valid and exists in the org
-- Ensure user has permissions to create ContentVersion records
-
-**Files upload but don't appear in record:**
-
-- Verify `recordId` is correct
-- Check that ContentVersion was created (look for `contentVersionId` in results)
-- Confirm user has access to view files on the record
-
-## DO NOT do these things
-
-- ❌ Build XHR/fetch upload logic from scratch — use the `upload()` API
-- ❌ Try to import `<FileUpload />` component — it's not exported
-- ❌ Try to import `useFileUpload` hook — it's not exported
-- ❌ Use third-party file upload libraries when this feature exists
-- ❌ Skip progress tracking — always provide user feedback
-- ❌ Ignore errors — always handle and display error messages

package/lib/templates/project/reactb2e/_r_/skills/webapp-csp-trusted-sites/SKILL.md

@@ -1,90 +0,0 @@
----
-name: webapp-csp-trusted-sites
-description: Creates Salesforce CSP Trusted Site metadata when adding external domains. Use when the user adds an external API, CDN, image host, font provider, map tile server, or any third-party URL that the web application needs to load resources from — or when a browser console shows a CSP violation error.
----
-
-# CSP Trusted Sites
-
-## When to Use
-
-Use this skill whenever the application references a new external domain that is not already registered as a CSP Trusted Site. This includes:
-
-- Adding images from a new CDN (Unsplash, Pexels, Cloudinary, etc.)
-- Loading fonts from an external provider (Google Fonts, Adobe Fonts)
-- Calling a third-party API (Open-Meteo, Nominatim, Mapbox, etc.)
-- Loading map tiles from a tile server (OpenStreetMap, Mapbox)
-- Embedding iframes from external services (YouTube, Vimeo)
-- Loading external stylesheets or scripts
-
-Salesforce enforces Content Security Policy (CSP) headers on all web applications. Any external domain not registered as a CSP Trusted Site will be blocked by the browser, causing images to not load, API calls to fail, or fonts to be missing.
-
-**Reference:** [Salesforce CspTrustedSite Object Reference](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_csptrustedsite.htm)
-
----
-
-## Step 1 — Identify external domains
-
-Scan the code for any URLs pointing to external domains. Common patterns:
-
-- `fetch("https://api.example.com/...")` — API calls
-- `<img src="https://images.example.com/..." />` — images
-- `<link href="https://fonts.example.com/..." />` — stylesheets
-- `url="https://tiles.example.com/{z}/{x}/{y}.png"` — map tiles
-- `@import url("https://cdn.example.com/...")` — CSS imports
-
-Extract the **origin** (scheme + host) from each URL. For example:
-- `https://api.open-meteo.com/v1/forecast?lat=...` → `https://api.open-meteo.com`
-- `https://images.unsplash.com/photo-123?w=800` → `https://images.unsplash.com`
-
----
-
-## Step 2 — Check existing CSP Trusted Sites
-
-Before creating a new file, check if the domain already has a CSP Trusted Site:
-
-```bash
-ls force-app/main/default/cspTrustedSites/
-```
-
-If the domain is already registered, no action is needed.
-
----
-
-## Step 3 — Determine the CSP directive(s)
-
-Map the resource type to the correct CSP `isApplicableTo*Src` fields. Read `implementation/metadata-format.md` for the full reference.
-
-Quick reference:
-
-| Resource type | CSP directive field(s) to set `true` |
-|--------------|--------------------------------------|
-| Images (img, background-image) | `isApplicableToImgSrc` |
-| API calls (fetch, XMLHttpRequest) | `isApplicableToConnectSrc` |
-| Fonts (.woff, .woff2, .ttf) | `isApplicableToFontSrc` |
-| Stylesheets (CSS) | `isApplicableToStyleSrc` |
-| Video / audio | `isApplicableToMediaSrc` |
-| Iframes | `isApplicableToFrameSrc` |
-
-**Always also set `isApplicableToConnectSrc` to `true`** — most resources also require connect-src for preflight/redirect handling.
-
----
-
-## Step 4 — Create the metadata file
-
-Read `implementation/metadata-format.md` and follow the instructions to create the `.cspTrustedSite-meta.xml` file.
-
----
-
-## Step 5 — Verify
-
-1. Confirm the file is valid XML and matches the expected schema.
-2. Confirm the file is placed in `force-app/main/default/cspTrustedSites/`.
-3. Confirm only the necessary `isApplicableTo*Src` fields are set to `true`.
-4. 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.