@salesforce/templates 66.17.0-beta.2 → 66.17.0

package/lib/templates/uiBundles/vuebasic/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "base-vue-app",
+  "private": true,
+  "version": "1.59.0",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:design": "vite --mode design",
+    "build": "vue-tsc -b && vite build",
+    "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "graphql:codegen": "graphql-codegen",
+    "graphql:schema": "node scripts/get-graphql-schema.mjs"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.47.0",
+    "@salesforce/platform-sdk": "^12.11.0",
+    "@salesforce/ui-bundle": "^12.11.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "reka-ui": "^2.5.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^2.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@graphql-codegen/cli": "^6.1.0",
+    "@graphql-codegen/typescript": "^5.0.6",
+    "@graphql-codegen/typescript-operations": "^5.0.6",
+    "@graphql-eslint/eslint-plugin": "^4.1.0",
+    "@graphql-tools/utils": "^11.0.0",
+    "@playwright/test": "^1.49.0",
+    "@salesforce/graphiti": "^12.11.0",
+    "@salesforce/vite-plugin-ui-bundle": "^12.11.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitest/ui": "^4.1.0",
+    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.39.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^16.5.0",
+    "graphql": "^16.11.0",
+    "graphql-codegen-typescript-operation-types": "^2.0.2",
+    "jsdom": "^25.0.1",
+    "serve": "^14.2.5",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-graphql-codegen": "^3.6.3",
+    "vitest": "^4.1.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "overrides": {
+    "lodash": "^4.18.1",
+    "undici": "^7.28.0"
+  }
+}

package/lib/templates/uiBundles/vuebasic/playwright.config.ts

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

package/lib/templates/uiBundles/vuebasic/scripts/get-graphql-schema.mjs

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

package/lib/templates/uiBundles/vuebasic/scripts/rewrite-e2e-assets.mjs

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

package/lib/templates/uiBundles/vuebasic/src/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <RouterView />
+</template>

package/lib/templates/uiBundles/vuebasic/src/api/graphqlClient.ts

@@ -0,0 +1,44 @@
+/**
+ * Thin GraphQL client: createDataSDK + sdk.graphql with centralized error
+ * handling. Mutations are routed to sdk.graphql.mutate and everything else to
+ * sdk.graphql.query (the SDK rejects an operation sent to the wrong method).
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
+ */
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+/**
+ * True when the operation's first definition is a `mutation`. Strips GraphQL
+ * comments first so a leading `# ...` line can't mask the keyword. Queries
+ * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
+ * query().
+ */
+function isMutation(operation: string): boolean {
+  return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
+}
+
+export async function executeGraphQL<TData, TVariables>(
+  operation: string,
+  variables?: TVariables
+): Promise<TData> {
+  const data = await createDataSDK();
+  const result = isMutation(operation)
+    ? await data.graphql!.mutate<TData, TVariables>({
+        mutation: operation,
+        variables: variables,
+      })
+    : await data.graphql!.query<TData, TVariables>({
+        query: operation,
+        variables: variables,
+      });
+
+  if (result.errors?.length) {
+    const msg = result.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
+  }
+
+  if (result.data == null) {
+    throw new Error('GraphQL response data is null');
+  }
+
+  return result.data;
+}

