From 0d69b918da0c43dc940f19c8c397a5de28042d4f Mon Sep 17 00:00:00 2001 From: k-j-kim <17989954+k-j-kim@users.noreply.github.com> Date: Tue, 31 Mar 2026 20:28:14 -0700 Subject: [PATCH 1/3] fix: updating ui bundles to the latest @W-21814993@ (#156) * fix: updating ui bundles to the latest * fix: updating image url --- package-lock.json | 45 +- package.json | 4 +- .../.version | 2 +- .../AGENT.md | 111 +++- .../CHANGELOG.md | 78 +++ .../README.md | 230 +++++++-- .../MaintenanceRequestTriggerHandler_Test.cls | 10 +- .../default/data/Maintenance_Request__c.json | 16 +- .../main/default/data/Property_Image__c.json | 2 +- .../fields/Priority__c.field-meta.xml | 4 +- .../propertymanagementapp/package.json | 6 +- .../AgentforceConversationClient.tsx | 33 +- .../MaintenanceDetailsModal.tsx | 6 +- .../MaintenanceRequestCard.tsx | 6 +- .../src/components/ui/avatar.tsx | 109 ++++ .../src/components/ui/dropdown-menu.tsx | 257 ++++++++++ .../src/components/ui/index.ts | 25 + .../object-search/utils/filterUtils.ts | 11 +- .../src/pages/ApplicationSearch.tsx | 35 +- .../src/pages/MaintenanceRequestSearch.tsx | 15 +- .../src/pages/MaintenanceWorkerSearch.tsx | 42 +- .../src/pages/PropertySearch.tsx | 3 +- .../package-lock.json | 4 +- .../package.json | 4 +- .../scripts/gitignore-templates.json | 4 + .../scripts/{setup-cli.mjs => org-setup.mjs} | 51 +- .../scripts/sf-project-setup.mjs | 41 +- .../.version | 2 +- .../AGENT.md | 111 +++- .../CHANGELOG.md | 78 +++ .../README.md | 477 ++++++++++++++++-- .../MaintenanceRequestTriggerHandler_Test.cls | 10 +- .../default/data/Maintenance_Request__c.json | 16 +- .../main/default/data/Property_Image__c.json | 2 +- .../fields/Priority__c.field-meta.xml | 4 +- .../uiBundles/propertyrentalapp/package.json | 6 +- .../propertyrentalapp/src/appLayout.tsx | 23 +- .../src/components/layout/TopBar.tsx | 142 ++---- .../src/components/layout/VerticalNav.tsx | 14 +- .../src/components/ui/avatar.tsx | 109 ++++ .../src/components/ui/dropdown-menu.tsx | 257 ++++++++++ .../src/components/ui/index.ts | 25 + .../src/context/TenantAccessContext.tsx | 55 ++ .../authentication/layouts/TenantRoute.tsx | 6 +- .../features/authentication/menu/AuthMenu.tsx | 93 ++++ .../object-search/utils/filterUtils.ts | 11 +- .../src/hooks/useTenantAccess.ts | 38 -- .../src/pages/Maintenance.tsx | 4 +- .../propertyrentalapp/src/routes.tsx | 4 +- .../package-lock.json | 4 +- .../package.json | 4 +- .../scripts/gitignore-templates.json | 4 + .../scripts/{setup-cli.mjs => org-setup.mjs} | 51 +- .../scripts/sf-project-setup.mjs | 41 +- 54 files changed, 2316 insertions(+), 429 deletions(-) create mode 100644 samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/avatar.tsx create mode 100644 samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/dropdown-menu.tsx create mode 100644 samples/ui-bundle-template-app-react-sample-b2e/scripts/gitignore-templates.json rename samples/ui-bundle-template-app-react-sample-b2e/scripts/{setup-cli.mjs => org-setup.mjs} (92%) create mode 100644 samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/avatar.tsx create mode 100644 samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/dropdown-menu.tsx create mode 100644 samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx create mode 100644 samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx delete mode 100644 samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useTenantAccess.ts create mode 100644 samples/ui-bundle-template-app-react-sample-b2x/scripts/gitignore-templates.json rename samples/ui-bundle-template-app-react-sample-b2x/scripts/{setup-cli.mjs => org-setup.mjs} (92%) diff --git a/package-lock.json b/package-lock.json index c2e9536..994befd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@salesforce/afv-skills", - "version": "1.5.1", + "version": "1.6.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salesforce/afv-skills", - "version": "1.5.1", + "version": "1.6.4", "license": "CC-BY-NC-4.0", "devDependencies": { - "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.118.1", - "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.118.1", + "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.119.5", + "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.119.5", "@salesforce/webapp-template-app-react-sample-b2e-experimental": "^1.117.1", "@salesforce/webapp-template-app-react-sample-b2x-experimental": "^1.117.1", "@types/js-yaml": "^4.0.9", @@ -690,22 +690,22 @@ } }, "node_modules/@salesforce/sdk-core": { - "version": "1.118.1", - "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.118.1.tgz", - "integrity": "sha512-XrIOW3ZbsRMyGB2ag2pLftZ3/hYoMnbnjD6OyA+fl3326IR0/jbBYdBh/oLL63c7NhriBkNo54IdeSt5wrzxmg==", + "version": "1.119.5", + "resolved": "https://registry.npmjs.org/@salesforce/sdk-core/-/sdk-core-1.119.5.tgz", + "integrity": "sha512-dv5VMPYSBeBwc7Zxp/bGILKTnwg8rxWVsqB2iDvW1o7/vrQF/L7yO1JaH5fhvB2u5fZvpdI0AFO6xjDzXZXK9g==", "dev": true, "license": "SEE LICENSE IN LICENSE.txt" }, "node_modules/@salesforce/sdk-data": { - "version": "1.118.1", - "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.118.1.tgz", - "integrity": "sha512-+Sv5BEwoM/oIbWyNM0SPIFBOfRENrIotTCtMy2GtjIQxI9t5gxmlm3Cmh8OmKAF0DL5D8gqKp4UR5uX1mctFnQ==", + "version": "1.119.5", + "resolved": "https://registry.npmjs.org/@salesforce/sdk-data/-/sdk-data-1.119.5.tgz", + "integrity": "sha512-DTB4Fe3p/kxZZ9WDxVfEKkrYOA1EoVnBbbdLnS6CLsrH9mCQKSSoGkYnzJm3Si50Q/Dm9ViNFbcBE5HG3qim3g==", "dev": true, "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@conduit-client/service-fetch-network": "3.17.0", "@conduit-client/utils": "3.17.0", - "@salesforce/sdk-core": "^1.118.1" + "@salesforce/sdk-core": "^1.119.5" } }, "node_modules/@salesforce/ts-types": { @@ -719,15 +719,14 @@ } }, "node_modules/@salesforce/ui-bundle": { - "version": "1.118.1", - "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle/-/ui-bundle-1.118.1.tgz", - "integrity": "sha512-PGjhTE9PGTQHuMFdwGWKvCZDpbKvYWBcEhQtf2FR9g/OTRvvwyk1Fr8Krd+3MS5qX/tsLrzRMDWOmc/N/RGJMQ==", + "version": "1.119.5", + "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle/-/ui-bundle-1.119.5.tgz", + "integrity": "sha512-ZrIXpdC4WNXxjh+DMo5gWyyKrJchSQFAstZFcl2Zh4WCtKxJNUK1wEdiPuNviNk0ReMAEZ1lVQOONU230J0aQg==", "dev": true, "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { "@salesforce/core": "^8.23.4", - "@salesforce/sdk-data": "^1.118.1", - "axios": "^1.7.7", + "@salesforce/sdk-data": "^1.119.5", "micromatch": "^4.0.8", "path-to-regexp": "^8.3.0" }, @@ -736,20 +735,20 @@ } }, "node_modules/@salesforce/ui-bundle-template-app-react-sample-b2e": { - "version": "1.118.1", - "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle-template-app-react-sample-b2e/-/ui-bundle-template-app-react-sample-b2e-1.118.1.tgz", - "integrity": "sha512-LGPEMs+xjk5K5wnGSh76EsgvPgEa3dj/vJtxz9+1CSfzAYAm7MsAfC8nJNKIkMg9qozZ4sei6QROJRMCo6vcEw==", + "version": "1.119.5", + "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle-template-app-react-sample-b2e/-/ui-bundle-template-app-react-sample-b2e-1.119.5.tgz", + "integrity": "sha512-h/Gs6TVO3uBNahiAM+oUuQDjYODBcjwtjveZoHzIU/TsVBo2wQ5QatPljVnu3xR5xPF0A5f/Q6HW4gmOIVKEQA==", "dev": true, "license": "SEE LICENSE IN LICENSE.txt", "dependencies": { - "@salesforce/ui-bundle": "^1.118.1", + "@salesforce/ui-bundle": "^1.119.5", "sonner": "^1.7.0" } }, "node_modules/@salesforce/ui-bundle-template-app-react-sample-b2x": { - "version": "1.118.1", - "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle-template-app-react-sample-b2x/-/ui-bundle-template-app-react-sample-b2x-1.118.1.tgz", - "integrity": "sha512-IAUfOhpDyYFuK/8vQIQZa5lFkX14IFdWdKkQHYWlBRQ1l3r48fOyedkP28s6F1yE7hpwzrjwUlX1F5Jyt0nQtw==", + "version": "1.119.5", + "resolved": "https://registry.npmjs.org/@salesforce/ui-bundle-template-app-react-sample-b2x/-/ui-bundle-template-app-react-sample-b2x-1.119.5.tgz", + "integrity": "sha512-oIwaFNU8Xr47SGu3nz8Dlaa0sQqHGJErN5ZaYSiKEsYR2MzkRxUQh6lN6t2KOVp3MVUmyAUs/6Ccmp9zGKQTHg==", "dev": true, "license": "SEE LICENSE IN LICENSE.txt" }, diff --git a/package.json b/package.json index 6709d8d..650a365 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "registry": "https://registry.npmjs.org" }, "devDependencies": { - "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.118.1", - "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.118.1", + "@salesforce/ui-bundle-template-app-react-sample-b2e": "^1.119.5", + "@salesforce/ui-bundle-template-app-react-sample-b2x": "^1.119.5", "@salesforce/webapp-template-app-react-sample-b2e-experimental": "^1.117.1", "@salesforce/webapp-template-app-react-sample-b2x-experimental": "^1.117.1", "@types/js-yaml": "^4.0.9", diff --git a/samples/ui-bundle-template-app-react-sample-b2e/.version b/samples/ui-bundle-template-app-react-sample-b2e/.version index 292954f..8c334ba 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/.version +++ b/samples/ui-bundle-template-app-react-sample-b2e/.version @@ -1 +1 @@ -1.118.1 +1.119.5 diff --git a/samples/ui-bundle-template-app-react-sample-b2e/AGENT.md b/samples/ui-bundle-template-app-react-sample-b2e/AGENT.md index 26f6fcc..cfd47f7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/AGENT.md +++ b/samples/ui-bundle-template-app-react-sample-b2e/AGENT.md @@ -19,7 +19,7 @@ Replace `` with the actual folder name found under `uiBundles/`. The so ├── sfdx-project.json ├── package.json # SFDX root scripts ├── scripts/ -│ ├── setup-cli.mjs # One-command setup (deploy, schema, build) +│ ├── org-setup.mjs # One-time org setup (deploy, schema, build) │ └── graphql-search.sh # Schema entity lookup ├── config/ │ └── project-scratch-def.json @@ -45,7 +45,7 @@ Replace `` with the actual folder name found under `uiBundles/`. The so └── data/ # Sample data for import (optional) ``` -## Web application source structure +## UI Bundle source structure All application code lives inside the UI Bundle's `src/` directory: @@ -93,11 +93,13 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. | `npm run prettier` | Format metadata files | | `npm run prettier:verify` | Check Prettier | -**One-command setup:** `node scripts/setup-cli.mjs --target-org ` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags. +**One-time org setup:** `node scripts/org-setup.mjs --target-org ` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags. -### 2. Web app directory (primary workspace) +### 2. UI Bundle directory (primary workspace) -**Always `cd` into the UI Bundle directory for dev/build/lint/test:** +**ALL dev, build, lint, and test commands MUST be run from inside the UI Bundle directory (`/uiBundles//`). Never run them from the project root.** + +Resolve the correct path from `sfdx-project.json` before running any command. Do not hardcode the path. | Command | Purpose | |---------|---------| @@ -109,13 +111,17 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. | `npm run graphql:codegen` | Generate GraphQL types from schema | | `npm run graphql:schema` | Fetch GraphQL schema from org | -**Before completing any change:** run `npm run build` and `npm run lint` from the UI Bundle directory. Both must pass with zero errors. +**After every task, without exception:** +1. Run `npm run build` from the UI Bundle directory — must pass with zero errors. +2. Run `npm run lint` from the UI Bundle directory — must pass with zero errors. +3. Run `npm run dev` to start the dev server so the user can verify the result. +Do not consider a task complete until all three steps have been run successfully. ## Development conventions ### UI -- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. +- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. **Before importing any component, verify both the file exists in `src/components/ui/` AND the named export exists within that file.** Never assume a component or export is available — read the file to confirm the exact exports before importing. - **Styling:** Tailwind CSS only. No inline `style={{}}`. Use `cn()` from `@/lib/utils` for conditional classes. - **Icons:** Lucide React. - **Path alias:** `@/*` maps to `src/*`. Use it for all imports. @@ -140,6 +146,10 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. ### Data access (Salesforce) +**Before writing any code that connects to Salesforce, you MUST invoke the `using-ui-bundle-salesforce-data` skill. Do not write any data access code without consulting it first.** + +This applies to: GraphQL queries/mutations, REST calls, SDK initialization, custom hooks that fetch data, or any code that imports from `@salesforce/sdk-data`. + - **All data access uses the Data SDK** (`@salesforce/sdk-data`) via `createDataSDK()`. - **Never** use `fetch()` or `axios` directly for Salesforce data. - **GraphQL is preferred** for record operations (`sdk.graphql`). Use `sdk.fetch` only when GraphQL cannot cover the case (UI API REST, Apex REST, Connect REST, Einstein LLM). @@ -149,25 +159,74 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. - Use `__SF_API_VERSION__` global for API version in REST calls. - **Blocked APIs:** Enterprise REST query endpoint (`/query` with SOQL), `@AuraEnabled` Apex, Chatter API. +#### Permitted APIs + +| API | Method | Endpoints / Use Case | +|-----|--------|----------------------| +| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace | +| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` | +| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` | +| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/...` | +| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` | + +Any endpoint not listed above is not permitted. + +#### GraphQL non-negotiable rules + +1. **Schema is the single source of truth** — every entity and field name must be confirmed via the schema search script before use. Never guess. +2. **`@optional` on all record fields** — FLS causes entire queries to fail if any field is inaccessible. Apply to every scalar, parent, and child relationship field. +3. **Correct mutation syntax** — mutations wrap under `uiapi(input: { allOrNone: true/false })`, not bare `uiapi { ... }`. +4. **Explicit `first:` in every query** — omitting it silently defaults to 10 records. Always include `pageInfo { hasNextPage endCursor }` for paginated queries. +5. **SOQL-derived execution limits** — max 10 subqueries per request, max 5 levels of child-to-parent traversal, max 1 level parent-to-child, max 2,000 records per subquery. +6. **HTTP 200 does not mean success** — Salesforce returns HTTP 200 even on failure. Always check the `errors` array in the response body. + +#### GraphQL inline queries +Must use the `gql` template tag from `@salesforce/sdk-data` — plain template strings bypass `@graphql-eslint` schema validation. For complex queries, use external `.graphql` files with codegen. + +#### Current user info +Use GraphQL (`uiapi { currentUser { Id Name { value } } }`), not Chatter (`/chatter/users/me`). + +#### Schema file (`schema.graphql`) + +The `schema.graphql` file at the SFDX project root is the source of truth for all entity and field name lookups. It is 265K+ lines — never open or parse it directly. Use the schema search script instead. + +- **Generate/refresh:** Run `npm run graphql:schema` from the UI bundle directory +- **When to regenerate:** After any metadata deployment that changes objects, fields, or permission sets +- **Custom objects** only appear in the schema after metadata deployment AND permission set assignment +- **After regenerating:** Always re-run `npm run graphql:codegen` and `npm run build` (schema changes may affect generated types) + ### CSP trusted sites Any external domain the app calls (APIs, CDNs, fonts) must have a `.cspTrustedSite-meta.xml` file under `/cspTrustedSites/`. Unregistered domains are blocked at runtime. Each subdomain needs its own entry. URLs must be HTTPS with no trailing slash, no path, and no wildcards. +## Building and launching the app + +All build, dev, and test commands run from the UI Bundle directory. Before running any command, read the UI Bundle's `package.json` to confirm available scripts — do not assume script names. + +Typical scripts found in the UI Bundle: + +| Command | Purpose | +|---------|---------| +| `npm run build` | TypeScript check + Vite production build | +| `npm run dev` | Start Vite dev server | +| `npm run lint` | ESLint | +| `npm run test` | Vitest unit tests | +| `npm run graphql:codegen` | Generate GraphQL types | +| `npm run graphql:schema` | Fetch GraphQL schema from org | + +If dependencies have not been installed yet, run `npm install` in the UI Bundle directory first. Alternatively, run `npm run sf-project-setup` from the project root — it resolves the UI Bundle directory automatically and runs install, build, and dev in sequence. + +**After any JavaScript or TypeScript change, run `npm run build` to validate the change.** If the build fails, read the error output, identify the cause, fix it, and run `npm run build` again. Do not move on until the build passes. + ## Deploying **Deployment order matters.** Metadata (objects, permission sets) must be deployed before fetching the GraphQL schema. After any metadata deployment that changes objects, fields, or permissions, re-run schema fetch and codegen. -**Recommended sequence:** +**Deployment steps:** 1. Authenticate to the target org 2. Build the UI Bundle (`npm run build` in the UI Bundle directory) 3. Deploy metadata (`sf project deploy start --source-dir --target-org `) -4. Assign permission sets -5. Import data (only with user confirmation) -6. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`) -7. Rebuild the UI Bundle (schema changes may affect generated types) - -**Or use the one-command setup:** `node scripts/setup-cli.mjs --target-org ` ```bash # Deploy UI Bundle only @@ -177,17 +236,17 @@ sf project deploy start --source-dir /ui-bundles --target-org --target-org ``` +**Do not open the app after deployment.** Do not run `sf org open`, do not guess the runtime URL, and do not construct paths like `/s/`. Deployment is complete when the `sf project deploy start` command succeeds. + +## Post-deployment org setup + +These steps apply after a fresh deployment to configure the org. They are not part of routine deployment. + +1. Assign permission sets +2. Import data (only with user confirmation) +3. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`) +4. Rebuild the UI Bundle (`npm run build` — schema changes may affect generated types) + ## Skills -Check for available skills before implementing any of the following: - -| Area | When to consult | -|------|----------------| -| UI generation | Building pages, components, modifying header/footer/layout | -| Salesforce data access | Reading/writing records, GraphQL queries, REST calls | -| Metadata and deployment | Scaffolding apps, configuring CSP, deployment sequencing | -| Feature installation | Before building something from scratch — check if a pre-built feature exists | -| File upload | Adding file upload with Salesforce ContentVersion | -| Agentforce conversation | Adding or modifying the Agentforce chat widget | - -Skills are the authoritative source for detailed patterns, constraints, and code examples in each area. This file provides project-level orientation; skills provide implementation depth. +Before starting any task, check whether a relevant skill exists. If one does, invoke it before writing any code or making any implementation decision. Skills are the authoritative source for patterns, constraints, and code examples. diff --git a/samples/ui-bundle-template-app-react-sample-b2e/CHANGELOG.md b/samples/ui-bundle-template-app-react-sample-b2e/CHANGELOG.md index 506ae50..9d46904 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/CHANGELOG.md +++ b/samples/ui-bundle-template-app-react-sample-b2e/CHANGELOG.md @@ -3,6 +3,84 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.119.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.4...v1.119.5) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.3...v1.119.4) (2026-03-31) + + +### Bug Fixes + +* replace undefined WEBAPPLICATIONS_DIR with UIBUNDLES_DIR in org-setup ([#398](https://github.com/salesforce-experience-platform-emu/webapps/issues/398)) ([615d499](https://github.com/salesforce-experience-platform-emu/webapps/commit/615d49976fd4b92a840d25db79591e2818938a92)) + + + + + +## [1.119.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.2...v1.119.3) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.1...v1.119.2) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.0...v1.119.1) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +# [1.119.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.4...v1.119.0) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.3...v1.118.4) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.2...v1.118.3) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.1...v1.118.2) (2026-03-31) + + +### Bug Fixes + +* (@W-21734559) addresses missing .gitignore within template apps for vibes welcome experience ([#383](https://github.com/salesforce-experience-platform-emu/webapps/issues/383)) ([b8a35cf](https://github.com/salesforce-experience-platform-emu/webapps/commit/b8a35cf5352c231ccaa0797df88e64ee1c20a02a)) + + + + + ## [1.118.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.0...v1.118.1) (2026-03-31) **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project diff --git a/samples/ui-bundle-template-app-react-sample-b2e/README.md b/samples/ui-bundle-template-app-react-sample-b2e/README.md index 1dd9d44..ac729b6 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/README.md +++ b/samples/ui-bundle-template-app-react-sample-b2e/README.md @@ -2,45 +2,151 @@ A property management sample React UI Bundle for the Salesforce platform. Demonstrates property management, maintenance requests, tenant applications, a dashboard, and an Agentforce conversation client. Built with React, Vite, TypeScript, and Tailwind/shadcn. -## What's included +## Table of Contents + +1. [What's Included](#whats-included) +2. [Prerequisites](#prerequisites) +3. [Quick Start (Automated)](#quick-start-automated) +4. [Step-by-Step Setup](#step-by-step-setup) + - [1. Install Dependencies](#1-install-dependencies) + - [2. Authenticate Your Org](#2-authenticate-your-org) + - [3. Deploy Metadata](#3-deploy-metadata) + - [4. Assign Permission Set](#4-assign-permission-set) + - [5. Import Sample Data](#5-import-sample-data) + - [6. Generate GraphQL Types](#6-generate-graphql-types) + - [7. Rebuild the UI Bundle](#7-rebuild-the-ui-bundle) + - [8. Deploy the UI Bundle](#8-deploy-the-ui-bundle) +5. [Local Development](#local-development) +6. [Resources](#resources) + +--- + +## What's Included | Path | Description | | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `force-app/main/default/uiBundles/propertymanagementapp/` | React UI Bundle (source, config, tests) | -| `force-app/main/default/objects/` | 17 custom objects — Agent\_\_c, Application\_\_c, KPI_Snapshot\_\_c, Lease\_\_c, Maintenance_Request\_\_c, Maintenance_Worker\_\_c, Notification\_\_c, Payment\_\_c, Property\_\_c, Property_Cost\_\_c, Property_Feature\_\_c, Property_Image\_\_c, Property_Listing\_\_c, Property_Management_Company\_\_c, Property_Owner\_\_c, Property_Sale\_\_c, Tenant\_\_c | +| `force-app/main/default/objects/` | 17 custom objects — `Agent__c`, `Application__c`, `KPI_Snapshot__c`, `Lease__c`, `Maintenance_Request__c`, `Maintenance_Worker__c`, `Notification__c`, `Payment__c`, `Property__c`, `Property_Cost__c`, `Property_Feature__c`, `Property_Image__c`, `Property_Listing__c`, `Property_Management_Company__c`, `Property_Owner__c`, `Property_Sale__c`, `Tenant__c` | | `force-app/main/default/layouts/` | Page layouts for each custom object | -| `force-app/main/default/permissionsets/` | `Property_Management_Access` permission set | +| `force-app/main/default/permissionsets/` | `Property_Management_Access` permission set — full CRUD access to all custom objects | | `force-app/main/default/data/` | Sample data (JSON) for all objects, importable via `sf data import tree` | -## Getting started +--- -Navigate to the UI Bundle and install dependencies: +## Prerequisites + +Before you begin, ensure the following are in place. + +| Tool | Minimum Version | Install | +| ----------------------------------------------------------------------------- | ------------------ | ----------------------------------- | +| [Salesforce CLI (`sf`)](https://developer.salesforce.com/tools/salesforcecli) | v2+ | `npm install -g @salesforce/cli` | +| [Node.js](https://nodejs.org/) | v22+ | [nodejs.org](https://nodejs.org/) | +| [Git](https://git-scm.com/) | Any recent version | [git-scm.com](https://git-scm.com/) | + +Verify your Salesforce CLI version with: + +```bash +sf --version +``` + +--- + +## Quick Start (Automated) + +Two npm scripts at the project root streamline getting started and deployment. + +**`npm run sf-project-setup`** — installs the UI Bundle dependencies, builds the app, and starts the dev server (see [Local Development](#local-development)). + +**`npm run setup`** — automates the full setup: login, deploy metadata, assign permission sets, import sample data, fetch the GraphQL schema, run codegen, build the UI Bundle, and optionally launch the dev server: + +```bash +npm run setup -- --target-org +``` + +Replace `` with your target org alias or username. Running without flags presents an interactive step picker. Pass `--yes` to skip it and run all steps immediately: + +```bash +npm run setup -- --target-org --yes +``` + +### Common Options + +| Option | Description | +| ------------------------- | ------------------------------------------------------------------------------------ | +| `--skip-login` | Skip browser login (auto-skipped if org is already connected) | +| `--skip-deploy` | Skip the metadata deploy step | +| `--skip-permset` | Skip permission set assignment | +| `--skip-data` | Skip data preparation and import | +| `--skip-graphql` | Skip GraphQL schema fetch and codegen | +| `--skip-ui-bundle-build` | Skip `npm install` and UI Bundle build | +| `--skip-dev` | Do not launch the dev server at the end | +| `--permset-name ` | Assign only a specific permission set (repeatable). Default: all sets in the project | +| `--ui-bundle-name ` | UI Bundle folder name under `uiBundles/` (default: auto-detected) | +| `-y, --yes` | Skip interactive step picker and run all enabled steps immediately | + +For a full list of options: + +```bash +npm run setup -- --help +``` + +--- + +## Step-by-Step Setup + +Use this section if you prefer to run each step manually, or if the automated script is not available. + +### 1. Install Dependencies + +Install root-level project dependencies: + +```bash +npm install +``` + +Install the UI Bundle dependencies and build it: ```bash cd force-app/main/default/uiBundles/propertymanagementapp npm install -npm run dev +npm run build +cd - ``` -Opens at http://localhost:5173 by default. For build and test instructions, see the [UI Bundle README](force-app/main/default/uiBundles/propertymanagementapp/README.md). +This produces the static bundle artifacts that are packaged into the Salesforce metadata. Having them built now means any deploy option in [Step 3](#3-deploy-metadata) is ready to run without an additional build step. -## Deploy +### 2. Authenticate Your Org -### Deploy everything (metadata + UI Bundle) +Log in to your target org using the Salesforce CLI. This opens a browser window for OAuth authentication: ```bash -cd force-app/main/default/uiBundles/propertymanagementapp && npm install && npm run build && cd - +sf org login web --alias +``` + +To verify the login was successful: + +```bash +sf org display --target-org +``` + +If you are working with a sandbox, use: + +```bash +sf org login web --alias --instance-url https://test.salesforce.com +``` + +### 3. Deploy Metadata + +#### Option A: Deploy Everything (metadata + UI Bundle) + +Build the UI Bundle first, then deploy all source in a single command: + +```bash +cd force-app/main/default/uiBundles/propertymanagementapp && npm run build && cd - sf project deploy start --source-dir force-app --target-org ``` -### Deploy the UI Bundle only - -```bash -cd force-app/main/default/uiBundles/propertymanagementapp && npm install && npm run build && cd - -sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org -``` - -### Deploy metadata only (objects, layouts, permission sets) +#### Option B: Deploy Metadata Only (objects, layouts, permission sets) ```bash sf project deploy start \ @@ -50,55 +156,93 @@ sf project deploy start \ --target-org ``` -Replace `` with your target org alias. - -## Assign permset - -After deploying the metadata, assign the `Property_Management_Access` permission set to your user to grant access to the custom objects and fields: +#### Option C: Deploy the UI Bundle Only ```bash -sf org assign permset -n Property_Management_Access --target-org +cd force-app/main/default/uiBundles/propertymanagementapp && npm run build && cd - +sf project deploy start --source-dir force-app/main/default/uiBundles --target-org ``` Replace `` with your target org alias. -## Import sample data +### 4. Assign Permission Set + +After deploying the metadata, assign the `Property_Management_Access` permission set to grant access to the custom objects and fields: + +```bash +sf org assign permset --name Property_Management_Access --target-org +``` + +To assign to a specific user: + +```bash +sf org assign permset --name Property_Management_Access --on-behalf-of --target-org +``` + +Replace `` with your target org alias. + +### 5. Import Sample Data + +Once the metadata has been successfully deployed: ```bash sf data import tree --plan force-app/main/default/data/data-plan.json --target-org ``` -## Using setup-cli.mjs +The data plan imports records in dependency order: Contacts, Agents, Maintenance Workers, Properties, Tenants, Applications, Maintenance Requests, Notifications, Property Management Companies, Property Owners, Leases, Property Sales, Property Costs, Payments, KPI Snapshots, Property Listings, Property Images, and Property Features. -When this app is built (e.g. from the monorepo or from a published package), a `setup-cli.mjs` script is included at the project root. It runs the full setup in one go: login (if needed), deploy metadata, assign the `Property_Management_Access` permission set, prepare and import sample data, fetch GraphQL schema and run codegen, build the UI Bundle, and optionally start the dev server. +> **Note:** If you re-run the import, duplicate records will be created. Wipe existing records first or use the `--upsert` flag if your plan supports it. -Run from the **project root** (the directory that contains `force-app/`, `sfdx-project.json`, and `setup-cli.mjs`): +### 6. Generate GraphQL Types + +After metadata is deployed, generate the GraphQL schema and TypeScript types for the UI Bundle. These are used to provide type-safe queries against the Salesforce GraphQL API. ```bash -node setup-cli.mjs --target-org +cd force-app/main/default/uiBundles/propertymanagementapp +npm run graphql:schema # Fetches schema from org → outputs schema.graphql +npm run graphql:codegen # Generates TypeScript types → updates src/api/graphql-operations-types.ts +cd - ``` -Common options: +> **Prerequisite:** The org must be authenticated and metadata must already be deployed before running these commands, as the schema is generated from the org's live metadata. -| Option | Description | -| ------------------------ | ---------------------------------------------------------------- | -| `--skip-login` | Skip browser login (org already authenticated) | -| `--skip-data` | Skip data preparation and import | -| `--skip-graphql` | Skip GraphQL schema fetch and codegen | -| `--skip-ui-bundle-build` | Skip `npm install` and UI Bundle build | -| `--skip-dev` | Do not start the dev server at the end | -| `--permset ` | Permission set to assign (default: `Property_Management_Access`) | -| `--app ` | Web app folder name when multiple exist | +### 7. Rebuild the UI Bundle -For all options: `node setup-cli.mjs --help`. +Step 6 updates the generated GraphQL types in the UI Bundle source. Rebuild the app to compile those changes into the bundle before deploying: -## Configure Your Salesforce DX Project +```bash +cd force-app/main/default/uiBundles/propertymanagementapp +npm run build +cd - +``` -The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file. +### 8. Deploy the UI Bundle -## Read All About It +Once the build is complete, deploy the UI Bundle to your org: + +```bash +sf project deploy start --source-dir force-app/main/default/uiBundles --target-org +``` + +--- + +## Local Development + +Install project dependencies and start the dev server: + +```bash +npm install +npm run sf-project-setup +``` + +This installs the UI Bundle dependencies, builds the app, and opens the dev server at `http://localhost:5173`. For manual build and test instructions, see the [UI Bundle README](force-app/main/default/uiBundles/propertymanagementapp/README.md). + +--- + +## Resources - [Salesforce Extensions Documentation](https://developer.salesforce.com/tools/vscode/) - [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) - [Salesforce DX Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm) - [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm) +- [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls index 664b363..a6af7e7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls @@ -103,7 +103,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'Electrical', Description__c = 'Outlet not working', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); @@ -129,7 +129,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'HVAC', Description__c = 'AC not cooling', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); @@ -203,10 +203,10 @@ private class MaintenanceRequestTriggerHandler_Test { static void testBulkRequestAssignment() { Test.startTest(); List requests = new List{ - new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 1', Priority__c = 'High (Same Day)'), + new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 1', Priority__c = 'High'), new Maintenance_Request__c(Type__c = 'Electrical', Description__c = 'Issue 1', Priority__c = 'Standard'), new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 2', Priority__c = 'Standard'), - new Maintenance_Request__c(Type__c = 'HVAC', Description__c = 'AC Issue', Priority__c = 'High (Same Day)'), + new Maintenance_Request__c(Type__c = 'HVAC', Description__c = 'AC Issue', Priority__c = 'High'), new Maintenance_Request__c(Type__c = 'Appliance', Description__c = 'Fridge Issue', Priority__c = 'Standard') }; insert requests; @@ -261,7 +261,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'Plumbing', Description__c = 'Emergency leak', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Maintenance_Request__c.json b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Maintenance_Request__c.json index f46fedc..b79ef66 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Maintenance_Request__c.json +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Maintenance_Request__c.json @@ -26,7 +26,7 @@ "User__c": "@TenantRef2", "Description__c": "Main bedroom electrical outlet stopped working. No power to the entire wall. Possible circuit breaker issue.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 200.0, "Actual_Cost__c": 185.0, @@ -43,7 +43,7 @@ "User__c": "@TenantRef3", "Description__c": "Air conditioning unit is making loud grinding noises when running. May need bearing replacement or refrigerant check.", "Type__c": "HVAC", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 300.0, "Actual_Cost__c": null, @@ -162,7 +162,7 @@ "User__c": "@TenantRef15", "Description__c": "Post-tenant move-out deep cleaning including carpets, windows, appliances, and all surfaces.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 450.0, "Actual_Cost__c": 425.0, @@ -179,7 +179,7 @@ "User__c": "@TenantRef8", "Description__c": "Annual roof inspection revealed loose tiles that need securing and replacement before winter season.", "Type__c": "Plumbing", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 800.0, "Actual_Cost__c": null, @@ -213,7 +213,7 @@ "User__c": "@TenantRef7", "Description__c": "Main entrance lock is sticking and needs replacement for new tenant security and smooth operation.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 120.0, "Actual_Cost__c": 110.0, @@ -281,7 +281,7 @@ "User__c": "@TenantRef6", "Description__c": "Monthly elevator maintenance and safety inspection as required by local building code regulations.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 300.0, "Actual_Cost__c": 300.0, @@ -366,7 +366,7 @@ "User__c": "@TenantRef10", "Description__c": "Annual electrical panel inspection and circuit breaker testing to ensure electrical safety compliance.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "New", "Est_Cost__c": 250.0, "Actual_Cost__c": null, @@ -417,7 +417,7 @@ "User__c": "@TenantRef15", "Description__c": "Install new washer and dryer units in laundry room for incoming tenant. Connect water, drain, and electrical.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 200.0, "Actual_Cost__c": null, diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Property_Image__c.json b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Property_Image__c.json index eb2d404..3424ec7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Property_Image__c.json +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/data/Property_Image__c.json @@ -79,7 +79,7 @@ }, "Name": "Modern Haven Gallery", "Property__c": "@PropertyRef2", - "Image_URL__c": "https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4", + "Image_URL__c": "https://images.unsplash.com/photo-1554995207-c18c203602cb", "Image_Type__c": "Gallery", "Display_Order__c": 2, "Alt_Text__c": "Modern Haven - stylish interior design" diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml index 75a758a..ded5703 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml @@ -13,12 +13,12 @@ false - Emergency (2hr) + Emergency false - High (Same Day) + High false diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/package.json b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/package.json index 1fdf823..80e80ae 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/package.json +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/package.json @@ -15,8 +15,8 @@ "graphql:schema": "node scripts/get-graphql-schema.mjs" }, "dependencies": { - "@salesforce/sdk-data": "^1.118.1", - "@salesforce/ui-bundle": "^1.118.1", + "@salesforce/sdk-data": "^1.119.5", + "@salesforce/ui-bundle": "^1.119.5", "@tailwindcss/vite": "^4.1.17", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -43,7 +43,7 @@ "@graphql-eslint/eslint-plugin": "^4.1.0", "@graphql-tools/utils": "^11.0.0", "@playwright/test": "^1.49.0", - "@salesforce/vite-plugin-ui-bundle": "^1.118.1", + "@salesforce/vite-plugin-ui-bundle": "^1.119.5", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.5.2", diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/AgentforceConversationClient.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/AgentforceConversationClient.tsx index b8d57b5..55c0932 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/AgentforceConversationClient.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/AgentforceConversationClient.tsx @@ -13,6 +13,37 @@ import type { } from "../types/conversation"; const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host"; + +const DEFAULT_STYLE_TOKENS: NonNullable = { + containerBackground: "#fafafa", + + headerBlockBackground: "#372949", + headerBlockTextColor: "#ffffff", + headerBlockIconColor: "#ffffff", + headerBlockBorderBottomColor: "#3b0764", + headerBlockFocusBorder: "#c4b5fd", + + messageBlockInboundBackgroundColor: "#ffffff", + messageBlockInboundTextColor: "#1f2937", + messageBlockInboundBorder: "1px solid #e5e7eb", + + messageBlockOutboundBackgroundColor: "#ede9fe", + messageBlockOutboundTextColor: "#1f2937", + messageBlockOutboundBorder: "1px solid #d8b4fe", + + messageInputTextColor: "#1f2937", + messageInputTextBackgroundColor: "#ffffff", + messageInputFooterBorderColor: "#d1d5db", + messageInputFooterBorderFocusColor: "#9ca3af", + messageInputFocusShadow: "0 0 0 3px rgba(156, 163, 175, 0.25)", + messageInputFooterPlaceholderText: "#6b7280", + + messageInputFooterSendButton: "#7e22ce", + messageInputFooterSendButtonHoverColor: "#6b21a8", + messageInputSendButtonIconColor: "#ffffff", + messageInputSendButtonDisabledColor: "#e5e7eb", + messageInputActionButtonFocusBorder: "#a855f7", +}; const SINGLETON_KEY = "__agentforceConversationClientSingleton"; interface AgentforceConversationClientSingleton { @@ -79,7 +110,7 @@ export function AgentforceConversationClient({ return { ...(agentId !== undefined && { agentId }), agentLabel: agentLabel ?? "Chat with us", - ...(styleTokens !== undefined && { styleTokens }), + styleTokens: { ...DEFAULT_STYLE_TOKENS, ...styleTokens }, renderingConfig, }; }, [agentId, agentLabel, inlineProp, headerEnabled, showHeaderIcon, width, height, styleTokens]); diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx index 0797a16..a23ec11 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceDetailsModal.tsx @@ -174,11 +174,11 @@ export const MaintenanceDetailsModal: React.FC = ( ); }; -type Priority = "Emergency (2hr)" | "High (Same Day)" | "Standard"; +type Priority = "Emergency" | "High" | "Standard"; const priorityStyles: Record = { - "Emergency (2hr)": "bg-red-100 text-red-700 border-red-200 text-sm", - "High (Same Day)": "bg-orange-100 text-orange-700 border-orange-200 text-sm", + Emergency: "bg-red-100 text-red-700 border-red-200 text-sm", + High: "bg-orange-100 text-orange-700 border-orange-200 text-sm", Standard: "bg-blue-100 text-blue-700 border-blue-200 text-sm", }; diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceRequestCard.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceRequestCard.tsx index d04cb49..f2db7da 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceRequestCard.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/maintenanceRequests/MaintenanceRequestCard.tsx @@ -9,11 +9,11 @@ interface MaintenanceRequestCardProps { } const priorityConfig: Record< - "Emergency (2hr)" | "High (Same Day)" | "Standard", + "Emergency" | "High" | "Standard", { color: string; label: string; emoji: string } > = { - "Emergency (2hr)": { color: "text-red-500", label: "EMERGENCY (2HR)", emoji: "🔴" }, - "High (Same Day)": { color: "text-orange-500", label: "HIGH (SAME DAY)", emoji: "🟠" }, + Emergency: { color: "text-red-500", label: "EMERGENCY (2HR)", emoji: "🔴" }, + High: { color: "text-orange-500", label: "HIGH (SAME DAY)", emoji: "🟠" }, Standard: { color: "text-blue-500", label: "STANDARD", emoji: "🔵" }, }; diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/avatar.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/avatar.tsx new file mode 100644 index 0000000..42dc27d --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/avatar.tsx @@ -0,0 +1,109 @@ +'use client'; + +import * as React from 'react'; +import { Avatar as AvatarPrimitive } from 'radix-ui'; + +import { cn } from '@/lib/utils'; + +function Avatar({ + className, + size = 'default', + ...props +}: React.ComponentProps & { + size?: 'default' | 'sm' | 'lg'; +}) { + return ( + + ); +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) { + return ( + svg]:hidden', + 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', + 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', + className + )} + {...props} + /> + ); +} + +function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} + +function AvatarGroupCount({ + className, + ...props +}: React.ComponentProps<'div'>) { + return ( +
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', + className + )} + {...props} + /> + ); +} + +export { + Avatar, + AvatarImage, + AvatarFallback, + AvatarBadge, + AvatarGroup, + AvatarGroupCount, +}; diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/dropdown-menu.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..7999b4b --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +'use client'; + +import * as React from 'react'; +import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; +import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'; + +import { cn } from '@/lib/utils'; + +function DropdownMenu({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuItem({ + className, + inset, + variant = 'default', + ...props +}: React.ComponentProps & { + inset?: boolean; + variant?: 'default' | 'destructive'; +}) { + return ( + + ); +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + ); +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<'span'>) { + return ( + + ); +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + {children} + + + ); +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +}; diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/index.ts b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/index.ts index d982716..5b9b0f1 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/index.ts +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/index.ts @@ -13,6 +13,14 @@ */ export { Alert, AlertTitle, AlertDescription, AlertAction } from './alert'; +export { + Avatar, + AvatarImage, + AvatarFallback, + AvatarBadge, + AvatarGroup, + AvatarGroupCount, +} from './avatar'; export { Button, buttonVariants } from './button'; export { Card, @@ -35,6 +43,23 @@ export { DialogTitle, DialogTrigger, } from './dialog'; +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +} from './dropdown-menu'; export { Field, FieldDescription, diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/utils/filterUtils.ts b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/utils/filterUtils.ts index 8806001..871e3fa 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/utils/filterUtils.ts +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/utils/filterUtils.ts @@ -385,7 +385,16 @@ function buildSingleFilter( if (!value) return null; const searchFields = config?.searchFields ?? []; if (searchFields.length === 0) return null; - const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter); + // Supports dot-notation for relationship fields (e.g. "User__r.Name") + // by building nested filter objects: { User__r: { Name: { like: "%x%" } } } + const clauses = searchFields.map((f) => { + const parts = f.split("."); + let clause: Record = { like: `%${value}%` }; + for (let i = parts.length - 1; i >= 0; i--) { + clause = { [parts[i]]: clause }; + } + return clause as TFilter; + }); if (clauses.length === 1) return clauses[0]; return { or: clauses } as TFilter; } diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/ApplicationSearch.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/ApplicationSearch.tsx index 0a7c17b..75bb530 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/ApplicationSearch.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/ApplicationSearch.tsx @@ -43,15 +43,18 @@ import type { import { ResultOrder } from "../api/graphql-operations-types"; import { Badge } from "../components/ui/badge"; import { PAGINATION_CONFIG } from "../lib/constants"; +import { User } from "lucide-react"; import { cn } from "../lib/utils"; +const SEARCH_PLACEHOLDER = "Search by application #, applicant, or address..."; + const FILTER_CONFIGS: FilterFieldConfig[] = [ { field: "search", label: "Search", type: "search", - searchFields: ["Name"], - placeholder: "Search by name...", + searchFields: ["Name", "User__r.Name", "Property__r.Address__c"], + placeholder: SEARCH_PLACEHOLDER, }, { field: "Status__c", label: "Status", type: "picklist" }, { field: "Start_Date__c", label: "Start Date", type: "date" }, @@ -210,8 +213,8 @@ function ApplicationSearchFilters({ - - User + + Application - + + Applicant + + Start Date @@ -253,7 +259,7 @@ function ApplicationSearchTableHeader() { function ApplicationSearchNoResults() { return ( - + No applications found @@ -270,6 +276,7 @@ function ApplicationSearchTable({ return ( <> {applicationNodes.map((application) => { + const applicationName = application.Name?.value || ""; const applicantName = application.User__r?.Name?.value || "Unknown"; const propertyName = application.Property__r?.Name?.value; const propertyAddress = application.Property__r?.Address__c?.value || ""; @@ -281,12 +288,13 @@ function ApplicationSearchTable({ onClick={() => setSelectedApplication(application)} className="hover:bg-gray-50 transition-colors cursor-pointer" > + +
{applicationName}
+
- - {applicantName.charAt(0) || "?"} - +
{applicantName}
@@ -335,6 +343,9 @@ function ApplicationSearchSkeleton({ pageSize }: { pageSize: number }) { <> {Array.from({ length: pageSize }, (_, i) => ( + + +
@@ -361,7 +372,7 @@ function ApplicationSearchErrorState() { return ( - + navigate("/")} diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx index 02be5ae..effa496 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx @@ -67,8 +67,8 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [ field: "search", label: "Search", type: "search", - searchFields: ["Name"], - placeholder: "Search by name...", + searchFields: ["Name", "User__r.Name", "Property__r.Address__c", "Assigned_Worker__r.Name"], + placeholder: "Search by request #, tenant, address, or worker...", }, { field: "Status__c", label: "Status", type: "picklist" }, { field: "Type__c", label: "Type", type: "picklist" }, @@ -249,8 +249,8 @@ function MaintenanceRequestSearchFilters({ {requestNodes.map((request) => { + const requestName = request.Name?.value ?? ""; const issueType = request.Type__c?.value ?? ""; const description = request.Description__c?.value ?? ""; const tenantName = request.User__r?.Name?.value || "Unknown"; @@ -355,7 +356,7 @@ function MaintenanceRequestSearchTable({

{description}

-

By Tenant

+

{requestName}

@@ -363,8 +364,8 @@ function MaintenanceRequestSearchTable({
-

{tenantName}

-

{tenantUnit}

+

{tenantUnit}

+

{tenantName}

diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx index 96a21c9..8c352ed 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx @@ -222,16 +222,22 @@ function MaintenanceWorkerSearchTableHeader() { return ( - + Name - - Organization - - - Active Requests + + Phone + Location + + + Organization + + + Active Requests + + Status @@ -242,7 +248,7 @@ function MaintenanceWorkerSearchTableHeader() { function MaintenanceWorkerSearchNoResults() { return ( - + No maintenance workers found @@ -268,6 +274,12 @@ function MaintenanceWorkerSearchTable({ className="hover:bg-gray-50 transition-colors cursor-pointer" > {name} + + {worker.Phone__c?.value ?? "\u2014"} + + + {worker.Location__c?.value ?? "\u2014"} + {worker.Employment_Type__c?.value ?? worker.Type__c?.value ?? "\u2014"} @@ -289,16 +301,22 @@ function MaintenanceWorkerSearchSkeleton({ pageSize }: { pageSize: number }) { <> {Array.from({ length: pageSize }, (_, i) => ( - + - + - - + + + + + + + + @@ -312,7 +330,7 @@ function MaintenanceWorkerSearchErrorState() { return ( - + navigate("/")} diff --git a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx index 011efaa..9134208 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2e/force-app/main/default/uiBundles/propertymanagementapp/src/pages/PropertySearch.tsx @@ -39,7 +39,6 @@ const FILTER_CONFIGS: FilterFieldConfig[] = [ searchFields: ["Name", "Address__c"], placeholder: "Search by name or address...", }, - { field: "Name", label: "Property Name", type: "text", placeholder: "Search by name..." }, { field: "Status__c", label: "Status", type: "picklist" }, { field: "Type__c", label: "Type", type: "picklist" }, { field: "Monthly_Rent__c", label: "Monthly Rent", type: "numeric" }, @@ -169,7 +168,7 @@ function PropertySearchFilters({ field="search" label="Search" placeholder="Search by name or address..." - className="w-full sm:w-50" + className="w-full sm:w-80" /> # interactive step picker (all selected) - * node scripts/setup-cli.mjs --target-org --yes # skip picker, run all steps - * node scripts/setup-cli.mjs --target-org afv5 --skip-login - * node scripts/setup-cli.mjs --target-org afv5 --skip-data --skip-ui-bundle-build - * node scripts/setup-cli.mjs --target-org myorg --ui-bundle-name my-app + * node scripts/org-setup.mjs --target-org # interactive step picker (all selected) + * node scripts/org-setup.mjs --target-org --yes # skip picker, run all steps + * node scripts/org-setup.mjs --target-org afv5 --skip-login + * node scripts/org-setup.mjs --target-org afv5 --skip-data --skip-ui-bundle-build + * node scripts/org-setup.mjs --target-org myorg --ui-bundle-name my-app * * Steps (in order): * 1. login — sf org login web only if org not already connected (skip with --skip-login) @@ -28,6 +28,32 @@ import { readdirSync, existsSync, readFileSync, writeFileSync, unlinkSync } from const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); +/** + * npm strips .gitignore from published packages — generate them on first run. + * Templates are stored in scripts/gitignore-templates.json (generated at build + * time from the actual .gitignore files) so the content lives in one place. + * The JSON may not exist in git-cloned distributions where .gitignore is + * already present, so loading is best-effort. + */ +function loadGitignoreTemplates() { + const templatesPath = resolve(__dirname, 'gitignore-templates.json'); + if (!existsSync(templatesPath)) return null; + try { + return JSON.parse(readFileSync(templatesPath, 'utf8')); + } catch { + return null; + } +} + +function ensureGitignore(dir, content) { + if (!content) return; + const gitignorePath = resolve(dir, '.gitignore'); + if (!existsSync(gitignorePath)) { + writeFileSync(gitignorePath, content, 'utf8'); + console.log(`Created .gitignore in ${dir}`); + } +} + function resolveSfdxSource() { const sfdxPath = resolve(ROOT, 'sfdx-project.json'); if (!existsSync(sfdxPath)) { @@ -84,7 +110,7 @@ function parseArgs() { Setup CLI — one-command setup for apps in this project Usage: - node scripts/setup-cli.mjs --target-org [options] + node scripts/org-setup.mjs --target-org [options] Required: --target-org Target Salesforce org alias (e.g. myorg) @@ -292,6 +318,19 @@ function run(name, cmd, args, opts = {}) { } async function main() { + // Ensure .gitignore files exist (npm strips them from published packages). + const gitignoreTemplates = loadGitignoreTemplates(); + if (gitignoreTemplates) { + ensureGitignore(ROOT, gitignoreTemplates.sfdx); + if (existsSync(UIBUNDLES_DIR)) { + for (const entry of readdirSync(UIBUNDLES_DIR, { withFileTypes: true })) { + if (entry.isDirectory() && !entry.name.startsWith('.')) { + ensureGitignore(resolve(UIBUNDLES_DIR, entry.name), gitignoreTemplates.webapp); + } + } + } + } + const { targetOrg, uiBundleName, diff --git a/samples/ui-bundle-template-app-react-sample-b2e/scripts/sf-project-setup.mjs b/samples/ui-bundle-template-app-react-sample-b2e/scripts/sf-project-setup.mjs index ad5b699..8d0217a 100644 --- a/samples/ui-bundle-template-app-react-sample-b2e/scripts/sf-project-setup.mjs +++ b/samples/ui-bundle-template-app-react-sample-b2e/scripts/sf-project-setup.mjs @@ -10,11 +10,36 @@ import { spawnSync } from 'node:child_process'; import { resolve, dirname } from 'node:path'; import { fileURLToPath } from 'node:url'; -import { readdirSync, existsSync, readFileSync } from 'node:fs'; +import { readdirSync, existsSync, readFileSync, writeFileSync } from 'node:fs'; const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); +/** + * npm strips .gitignore from published packages — generate them on first run. + * Templates are stored in scripts/gitignore-templates.json (generated at build + * time from the actual .gitignore files). The JSON may not exist in git-cloned + * distributions where .gitignore is already present, so loading is best-effort. + */ +function loadGitignoreTemplates() { + const templatesPath = resolve(__dirname, 'gitignore-templates.json'); + if (!existsSync(templatesPath)) return null; + try { + return JSON.parse(readFileSync(templatesPath, 'utf8')); + } catch { + return null; + } +} + +function ensureGitignore(dir, content) { + if (!content) return; + const gitignorePath = resolve(dir, '.gitignore'); + if (!existsSync(gitignorePath)) { + writeFileSync(gitignorePath, content, 'utf8'); + console.log(`Created .gitignore in ${dir}`); + } +} + function resolveUIBundlesDir() { const sfdxPath = resolve(ROOT, 'sfdx-project.json'); if (!existsSync(sfdxPath)) { @@ -56,6 +81,20 @@ function run(label, cmd, args, opts) { } } +// Ensure .gitignore files exist (npm strips them from published packages). +const gitignoreTemplates = loadGitignoreTemplates(); +if (gitignoreTemplates) { + ensureGitignore(ROOT, gitignoreTemplates.sfdx); + const bundlesDir = resolveUIBundlesDir(); + if (existsSync(bundlesDir)) { + for (const entry of readdirSync(bundlesDir, { withFileTypes: true })) { + if (entry.isDirectory() && !entry.name.startsWith('.')) { + ensureGitignore(resolve(bundlesDir, entry.name), gitignoreTemplates.webapp); + } + } + } +} + const uiBundleDir = discoverUIBundleDir(); console.log('SFDX project root:', ROOT); console.log('UI bundle directory:', uiBundleDir); diff --git a/samples/ui-bundle-template-app-react-sample-b2x/.version b/samples/ui-bundle-template-app-react-sample-b2x/.version index 292954f..8c334ba 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/.version +++ b/samples/ui-bundle-template-app-react-sample-b2x/.version @@ -1 +1 @@ -1.118.1 +1.119.5 diff --git a/samples/ui-bundle-template-app-react-sample-b2x/AGENT.md b/samples/ui-bundle-template-app-react-sample-b2x/AGENT.md index 26f6fcc..cfd47f7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/AGENT.md +++ b/samples/ui-bundle-template-app-react-sample-b2x/AGENT.md @@ -19,7 +19,7 @@ Replace `` with the actual folder name found under `uiBundles/`. The so ├── sfdx-project.json ├── package.json # SFDX root scripts ├── scripts/ -│ ├── setup-cli.mjs # One-command setup (deploy, schema, build) +│ ├── org-setup.mjs # One-time org setup (deploy, schema, build) │ └── graphql-search.sh # Schema entity lookup ├── config/ │ └── project-scratch-def.json @@ -45,7 +45,7 @@ Replace `` with the actual folder name found under `uiBundles/`. The so └── data/ # Sample data for import (optional) ``` -## Web application source structure +## UI Bundle source structure All application code lives inside the UI Bundle's `src/` directory: @@ -93,11 +93,13 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. | `npm run prettier` | Format metadata files | | `npm run prettier:verify` | Check Prettier | -**One-command setup:** `node scripts/setup-cli.mjs --target-org ` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags. +**One-time org setup:** `node scripts/org-setup.mjs --target-org ` runs login, deploy, permset assignment, data import, GraphQL schema/codegen, UI Bundle build, and optionally the dev server. Use `--help` for all flags. -### 2. Web app directory (primary workspace) +### 2. UI Bundle directory (primary workspace) -**Always `cd` into the UI Bundle directory for dev/build/lint/test:** +**ALL dev, build, lint, and test commands MUST be run from inside the UI Bundle directory (`/uiBundles//`). Never run them from the project root.** + +Resolve the correct path from `sfdx-project.json` before running any command. Do not hardcode the path. | Command | Purpose | |---------|---------| @@ -109,13 +111,17 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. | `npm run graphql:codegen` | Generate GraphQL types from schema | | `npm run graphql:schema` | Fetch GraphQL schema from org | -**Before completing any change:** run `npm run build` and `npm run lint` from the UI Bundle directory. Both must pass with zero errors. +**After every task, without exception:** +1. Run `npm run build` from the UI Bundle directory — must pass with zero errors. +2. Run `npm run lint` from the UI Bundle directory — must pass with zero errors. +3. Run `npm run dev` to start the dev server so the user can verify the result. +Do not consider a task complete until all three steps have been run successfully. ## Development conventions ### UI -- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. +- **Component library:** shadcn/ui primitives in `src/components/ui/`. Always use these over raw HTML equivalents. **Before importing any component, verify both the file exists in `src/components/ui/` AND the named export exists within that file.** Never assume a component or export is available — read the file to confirm the exact exports before importing. - **Styling:** Tailwind CSS only. No inline `style={{}}`. Use `cn()` from `@/lib/utils` for conditional classes. - **Icons:** Lucide React. - **Path alias:** `@/*` maps to `src/*`. Use it for all imports. @@ -140,6 +146,10 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. ### Data access (Salesforce) +**Before writing any code that connects to Salesforce, you MUST invoke the `using-ui-bundle-salesforce-data` skill. Do not write any data access code without consulting it first.** + +This applies to: GraphQL queries/mutations, REST calls, SDK initialization, custom hooks that fetch data, or any code that imports from `@salesforce/sdk-data`. + - **All data access uses the Data SDK** (`@salesforce/sdk-data`) via `createDataSDK()`. - **Never** use `fetch()` or `axios` directly for Salesforce data. - **GraphQL is preferred** for record operations (`sdk.graphql`). Use `sdk.fetch` only when GraphQL cannot cover the case (UI API REST, Apex REST, Connect REST, Einstein LLM). @@ -149,25 +159,74 @@ Used for SFDX metadata tooling. Scripts here target LWC/Aura, not the React app. - Use `__SF_API_VERSION__` global for API version in REST calls. - **Blocked APIs:** Enterprise REST query endpoint (`/query` with SOQL), `@AuraEnabled` Apex, Chatter API. +#### Permitted APIs + +| API | Method | Endpoints / Use Case | +|-----|--------|----------------------| +| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace | +| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` | +| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` | +| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/...` | +| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` | + +Any endpoint not listed above is not permitted. + +#### GraphQL non-negotiable rules + +1. **Schema is the single source of truth** — every entity and field name must be confirmed via the schema search script before use. Never guess. +2. **`@optional` on all record fields** — FLS causes entire queries to fail if any field is inaccessible. Apply to every scalar, parent, and child relationship field. +3. **Correct mutation syntax** — mutations wrap under `uiapi(input: { allOrNone: true/false })`, not bare `uiapi { ... }`. +4. **Explicit `first:` in every query** — omitting it silently defaults to 10 records. Always include `pageInfo { hasNextPage endCursor }` for paginated queries. +5. **SOQL-derived execution limits** — max 10 subqueries per request, max 5 levels of child-to-parent traversal, max 1 level parent-to-child, max 2,000 records per subquery. +6. **HTTP 200 does not mean success** — Salesforce returns HTTP 200 even on failure. Always check the `errors` array in the response body. + +#### GraphQL inline queries +Must use the `gql` template tag from `@salesforce/sdk-data` — plain template strings bypass `@graphql-eslint` schema validation. For complex queries, use external `.graphql` files with codegen. + +#### Current user info +Use GraphQL (`uiapi { currentUser { Id Name { value } } }`), not Chatter (`/chatter/users/me`). + +#### Schema file (`schema.graphql`) + +The `schema.graphql` file at the SFDX project root is the source of truth for all entity and field name lookups. It is 265K+ lines — never open or parse it directly. Use the schema search script instead. + +- **Generate/refresh:** Run `npm run graphql:schema` from the UI bundle directory +- **When to regenerate:** After any metadata deployment that changes objects, fields, or permission sets +- **Custom objects** only appear in the schema after metadata deployment AND permission set assignment +- **After regenerating:** Always re-run `npm run graphql:codegen` and `npm run build` (schema changes may affect generated types) + ### CSP trusted sites Any external domain the app calls (APIs, CDNs, fonts) must have a `.cspTrustedSite-meta.xml` file under `/cspTrustedSites/`. Unregistered domains are blocked at runtime. Each subdomain needs its own entry. URLs must be HTTPS with no trailing slash, no path, and no wildcards. +## Building and launching the app + +All build, dev, and test commands run from the UI Bundle directory. Before running any command, read the UI Bundle's `package.json` to confirm available scripts — do not assume script names. + +Typical scripts found in the UI Bundle: + +| Command | Purpose | +|---------|---------| +| `npm run build` | TypeScript check + Vite production build | +| `npm run dev` | Start Vite dev server | +| `npm run lint` | ESLint | +| `npm run test` | Vitest unit tests | +| `npm run graphql:codegen` | Generate GraphQL types | +| `npm run graphql:schema` | Fetch GraphQL schema from org | + +If dependencies have not been installed yet, run `npm install` in the UI Bundle directory first. Alternatively, run `npm run sf-project-setup` from the project root — it resolves the UI Bundle directory automatically and runs install, build, and dev in sequence. + +**After any JavaScript or TypeScript change, run `npm run build` to validate the change.** If the build fails, read the error output, identify the cause, fix it, and run `npm run build` again. Do not move on until the build passes. + ## Deploying **Deployment order matters.** Metadata (objects, permission sets) must be deployed before fetching the GraphQL schema. After any metadata deployment that changes objects, fields, or permissions, re-run schema fetch and codegen. -**Recommended sequence:** +**Deployment steps:** 1. Authenticate to the target org 2. Build the UI Bundle (`npm run build` in the UI Bundle directory) 3. Deploy metadata (`sf project deploy start --source-dir --target-org `) -4. Assign permission sets -5. Import data (only with user confirmation) -6. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`) -7. Rebuild the UI Bundle (schema changes may affect generated types) - -**Or use the one-command setup:** `node scripts/setup-cli.mjs --target-org ` ```bash # Deploy UI Bundle only @@ -177,17 +236,17 @@ sf project deploy start --source-dir /ui-bundles --target-org --target-org ``` +**Do not open the app after deployment.** Do not run `sf org open`, do not guess the runtime URL, and do not construct paths like `/s/`. Deployment is complete when the `sf project deploy start` command succeeds. + +## Post-deployment org setup + +These steps apply after a fresh deployment to configure the org. They are not part of routine deployment. + +1. Assign permission sets +2. Import data (only with user confirmation) +3. Fetch GraphQL schema + run codegen (`npm run graphql:schema && npm run graphql:codegen`) +4. Rebuild the UI Bundle (`npm run build` — schema changes may affect generated types) + ## Skills -Check for available skills before implementing any of the following: - -| Area | When to consult | -|------|----------------| -| UI generation | Building pages, components, modifying header/footer/layout | -| Salesforce data access | Reading/writing records, GraphQL queries, REST calls | -| Metadata and deployment | Scaffolding apps, configuring CSP, deployment sequencing | -| Feature installation | Before building something from scratch — check if a pre-built feature exists | -| File upload | Adding file upload with Salesforce ContentVersion | -| Agentforce conversation | Adding or modifying the Agentforce chat widget | - -Skills are the authoritative source for detailed patterns, constraints, and code examples in each area. This file provides project-level orientation; skills provide implementation depth. +Before starting any task, check whether a relevant skill exists. If one does, invoke it before writing any code or making any implementation decision. Skills are the authoritative source for patterns, constraints, and code examples. diff --git a/samples/ui-bundle-template-app-react-sample-b2x/CHANGELOG.md b/samples/ui-bundle-template-app-react-sample-b2x/CHANGELOG.md index 506ae50..9d46904 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/CHANGELOG.md +++ b/samples/ui-bundle-template-app-react-sample-b2x/CHANGELOG.md @@ -3,6 +3,84 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.119.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.4...v1.119.5) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.3...v1.119.4) (2026-03-31) + + +### Bug Fixes + +* replace undefined WEBAPPLICATIONS_DIR with UIBUNDLES_DIR in org-setup ([#398](https://github.com/salesforce-experience-platform-emu/webapps/issues/398)) ([615d499](https://github.com/salesforce-experience-platform-emu/webapps/commit/615d49976fd4b92a840d25db79591e2818938a92)) + + + + + +## [1.119.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.2...v1.119.3) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.1...v1.119.2) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.119.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.119.0...v1.119.1) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +# [1.119.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.4...v1.119.0) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.3...v1.118.4) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.2...v1.118.3) (2026-03-31) + +**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project + + + + + +## [1.118.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.1...v1.118.2) (2026-03-31) + + +### Bug Fixes + +* (@W-21734559) addresses missing .gitignore within template apps for vibes welcome experience ([#383](https://github.com/salesforce-experience-platform-emu/webapps/issues/383)) ([b8a35cf](https://github.com/salesforce-experience-platform-emu/webapps/commit/b8a35cf5352c231ccaa0797df88e64ee1c20a02a)) + + + + + ## [1.118.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.118.0...v1.118.1) (2026-03-31) **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project diff --git a/samples/ui-bundle-template-app-react-sample-b2x/README.md b/samples/ui-bundle-template-app-react-sample-b2x/README.md index 3d12366..123a98b 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/README.md +++ b/samples/ui-bundle-template-app-react-sample-b2x/README.md @@ -2,51 +2,180 @@ A property rental sample React UI Bundle for Salesforce Experience Cloud. Demonstrates property listings, maintenance requests, and a dashboard with an app shell designed for external-facing deployment. Built with React, Vite, TypeScript, and Tailwind/shadcn. -## What's included +## Table of Contents + +1. [What's Included](#whats-included) +2. [Prerequisites](#prerequisites) +3. [Quick Start (Automated)](#quick-start-automated) +4. [Step-by-Step Setup](#step-by-step-setup) + - [1. Install Dependencies](#1-install-dependencies) + - [2. Authenticate Your Org](#2-authenticate-your-org) + - [3. Deploy Metadata](#3-deploy-metadata) + - [4. Assign Permission Sets](#4-assign-permission-sets) + - [5. Import Sample Data](#5-import-sample-data) + - [6. Generate GraphQL Types](#6-generate-graphql-types) + - [7. Rebuild the UI Bundle](#7-rebuild-the-ui-bundle) + - [8. Deploy the UI Bundle](#8-deploy-the-ui-bundle) +5. [Org Configuration](#org-configuration) + - [Step 1: Assign a Role to Your Admin User](#step-1-assign-a-role-to-your-admin-user) + - [Step 2: Create and Configure the Community Profile](#step-2-create-and-configure-the-community-profile) + - [Step 3: Configure the Experience Cloud Site](#step-3-configure-the-experience-cloud-site) + - [Step 4: Configure the Guest User Profile](#step-4-configure-the-guest-user-profile) + - [Step 5: Create Criteria-Based Sharing Rules for Guest Access](#step-5-create-criteria-based-sharing-rules-for-guest-access) +6. [Local Development](#local-development) +7. [Resources](#resources) + +--- + +## What's Included | Path | Description | | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `force-app/main/default/uiBundles/propertyrentalapp/` | React UI Bundle (source, config, tests) | -| `force-app/main/default/objects/` | 17 custom objects — Agent\_\_c, Application\_\_c, KPI_Snapshot\_\_c, Lease\_\_c, Maintenance_Request\_\_c, Maintenance_Worker\_\_c, Notification\_\_c, Payment\_\_c, Property\_\_c, Property_Cost\_\_c, Property_Feature\_\_c, Property_Image\_\_c, Property_Listing\_\_c, Property_Management_Company\_\_c, Property_Owner\_\_c, Property_Sale\_\_c, Tenant\_\_c | +| `force-app/main/default/objects/` | 17 custom objects — `Agent__c`, `Application__c`, `KPI_Snapshot__c`, `Lease__c`, `Maintenance_Request__c`, `Maintenance_Worker__c`, `Notification__c`, `Payment__c`, `Property__c`, `Property_Cost__c`, `Property_Feature__c`, `Property_Image__c`, `Property_Listing__c`, `Property_Management_Company__c`, `Property_Owner__c`, `Property_Sale__c`, `Tenant__c` | | `force-app/main/default/layouts/` | Page layouts for each custom object | -| `force-app/main/default/permissionsets/` | `Property_Management_Access` permission set | -| `force-app/main/default/classes/` | Apex classes — `MaintenanceRequestListAction`, `MaintenanceRequestUpdatePriorityAction` | -| `force-app/main/default/cspTrustedSites/` | CSP trusted sites for external resources (Google Fonts, Pexels, Unsplash, GitHub Avatars) | +| `force-app/main/default/permissionsets/` | `Property_Management_Access` (full admin access) and `Tenant_Maintenance_Access` (scoped tenant access) | +| `force-app/main/default/classes/` | Apex classes — `MaintenanceRequestTriggerHandler`, `TenantTriggerHandler`, `UIBundleAuthUtils`, `UIBundleChangePassword`, `UIBundleForgotPassword`, `UIBundleLogin`, `UIBundleAppRegistration` | +| `force-app/main/default/triggers/` | Apex triggers — `MaintenanceRequestTrigger`, `TenantTrigger` | +| `force-app/main/default/cspTrustedSites/` | CSP trusted sites for external resources (Google Fonts, Pexels, Unsplash, GitHub Avatars, OpenStreetMap, Open-Meteo) | | `force-app/main/default/data/` | Sample data (JSON) for all objects, importable via `sf data import tree` | | `force-app/main/default/digitalExperienceConfigs/` | Experience Cloud site configuration | | `force-app/main/default/digitalExperiences/` | Experience Cloud site definition | -| `force-app/main/default/networks/` | Experience Cloud network | -| `force-app/main/default/sites/` | Salesforce site | +| `force-app/main/default/networks/` | Experience Cloud network metadata | +| `force-app/main/default/sites/` | Salesforce Sites configuration | -## Getting started +--- -Navigate to the UI Bundle and install dependencies: +## Prerequisites + +Before you begin, ensure the following are in place. + +### Tools + +| Tool | Minimum Version | Install | +| ----------------------------------------------------------------------------- | ------------------ | ----------------------------------- | +| [Salesforce CLI (`sf`)](https://developer.salesforce.com/tools/salesforcecli) | v2+ | `npm install -g @salesforce/cli` | +| [Node.js](https://nodejs.org/) | v22+ | [nodejs.org](https://nodejs.org/) | +| [Git](https://git-scm.com/) | Any recent version | [git-scm.com](https://git-scm.com/) | + +Verify your Salesforce CLI version with: + +```bash +sf --version +``` + +### Salesforce Org Requirements + +This project requires a Salesforce org with the following features and licenses. **Developer Edition orgs do not include these by default.** Use a sandbox, an org configured with add-ons, or request a pre-configured org from your Salesforce account team. + +- **Digital Experiences (Experience Cloud) enabled** — required to deploy and run the Experience Cloud site. To verify, go to **Setup > Digital Experiences > Settings** and confirm "Enable Digital Experiences" is checked. +- **Customer Community** or **Customer Community Plus** user licenses — required to create community (portal) users. Customer Community Plus is recommended if you need record-level sharing via sharing rules. +- **Salesforce Sites enabled** — required for guest user access. + +> **Note:** If Digital Experiences is not yet enabled in your org, go to **Setup > Digital Experiences > Settings**, check "Enable Digital Experiences", set a domain name, and save. This action cannot be undone. + +--- + +## Quick Start (Automated) + +Two npm scripts at the project root streamline getting started and deployment. + +**`npm run sf-project-setup`** — installs the UI Bundle dependencies, builds the app, and starts the dev server (see [Local Development](#local-development)). + +**`npm run setup`** — automates the full setup: login, deploy metadata, assign permission sets, import sample data, fetch the GraphQL schema, run codegen, build the UI Bundle, and optionally launch the dev server: + +```bash +npm run setup -- --target-org +``` + +Replace `` with your target org alias or username. Running without flags presents an interactive step picker. Pass `--yes` to skip it and run all steps immediately: + +```bash +npm run setup -- --target-org --yes +``` + +### Common Options + +| Option | Description | +| ------------------------- | ------------------------------------------------------------------------------------ | +| `--skip-login` | Skip browser login (auto-skipped if org is already connected) | +| `--skip-deploy` | Skip the metadata deploy step | +| `--skip-permset` | Skip permission set assignment | +| `--skip-data` | Skip data preparation and import | +| `--skip-graphql` | Skip GraphQL schema fetch and codegen | +| `--skip-ui-bundle-build` | Skip `npm install` and UI Bundle build | +| `--skip-dev` | Do not launch the dev server at the end | +| `--permset-name ` | Assign only a specific permission set (repeatable). Default: all sets in the project | +| `--ui-bundle-name ` | UI Bundle folder name under `uiBundles/` (default: auto-detected) | +| `-y, --yes` | Skip interactive step picker and run all enabled steps immediately | + +For a full list of options: + +```bash +npm run setup -- --help +``` + +> **After the automated setup completes**, proceed to [Org Configuration](#org-configuration) for the manual steps that cannot be automated via CLI (profile cloning, site member configuration, guest user setup, and publishing the Experience Cloud site). + +--- + +## Step-by-Step Setup + +Use this section if you prefer to run each step manually, or if the automated script is not available. + +### 1. Install Dependencies + +Install root-level project dependencies: + +```bash +npm install +``` + +Install the UI Bundle dependencies and build it: ```bash cd force-app/main/default/uiBundles/propertyrentalapp npm install -npm run dev +npm run build +cd - ``` -Opens at http://localhost:5173 by default. For build and test instructions, see the [UI Bundle README](force-app/main/default/uiBundles/propertyrentalapp/README.md). +This produces the static bundle artifacts that are packaged into the Salesforce metadata. Having them built now means any deploy option in [Step 3](#3-deploy-metadata) is ready to run without an additional build step. -## Deploy +### 2. Authenticate Your Org -### Deploy everything (metadata + Experience Cloud site + UI Bundle) +Log in to your target org using the Salesforce CLI. This opens a browser window for OAuth authentication: ```bash -cd force-app/main/default/uiBundles/propertyrentalapp && npm install && npm run build && cd - +sf org login web --alias +``` + +To verify the login was successful: + +```bash +sf org display --target-org +``` + +If you are working with a sandbox, use: + +```bash +sf org login web --alias --instance-url https://test.salesforce.com +``` + +### 3. Deploy Metadata + +#### Option A: Deploy Everything (metadata + Experience Cloud site + UI Bundle) + +Build the UI Bundle first, then deploy all source directories in a single command: + +```bash +cd force-app/main/default/uiBundles/propertyrentalapp && npm run build && cd - sf project deploy start --source-dir force-app --target-org ``` -### Deploy the UI Bundle only +#### Option B: Deploy Metadata Only (objects, layouts, permission sets, Apex) -```bash -cd force-app/main/default/uiBundles/propertyrentalapp && npm install && npm run build && cd - -sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org -``` - -### Deploy metadata only (objects, layouts, permission sets, Apex classes) +Use this approach for an initial deploy to verify metadata before deploying the Experience Cloud site: ```bash sf project deploy start \ @@ -54,10 +183,12 @@ sf project deploy start \ --source-dir force-app/main/default/layouts \ --source-dir force-app/main/default/permissionsets \ --source-dir force-app/main/default/classes \ + --source-dir force-app/main/default/triggers \ + --source-dir force-app/main/default/cspTrustedSites \ --target-org ``` -### Deploy Experience Cloud site only +#### Option C: Deploy Experience Cloud Site Only ```bash sf project deploy start \ @@ -68,45 +199,307 @@ sf project deploy start \ --target-org ``` -Replace `` with your target org alias. +#### Option D: Deploy the UI Bundle Only -## Import sample data +```bash +cd force-app/main/default/uiBundles/propertyrentalapp && npm run build && cd - +sf project deploy start --source-dir force-app/main/default/uiBundles --target-org +``` + +> **Deployment order matters.** Deploy metadata (Option B) before deploying the Experience Cloud site (Option C). The site configuration depends on the custom objects and classes being present in the org. + +### 4. Assign Permission Sets + +Two permission sets are included in this project: + +| Permission Set | Purpose | Assign To | +| ---------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------- | +| `Property_Management_Access` | Full CRUD access to all custom objects. Intended for property managers and admin users. | Internal users managing the app | +| `Tenant_Maintenance_Access` | Scoped read/write access for tenants. Allows creating and updating their own maintenance requests only. | Tenant community users | + +Assign permission sets using the CLI: + +```bash +# Assign Property_Management_Access to a specific user +sf org assign permset --name Property_Management_Access --on-behalf-of --target-org + +# Assign Tenant_Maintenance_Access to a tenant user +sf org assign permset --name Tenant_Maintenance_Access --on-behalf-of --target-org +``` + +To assign to multiple users, repeat the command for each user, or use the automated script which assigns all permission sets to the running user by default. + +### 5. Import Sample Data + +Once the metadata has been successfully deployed: ```bash sf data import tree --plan force-app/main/default/data/data-plan.json --target-org ``` -## Using setup-cli.mjs +The data plan imports records in dependency order: Contacts, Agents, Maintenance Workers, Properties, Tenants, Applications, Maintenance Requests, Notifications, Property Management Companies, Property Owners, Leases, Property Sales, Property Costs, Payments, KPI Snapshots, Property Listings, Property Images, and Property Features. -When this app is built (e.g. from the monorepo or from a published package), a `setup-cli.mjs` script is included at the project root. It runs the full setup in one go: login (if needed), deploy metadata, assign the `Property_Management_Access` permission set, prepare and import sample data, fetch GraphQL schema and run codegen, build the UI Bundle, and optionally start the dev server. +> **Note:** If you re-run the import, duplicate records will be created. Wipe existing records first or use the `--upsert` flag if your plan supports it. -Run from the **project root** (the directory that contains `force-app/`, `sfdx-project.json`, and `setup-cli.mjs`): +### 6. Generate GraphQL Types + +After metadata is deployed, generate the GraphQL schema and TypeScript types for the UI Bundle. These are used to provide type-safe queries against the Salesforce GraphQL API. ```bash -node setup-cli.mjs --target-org +cd force-app/main/default/uiBundles/propertyrentalapp +npm run graphql:schema # Fetches schema from org → outputs schema.graphql +npm run graphql:codegen # Generates TypeScript types → updates src/api/graphql-operations-types.ts +cd - ``` -Common options: +> **Prerequisite:** The org must be authenticated and metadata must already be deployed before running these commands, as the schema is generated from the org's live metadata. -| Option | Description | -| ------------------------ | ---------------------------------------------------------------- | -| `--skip-login` | Skip browser login (org already authenticated) | -| `--skip-data` | Skip data preparation and import | -| `--skip-graphql` | Skip GraphQL schema fetch and codegen | -| `--skip-ui-bundle-build` | Skip `npm install` and UI Bundle build | -| `--skip-dev` | Do not start the dev server at the end | -| `--permset ` | Permission set to assign (default: `Property_Management_Access`) | -| `--app ` | Web app folder name when multiple exist | +### 7. Rebuild the UI Bundle -For all options: `node setup-cli.mjs --help`. +Step 6 updates the generated GraphQL types in the UI Bundle source. Rebuild the app to compile those changes into the bundle before deploying: -## Configure Your Salesforce DX Project +```bash +cd force-app/main/default/uiBundles/propertyrentalapp +npm run build +cd - +``` -The `sfdx-project.json` file contains useful configuration information for your project. See [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) in the _Salesforce DX Developer Guide_ for details about this file. +### 8. Deploy the UI Bundle -## Read All About It +Once the build is complete, deploy the UI Bundle to your org: + +```bash +sf project deploy start --source-dir force-app/main/default/uiBundles --target-org +``` + +--- + +## Org Configuration + +The following steps must be completed manually in the Salesforce Setup UI. They configure Experience Cloud, user profiles, and data sharing for guest and community users. Complete these steps **after** the metadata and UI Bundle have been deployed. + +> **License requirement:** Your org must have **Customer Community** or **Customer Community Plus** user licenses available before you can complete these steps. Customer Community Plus licenses are required if you need ownership-based record sharing (Private OWD with sharing rules). Verify available licenses at **Setup > Company Settings > Company Information**, in the "User Licenses" section. + +--- + +### Step 1: Assign a Role to Your Admin User + +Salesforce requires that the org's admin user has a role assigned before Experience Cloud sites can be created or managed. If your admin user already has a role, skip this step. + +1. Go to **Setup > Users > Roles**. +2. Click **Set Up Roles**. +3. Click **Add Role**. Provide a label (e.g., `CEO`) and save. +4. From the role hierarchy, click the role you just created, then click **Assign Users to Role**. +5. Add your system administrator user and click **Save**. + +> **Why this matters:** Salesforce prevents users without a role in the hierarchy from owning Experience Cloud sites. This is a platform-level requirement, not specific to this app. + +--- + +### Step 2: Create and Configure the Community Profile + +Community users require a profile that is based on one of the standard community profile templates. You will clone one of these templates and configure its permissions for this app. + +#### 2a. Clone the Base Profile + +1. Go to **Setup > Users > Profiles**. +2. Locate either **Customer Community User** or **Customer Community Plus User**. + - Choose **Customer Community Plus User** if you need ownership-based record-level sharing (recommended). +3. Click **Clone** next to the profile. Give it a descriptive name such as `Property Rental Tenant`. +4. Click **Save**. + +#### 2b. Edit the Cloned Profile + +Open the newly cloned profile and configure the following settings. + +**Administrative Permissions:** + +| Permission | Setting | +| ----------- | ------- | +| API Enabled | Checked | + +**Custom Object Permissions:** + +Set the following object-level access. After saving, also review field-level security for each object to ensure all relevant fields are readable. + +| Object | Read | Create | Edit | Delete | +| :--------------------------------------------------------------- | :--: | :----: | :--: | :----: | +| Agents (`Agent__c`) | ✓ | | | | +| Applications (`Application__c`) | ✓ | ✓ | ✓ | ✓ | +| KPI Snapshots (`KPI_Snapshot__c`) | ✓ | | | | +| Leases (`Lease__c`) | ✓ | | | | +| Maintenance Requests (`Maintenance_Request__c`) | ✓ | ✓ | ✓ | ✓ | +| Maintenance Workers (`Maintenance_Worker__c`) | ✓ | | ✓ | | +| Notifications (`Notification__c`) | ✓ | | | | +| Payments (`Payment__c`) | ✓ | | | | +| Properties (`Property__c`) | ✓ | | | | +| Property Costs (`Property_Cost__c`) | ✓ | | | | +| Property Features (`Property_Feature__c`) | ✓ | | | | +| Property Images (`Property_Image__c`) | ✓ | | | | +| Property Listings (`Property_Listing__c`) | ✓ | | | | +| Property Management Companies (`Property_Management_Company__c`) | ✓ | | | | +| Property Owners (`Property_Owner__c`) | ✓ | | | | +| Property Sales (`Property_Sale__c`) | ✓ | | | | +| Tenants (`Tenant__c`) | ✓ | | | | + +**Apex Class Access:** + +Scroll to the **Enabled Apex Class Access** section and add the following classes. These classes handle authentication flows called by the UI Bundle: + +- `UIBundleAuthUtils` +- `UIBundleChangePassword` +- `UIBundleForgotPassword` + +> **Note:** `MaintenanceRequestTriggerHandler` and `TenantTriggerHandler` are trigger handler classes that run in system context when DML operations are performed. They do not need to be explicitly enabled in community profiles. + +#### 2c. Configure View All for Property, Property Listing, Maintenance Worker + +Tenants need to see all available properties and listings, not just records they own. Enable **View All** on these three objects for the community profile: + +1. Go to **Setup > Object Manager**. +2. Search for and open **Property**. +3. Click **Object Access** in the left navigation. +4. Set the profile's access to allow viewing all records. +5. Repeat for **Property Listing** and **Maintenance Worker**. + +- **Note**: the access for the **Maintenance Worker** is required for the `MaintenanceRequestTriggerHandler` to auto assign a worker on submission + +#### 2d. Configure Field Level Security for the Application + +1. Go to **Setup > Object Manager**. +2. Search for and open **Application**. +3. Click **Fields and Relationships** in the left navigation. +4. Select the `References__c` field, then click **Set Field-Level Security**. +5. Enable the field to be "Visible" to the community profile. +6. Click **Save**. +7. Repeat for the following fields: + +- `Property__c` +- `Employment__c` +- `User__c` +- `Status__c` +- `Start_Date__c` + +--- + +### Step 3: Configure the Experience Cloud Site + +After deploying the Experience Cloud site metadata, configure its membership and self-registration settings. + +1. In the App Launcher, open the **Digital Experiences** app (search for it if needed). +2. Find the **Property Rental App** site and click **Workspaces**. +3. Click the **Administration** tile. + +#### Members + +1. In the left navigation, click **Members**. +2. Under **Select Profiles**, add the cloned community profile (`Property Rental Tenant`) to the **Selected Profiles** list. +3. Click **Save**. + +#### Login & Registration + +1. In the left navigation, click **Login & Registration**. +2. Check **Allow customers and partners to self-register**. +3. Under **Registration**, set: + - **Profile**: Select your cloned community profile (`Property Rental Tenant`). + - **Account**: Select or create an account record to associate self-registered users with (e.g., a generic "Portal Account"). +4. Click **Save**. + +#### Guest User Profile + +The site's guest user profile controls what unauthenticated visitors can see. You will configure this profile in [Step 4](#step-4-configure-the-guest-user-profile). To navigate to it: + +1. In the **Administration** area, click **Preferences** in the left navigation. +2. Click the link next to **Guest user profile** to open it directly. + +--- + +### Step 4: Configure the Guest User Profile + +The guest user profile is auto-generated by Salesforce when an Experience Cloud site is created. It controls what unauthenticated visitors can access. Configure it to allow browsing of available properties only. + +Open the guest user profile (linked from the site's Preferences page, as described above) and apply the following settings. + +**Administrative Permissions:** + +| Permission | Setting | +| ----------- | ------- | +| API Enabled | Checked | + +> **Security note:** Enabling API access for the guest profile is required for the UI Bundle to make GraphQL API calls on behalf of unauthenticated users. Ensure that object-level and field-level permissions are restrictive (as listed below) to avoid exposing sensitive data. + +**Custom Object Permissions:** + +Guest users can only browse available properties and listings. All other objects are restricted. + +| Object | Read | Create | Edit | Delete | +| :---------------------------------------- | :--: | :----: | :--: | :----: | +| Properties (`Property__c`) | ✓ | | | | +| Property Costs (`Property_Cost__c`) | ✓ | | | | +| Property Features (`Property_Feature__c`) | ✓ | | | | +| Property Images (`Property_Image__c`) | ✓ | | | | +| Property Listings (`Property_Listing__c`) | ✓ | | | | +| All other objects | — | — | — | — | + +**Apex Class Access:** + +Add the following classes. These are required for the self-registration and login flows available to unauthenticated users: + +- `UIBundleLogin` +- `UIBundleRegistration` + +--- + +### Step 5: Create Criteria-Based Sharing Rules for Guest Access + +By default, Salesforce does not expose any records to guest users. You must create **criteria-based sharing rules** to make available properties and listings visible to unauthenticated site visitors. + +> **Organization-Wide Defaults (OWD):** Criteria-based sharing rules for guest users only work correctly when the object's OWD is set to **Public Read Only** or **Private**. Verify your OWD settings at **Setup > Sharing Settings** before proceeding. + +#### Create a Sharing Rule for Properties + +1. Go to **Setup > Sharing Settings**. +2. Scroll to the **Property Sharing Rules** section and click **New**. +3. Configure the rule: + - **Label**: `Available Properties for Guest Users` + - **Rule Type**: Select **Based on criteria** + - **Criteria**: `Status Equals Available` (adjust the field and value to match your data model) + - **Share with**: Select **Guests of the Property Rental App site** (the guest user group for your Experience Cloud site) + - **Access Level**: `Read Only` +4. Click **Save**. + +#### Create a Sharing Rule for Property Listings + +Repeat the same steps in the **Property Listing Sharing Rules** section: + +- **Label**: `Available Property Listings for Guest Users` +- **Rule Type**: `Based on criteria` +- **Criteria**: Match listings you want to expose (e.g., `Status Equals Active`) +- **Share with**: `Guests of the Property Rental App site` +- **Access Level**: `Read Only` + +> **Note:** The "Guests of [site name]" option only appears in the sharing rule target list after the Experience Cloud site has been created and saved. If you do not see it, confirm the site metadata has been deployed and the site exists in the org. + +--- + +## Local Development + +Install project dependencies and start the dev server: + +```bash +npm install +npm run sf-project-setup +``` + +This installs the UI Bundle dependencies, builds the app, and opens the dev server at `http://localhost:5173`. For manual build and test instructions, see the [UI Bundle README](force-app/main/default/uiBundles/propertyrentalapp/README.md). + +--- + +## Resources - [Salesforce Extensions Documentation](https://developer.salesforce.com/tools/vscode/) - [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) - [Salesforce DX Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm) - [Salesforce CLI Command Reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm) +- [Experience Cloud Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_intro.htm) +- [Salesforce DX Project Configuration](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_ws_config.htm) diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls index 664b363..a6af7e7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/classes/MaintenanceRequestTriggerHandler_Test.cls @@ -103,7 +103,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'Electrical', Description__c = 'Outlet not working', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); @@ -129,7 +129,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'HVAC', Description__c = 'AC not cooling', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); @@ -203,10 +203,10 @@ private class MaintenanceRequestTriggerHandler_Test { static void testBulkRequestAssignment() { Test.startTest(); List requests = new List{ - new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 1', Priority__c = 'High (Same Day)'), + new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 1', Priority__c = 'High'), new Maintenance_Request__c(Type__c = 'Electrical', Description__c = 'Issue 1', Priority__c = 'Standard'), new Maintenance_Request__c(Type__c = 'Plumbing', Description__c = 'Leak 2', Priority__c = 'Standard'), - new Maintenance_Request__c(Type__c = 'HVAC', Description__c = 'AC Issue', Priority__c = 'High (Same Day)'), + new Maintenance_Request__c(Type__c = 'HVAC', Description__c = 'AC Issue', Priority__c = 'High'), new Maintenance_Request__c(Type__c = 'Appliance', Description__c = 'Fridge Issue', Priority__c = 'Standard') }; insert requests; @@ -261,7 +261,7 @@ private class MaintenanceRequestTriggerHandler_Test { Maintenance_Request__c request = new Maintenance_Request__c( Type__c = 'Plumbing', Description__c = 'Emergency leak', - Priority__c = 'High (Same Day)' + Priority__c = 'High' ); insert request; Test.stopTest(); diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Maintenance_Request__c.json b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Maintenance_Request__c.json index f46fedc..b79ef66 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Maintenance_Request__c.json +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Maintenance_Request__c.json @@ -26,7 +26,7 @@ "User__c": "@TenantRef2", "Description__c": "Main bedroom electrical outlet stopped working. No power to the entire wall. Possible circuit breaker issue.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 200.0, "Actual_Cost__c": 185.0, @@ -43,7 +43,7 @@ "User__c": "@TenantRef3", "Description__c": "Air conditioning unit is making loud grinding noises when running. May need bearing replacement or refrigerant check.", "Type__c": "HVAC", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 300.0, "Actual_Cost__c": null, @@ -162,7 +162,7 @@ "User__c": "@TenantRef15", "Description__c": "Post-tenant move-out deep cleaning including carpets, windows, appliances, and all surfaces.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 450.0, "Actual_Cost__c": 425.0, @@ -179,7 +179,7 @@ "User__c": "@TenantRef8", "Description__c": "Annual roof inspection revealed loose tiles that need securing and replacement before winter season.", "Type__c": "Plumbing", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 800.0, "Actual_Cost__c": null, @@ -213,7 +213,7 @@ "User__c": "@TenantRef7", "Description__c": "Main entrance lock is sticking and needs replacement for new tenant security and smooth operation.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 120.0, "Actual_Cost__c": 110.0, @@ -281,7 +281,7 @@ "User__c": "@TenantRef6", "Description__c": "Monthly elevator maintenance and safety inspection as required by local building code regulations.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "Resolved", "Est_Cost__c": 300.0, "Actual_Cost__c": 300.0, @@ -366,7 +366,7 @@ "User__c": "@TenantRef10", "Description__c": "Annual electrical panel inspection and circuit breaker testing to ensure electrical safety compliance.", "Type__c": "Electrical", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "New", "Est_Cost__c": 250.0, "Actual_Cost__c": null, @@ -417,7 +417,7 @@ "User__c": "@TenantRef15", "Description__c": "Install new washer and dryer units in laundry room for incoming tenant. Connect water, drain, and electrical.", "Type__c": "Appliance", - "Priority__c": "High (Same Day)", + "Priority__c": "High", "Status__c": "In Progress", "Est_Cost__c": 200.0, "Actual_Cost__c": null, diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Property_Image__c.json b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Property_Image__c.json index eb2d404..3424ec7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Property_Image__c.json +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/data/Property_Image__c.json @@ -79,7 +79,7 @@ }, "Name": "Modern Haven Gallery", "Property__c": "@PropertyRef2", - "Image_URL__c": "https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4", + "Image_URL__c": "https://images.unsplash.com/photo-1554995207-c18c203602cb", "Image_Type__c": "Gallery", "Display_Order__c": 2, "Alt_Text__c": "Modern Haven - stylish interior design" diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml index 75a758a..ded5703 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/objects/Maintenance_Request__c/fields/Priority__c.field-meta.xml @@ -13,12 +13,12 @@ false - Emergency (2hr) + Emergency false - High (Same Day) + High false diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/package.json b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/package.json index b8a019d..c70f59b 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/package.json +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/package.json @@ -15,8 +15,8 @@ "graphql:schema": "node scripts/get-graphql-schema.mjs" }, "dependencies": { - "@salesforce/sdk-data": "^1.118.1", - "@salesforce/ui-bundle": "^1.118.1", + "@salesforce/sdk-data": "^1.119.5", + "@salesforce/ui-bundle": "^1.119.5", "@tailwindcss/vite": "^4.1.17", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -47,7 +47,7 @@ "@graphql-eslint/eslint-plugin": "^4.1.0", "@graphql-tools/utils": "^11.0.0", "@playwright/test": "^1.49.0", - "@salesforce/vite-plugin-ui-bundle": "^1.118.1", + "@salesforce/vite-plugin-ui-bundle": "^1.119.5", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.1.0", "@testing-library/user-event": "^14.5.2", diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/appLayout.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/appLayout.tsx index 7ee142a..e7e67a7 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/appLayout.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/appLayout.tsx @@ -1,24 +1,27 @@ import { useState } from "react"; import { Outlet } from "react-router"; import { TopBar } from "@/components/layout/TopBar"; -import { NavMenu } from "@/components/layout/VerticalNav"; +import { VerticalNav } from "@/components/layout/VerticalNav"; import { Toaster } from "@/components/ui/sonner"; +import { TenantAccessProvider } from "@/context/TenantAccessContext"; export default function AppLayout() { const [isNavOpen, setIsNavOpen] = useState(false); return ( -
- - setIsNavOpen(true)} /> + +
+ + setIsNavOpen(true)} /> -
- setIsNavOpen(false)} /> +
+ setIsNavOpen(false)} /> -
- -
+
+ +
+
-
+ ); } diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx index 47a293f..e644e9b 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx @@ -1,41 +1,61 @@ -import { useState } from "react"; -import { ChevronDown, Menu, UserPen, LogOut, User, Loader2 } from "lucide-react"; +import { ChevronDown, Menu, User } from "lucide-react"; import { Link } from "react-router"; -import { useAuth } from "@/features/authentication/context/AuthContext"; import { ROUTES } from "@/features/authentication/authenticationConfig"; import zenLogo from "@/assets/icons/zen-logo.svg"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { AuthMenu } from "@/features/authentication/menu/AuthMenu"; export interface TopBarProps { onMenuClick?: () => void; } export function TopBar({ onMenuClick }: TopBarProps) { - const { user, isAuthenticated, loading } = useAuth(); - return ( -
+
- + +
- {loading ? ( - - ) : isAuthenticated ? ( - - ) : ( - - )} + ( + + )} + guestContent={ + + } + />
); } @@ -51,83 +71,3 @@ function Logo() {
); } - -function LoginLink() { - return ( - - - Sign Up / Sign In - - ); -} - -function AuthenticatedControls({ userName }: { userName: string }) { - return ( -
- -
- ); -} - -function UserMenu({ userName }: { userName: string }) { - const { logout } = useAuth(); - const [open, setOpen] = useState(false); - - return ( -
- - - {open && ( - <> -
setOpen(false)} aria-hidden /> -
- setOpen(false)} - className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 transition-colors hover:bg-gray-100" - role="menuitem" - > - - Edit Profile - -
- -
- - )} -
- ); -} diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx index 0a88053..be6f145 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx @@ -1,17 +1,17 @@ import { Link, useLocation } from "react-router"; import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react"; import { useAuth } from "@/features/authentication/context/AuthContext"; -import { useTenantAccess } from "@/hooks/useTenantAccess"; +import { useTenantAccess } from "@/context/TenantAccessContext"; import { useMemo } from "react"; -interface NavItem { +interface VerticalNavItem { path: string; icon: LucideIcon; label: string; authRequired?: boolean; } -const navItems: NavItem[] = [ +const navItems: VerticalNavItem[] = [ { path: "/", icon: Home, label: "Home" }, { path: "/dashboard", icon: BarChart3, label: "Dashboard", authRequired: true }, { path: "/properties", icon: Search, label: "Property Search" }, @@ -19,15 +19,15 @@ const navItems: NavItem[] = [ { path: "/contact", icon: Phone, label: "Contact Us" }, ]; -interface NavMenuProps { +interface VerticalNavProps { isOpen?: boolean; onClose?: () => void; } -export function NavMenu({ isOpen = false, onClose }: NavMenuProps) { +export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) { const location = useLocation(); - const { isAuthenticated, user } = useAuth(); - const { hasTenantRecord } = useTenantAccess(user?.id); + const { isAuthenticated } = useAuth(); + const { hasTenantRecord } = useTenantAccess(); const visibleItems = useMemo( () => diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/avatar.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/avatar.tsx new file mode 100644 index 0000000..42dc27d --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/avatar.tsx @@ -0,0 +1,109 @@ +'use client'; + +import * as React from 'react'; +import { Avatar as AvatarPrimitive } from 'radix-ui'; + +import { cn } from '@/lib/utils'; + +function Avatar({ + className, + size = 'default', + ...props +}: React.ComponentProps & { + size?: 'default' | 'sm' | 'lg'; +}) { + return ( + + ); +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) { + return ( + svg]:hidden', + 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', + 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', + className + )} + {...props} + /> + ); +} + +function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} + +function AvatarGroupCount({ + className, + ...props +}: React.ComponentProps<'div'>) { + return ( +
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', + className + )} + {...props} + /> + ); +} + +export { + Avatar, + AvatarImage, + AvatarFallback, + AvatarBadge, + AvatarGroup, + AvatarGroupCount, +}; diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/dropdown-menu.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..7999b4b --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +'use client'; + +import * as React from 'react'; +import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; +import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'; + +import { cn } from '@/lib/utils'; + +function DropdownMenu({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuItem({ + className, + inset, + variant = 'default', + ...props +}: React.ComponentProps & { + inset?: boolean; + variant?: 'default' | 'destructive'; +}) { + return ( + + ); +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + ); +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<'span'>) { + return ( + + ); +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + {children} + + + ); +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +}; diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/index.ts b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/index.ts index d982716..5b9b0f1 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/index.ts +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/index.ts @@ -13,6 +13,14 @@ */ export { Alert, AlertTitle, AlertDescription, AlertAction } from './alert'; +export { + Avatar, + AvatarImage, + AvatarFallback, + AvatarBadge, + AvatarGroup, + AvatarGroupCount, +} from './avatar'; export { Button, buttonVariants } from './button'; export { Card, @@ -35,6 +43,23 @@ export { DialogTitle, DialogTrigger, } from './dialog'; +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +} from './dropdown-menu'; export { Field, FieldDescription, diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx new file mode 100644 index 0000000..d40115c --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/context/TenantAccessContext.tsx @@ -0,0 +1,55 @@ +import { createContext, useContext, useEffect, useState, type ReactNode } from "react"; +import { useAuth } from "@/features/authentication/context/AuthContext"; +import { hasTenantAccess } from "@/api/tenantApi"; + +interface TenantAccessContextType { + hasTenantRecord: boolean; + loading: boolean; +} + +const TenantAccessContext = createContext({ + hasTenantRecord: false, + loading: true, +}); + +export function TenantAccessProvider({ children }: { children: ReactNode }) { + const { user } = useAuth(); + const [hasTenantRecord, setHasTenantRecord] = useState(false); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const id = user?.id?.trim() ?? ""; + if (!id) { + setHasTenantRecord(false); + setLoading(false); + return; + } + + let cancelled = false; + setLoading(true); + hasTenantAccess(id) + .then((allowed) => { + if (!cancelled) setHasTenantRecord(allowed); + }) + .catch(() => { + if (!cancelled) setHasTenantRecord(false); + }) + .finally(() => { + if (!cancelled) setLoading(false); + }); + + return () => { + cancelled = true; + }; + }, [user?.id]); + + return ( + + {children} + + ); +} + +export function useTenantAccess(): TenantAccessContextType { + return useContext(TenantAccessContext); +} diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx index 015549d..bb49c2c 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx @@ -1,12 +1,12 @@ import { Navigate, Outlet, useLocation } from "react-router"; import { useAuth } from "@/features/authentication/context/AuthContext"; import { ROUTES } from "@/features/authentication/authenticationConfig"; -import { useTenantAccess } from "@/hooks/useTenantAccess"; +import { useTenantAccess } from "@/context/TenantAccessContext"; export default function TenantRoute() { const location = useLocation(); - const { isAuthenticated, loading, user } = useAuth(); - const { hasTenantRecord, loading: tenantLoading } = useTenantAccess(user?.id); + const { isAuthenticated, loading } = useAuth(); + const { hasTenantRecord, loading: tenantLoading } = useTenantAccess(); if (loading || tenantLoading) return null; diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx new file mode 100644 index 0000000..b953190 --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx @@ -0,0 +1,93 @@ +import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react"; +import { Link } from "react-router"; +import { useAuth } from "../context/AuthContext"; +import { ROUTES } from "../authenticationConfig"; +import { Button } from "../../../components/ui/button"; +import { Skeleton } from "../../../components/ui/skeleton"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../../../components/ui/dropdown-menu"; + +interface User { + readonly id: string; + readonly name: string; +} + +export interface AuthMenuProps { + /** Custom trigger button for the authenticated user's dropdown */ + trigger?: (user: User) => React.ReactNode; + /** Content rendered instead of the dropdown when the user is not logged in (e.g. a standalone Sign In button) */ + guestContent?: React.ReactNode; + /** Extra menu items inserted after "Edit Profile" and before "Sign Out" */ + menuItems?: React.ReactNode; + /** CSS class applied to the DropdownMenuContent wrapper */ + className?: string; +} + +export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) { + const { user, isAuthenticated, loading, logout } = useAuth(); + + if (loading) { + return ; + } + + if (!isAuthenticated && guestContent) { + return <>{guestContent}; + } + + const defaultTrigger = ( + + ); + + const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger; + + return ( + + {triggerNode} + + + {isAuthenticated ? ( + <> + {user?.name} + + + + + Edit Profile + + + {menuItems} + logout()}> + + Sign Out + + + ) : ( + <> + + + + Log In + + + + + + Register + + + + )} + + + ); +} + +export default AuthMenu; diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/utils/filterUtils.ts b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/utils/filterUtils.ts index 8806001..871e3fa 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/utils/filterUtils.ts +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/utils/filterUtils.ts @@ -385,7 +385,16 @@ function buildSingleFilter( if (!value) return null; const searchFields = config?.searchFields ?? []; if (searchFields.length === 0) return null; - const clauses = searchFields.map((f) => ({ [f]: { like: `%${value}%` } }) as TFilter); + // Supports dot-notation for relationship fields (e.g. "User__r.Name") + // by building nested filter objects: { User__r: { Name: { like: "%x%" } } } + const clauses = searchFields.map((f) => { + const parts = f.split("."); + let clause: Record = { like: `%${value}%` }; + for (let i = parts.length - 1; i >= 0; i--) { + clause = { [parts[i]]: clause }; + } + return clause as TFilter; + }); if (clauses.length === 1) return clauses[0]; return { or: clauses } as TFilter; } diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useTenantAccess.ts b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useTenantAccess.ts deleted file mode 100644 index 4717168..0000000 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useTenantAccess.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useEffect, useState } from "react"; -import { hasTenantAccess } from "@/api/tenantApi"; - -export function useTenantAccess(userId: string | undefined): { - hasTenantRecord: boolean; - loading: boolean; -} { - const [hasTenantRecord, setHasTenantRecord] = useState(false); - const [loading, setLoading] = useState(false); - - useEffect(() => { - const id = userId?.trim() ?? ""; - if (!id) { - setHasTenantRecord(false); - setLoading(false); - return; - } - - let cancelled = false; - setLoading(true); - hasTenantAccess(id) - .then((allowed) => { - if (!cancelled) setHasTenantRecord(allowed); - }) - .catch(() => { - if (!cancelled) setHasTenantRecord(false); - }) - .finally(() => { - if (!cancelled) setLoading(false); - }); - - return () => { - cancelled = true; - }; - }, [userId]); - - return { hasTenantRecord, loading }; -} diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx index b68dcb7..7502e64 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx @@ -44,8 +44,8 @@ const TYPE_OPTIONS = [ const PRIORITY_OPTIONS = [ { value: "Standard", label: "Standard" }, - { value: "High (Same Day)", label: "High (Same Day)" }, - { value: "Emergency (2hr)", label: "Emergency (2hr)" }, + { value: "High", label: "High (Same Day)" }, + { value: "Emergency", label: "Emergency (2hr)" }, ] as const; const FILTER_CONFIGS: FilterFieldConfig[] = []; diff --git a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/routes.tsx b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/routes.tsx index 178f313..5290aca 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/routes.tsx +++ b/samples/ui-bundle-template-app-react-sample-b2x/force-app/main/default/uiBundles/propertyrentalapp/src/routes.tsx @@ -49,7 +49,7 @@ export const routes: RouteObject[] = [ { path: ROUTES.LOGIN.PATH, element: , - handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE } + handle: { showInNavigation: false, label: "Login", title: ROUTES.LOGIN.TITLE } }, { path: ROUTES.REGISTER.PATH, @@ -74,7 +74,7 @@ export const routes: RouteObject[] = [ { path: ROUTES.PROFILE.PATH, element: , - handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE } + handle: { showInNavigation: false, label: "Profile", title: ROUTES.PROFILE.TITLE } }, { path: ROUTES.CHANGE_PASSWORD.PATH, diff --git a/samples/ui-bundle-template-app-react-sample-b2x/package-lock.json b/samples/ui-bundle-template-app-react-sample-b2x/package-lock.json index 7a1a7e2..6165530 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/package-lock.json +++ b/samples/ui-bundle-template-app-react-sample-b2x/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salesforce/webapp-template-base-sfdx-project-experimental", - "version": "1.118.1", + "version": "1.119.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@salesforce/webapp-template-base-sfdx-project-experimental", - "version": "1.118.1", + "version": "1.119.5", "license": "SEE LICENSE IN LICENSE.txt", "devDependencies": { "@lwc/eslint-plugin-lwc": "^3.3.0", diff --git a/samples/ui-bundle-template-app-react-sample-b2x/package.json b/samples/ui-bundle-template-app-react-sample-b2x/package.json index f1094b9..9e9e49c 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/package.json +++ b/samples/ui-bundle-template-app-react-sample-b2x/package.json @@ -1,6 +1,6 @@ { "name": "@salesforce/ui-bundle-template-base-sfdx-project", - "version": "1.118.1", + "version": "1.119.5", "description": "Base SFDX project template", "license": "SEE LICENSE IN LICENSE.txt", "publishConfig": { @@ -20,7 +20,7 @@ "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", - "setup": "node scripts/setup-cli.mjs" + "setup": "node scripts/org-setup.mjs" }, "devDependencies": { "@lwc/eslint-plugin-lwc": "^3.3.0", diff --git a/samples/ui-bundle-template-app-react-sample-b2x/scripts/gitignore-templates.json b/samples/ui-bundle-template-app-react-sample-b2x/scripts/gitignore-templates.json new file mode 100644 index 0000000..bf22b45 --- /dev/null +++ b/samples/ui-bundle-template-app-react-sample-b2x/scripts/gitignore-templates.json @@ -0,0 +1,4 @@ +{ + "sfdx": "# This file is used for Git repositories to specify intentionally untracked files that Git should ignore. \n# If you are not using git, you can delete this file. For more information see: https://git-scm.com/docs/gitignore\n# For useful gitignore templates see: https://github.com/github/gitignore\n\n# Salesforce cache\n.sf/\n.sfdx/\n.localdevserver/\ndeploy-options.json\n\n# LWC VSCode autocomplete\n**/lwc/jsconfig.json\n\n# LWC Jest coverage reports\ncoverage/\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Dependency directories\nnode_modules/\n\n# Eslint cache\n.eslintcache\n\n# MacOS system files\n.DS_Store\n\n# Windows system files\nThumbs.db\nehthumbs.db\n[Dd]esktop.ini\n$RECYCLE.BIN/\n\n# Local environment variables\n.env\n\n# Python Salesforce Functions\n**/__pycache__/\n**/.venv/\n**/venv/\n", + "webapp": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\nbuild\npackage-lock.json\n*.local\n\n# Playwright\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n# Un-exclude Cursor AI rules for this SFDX project\n!.a4drules/\n!.cursor/\n" +} \ No newline at end of file diff --git a/samples/ui-bundle-template-app-react-sample-b2x/scripts/setup-cli.mjs b/samples/ui-bundle-template-app-react-sample-b2x/scripts/org-setup.mjs similarity index 92% rename from samples/ui-bundle-template-app-react-sample-b2x/scripts/setup-cli.mjs rename to samples/ui-bundle-template-app-react-sample-b2x/scripts/org-setup.mjs index 0c1fb2e..818b9ad 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/scripts/setup-cli.mjs +++ b/samples/ui-bundle-template-app-react-sample-b2x/scripts/org-setup.mjs @@ -4,11 +4,11 @@ * Use this script to make setup easier for each app generated from this template. * * Usage: - * node scripts/setup-cli.mjs --target-org # interactive step picker (all selected) - * node scripts/setup-cli.mjs --target-org --yes # skip picker, run all steps - * node scripts/setup-cli.mjs --target-org afv5 --skip-login - * node scripts/setup-cli.mjs --target-org afv5 --skip-data --skip-ui-bundle-build - * node scripts/setup-cli.mjs --target-org myorg --ui-bundle-name my-app + * node scripts/org-setup.mjs --target-org # interactive step picker (all selected) + * node scripts/org-setup.mjs --target-org --yes # skip picker, run all steps + * node scripts/org-setup.mjs --target-org afv5 --skip-login + * node scripts/org-setup.mjs --target-org afv5 --skip-data --skip-ui-bundle-build + * node scripts/org-setup.mjs --target-org myorg --ui-bundle-name my-app * * Steps (in order): * 1. login — sf org login web only if org not already connected (skip with --skip-login) @@ -28,6 +28,32 @@ import { readdirSync, existsSync, readFileSync, writeFileSync, unlinkSync } from const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); +/** + * npm strips .gitignore from published packages — generate them on first run. + * Templates are stored in scripts/gitignore-templates.json (generated at build + * time from the actual .gitignore files) so the content lives in one place. + * The JSON may not exist in git-cloned distributions where .gitignore is + * already present, so loading is best-effort. + */ +function loadGitignoreTemplates() { + const templatesPath = resolve(__dirname, 'gitignore-templates.json'); + if (!existsSync(templatesPath)) return null; + try { + return JSON.parse(readFileSync(templatesPath, 'utf8')); + } catch { + return null; + } +} + +function ensureGitignore(dir, content) { + if (!content) return; + const gitignorePath = resolve(dir, '.gitignore'); + if (!existsSync(gitignorePath)) { + writeFileSync(gitignorePath, content, 'utf8'); + console.log(`Created .gitignore in ${dir}`); + } +} + function resolveSfdxSource() { const sfdxPath = resolve(ROOT, 'sfdx-project.json'); if (!existsSync(sfdxPath)) { @@ -84,7 +110,7 @@ function parseArgs() { Setup CLI — one-command setup for apps in this project Usage: - node scripts/setup-cli.mjs --target-org [options] + node scripts/org-setup.mjs --target-org [options] Required: --target-org Target Salesforce org alias (e.g. myorg) @@ -292,6 +318,19 @@ function run(name, cmd, args, opts = {}) { } async function main() { + // Ensure .gitignore files exist (npm strips them from published packages). + const gitignoreTemplates = loadGitignoreTemplates(); + if (gitignoreTemplates) { + ensureGitignore(ROOT, gitignoreTemplates.sfdx); + if (existsSync(UIBUNDLES_DIR)) { + for (const entry of readdirSync(UIBUNDLES_DIR, { withFileTypes: true })) { + if (entry.isDirectory() && !entry.name.startsWith('.')) { + ensureGitignore(resolve(UIBUNDLES_DIR, entry.name), gitignoreTemplates.webapp); + } + } + } + } + const { targetOrg, uiBundleName, diff --git a/samples/ui-bundle-template-app-react-sample-b2x/scripts/sf-project-setup.mjs b/samples/ui-bundle-template-app-react-sample-b2x/scripts/sf-project-setup.mjs index ad5b699..8d0217a 100644 --- a/samples/ui-bundle-template-app-react-sample-b2x/scripts/sf-project-setup.mjs +++ b/samples/ui-bundle-template-app-react-sample-b2x/scripts/sf-project-setup.mjs @@ -10,11 +10,36 @@ import { spawnSync } from 'node:child_process'; import { resolve, dirname } from 'node:path'; import { fileURLToPath } from 'node:url'; -import { readdirSync, existsSync, readFileSync } from 'node:fs'; +import { readdirSync, existsSync, readFileSync, writeFileSync } from 'node:fs'; const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); +/** + * npm strips .gitignore from published packages — generate them on first run. + * Templates are stored in scripts/gitignore-templates.json (generated at build + * time from the actual .gitignore files). The JSON may not exist in git-cloned + * distributions where .gitignore is already present, so loading is best-effort. + */ +function loadGitignoreTemplates() { + const templatesPath = resolve(__dirname, 'gitignore-templates.json'); + if (!existsSync(templatesPath)) return null; + try { + return JSON.parse(readFileSync(templatesPath, 'utf8')); + } catch { + return null; + } +} + +function ensureGitignore(dir, content) { + if (!content) return; + const gitignorePath = resolve(dir, '.gitignore'); + if (!existsSync(gitignorePath)) { + writeFileSync(gitignorePath, content, 'utf8'); + console.log(`Created .gitignore in ${dir}`); + } +} + function resolveUIBundlesDir() { const sfdxPath = resolve(ROOT, 'sfdx-project.json'); if (!existsSync(sfdxPath)) { @@ -56,6 +81,20 @@ function run(label, cmd, args, opts) { } } +// Ensure .gitignore files exist (npm strips them from published packages). +const gitignoreTemplates = loadGitignoreTemplates(); +if (gitignoreTemplates) { + ensureGitignore(ROOT, gitignoreTemplates.sfdx); + const bundlesDir = resolveUIBundlesDir(); + if (existsSync(bundlesDir)) { + for (const entry of readdirSync(bundlesDir, { withFileTypes: true })) { + if (entry.isDirectory() && !entry.name.startsWith('.')) { + ensureGitignore(resolve(bundlesDir, entry.name), gitignoreTemplates.webapp); + } + } + } +} + const uiBundleDir = discoverUIBundleDir(); console.log('SFDX project root:', ROOT); console.log('UI bundle directory:', uiBundleDir); From ea110c0e4a48c3463c91183f6c4e69852bed84c1 Mon Sep 17 00:00:00 2001 From: jluftglidden-tilt <53275453+jluftglidden-tilt@users.noreply.github.com> Date: Tue, 31 Mar 2026 20:34:39 -0700 Subject: [PATCH 2/3] @W-21712998 T/experience sites platform/w 21712998/rename sites react skill (#142) * Moving SKILL.md to generating-ui-bundle-site * Rename configure-metadata-custom-site.md to configure-metadata-custom-site.md * Rename configure-metadata-digital-experience-bundle.md to configure-metadata-digital-experience-bundle.md * Moving configure-metadata-digital-experience-config.md to generating-ui-bundle-site * Moving configure-metadata-digital-experience.md to generating-ui-bundle-site * Moving configure-metadata-network.md to generating-ui-bundle-site --- .../SKILL.md | 2 +- .../docs/configure-metadata-custom-site.md | 0 .../docs/configure-metadata-digital-experience-bundle.md | 0 .../docs/configure-metadata-digital-experience-config.md | 0 .../docs/configure-metadata-digital-experience.md | 0 .../docs/configure-metadata-network.md | 0 6 files changed, 1 insertion(+), 1 deletion(-) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/SKILL.md (99%) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/docs/configure-metadata-custom-site.md (100%) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/docs/configure-metadata-digital-experience-bundle.md (100%) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/docs/configure-metadata-digital-experience-config.md (100%) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/docs/configure-metadata-digital-experience.md (100%) rename skills/{generating-experience-react-site => generating-ui-bundle-site}/docs/configure-metadata-network.md (100%) diff --git a/skills/generating-experience-react-site/SKILL.md b/skills/generating-ui-bundle-site/SKILL.md similarity index 99% rename from skills/generating-experience-react-site/SKILL.md rename to skills/generating-ui-bundle-site/SKILL.md index b0610d5..75e2e43 100644 --- a/skills/generating-experience-react-site/SKILL.md +++ b/skills/generating-ui-bundle-site/SKILL.md @@ -1,5 +1,5 @@ --- -name: generating-experience-react-site +name: generating-ui-bundle-site description: "Use this skill when users need to create or configure a Salesforce Digital Experience Site specifically for hosting a React UI bundle. Trigger when users mention creating an Experience site for a React app, setting up a React site on Salesforce, configuring Network/CustomSite/DigitalExperience metadata for a UI bundle, or deploying site infrastructure for a React application. Also trigger when users mention site URL path prefixes, app namespaces, appDevName, guest access configuration, DigitalExperienceConfig, DigitalExperienceBundle, or sfdc_cms__site content types in the context of React apps. Always use this skill for any React UI bundle site creation or site infrastructure configuration work, even if the user just says \"create a site for my React app\" or \"set up the site for my UI bundle.\"" --- diff --git a/skills/generating-experience-react-site/docs/configure-metadata-custom-site.md b/skills/generating-ui-bundle-site/docs/configure-metadata-custom-site.md similarity index 100% rename from skills/generating-experience-react-site/docs/configure-metadata-custom-site.md rename to skills/generating-ui-bundle-site/docs/configure-metadata-custom-site.md diff --git a/skills/generating-experience-react-site/docs/configure-metadata-digital-experience-bundle.md b/skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience-bundle.md similarity index 100% rename from skills/generating-experience-react-site/docs/configure-metadata-digital-experience-bundle.md rename to skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience-bundle.md diff --git a/skills/generating-experience-react-site/docs/configure-metadata-digital-experience-config.md b/skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience-config.md similarity index 100% rename from skills/generating-experience-react-site/docs/configure-metadata-digital-experience-config.md rename to skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience-config.md diff --git a/skills/generating-experience-react-site/docs/configure-metadata-digital-experience.md b/skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience.md similarity index 100% rename from skills/generating-experience-react-site/docs/configure-metadata-digital-experience.md rename to skills/generating-ui-bundle-site/docs/configure-metadata-digital-experience.md diff --git a/skills/generating-experience-react-site/docs/configure-metadata-network.md b/skills/generating-ui-bundle-site/docs/configure-metadata-network.md similarity index 100% rename from skills/generating-experience-react-site/docs/configure-metadata-network.md rename to skills/generating-ui-bundle-site/docs/configure-metadata-network.md From 74ac983776e930d283ecff2766d7d104d2c44457 Mon Sep 17 00:00:00 2001 From: svc-idee-bot Date: Wed, 1 Apr 2026 03:34:56 +0000 Subject: [PATCH 3/3] chore(release): 1.6.5 [skip ci] --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e1fc4c..8e120b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [1.6.5](https://github.com/forcedotcom/afv-library/compare/1.6.4...1.6.5) (2026-04-01) + + +### Bug Fixes + +* updating ui bundles to the latest @W-21814993@ ([#156](https://github.com/forcedotcom/afv-library/issues/156)) ([0d69b91](https://github.com/forcedotcom/afv-library/commit/0d69b918da0c43dc940f19c8c397a5de28042d4f)) + + + ## [1.6.4](https://github.com/forcedotcom/afv-library/compare/1.6.3...1.6.4) (2026-03-31) diff --git a/package.json b/package.json index 650a365..02b1b28 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@salesforce/afv-skills", - "version": "1.6.4", + "version": "1.6.5", "description": "Salesforce skills for Agentforce Vibes", "license": "CC-BY-NC-4.0", "files": [