@salesforce/ui-bundle-template-feature-react-authentication 1.117.2

package/dist/force-app/main/default/uiBundles/feature-react-authentication/README.md

@@ -0,0 +1,75 @@
+# Base React App
+
+Base React App is a template application that demonstrates how to build a React UI Bundle on the Salesforce platform with Vite, TypeScript, Tailwind, shadcn/ui, and the Salesforce UI Bundle SDK. It provides a minimal shell (home, 404), routing, and GraphQL codegen support so feature apps can extend it via the patches pipeline.
+
+This UI Bundle lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+
+## Table of contents
+
+- [Run (development)](#run-development)
+- [Build](#build)
+- [Deploy](#deploy)
+- [Test](#test)
+
+## Run (development)
+
+From the UI Bundle directory (`force-app/main/default/uiBundles/base-react-app`):
+
+```bash
+npm install
+npm run dev
+```
+
+This starts the Vite dev server (e.g. http://localhost:5173). Use `npm run dev:design` to run in design mode.
+
+## Build
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run build
+```
+
+The production build is written to `dist/` inside the UI Bundle folder. Deploy using the steps in [Deploy](#deploy).
+
+## Deploy
+
+From the **SFDX project root** (the directory that contains `force-app/`):
+
+1. Build the UI Bundle:
+
+   ```bash
+   cd force-app/main/default/uiBundles/base-react-app && npm install && npm run build && cd -
+   ```
+
+2. Deploy the UI Bundle only:
+
+   ```bash
+   sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
+   ```
+
+   Or deploy all metadata:
+
+   ```bash
+   sf project deploy start --source-dir force-app --target-org <alias>
+   ```
+
+   Replace `<alias>` with your target org alias.
+
+## Test
+
+From the UI Bundle directory:
+
+```bash
+npm install
+npm run test
+```
+
+This runs the unit test suite (Vitest). For end-to-end tests from the **base-react-app package root**:
+
+```bash
+npm run test:e2e
+```
+
+This installs dependencies, builds with E2E asset rewrites, and runs Playwright. Ensure Chromium is installed (`npx playwright install chromium` if needed).

package/dist/force-app/main/default/uiBundles/feature-react-authentication/codegen.yml

@@ -0,0 +1,95 @@
+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
+ignoreNoDocuments: true

package/dist/force-app/main/default/uiBundles/feature-react-authentication/components.json

@@ -0,0 +1,18 @@
+{
+  "style": "new-york",
+  "rsc": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/e2e/app.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('base-react-app', () => {
+  test('home page loads and shows welcome content', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByRole('heading', { name: 'Home' })).toBeVisible();
+    await expect(
+      page.getByText('Welcome to your React application.')
+    ).toBeVisible();
+  });
+
+  test('not found route shows 404', async ({ page }) => {
+    await page.goto('/non-existent-route');
+    await expect(page.getByRole('heading', { name: '404' })).toBeVisible();
+    await expect(page.getByText('Page not found')).toBeVisible();
+  });
+});

package/dist/force-app/main/default/uiBundles/feature-react-authentication/eslint.config.js

@@ -0,0 +1,169 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import graphqlPlugin from '@graphql-eslint/eslint-plugin';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const schemaPath = resolve(__dirname, '../../../../../schema.graphql');
+const schemaExists = existsSync(schemaPath);
+
+const config = [
+  // Global ignores
+  {
+    ignores: [
+      'build/**/*',
+      'dist/**/*',
+      'coverage/**/*',
+      'src/api/graphql-operations-types.ts',
+    ],
+  },
+  // Config files and build tools (first to avoid inheritance)
+  {
+    files: ['*.config.{js,ts}', 'vite.config.ts'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.node,
+        __dirname: 'readonly',
+        process: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+  // Main TypeScript/React files
+  {
+    files: ['**/*.{ts,tsx}'],
+    ignores: [
+      'coverage',
+      'dist',
+      'node_modules',
+      'build',
+      '*.config.{js,ts}',
+      'vite.config.ts',
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parser: tsparser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        project: './tsconfig.json',
+      },
+      globals: {
+        ...globals.browser,
+        JSX: 'readonly',
+        React: 'readonly',
+        process: 'readonly',
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      '@typescript-eslint': tseslint,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/jsx-no-comment-textnodes': 'off',
+      'react/no-unescaped-entities': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'react-hooks/set-state-in-effect': 'warn',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  // Test files
+  {
+    files: [
+      '**/*.test.{ts,tsx}',
+      '**/test/**/*.{ts,tsx}',
+      'src/test/**/*.{ts,tsx}',
+    ],
+    languageOptions: {
+      parser: tsparser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        global: 'writable',
+        JSX: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+];
+
+// Only add GraphQL rules when schema exists (e.g. after graphql:schema).
+// In CI or when schema is not checked in, skip so lint succeeds.
+if (schemaExists) {
+  config.push(
+    {
+      files: ['**/*.{ts,tsx}'],
+      processor: graphqlPlugin.processor,
+    },
+    {
+      files: ['**/*.graphql'],
+      languageOptions: {
+        parser: graphqlPlugin.parser,
+        parserOptions: {
+          graphQLConfig: {
+            schema: '../../../../../schema.graphql',
+          },
+        },
+      },
+      plugins: {
+        '@graphql-eslint': graphqlPlugin,
+      },
+      rules: {
+        '@graphql-eslint/no-anonymous-operations': 'error',
+        '@graphql-eslint/no-duplicate-fields': 'error',
+        '@graphql-eslint/known-fragment-names': 'error',
+        '@graphql-eslint/no-undefined-variables': 'error',
+        '@graphql-eslint/no-unused-variables': 'error',
+      },
+    }
+  );
+}
+
+export default config;

package/dist/force-app/main/default/uiBundles/feature-react-authentication/feature-react-authentication.uibundle-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <masterLabel>feature-react-authentication</masterLabel>
+    <description>A Salesforce UI Bundle.</description>
+    <isActive>true</isActive>
+    <version>1</version>
+</UIBundle>

package/dist/force-app/main/default/uiBundles/feature-react-authentication/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Welcome to React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/app.tsx"></script>
+  </body>
+</html>

package/dist/force-app/main/default/uiBundles/feature-react-authentication/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "base-react-app",
+  "private": true,
+  "version": "1.59.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:design": "vite --mode design",
+    "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": "file:../../../../../../../../../sdk/sdk-data",
+    "@salesforce/ui-bundle": "file:../../../../../../../../../ui-bundle",
+    "@tailwindcss/vite": "^4.1.17",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.10.1",
+    "shadcn": "^3.8.5",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "@tanstack/react-form": "^1.27.7",
+    "zod": "^4.3.5"
+  },
+  "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-ui-bundle": "file:../../../../../../../../../vite-plugin-ui-bundle",
+    "@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/dist/force-app/main/default/uiBundles/feature-react-authentication/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/dist/force-app/main/default/uiBundles/feature-react-authentication/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/ui-bundle/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/dist/force-app/main/default/uiBundles/feature-react-authentication/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/dist/force-app/main/default/uiBundles/feature-react-authentication/src/api/graphqlClient.ts

@@ -0,0 +1,25 @@
+/**
+ * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ */
+import { createDataSDK } from '@salesforce/sdk-data';
+
+export async function executeGraphQL<TData, TVariables>(
+  query: string,
+  variables?: TVariables
+): Promise<TData> {
+  const data = await createDataSDK();
+  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
+  const response = await data.graphql?.<TData, TVariables>(query, variables);
+
+  if (!response) {
+    throw new Error('GraphQL response is undefined');
+  }
+
+  if (response?.errors?.length) {
+    const msg = response.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
+  }
+
+  return response.data;
+}

package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/app.tsx

@@ -0,0 +1,16 @@
+import { createBrowserRouter, RouterProvider } from "react-router";
+import { routes } from "./routes";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/global.css";
+
+// Normalize basename: strip trailing slash so it matches URLs like /lwr/application/ai/c-app
+const rawBasePath = (globalThis as any).SFDC_ENV?.basePath;
+const basename = typeof rawBasePath === "string" ? rawBasePath.replace(/\/+$/, "") : undefined;
+const router = createBrowserRouter(routes, { basename });
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<RouterProvider router={router} />
+	</StrictMode>,
+);