@salesforce/templates 66.1.1 → 66.2.1

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "base-react-app",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "graphql:codegen": "graphql-codegen",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs"
+  },
+  "dependencies": {
+    "@salesforce/sdk-data": "^1.11.2",
+    "@salesforce/webapp-experimental": "*",
+    "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-form": "^1.28.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.10.1",
+    "shadcn": "^3.8.5",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript": "^5.0.6",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "@graphql-eslint/eslint-plugin": "^4.1.0",
+    "@graphql-tools/utils": "^11.0.0",
+    "@playwright/test": "^1.49.0",
+    "@salesforce/vite-plugin-webapp-experimental": "*",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/ui": "^4.0.17",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "jsdom": "^25.0.1",
+    "serve": "^14.2.5",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-graphql-codegen": "^3.6.3",
+    "vitest": "^4.0.17"
+  }
+}

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5175;
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: `http://localhost:${E2E_PORT}`,
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    // Serve built dist/ with static server so e2e works in CI without SF org (vite preview runs plugin and can fail)
+    command: `npx serve dist -l ${E2E_PORT}`,
+    url: `http://localhost:${E2E_PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: process.env.CI ? 120_000 : 60_000,
+  },
+});

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/scripts/get-graphql-schema.mjs

@@ -0,0 +1,68 @@
+/**
+ * Downloads the full GraphQL schema from a connected Salesforce org via introspection.
+ *
+ * Usage:
+ *   npm run graphql:schema
+ *   node scripts/get-graphql-schema.mjs [output-path]
+ *
+ * The default output path matches the schema location expected by codegen.yml
+ * and .graphqlrc.yml so that codegen and IDE tooling resolve it automatically.
+ */
+import { writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { getOrgInfo } from '@salesforce/webapp-experimental/app';
+import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
+import { pruneSchema } from '@graphql-tools/utils';
+
+const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+
+async function executeSalesforceGraphQLQuery(query, variables, operationName) {
+  const {
+    rawInstanceUrl: instanceUrl,
+    apiVersion,
+    accessToken,
+  } = await getOrgInfo();
+
+  const targetUrl = `${instanceUrl}/services/data/v${apiVersion}/graphql`;
+
+  console.log(`Executing introspection query against ${targetUrl}`);
+  const response = await fetch(targetUrl, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+      'X-Chatter-Entity-Encoding': 'false',
+    },
+    body: JSON.stringify({ query, variables, operationName }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Salesforce GraphQL request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+
+  return response.json();
+}
+
+try {
+  const outputPath = resolve(process.argv[2] || DEFAULT_SCHEMA_PATH);
+
+  const introspectionResult = await executeSalesforceGraphQLQuery(
+    getIntrospectionQuery(),
+    {},
+    'IntrospectionQuery'
+  );
+
+  const schema = buildClientSchema(introspectionResult.data);
+  const prunedSchema = pruneSchema(schema);
+  const sdl = printSchema(prunedSchema);
+
+  writeFileSync(outputPath, sdl);
+
+  console.log(`Schema saved to ${outputPath}`);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,23 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (/assets/...)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="[^"]*\/assets\//g, '$1="/assets/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /about, /non-existent-route etc. serve index.html
+writeFileSync(
+  join(distDir, 'serve.json'),
+  JSON.stringify({
+    rewrites: [{ source: '**', destination: '/index.html' }],
+  })
+);

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/api/graphql-operations-types.ts

@@ -0,0 +1,116 @@
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = {
+  [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+  [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+  [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<
+  T extends { [key: string]: unknown },
+  K extends keyof T,
+> = { [_ in K]?: never };
+export type Incremental<T> =
+  | T
+  | {
+      [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+    };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: { input: string; output: string };
+  String: { input: string; output: string };
+  Boolean: { input: boolean; output: boolean };
+  Int: { input: number; output: number };
+  Float: { input: number; output: number };
+  Base64: { input: string; output: string };
+  Currency: { input: number | string; output: number };
+  Date: { input: string; output: string };
+  DateTime: { input: string; output: string };
+  Double: { input: number | string; output: number };
+  Email: { input: string; output: string };
+  EncryptedString: { input: string; output: string };
+  /** Can be set to an ID or a Reference to the result of another mutation operation. */
+  IdOrRef: { input: string; output: string };
+  Latitude: { input: number | string; output: number };
+  /** A 64-bit signed integer */
+  Long: { input: number; output: number };
+  LongTextArea: { input: string; output: string };
+  Longitude: { input: number | string; output: number };
+  MultiPicklist: { input: string; output: string };
+  Percent: { input: number | string; output: number };
+  PhoneNumber: { input: string; output: string };
+  Picklist: { input: string; output: string };
+  RichTextArea: { input: string; output: string };
+  TextArea: { input: string; output: string };
+  Time: { input: string; output: string };
+  Url: { input: string; output: string };
+};
+
+export enum DataType {
+  Address = 'ADDRESS',
+  Anytype = 'ANYTYPE',
+  Base64 = 'BASE64',
+  Boolean = 'BOOLEAN',
+  Combobox = 'COMBOBOX',
+  Complexvalue = 'COMPLEXVALUE',
+  Currency = 'CURRENCY',
+  Date = 'DATE',
+  Datetime = 'DATETIME',
+  Double = 'DOUBLE',
+  Email = 'EMAIL',
+  Encryptedstring = 'ENCRYPTEDSTRING',
+  Int = 'INT',
+  Json = 'JSON',
+  Junctionidlist = 'JUNCTIONIDLIST',
+  Location = 'LOCATION',
+  Long = 'LONG',
+  Multipicklist = 'MULTIPICKLIST',
+  Percent = 'PERCENT',
+  Phone = 'PHONE',
+  Picklist = 'PICKLIST',
+  Reference = 'REFERENCE',
+  String = 'STRING',
+  Textarea = 'TEXTAREA',
+  Time = 'TIME',
+  Url = 'URL',
+}
+
+export enum FieldExtraTypeInfo {
+  ExternalLookup = 'EXTERNAL_LOOKUP',
+  ImageUrl = 'IMAGE_URL',
+  IndirectLookup = 'INDIRECT_LOOKUP',
+  Personname = 'PERSONNAME',
+  Plaintextarea = 'PLAINTEXTAREA',
+  Richtextarea = 'RICHTEXTAREA',
+  SwitchablePersonname = 'SWITCHABLE_PERSONNAME',
+}
+
+export enum ResultOrder {
+  Asc = 'ASC',
+  Desc = 'DESC',
+}
+
+export type GetHighRevenueAccountsQueryVariables = Exact<{
+  minRevenue?: InputMaybe<Scalars['Currency']['input']>;
+}>;
+
+export type GetHighRevenueAccountsQuery = {
+  uiapi: {
+    query: {
+      Account?: {
+        edges?: Array<{
+          node?: {
+            Id: string;
+            Name?: { value?: string | null } | null;
+            AnnualRevenue?: { value?: number | null } | null;
+            Industry?: { value?: string | null } | null;
+            Website?: { value?: string | null } | null;
+          } | null;
+        } | null> | null;
+      } | null;
+    };
+  };
+};

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/api/utils/accounts.ts

@@ -0,0 +1,33 @@
+import { executeGraphQL } from '@salesforce/webapp-experimental/api';
+import HIGH_REVENUE_ACCOUNTS_QUERY from './query/highRevenueAccountsQuery.graphql?raw';
+import type {
+  GetHighRevenueAccountsQuery,
+  GetHighRevenueAccountsQueryVariables,
+} from '../graphql-operations-types';
+
+type AccountNode = NonNullable<
+  NonNullable<
+    NonNullable<
+      NonNullable<
+        GetHighRevenueAccountsQuery['uiapi']['query']['Account']
+      >['edges']
+    >[number]
+  >['node']
+>;
+
+/**
+ * Fetch accounts with annual revenue greater than the specified amount
+ *
+ * @param minRevenue - Minimum annual revenue threshold (default: 100000)
+ * @returns Array of accounts matching the criteria
+ */
+export async function getHighRevenueAccounts(
+  variables: GetHighRevenueAccountsQueryVariables
+): Promise<(AccountNode | null | undefined)[]> {
+  const response = await executeGraphQL<GetHighRevenueAccountsQuery>(
+    HIGH_REVENUE_ACCOUNTS_QUERY,
+    variables
+  );
+
+  return response.uiapi?.query?.Account?.edges?.map(edge => edge?.node) || [];
+}

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/api/utils/query/highRevenueAccountsQuery.graphql

@@ -0,0 +1,29 @@
+query GetHighRevenueAccounts($minRevenue: Currency) {
+  uiapi {
+    query {
+      Account(
+        where: { AnnualRevenue: { gt: $minRevenue } }
+        orderBy: { AnnualRevenue: { order: DESC } }
+        first: 50
+      ) {
+        edges {
+          node {
+            Id
+            Name {
+              value
+            }
+            AnnualRevenue {
+              value
+            }
+            Industry {
+              value
+            }
+            Website {
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/app.tsx

@@ -0,0 +1,13 @@
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { routes } from "./routes";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/global.css";
+
+const router = createBrowserRouter(routes);
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<RouterProvider router={router} />
+	</StrictMode>,
+);

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/appLayout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router';
+import NavigationMenu from './navigationMenu';
+
+export default function AppLayout() {
+  return (
+    <>
+      <NavigationMenu />
+      <Outlet />
+    </>
+  );
+}

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/assets/icons/book.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4935 0.000188828L13.9735 0.533522V10.5069L13.4935 11.0402H8.21348L7.36015 11.8935H6.61348L5.76015 11.0402H0.48015L0.000149727 10.5069V0.533522L0.48015 0.000188828H5.97348L6.34682 0.160189L6.98682 0.800188L7.62682 0.160189L8.00015 0.000188828H13.4935ZM6.50682 10.3469V1.76019L5.76015 1.01352H1.01348V10.0269H5.97348L6.29348 10.1869L6.50682 10.3469ZM13.0135 10.0269V1.01352H8.21348L7.52015 1.70685V10.2935L7.62682 10.1869L8.00015 10.0269H13.0135ZM5.01348 3.04019V4.00019H1.97348V3.04019H5.01348ZM5.01348 7.04019V8.00019H1.97348V7.04019H5.01348ZM1.97348 5.01352V6.02686H5.01348V5.01352H1.97348ZM12.0001 3.04019V4.00019H9.01348V3.04019H12.0001ZM9.01348 5.01352V6.02686H12.0001V5.01352H9.01348ZM9.01348 7.04019V8.00019H12.0001V7.04019H9.01348Z" fill="#0250D9"/>
+</svg>

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/assets/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5L6.25 3.75H13.0175L17.5 8.2325V17.5L16.25 18.75H6.25L5 17.5V5ZM16.25 8.75L12.5 5H6.25V17.5H16.25V8.75Z" fill="#2E2E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 1.25L2.5 2.5V15L3.75 16.25V2.5H11.7675L10.5175 1.25H3.75Z" fill="#2E2E2E"/>
+</svg>

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/assets/icons/rocket.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4935 0.000149727L13.9735 0.480149C13.9735 2.15126 13.5646 3.80459 12.7468 5.44015C12.0713 6.7557 11.1468 8.05348 9.97348 9.33348V13.4935L9.49348 13.9735H6.50682L6.13348 13.8668L0.16015 7.84015L0.000149727 7.46682V4.48015L0.48015 4.00015H4.64015C5.92015 2.82682 7.21793 1.90237 8.53348 1.22682C10.169 0.409039 11.8224 0.000149727 13.4935 0.000149727ZM1.01348 4.96015V7.30682L1.38682 7.68015C2.06237 6.72015 2.80904 5.81348 3.62682 4.96015H1.01348ZM6.66682 12.9601H8.96015V10.3468C8.14237 11.1646 7.25348 11.9113 6.29348 12.5868L6.66682 12.9601ZM5.54682 11.8401C6.40015 11.2713 7.23571 10.6135 8.05348 9.86682C9.33348 8.62237 10.3824 7.36015 11.2002 6.08015C12.2668 4.37348 12.8535 2.68459 12.9601 1.01348C11.289 1.12015 9.60015 1.70682 7.89348 2.77348C6.61348 3.59126 5.35126 4.64015 4.10682 5.92015C3.36015 6.73793 2.70237 7.57348 2.13348 8.42682L5.54682 11.8401ZM2.98682 13.9735H0.000149727V10.9868H1.01348V12.9601H2.98682V13.9735ZM9.76015 6.29348C9.51126 6.64904 9.17348 6.88015 8.74682 6.98682C8.35571 7.05793 7.98237 6.98682 7.62682 6.77348C7.30682 6.52459 7.09348 6.20459 6.98682 5.81348C6.91571 5.38682 6.98682 5.01348 7.20015 4.69348C7.44904 4.33793 7.76904 4.12459 8.16015 4.05348C8.58682 3.94682 8.96015 4.01793 9.28015 4.26682C9.63571 4.48015 9.84904 4.80015 9.92015 5.22682C10.0268 5.61793 9.97348 5.97348 9.76015 6.29348Z" fill="#066AFE"/>
+</svg>

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/assets/icons/star.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70684 0.533125C5.8135 0.319791 5.9735 0.177569 6.18684 0.106458C6.40017 0.0353467 6.6135 0.0353467 6.82684 0.106458C7.04017 0.177569 7.20017 0.319791 7.30684 0.533125L8.8535 3.62646L12.2135 4.10646C12.4624 4.14201 12.6579 4.26646 12.8002 4.47979C12.9424 4.65757 13.0135 4.8709 13.0135 5.11979C13.0135 5.33312 12.9246 5.5109 12.7468 5.65312L10.2935 8.05312L10.8802 11.4665C10.9157 11.6798 10.8624 11.8931 10.7202 12.1065C10.5779 12.2842 10.4002 12.4087 10.1868 12.4798C9.9735 12.5509 9.76017 12.5331 9.54684 12.4265L6.50684 10.8265L3.46684 12.4265C3.2535 12.5331 3.04017 12.5509 2.82684 12.4798C2.6135 12.4087 2.43572 12.2842 2.2935 12.1065C2.15128 11.8931 2.09795 11.6798 2.1335 11.4665L2.72017 8.05312L0.266836 5.65312C0.0890582 5.5109 0.000169277 5.33312 0.000169277 5.11979C0.000169277 4.8709 0.0712804 4.65757 0.213503 4.47979C0.355725 4.26646 0.55128 4.14201 0.800169 4.10646L4.16017 3.62646L5.70684 0.533125ZM6.50684 1.17312L5.06684 4.10646C4.92461 4.3909 4.6935 4.56868 4.3735 4.63979L1.12017 5.06646L3.46684 7.35979C3.71572 7.60868 3.80461 7.87535 3.7335 8.15979L3.20017 11.4131L6.08017 9.86646C6.36461 9.72424 6.64906 9.72424 6.9335 9.86646L9.8135 11.4131L9.28017 8.15979C9.24461 7.87535 9.3335 7.60868 9.54684 7.35979L11.8935 5.06646L8.64017 4.63979C8.32017 4.56868 8.08906 4.3909 7.94684 4.10646L6.50684 1.17312Z" fill="#066AFE"/>
+</svg>