package/lib/templates/uiBundles/vuebasic/src/appLayout.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { RouterLink, RouterView, useRoute } from 'vue-router';
+import { getAllRoutes } from '@/router-utils';
+
+const isOpen = ref(false);
+const route = useRoute();
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const isActive = (path: string) => route.path === path;
+
+const navigationRoutes = computed<{ path: string; label: string }[]>(() =>
+  getAllRoutes()
+    .filter(
+      r =>
+        r.meta?.showInNavigation === true &&
+        r.fullPath !== undefined &&
+        r.meta?.label !== undefined
+    )
+    .map(r => ({
+      path: r.fullPath,
+      label: r.meta?.label as string,
+    }))
+);
+</script>
+
+<template>
+  <nav class="bg-white border-b border-gray-200">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <RouterLink to="/" class="text-xl font-semibold text-gray-900">
+          Vue App
+        </RouterLink>
+        <button
+          type="button"
+          class="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-label="Toggle menu"
+          @click="toggleMenu"
+        >
+          <div class="w-6 h-6 flex flex-col justify-center space-y-1.5">
+            <span
+              class="block h-0.5 w-6 bg-current transition-all"
+              :class="{ 'rotate-45 translate-y-2': isOpen }"
+            />
+            <span
+              class="block h-0.5 w-6 bg-current transition-all"
+              :class="{ 'opacity-0': isOpen }"
+            />
+            <span
+              class="block h-0.5 w-6 bg-current transition-all"
+              :class="{ '-rotate-45 -translate-y-2': isOpen }"
+            />
+          </div>
+        </button>
+      </div>
+      <div v-if="isOpen" class="pb-4">
+        <div class="flex flex-col space-y-2">
+          <RouterLink
+            v-for="item in navigationRoutes"
+            :key="item.path"
+            :to="item.path"
+            class="px-3 py-2 rounded-md text-sm font-medium transition-colors"
+            :class="
+              isActive(item.path)
+                ? 'bg-blue-100 text-blue-700'
+                : 'text-gray-700 hover:bg-gray-100'
+            "
+            @click="isOpen = false"
+          >
+            {{ item.label }}
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <RouterView />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/alerts/status-alert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue';
+import { cva } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from '@lucide/vue';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+      info: 'text-blue-700 dark:text-blue-400 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-700 dark:*:data-[slot=alert-description]:text-blue-400',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
+});
+
+/**
+ * Status alert component for displaying error, success, or info messages.
+ * Renders nothing when the default slot is empty.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Alert variant type. @default "error" */
+    variant?: 'error' | 'success' | 'info';
+  }>(),
+  {
+    variant: 'error',
+  }
+);
+
+const descriptionId = useId();
+const isError = computed(() => props.variant === 'error');
+const icon = computed(
+  () =>
+    ({
+      error: AlertCircleIcon,
+      success: CheckCircle2Icon,
+      info: InfoIcon,
+    })[props.variant]
+);
+</script>
+
+<template>
+  <Alert
+    v-if="$slots.default"
+    :variant="isError ? 'destructive' : 'default'"
+    :class="statusAlertVariants({ variant })"
+    :aria-describedby="descriptionId"
+    :role="isError ? 'alert' : 'status'"
+  >
+    <component :is="icon" aria-hidden="true" />
+    <AlertDescription :id="descriptionId">
+      <slot />
+    </AlertDescription>
+  </Alert>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/layouts/card-layout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+/**
+ * Card layout component for authentication pages.
+ * Provides a CardHeader with title and optional description, and CardContent.
+ */
+defineProps<{
+  title: string;
+  description?: string;
+}>();
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="text-2xl">{{ title }}</CardTitle>
+      <CardDescription v-if="description">{{ description }}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <slot />
+    </CardContent>
+  </Card>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { AlertVariants } from '.';
+import { cn } from '@/lib/utils';
+import { alertVariants } from '.';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  variant?: AlertVariants['variant'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    role="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/alert/AlertAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-action"
+    :class="cn('absolute top-2 right-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="
+      cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="
+      cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/alert/index.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Alert } from './Alert.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertAction } from './AlertAction.vue';
+
+export const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-red-700 dark:text-red-400 bg-card *:data-[slot=alert-description]:text-red-700 dark:*:data-[slot=alert-description]:text-red-400 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/lib/templates/uiBundles/vuebasic/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { AvatarRoot } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="
+      cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AvatarRoot>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { AvatarFallback } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  AvatarFallbackProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AvatarFallback>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui';
+import { AvatarImage } from 'reka-ui';
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/button/Button.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '.';
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>