@salesforce/templates 66.17.5 → 66.18.0

package/lib/templates/project/vueinternalapp/PRD.md

@@ -0,0 +1,35 @@
+# Internal User App (B2E)
+
+## Overview
+
+A ready-to-use Vue starter for building internal, employee-facing apps on the Salesforce platform. It comes with a clean, modern interface, page navigation, and a built-in Agentforce chat assistant. It ships with no data of its own — a clean slate — but includes one working example (global search and an Account detail view) that shows how the app reads Salesforce data, so teams can point it at their own information.
+
+## Problem
+
+Teams building internal tools on Salesforce keep re-solving the same setup: standing up a new app, choosing how it looks, connecting it to Salesforce data, and adding an Agentforce assistant. Starting from a prebuilt demo means ripping out someone else's data before any real work begins; starting from scratch means rebuilding the same foundation every time. There has been no simple, opinionated starting point that gives just the essentials and one correct example of showing Salesforce data.
+
+## Solution
+
+A minimal internal starter with the essentials already in place: the app framework, page navigation, a built-in Agentforce chat assistant, and a single example feature — global search with an Account detail view — that shows how the app displays Salesforce data. Everything is structured so the search and Account example works as a template: point it at your own information, adjust the fields, and remove the example once your own feature is working.
+
+### Core Features
+
+- **App framework and navigation** — A ready-made layout with a Home page, a "page not found" screen, and a navigation menu, prepared for adding new screens.
+- **Consistent design system** — A preinstalled set of interface building blocks so new screens look consistent from the start.
+- **Search and account detail example** — A global search box on Home (provided by the `feature-vue-search` feature) with a search results screen, plus an Account detail view. This is the template for showing Salesforce data.
+- **Agentforce chat assistant** — A built-in chat surface an Agentforce agent can drive, giving the app in-app assistance.
+- **Add-on features** — Tooling to browse and add additional prebuilt features into the app.
+
+### Non-Goals
+
+- Shipping a prebuilt data model — this starter deliberately includes none; teams bring their own.
+- External-facing use, sign-in, or public site hosting — use the External User App (B2X) starter for that.
+- A finished application — the search and Account example is meant to be copied and then removed, not kept.
+
+## Target Users
+
+Salesforce teams building employee-facing tools (support consoles, ops dashboards, internal admin apps) who want a clean, minimal starting point rather than a demo they have to dismantle first.
+
+## Org prerequisites
+
+- The in-app Agentforce chat assistant requires Agentforce to be set up in the org, with an agent configured for it.

package/lib/templates/project/vueinternalapp/README.md

