@salesforce/templates 66.1.1 → 66.2.0

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
+    }
+  },
+  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/vite.config.ts

@@ -0,0 +1,102 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { resolve } from 'path';
+import tailwindcss from '@tailwindcss/vite';
+import salesforce from '@salesforce/vite-plugin-webapp-experimental';
+import codegen from 'vite-plugin-graphql-codegen';
+
+export default defineConfig(({ mode }) => {
+  return {
+    // Ensure root base for e2e/static serve; plugin may override when deployed under a path
+    base: '/',
+    plugins: [
+      tailwindcss(),
+      react(),
+      salesforce(),
+      codegen({
+        // Path to the codegen config file
+        configFilePathOverride: resolve(__dirname, 'codegen.yml'),
+        // Run codegen on dev server start
+        runOnStart: true,
+        // Don't run codegen on build for now
+        runOnBuild: false,
+        // Enable file watcher during development
+        enableWatcher: true,
+        // Fail build if codegen errors
+        throwOnBuild: true,
+      }),
+    ],
+
+    // Build configuration for MPA
+    build: {
+      outDir: resolve(__dirname, 'dist'),
+      assetsDir: 'assets',
+      sourcemap: false,
+    },
+
+    // Resolve aliases (shared between build and test)
+    resolve: {
+      dedupe: ['react', 'react-dom'],
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@api': path.resolve(__dirname, './src/api'),
+        '@components': path.resolve(__dirname, './src/components'),
+        '@utils': path.resolve(__dirname, './src/utils'),
+        '@styles': path.resolve(__dirname, './src/styles'),
+        '@assets': path.resolve(__dirname, './src/assets'),
+      },
+    },
+
+    // Vitest configuration
+    test: {
+      // Override root for tests (build uses src/pages as root)
+      root: resolve(__dirname),
+
+      // Use jsdom environment for React component testing
+      environment: 'jsdom',
+
+      // Setup files to run before each test
+      setupFiles: ['./src/test/setup.ts'],
+
+      // Global test patterns
+      include: [
+        'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+        'src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+      ],
+
+      // Coverage configuration
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'html', 'clover', 'json'],
+        exclude: [
+          'node_modules/',
+          'src/test/',
+          'src/**/*.d.ts',
+          'src/main.tsx',
+          'src/vite-env.d.ts',
+          'src/components/**/index.ts',
+          '**/*.config.ts',
+          'build/',
+          'dist/',
+          'coverage/',
+          'eslint.config.js',
+        ],
+        thresholds: {
+          global: {
+            branches: 85,
+            functions: 85,
+            lines: 85,
+            statements: 85,
+          },
+        },
+      },
+
+      // Test timeout
+      testTimeout: 10000,
+
+      // Globals for easier testing
+      globals: true,
+    },
+  };
+});

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/vitest-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest" />
+/// <reference types="@testing-library/jest-dom" />

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+  },
+});

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/templates/project/react-b2e/force-app/main/default/webapplications/appreacttemplateb2e/webapplication.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "/index.html"
+  }
+}

package/lib/templates/project/react-b2e/jest.config.js

@@ -0,0 +1,6 @@
+const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
+
+module.exports = {
+    ...jestConfig,
+    modulePathIgnorePatterns: ['<rootDir>/.localdevserver']
+};

package/lib/templates/project/react-b2e/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
+  "version": "1.48.2",
+  "description": "Base SFDX project template",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'No build required for base-sfdx-project'",
+    "clean": "echo 'No clean required for base-sfdx-project'",
+    "lint": "eslint **/{aura,lwc}/**/*.js",
+    "test": "npm run test:unit",
+    "test:coverage": "npm run test",
+    "test:unit": "sfdx-lwc-jest -- --passWithNoTests",
+    "test:unit:watch": "sfdx-lwc-jest --watch",
+    "test:unit:debug": "sfdx-lwc-jest --debug",
+    "test:unit:coverage": "sfdx-lwc-jest --coverage",
+    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "precommit": "lint-staged"
+  },
+  "devDependencies": {
+    "@lwc/eslint-plugin-lwc": "^2.0.0",
+    "@prettier/plugin-xml": "^3.2.2",
+    "@salesforce/eslint-config-lwc": "^3.2.3",
+    "@salesforce/eslint-plugin-aura": "^2.0.0",
+    "@salesforce/eslint-plugin-lightning": "^1.0.0",
+    "@salesforce/sfdx-lwc-jest": "^7.0.1",
+    "eslint": "8.57.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^28.8.1",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-apex": "^2.0.1"
+  }
+}

