@salesforce/templates 66.5.4 → 66.5.6

package/lib/templates/project/reactb2x/_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/reactb2x/_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/reactb2x/_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/reactb2x/_r_/skills/webapp-react-interactive-map/SKILL.md

@@ -1,92 +0,0 @@
----
-name: webapp-react-interactive-map
-description: Adds interactive Leaflet maps with geocoded markers to React pages. Use when the user asks to add a map, show locations on a map, display property pins, add a map view, or integrate mapping into the web application.
----
-
-# Interactive Map
-
-## When to Use
-
-Use this skill when:
-- Adding an interactive map to a page (property search, store locator, location detail)
-- Displaying one or more markers/pins on a map
-- Converting addresses to map coordinates (geocoding)
-- Building a split-panel layout with map + list
-
----
-
-## Step 1 — Determine the map use case
-
-Identify the scenario:
-
-- **Multi-marker search** — map shows multiple pins alongside a scrollable list (e.g. property search, store locator)
-- **Single-location detail** — map shows one pin for a specific address (e.g. property detail, contact page)
-- **Static overview** — map centered on a region with no interactive markers
-
-If unclear, ask:
-
-> "Should the map show a single location, multiple markers from a list, or just a general area overview?"
-
----
-
-## Step 2 — Install dependencies
-
-The map requires `leaflet` and `react-leaflet`. Read `implementation/leaflet-map.md` for the exact dependency setup.
-
----
-
-## Step 3 — Choose implementation path
-
-Read the corresponding guide:
-
-- **Map component** — read `implementation/leaflet-map.md` for building the reusable `<MapComponent>`.
-- **Geocoding** — read `implementation/geocoding.md` for converting addresses to lat/lng coordinates.
-
-For a multi-marker search page, you will need both.
-
----
-
-## Step 4 — Wire the map into the page
-
-Depending on the use case:
-
-### Multi-marker search layout
-
-```
-┌──────────────────────────────────────┐
-│  Search bar / filters                │
-├────────────────────┬─────────────────┤
-│                    │  Scrollable     │
-│   Map (2/3)        │  list (1/3)     │
-│                    │                 │
-└────────────────────┴─────────────────┘
-```
-
-- Map takes `~2/3` width on desktop, full width on mobile stacked above the list.
-- List is scrollable with `overflow-y-auto`.
-- Markers are geocoded from addresses in the list.
-
-### Single-location detail
-
-- Place the map below the hero image or address section.
-- Geocode the address on mount, render one marker.
-- Show the map only after coordinates resolve (conditional render).
-
----
-
-## Verification
-
-Before completing:
-
-1. Map renders with visible tiles (no gray boxes).
-2. Markers appear at correct locations.
-3. Map is responsive (works on mobile widths).
-4. SSR-safe — no `window is not defined` errors during build.
-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/lib/templates/project/reactb2x/_r_/skills/webapp-react-interactive-map/implementation/geocoding.md