@@ -0,0 +1,125 @@
+# Vue Internal App
+
+An internal Vue starter template for employee-facing apps on the Salesforce platform. Includes global search (via `feature-vue-search`) across Salesforce records and an Agentforce conversation client; intended for internal (non-Experience Cloud) deployment. Built with Vue 3 (`<script setup>` SFCs), Reka UI primitives with shadcn-vue components, Tailwind CSS, Lucide icons (`@lucide/vue`), and TypeScript.
+
+## What's included
+
+This project ships the UI Bundle plus the minimal metadata needed to run it as an internal app: a Lightning application and an access permission set. No other Salesforce metadata (objects, classes, etc.) is included — bring your own data model.
+
+```
+force-app/main/default/
+├── applications/
+│   └── vueinternalapp.app-meta.xml                    # Lightning app
+├── permissionsets/
+│   └── vueinternalapp_Access.permissionset-meta.xml   # Access permission set
+└── uiBundles/
+    └── vueinternalapp/       # Vue UI Bundle (source, config, tests)
+        └── src/
+            ├── api/          # GraphQL client and queries
+            ├── components/   # Shared components (account/, alerts/, layouts/, ui/<name>/)
+            ├── composables/  # Vue composables
+            ├── features/     # Installed features (search)
+            ├── pages/        # Route pages (.vue SFCs)
+            ├── router.ts     # Vue Router configuration
+            └── App.vue       # Root component
+```
+
+## Getting started
+
+Install project dependencies and start the local 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/vueinternalapp/README.md).
+
+## Add features
+
+Use the features CLI to install additional UI features into the UI Bundle.
+
+List all available features:
+
+```bash
+npx @salesforce/ui-bundle-features-experimental list
+```
+
+Get details about a specific feature (description, dependencies, files, and integration examples):
+
+```bash
+npx @salesforce/ui-bundle-features-experimental describe <feature-name>
+```
+
+Install a feature:
+
+```bash
+npx @salesforce/ui-bundle-features-experimental install <feature-name> --ui-bundle-dir vueinternalapp
+```
+
+After installation, the CLI will list any `__example__` files that need manual integration. Read each example file to see the integration pattern, apply it to the target file, then delete the example file.
+
+## Deploy
+
+### Deploy everything (UI Bundle, app, and permission set)
+
+```bash
+cd force-app/main/default/uiBundles/vueinternalapp && npm install && npm run build && cd -
+sf project deploy start --source-dir force-app --target-org <alias>
+```
+
+### Deploy the UI Bundle only
+
+```bash
+cd force-app/main/default/uiBundles/vueinternalapp && npm install && npm run build && cd -
+sf project deploy start --source-dir force-app/main/default/uiBundles --target-org <alias>
+```
+
+Replace `<alias>` with your target org alias.
+
+## Setup scripts
+
+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 [Getting started](#getting-started)).
+
+**`npm run setup`** — runs the full deployment setup in one command: org login (a required precondition, auto-skipped if already connected), UI Bundle build, deploy the UI Bundle, fetch GraphQL schema, and run codegen. It does not start the dev server — run `npm run dev:preview` for that:
+
+```bash
+# Install project dependencies first (required before running setup)
+npm install
+
+npm run setup -- --target-org <alias>
+```
+
+Running without flags presents an interactive step picker. Pass `--yes` to skip it and run all steps immediately:
+
+```bash
+npm run setup -- --target-org <alias> --yes
+```
+
+Common options:
+
+| Option                    | Description                                     |
+| ------------------------- | ----------------------------------------------- |
+| `--target-org <alias>`    | Target org. If omitted, uses default org/prompt |
+| `--skip-deploy`           | Do not deploy metadata                          |
+| `--skip-graphql`          | Skip GraphQL schema fetch and codegen           |
+| `--skip-ui-bundle-build`  | Skip `npm install` and UI Bundle build          |
+| `--ui-bundle-name <name>` | UI Bundle folder name when multiple exist       |
+| `-y, --yes`               | Skip interactive step picker; run all steps     |
+
+> Login is a required precondition (no `--skip-login`), and the dev server is no longer part of setup (no `--skip-dev`); both flags are accepted but ignored. To start the dev server after setup, run `npm run dev:preview`.
+
+For all options: `npm run setup -- --help`.
+
+## Configure Your Salesforce DX Project
+
+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.
+
+## Read All About It
+
+- [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)

package/lib/templates/project/vueinternalapp/_p_/_m_/_ps_/vueinternalapp_Access.permissionset-meta.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<PermissionSet xmlns="http://soap.sforce.com/2006/04/metadata">
+    <applicationVisibilities>
+        <application>vueinternalapp</application>
+        <visible>true</visible>
+    </applicationVisibilities>
+    <hasActivationRequired>false</hasActivationRequired>
+    <label>vueinternalapp Access</label>
+    <userPermissions>
+        <enabled>true</enabled>
+        <name>ApiEnabled</name>
+    </userPermissions>
+</PermissionSet>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/.forceignore

@@ -0,0 +1,15 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+
+# LWC configuration files
+**/jsconfig.json
+**/.eslintrc.json
+
+# LWC Jest
+**/__tests__/**
+
+node_modules/
+.DS_Store

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/.graphqlrc.yml

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

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+build
+.vite
+coverage
+*.min.js
+*.min.css
+*.map
+package-lock.json

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/README.md

@@ -0,0 +1,35 @@
+# Vue Internal App
+
+An internal Vue template for the Salesforce platform. Includes an Agentforce conversation client and global search; intended for internal (non-Experience Cloud) deployment. Built with Vue 3, Vite, TypeScript, and Tailwind/shadcn-vue.
+
+For project-level details (metadata, deploy), see the [project README](../../../../../../README.md).
+
+## Prerequisites
+
+```bash
+npm install
+```
+
+## Run (development)
+
+```bash
+npm run dev
+```
+
+Starts the Vite dev server (default: http://localhost:5173).
+
+## Build
+
+```bash
+npm run build
+```
+
+Type-checks with `vue-tsc` and writes the production bundle to `dist/` inside the UI Bundle folder.
+
+## Test
+
+```bash
+npm test
+```
+
+Runs the unit test suite (Vitest).

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/codegen.yml

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

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  }
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/e2e/app.spec.ts

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

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/eslint.config.js

@@ -0,0 +1,124 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import vueTsConfig from '@vue/eslint-config-typescript';
+import globals from 'globals';
+import graphqlPlugin from '@graphql-eslint/eslint-plugin';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const schemaPath = resolve(__dirname, '../../../../../schema.graphql');
+const schemaExists = existsSync(schemaPath);
+
+const config = [
+  // Global ignores
+  {
+    ignores: [
+      'build/**/*',
+      'dist/**/*',
+      'coverage/**/*',
+      'src/api/graphql-operations-types.ts',
+    ],
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  ...vueTsConfig(),
+  {
+    files: ['scripts/**/*.{js,cjs,mjs}'],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+  // Main TypeScript/Vue files
+  {
+    files: ['**/*.{ts,vue}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        process: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      // Base app ships single-word component files (Home.vue, App.vue) mirroring
+      // the React template's page naming; allow them.
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+  // Node scripts (schema fetch, e2e asset rewrite)
+  {
+    files: ['scripts/**/*.{js,mjs}'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+  // Test files
+  {
+    files: [
+      '**/*.test.{ts,tsx}',
+      '**/test/**/*.{ts,tsx}',
+      'src/test/**/*.{ts,tsx}',
+    ],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        global: 'writable',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+];
+
+// Only add GraphQL rules when schema exists (e.g. after graphql:schema).
+// In CI or when schema is not checked in, skip so lint succeeds.
+if (schemaExists) {
+  config.push(
+    {
+      files: ['**/*.{ts,vue}'],
+      processor: graphqlPlugin.processor,
+    },
+    {
+      files: ['**/*.graphql'],
+      languageOptions: {
+        parser: graphqlPlugin.parser,
+        parserOptions: {
+          graphQLConfig: {
+            schema: '../../../../../schema.graphql',
+          },
+        },
+      },
+      plugins: {
+        '@graphql-eslint': graphqlPlugin,
+      },
+      rules: {
+        '@graphql-eslint/no-anonymous-operations': 'error',
+        '@graphql-eslint/no-duplicate-fields': 'error',
+        '@graphql-eslint/known-fragment-names': 'error',
+        '@graphql-eslint/no-undefined-variables': 'error',
+        '@graphql-eslint/no-unused-variables': 'error',
+      },
+    }
+  );
+}
+
+export default config;

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/index.html

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