@salesforce/templates 66.1.1 → 66.2.0

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/styles/global.css

@@ -0,0 +1,135 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/src/utils/helpers.ts

@@ -0,0 +1,121 @@
+/**
+ * MAINTAINABILITY: Robust error extraction.
+ * Handles strings, objects, and standard Error instances.
+ *
+ * @param err - The error object (unknown type)
+ * @param fallback - Fallback message if error doesn't have a message property
+ * @returns The error message string
+ */
+export function getErrorMessage(err: unknown, fallback: string): string {
+	if (err instanceof Error) return err.message;
+	if (typeof err === "string") return err;
+	// Check if it's an object with a message property
+	if (typeof err === "object" && err !== null && "message" in err) {
+		return String((err as { message: unknown }).message);
+	}
+	return fallback;
+}
+
+/**
+ * [Dev Note] Helper to parse the fetch Response.
+ * It handles the distinction between success (JSON) and failure (throwing Error).
+ */
+export async function handleApiResponse<T = unknown>(
+	response: Response,
+	fallbackError: string,
+): Promise<T> {
+	// 1. Robustness: Handle 204 No Content gracefully
+	if (response.status === 204) {
+		return {} as T;
+	}
+
+	let data: any = null;
+
+	const contentType = response.headers.get("content-type");
+	if (contentType?.includes("application/json")) {
+		data = await response.json();
+	} else {
+		// [Dev Note] If Salesforce returns HTML (e.g. standard error page),
+		// we consume text to avoid parsing errors.
+		await response.text();
+	}
+
+	if (!response.ok) {
+		// [Dev Note] Throwing here allows the calling component to catch and
+		// display the error via getErrorMessage()
+		throw new Error(parseApiResponseError(data, fallbackError));
+	}
+
+	return data as T;
+}
+
+/**
+ * UI API Record response structure.
+ */
+export type RecordResponse = {
+	fields: Record<
+		string,
+		{
+			value: string;
+		}
+	>;
+};
+
+/**
+ * [Dev Note] GraphQL can return a complex nested structure.
+ * This helper flattens it to a simple object for easier form binding.
+ *
+ * @param data - Extracted payload from the GraphQL response.
+ * @param fallbackError - Fallback error message if data is null/undefined or not an object.
+ * @throws {Error} If data is not valid.
+ * @returns Flattened object with values mapped directly to the fields.
+ */
+export function flattenGraphQLRecord<T>(
+	data: any,
+	fallbackError: string = "An unknown error occurred",
+): T {
+	if (!data || typeof data !== "object") {
+		throw new Error(fallbackError);
+	}
+
+	return Object.fromEntries(
+		Object.entries(data).map(([key, field]) => [
+			key,
+			field !== null && typeof field === "object" && "value" in field
+				? (field as { value: unknown }).value
+				: (field ?? null),
+		]),
+	) as T;
+}
+
+/**
+ * [Dev Note] Salesforce APIs may return errors as an array or a single object.
+ * This helper standardizes the extraction of the error message string.
+ *
+ * @param data - The response data.
+ * @param fallbackError - Fallback error message if response doesn't have a message property
+ * @returns The error message string
+ */
+function parseApiResponseError(
+	data: any,
+	fallbackError: string = "An unknown error occurred",
+): string {
+	if (data?.message) {
+		return data.message;
+	}
+	if (data?.error) {
+		return data.error;
+	}
+	if (data?.errors && Array.isArray(data.errors) && data.errors.length > 0) {
+		return data.errors.join(" ") || fallbackError;
+	}
+	if (Array.isArray(data) && data.length > 0) {
+		return (
+			data
+				.map((e) => e?.message)
+				.filter(Boolean)
+				.join(" ") || fallbackError
+		);
+	}
+	return fallbackError;
+}

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/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-b2x/force-app/main/default/webapplications/appreacttemplateb2x/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-b2x/force-app/main/default/webapplications/appreacttemplateb2x/vite-env.d.ts

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

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/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-b2x/force-app/main/default/webapplications/appreacttemplateb2x/vitest-env.d.ts

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

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/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-b2x/force-app/main/default/webapplications/appreacttemplateb2x/vitest.setup.ts

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