package/lib/templates/project/react-b2e/scripts/apex/hello.apex

@@ -0,0 +1,10 @@
+// Use .apex files to store anonymous Apex.
+// You can execute anonymous Apex in VS Code by selecting the
+//     apex text and running the command:
+//     SFDX: Execute Anonymous Apex with Currently Selected Text
+// You can also execute the entire file by running the command:
+//     SFDX: Execute Anonymous Apex with Editor Contents
+
+string tempvar = 'Enter_your_name_here';
+System.debug('Hello World!');
+System.debug('My name is ' + tempvar);

package/lib/templates/project/react-b2e/scripts/soql/account.soql

@@ -0,0 +1,6 @@
+// Use .soql files to store SOQL queries.
+// You can execute queries in VS Code by selecting the
+//     query text and running the command:
+//     SFDX: Execute SOQL Query with Currently Selected Text
+
+SELECT Id, Name FROM Account

package/lib/templates/project/react-b2e/sfdx-project.json

@@ -0,0 +1,12 @@
+{
+  "packageDirectories": [
+    {
+      "path": "force-app",
+      "default": true
+    }
+  ],
+  "name": "MyProject",
+  "namespace": "",
+  "sfdcLoginUrl": "https://login.salesforce.com",
+  "sourceApiVersion": "66.0"
+}

package/lib/templates/project/react-b2x/.a4drules/README.md