@@ -1,245 +0,0 @@
-# Geocoding — Implementation Guide
-
-## What is geocoding
-
-Geocoding converts a human-readable address (e.g. "123 Main St, San Francisco, CA") into latitude/longitude coordinates for map display.
-
----
-
-## Recommended service: OpenStreetMap Nominatim
-
-| Property | Value |
-|----------|-------|
-| Endpoint | `https://nominatim.openstreetmap.org/search` |
-| Cost | Free |
-| API key | None |
-| Rate limit | 1 request/second (enforced by Nominatim usage policy) |
-| Terms | Must set a meaningful `User-Agent` header |
-
----
-
-## Geocode utility with caching and concurrency control
-
-Create at `utils/geocode.ts`:
-
-```ts
-const CACHE = new Map<string, { lat: number; lng: number }>();
-const MAX_CONCURRENT = 6;
-let inFlight = 0;
-const queue: Array<() => void> = [];
-
-function acquire(): Promise<void> {
-  if (inFlight < MAX_CONCURRENT) {
-    inFlight += 1;
-    return Promise.resolve();
-  }
-  return new Promise<void>((resolve) => {
-    queue.push(() => {
-      inFlight += 1;
-      resolve();
-    });
-  });
-}
-
-function release(): void {
-  inFlight -= 1;
-  const next = queue.shift();
-  if (next) next();
-}
-
-export interface GeocodeResult {
-  lat: number;
-  lng: number;
-}
-
-export async function geocodeAddress(address: string): Promise<GeocodeResult | null> {
-  const key = address.trim().replace(/\s+/g, " ").toLowerCase();
-  if (!key) return null;
-  const cached = CACHE.get(key);
-  if (cached) return cached;
-
-  await acquire();
-  try {
-    const url = new URL("https://nominatim.openstreetmap.org/search");
-    url.searchParams.set("q", address.trim());
-    url.searchParams.set("format", "json");
-    url.searchParams.set("limit", "1");
-    const res = await fetch(url.toString(), {
-      headers: { "User-Agent": "MyApp/1.0 (contact@example.com)" },
-    });
-    if (!res.ok) return null;
-    const data = (await res.json()) as Array<{ lat?: string; lon?: string }>;
-    const first = data?.[0];
-    if (!first?.lat || !first?.lon) return null;
-    const lat = Number(first.lat);
-    const lng = Number(first.lon);
-    if (Number.isNaN(lat) || Number.isNaN(lng)) return null;
-    const result = { lat, lng };
-    CACHE.set(key, result);
-    return result;
-  } catch {
-    return null;
-  } finally {
-    release();
-  }
-}
-```
-
-### Design decisions
-
-| Decision | Rationale |
-|----------|-----------|
-| In-memory cache | Avoids repeated API calls for the same address within a session |
-| Concurrency limiter (6) | Prevents flooding Nominatim when geocoding many addresses in parallel |
-| Semaphore queue | Requests beyond the limit wait in FIFO order |
-| Null return on failure | Callers decide how to handle missing coordinates (skip marker, show fallback) |
-| `User-Agent` header | Required by Nominatim usage policy; set to your app name and contact |
-
----
-
-## React hook: useGeocode
-
-For single-address geocoding (e.g. detail pages):
-
-```ts
-import { useState, useEffect } from "react";
-import { geocodeAddress, type GeocodeResult } from "@/utils/geocode";
-
-export function useGeocode(address: string | null | undefined): {
-  coords: GeocodeResult | null;
-  loading: boolean;
-} {
-  const [coords, setCoords] = useState<GeocodeResult | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!address?.trim()) {
-      setCoords(null);
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    geocodeAddress(address)
-      .then((result) => {
-        if (!cancelled) setCoords(result);
-      })
-      .catch(() => {
-        if (!cancelled) setCoords(null);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [address?.trim() ?? ""]);
-
-  return { coords, loading };
-}
-```
-
-### Usage in a component
-
-```tsx
-const { coords } = useGeocode("123 Main St, San Francisco, CA");
-
-{coords && (
-  <MapView
-    center={[coords.lat, coords.lng]}
-    zoom={15}
-    markers={[{ lat: coords.lat, lng: coords.lng, label: "Location" }]}
-  />
-)}
-```
-
----
-
-## Batch geocoding for lists
-
-When geocoding multiple addresses (e.g. search results → map markers), use `Promise.all` with the built-in concurrency limiter:
-
-```ts
-const results = await Promise.all(
-  addresses.map(({ id, address }) =>
-    geocodeAddress(address).then((coords) =>
-      coords ? { id, lat: coords.lat, lng: coords.lng } : null
-    )
-  )
-);
-const markers = results.filter(Boolean);
-```
-
-The `MAX_CONCURRENT` semaphore in the utility ensures no more than 6 requests are in flight, even if you pass 50 addresses.
-
----
-
-## Hook for multi-marker geocoding
-
-```ts
-import { useState, useEffect } from "react";
-import { geocodeAddress } from "@/utils/geocode";
-import type { MapMarker } from "@/components/MapView";
-
-export function useMapMarkers(
-  items: Array<{ id: string; address: string; label?: string }>
-): { markers: MapMarker[]; loading: boolean } {
-  const [markers, setMarkers] = useState<MapMarker[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const key = items.map((i) => i.id).join(",");
-
-  useEffect(() => {
-    if (items.length === 0) {
-      setMarkers([]);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    Promise.all(
-      items.map((item) =>
-        geocodeAddress(item.address).then((coords) =>
-          coords ? { lat: coords.lat, lng: coords.lng, label: item.label ?? item.address } : null
-        )
-      )
-    )
-      .then((results) => {
-        if (!cancelled) setMarkers(results.filter(Boolean) as MapMarker[]);
-      })
-      .catch(() => {
-        if (!cancelled) setMarkers([]);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [key]);
-
-  return { markers, loading };
-}
-```
-
----
-
-## CSP considerations
-
-If CSP is enforced, add Nominatim to `connect-src`:
-
-```
-connect-src 'self' https://nominatim.openstreetmap.org;
-```
-
----
-
-## Alternative geocoding providers
-
-| Provider | Free tier | API key | Notes |
-|----------|-----------|---------|-------|
-| Nominatim (OSM) | Unlimited (rate-limited) | No | Best for prototypes and low-traffic apps |
-| Google Geocoding API | 200 USD/month credit | Yes | Most accurate; requires billing account |
-| Mapbox Geocoding | 100K req/month | Yes | Good accuracy; JS SDK available |
-| LocationIQ | 5K req/day | Yes | Nominatim-compatible API |
-
-For production apps with high traffic, consider Google or Mapbox with an API key and server-side geocoding.