package/lib/templates/project/react-b2x/force-app/main/default/webapplications/appreacttemplateb2x/webapplication.json

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

package/lib/templates/project/react-b2x/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-b2x/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-b2x/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-b2x/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-b2x/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/webapplication/reactbasic/.graphqlrc.yml

@@ -0,0 +1,2 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,js,ts,jsx,tsx}'

package/lib/templates/webapplication/reactbasic/build/vite.config.js

@@ -4,10 +4,29 @@ 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(function (_a) {
     var mode = _a.mode;
     return {
-        plugins: [tailwindcss(), react(), salesforce()],
+        // 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'),

package/lib/templates/webapplication/reactbasic/codegen.yml

@@ -0,0 +1,94 @@
+schema: '../../../../../schema.graphql'
+documents: 'src/**/*.{graphql,ts,tsx}'
+generates:
+  src/api/graphql-operations-types.ts:
+    plugins:
+      - 'graphql-codegen-typescript-operation-types'
+      - 'typescript-operations'
+    config:
+      onlyOperationTypes: true
+      skipTypename: true
+      preResolveTypes: true
+      scalars:
+        # String-serialized scalars
+        JSON:
+          input: 'string'
+          output: 'string'
+        Date:
+          input: 'string'
+          output: 'string'
+        DateTime:
+          input: 'string'
+          output: 'string'
+        Time:
+          input: 'string'
+          output: 'string'
+        Email:
+          input: 'string'
+          output: 'string'
+        Url:
+          input: 'string'
+          output: 'string'
+        PhoneNumber:
+          input: 'string'
+          output: 'string'
+        Picklist:
+          input: 'string'
+          output: 'string'
+        MultiPicklist:
+          input: 'string'
+          output: 'string'
+        TextArea:
+          input: 'string'
+          output: 'string'
+        LongTextArea:
+          input: 'string'
+          output: 'string'
+        RichTextArea:
+          input: 'string'
+          output: 'string'
+        EncryptedString:
+          input: 'string'
+          output: 'string'
+        Base64:
+          input: 'string'
+          output: 'string'
+        IdOrRef:
+          input: 'string'
+          output: 'string'
+        # BigDecimal-serialized scalars (accepts number or string, returns number)
+        Currency:
+          input: 'number | string'
+          output: 'number'
+        BigDecimal:
+          input: 'number | string'
+          output: 'number'
+        Double:
+          input: 'number | string'
+          output: 'number'
+        Percent:
+          input: 'number | string'
+          output: 'number'
+        Longitude:
+          input: 'number | string'
+          output: 'number'
+        Latitude:
+          input: 'number | string'
+          output: 'number'
+        # Integer-like scalars
+        Long:
+          input: 'number'
+          output: 'number'
+        BigInteger:
+          input: 'number'
+          output: 'number'
+        Short:
+          input: 'number'
+          output: 'number'
+        Byte:
+          input: 'number'
+          output: 'number'
+        Char:
+          input: 'number'
+          output: 'number'
+overwrite: true

package/lib/templates/webapplication/reactbasic/e2e/app.spec.ts

@@ -9,13 +9,6 @@ test.describe('base-react-app', () => {
     ).toBeVisible();
   });
 
-  test('about page loads', async ({ page }) => {
-    await page.goto('/about');
-    await expect(page).toHaveURL(/\/about/);
-    await expect(page.getByRole('heading', { name: 'About' })).toBeVisible();
-    await expect(page.getByText('This is the about page.')).toBeVisible();
-  });
-
   test('not found route shows 404', async ({ page }) => {
     await page.goto('/non-existent-route');
     await expect(page.getByRole('heading', { name: '404' })).toBeVisible();