@@ -0,0 +1,35 @@
+# A4D Rules Index
+
+Rules in this folder guide the agent for this SFDX project. **Knowledge** (expert content) lives in the **local-expert MCP** repo (e.g. `local-expert-mcp`); rules here reference when to call which expert.
+
+## Always-apply rules (MUST follow)
+
+| File | Purpose |
+|------|--------|
+| **webapp.md** | Main web app rules: invoke local-expert MCP (`webapplications-design-system` + `webapplications`), no `node -e`, React/SFDX workflow; **replace default boilerplate**; **populate home page**; **frontend aesthetics**—avoid AI slop, follow design-system expert. |
+| **webapp-no-node-e.md** | No `node -e` for any file/config/shell work; use `replace_in_file` or `write_to_file` only. |
+| **a4d-webapp-generate.md** | Before `sf webapp generate`: call `get_expert_knowledge` with `webapplications-design-system` and `webapplications`; then run CLI. |
+| **webapp-ui-first.md** | Build UI (layout, components, styling) first; then implement business logic (APIs, state, handlers). |
+| **webapp-nav-and-placeholders.md** | **Build navigation into the app layout** (`appLayout.tsx`). Always update nav menu (app-specific items/labels) and placeholder name/design (header/nav/footer/title). Often missed—mandatory. |
+
+## Context-specific rules (by file pattern or topic)
+
+| File | Purpose |
+|------|--------|
+| **react.md** | React web app structure, shadcn/Tailwind, data access, security; edit `appLayout.tsx` when changing layout. |
+| **ui-layout.md** | When changing UI/nav/header/footer/sidebar/theme, always update `appLayout.tsx`. |
+| **code-quality.md** | ESLint, Prettier, import order, naming, lint/build before completion; no `node -e`. |
+| **build-validation.md** | `npm run build` must succeed from web app dir before completing. |
+| **typescript.md** | TypeScript strictness, return types, interfaces. |
+| **images.md** | Images: Unsplash default, CSP, alt text, error handling. |
+| **react_image_processing.md** | Image handling (Unsplash, CSP, accessibility) for React components. |
+| **graphql/** | GraphQL tools and knowledge (schemas, LDS guides). |
+
+## Knowledge repository (experts)
+
+Expert knowledge is served by the **local-expert MCP** (e.g. at `local-expert-mcp`). The agent must call **`get_expert_knowledge`** with the appropriate topic:
+
+- **webapplications-design-system** — Always use for web app UI/design work (design system, typography, color, motion).
+- **webapplications** — Use for app generation and structure; then call sub-topics as needed (e.g. `webapplications-best-practice`, `webapplications-feature-*`).
+
+See the MCP repo's **rule-expert-mcp.md** for full topic list and when to call which expert.

package/lib/templates/project/react-b2x/.a4drules/a4d-webapp-generate.md

@@ -0,0 +1,27 @@
+---
+description: A4D rule — call expert MCP (webapplications + webapplications-design-system) before sf webapp generate
+alwaysApply: true
+---
+
+# A4D Rule: Before `sf webapp generate`
+
+Before running **`sf webapp generate`**, you **must**:
+
+1. **Call the expert MCP** (`get_expert_knowledge`) with topic **`webapplications-design-system`** — always invoke this expert for UI/design direction.
+2. **Call the expert MCP** with topic **`webapplications`** to get generation and structure guidance.
+3. Follow the instructions from the MCP responses.
+4. Only after that, run `sf webapp generate` (e.g. `sf webapp generate -n <AppName> -t <template>`).
+
+**Webapp name (`-n` / `<AppName>`):** Must be **alphanumerical only**—no spaces, hyphens, underscores, or other special characters. Use only letters (A–Z, a–z) and digits (0–9). If the desired name has spaces or special characters, use a single alphanumeric word (e.g. `CoffeeBoutique` instead of `Coffee Boutique` or `coffee-boutique`).
+
+Do not run `sf webapp generate` without having invoked the expert MCP with **`webapplications-design-system`** and **`webapplications`** first.
+
+When modifying an existing web app (UI, layout, or new features), **always** call `get_expert_knowledge` with topic **`webapplications-design-system`** before making UI or design changes.
+
+**After generating (or when touching a new app):** Replace all default boilerplate content (e.g. "React App", "Vite + React", default document title in `index.html`, placeholder text in the shell) with the actual app name or user-facing copy. Do not leave generic template text in the UI or `<title>`.
+
+**Home page content:** Populate the home page (root route) with real, app-specific content (e.g. landing section, banners, tiles, hero, links to features). Never leave the home page as the default template or placeholder.
+
+**Navigation menu and placeholder name/design:** After generating or when delivering a web app, **you must** (1) **Edit the navigation menu** in `appLayout.tsx`: replace every default nav item and label with app-specific routes and names; do not leave template "Home"/"About" or placeholder links. (2) **Replace the placeholder app name** in the header, nav brand, footer, and `index.html` `<title>` with the actual app name. (3) **Update placeholder design** in the shell (header/footer/branding) so it is not the template default. See **webapp-nav-and-placeholders.md**. Agents often skip this—do not.
+
+Prioritize webapplications generation first, and then generate the metadata.

package/lib/templates/project/react-b2x/.a4drules/build-validation.md

@@ -0,0 +1,78 @@
+# AI Rule: Build Validation
+
+Build validation for successful deployments with minimal friction.
+
+## Targets
+- `force-app/main/default/webapplications/*/**/*`
+- `**/*.{js,ts,jsx,tsx}`
+
+## MANDATORY: Build Success
+
+**Before completing any coding session** (from the web app directory `force-app/main/default/webapplications/<appName>/`):
+```bash
+npm run build  # MUST succeed with no errors
+```
+
+## Quick Quality Checks
+Run from the web app directory (`force-app/main/default/webapplications/<appName>/`):
+```bash
+npm run lint   # ESLint; fix issues before completing
+npm run build  # Runs tsc -b && vite build; catches TypeScript and build issues
+```
+
+## Requirements
+
+**Must Pass:**
+- `npm run build` completes successfully
+- No TypeScript compilation errors
+- No critical ESLint errors
+
+**Can Be Warnings:**
+- ESLint warnings
+- Minor TypeScript warnings
+
+## Fix Commands (when available in the web app's package.json)
+```bash
+npm run lint         # Run ESLint (always available)
+# If your project adds Prettier/format scripts, use those before completing
+```
+
+## Workflow
+
+**During Development:**
+1. Write code with AI assistance
+2. Save frequently (auto-format on save)
+3. Check periodically: `npm run lint` (optional)
+
+**Before Completion:**
+1. Run `npm run build` from the web app directory
+2. If it fails: fix TypeScript/ESLint errors (run `npm run lint`), then retry build
+
+## Error Priority
+
+**Fix Immediately:**
+- TypeScript compilation errors
+- Import/export errors
+- Syntax errors
+
+**Fix When Convenient:**
+- ESLint warnings
+- Unused variables
+
+## Hard Requirements
+- Build must complete without errors
+- No broken imports
+- Basic TypeScript type safety
+
+## Key Commands (web app directory)
+```bash
+npm run start        # Start development server (vite)
+npm run build        # TypeScript + Vite build; check deployment readiness
+npm run lint         # Run ESLint
+```
+
+## Troubleshooting Import Errors
+```bash
+npm install          # Check missing dependencies
+# Verify file exists, case sensitivity, export/import match
+```

package/lib/templates/project/react-b2x/.a4drules/code-quality.md

@@ -0,0 +1,137 @@
+# AI Rule: Code Quality Standards
+
+Enforces ESLint, Prettier, and coding best practices for consistent, maintainable code.
+
+**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**).
+
+## Targets
+- `force-app/main/default/webapplications/*/**/*`
+- `**/*.{js,ts,jsx,tsx,json,md}`
+
+## MANDATORY Checks
+
+**Before completing code** (run from the web app directory `force-app/main/default/webapplications/<appName>/`):
+```bash
+npm run lint   # MUST result in: 0 errors (0 warnings preferred)
+npm run build  # MUST succeed (includes TypeScript check)
+```
+
+If your project adds Prettier, use a consistent config (e.g. `.prettierrc` with `semi`, `singleQuote`, `printWidth`, etc.) and run format checks before completing.
+
+## Lint / Fix
+
+```bash
+npm run lint   # Run ESLint (always available in the template web app)
+# Use your editor's format-on-save or add npm scripts for Prettier if desired
+```
+
+## Import Order (MANDATORY)
+```typescript
+// 1. React ecosystem
+import { useState, useEffect } from 'react';
+
+// 2. External libraries (alphabetical)
+import axios from 'axios';
+import clsx from 'clsx';
+
+// 3. UI components (alphabetical)
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+
+// 4. Internal utilities (alphabetical)
+import { useAuth } from '../hooks/useAuth';
+import { formatDate } from '../utils/dateUtils';
+
+// 5. Relative imports
+import { ComponentA } from './ComponentA';
+
+// 6. Type imports (separate, at end)
+import type { User, ApiResponse } from '../types';
+```
+
+## Naming Conventions
+```typescript
+// PascalCase: Components, classes
+const UserProfile = () => {};
+const ApiClient = class {};
+
+// camelCase: Variables, functions, properties
+const userName = 'john';
+const fetchUserData = async () => {};
+
+// SCREAMING_SNAKE_CASE: Constants
+const API_BASE_URL = 'https://api.example.com';
+
+// kebab-case: Files
+// user-profile.tsx, api-client.ts
+```
+
+## React Component Structure
+```typescript
+interface ComponentProps {
+  // Props interface first
+}
+
+const Component: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
+  // 1. Hooks
+  // 2. Computed values
+  // 3. Event handlers
+  // 4. JSX return
+
+  return <div />;
+};
+
+export default Component;
+```
+
+## JSX Standards
+```typescript
+// Self-closing tags
+<Button onClick={handleClick} />
+
+// Conditional rendering
+{isLoading && <Spinner />}
+{error ? <ErrorMessage error={error} /> : <Content />}
+
+// Lists with keys
+{items.map(item => <Item key={item.id} data={item} />)}
+```
+
+## Error Handling
+```typescript
+// Async functions with try-catch
+const fetchData = async (id: string): Promise<Data> => {
+  try {
+    const response = await api.get(`/data/${id}`);
+    return response.data;
+  } catch (error) {
+    console.error('Failed to fetch data:', error);
+    throw error;
+  }
+};
+```
+
+## Anti-Patterns (FORBIDDEN)
+```typescript
+// NEVER disable ESLint without justification
+// eslint-disable-next-line
+
+// NEVER mutate state directly
+state.items.push(newItem); // Wrong
+setItems(prev => [...prev, newItem]); // Correct
+
+// NEVER use magic numbers/strings
+setTimeout(() => {}, 5000); // Wrong
+const DEBOUNCE_DELAY = 5000; // Correct
+```
+
+## Quality Workflow
+
+**Before Committing:**
+1. `npm run lint` - 0 errors (and 0 warnings when possible)
+2. `npm run build` - Build must succeed (TypeScript + Vite)
+
+## Zero Tolerance Policy
+- ESLint errors: MUST be 0
+- ESLint warnings: MUST be 0 (fix when convenient)
+- TypeScript errors: MUST be 0 (enforced by `npm run build`)