@salesforce/templates 66.5.5 → 66.5.6

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/components/ui/popover.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn('flex flex-col gap-0.5 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn('font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/components/ui/sonner.tsx

@@ -0,0 +1,20 @@
+import { Toaster as Sonner } from 'sonner';
+
+/**
+ * Renders the toast container. Use with `toast()` from this module for messages
+ * with title, description, actions, and variants (success, error, warning).
+ *
+ * @example
+ * toast("Event has been created", {
+ *   description: "Sunday, December 03, 2023 at 9:00 AM",
+ *   action: { label: "Undo", onClick: () => {} },
+ * });
+ * toast.success("Saved!");
+ * toast.error("Something went wrong");
+ * toast.warning("Please review");
+ */
+export function Toaster() {
+  return <Sonner position="top-right" richColors />;
+}
+
+export { toast } from 'sonner';

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/index.ts

@@ -1,120 +1,6 @@
 /**
- * Public API for the Global Search feature package.
- *
- * Design goals:
- * - Export **API services, hooks, types, schemas, and utilities** that customers can import from node_modules.
- * - Do **not** export UI components or feature constants (customers build their own UI).
- *
- * Source implementation lives under `src/features/global-search/**`.
+ * feature-react-agentforce-conversation-client – ACC Conversation Client
  */
 
-// ---------------------------------------------------------------------------
-// API layer
-// ---------------------------------------------------------------------------
-
-export { objectInfoService } from "./features/global-search/api/objectInfoService";
-export {
-	objectDetailService,
-	extractFieldsFromLayout,
-} from "./features/global-search/api/objectDetailService";
-export type { RecordDetailResult } from "./features/global-search/api/objectDetailService";
-
-export {
-	getRecordsGraphQL,
-	getRecordByIdGraphQL,
-	buildGetRecordsQuery,
-	buildWhereFromCriteria,
-	buildOrderByFromSort,
-} from "./features/global-search/api/recordListGraphQLService";
-export type {
-	RecordListGraphQLResult,
-	RecordListGraphQLVariables,
-	RecordListGraphQLOptions,
-	GraphQLRecordNode,
-} from "./features/global-search/api/recordListGraphQLService";
-
-// ---------------------------------------------------------------------------
-// Hooks
-// ---------------------------------------------------------------------------
-
-export { useObjectInfoBatch } from "./features/global-search/hooks/useObjectInfoBatch";
-export {
-	useObjectListMetadata,
-	useObjectColumns,
-	useObjectFilters,
-} from "./features/global-search/hooks/useObjectSearchData";
-export { useRecordListGraphQL } from "./features/global-search/hooks/useRecordListGraphQL";
-export { useRecordDetailLayout } from "./features/global-search/hooks/useRecordDetailLayout";
-
-export type { ObjectListMetadata } from "./features/global-search/hooks/useObjectSearchData";
-
-export type {
-	UseRecordListGraphQLOptions,
-	UseRecordListGraphQLReturn,
-} from "./features/global-search/hooks/useRecordListGraphQL";
-
-export type {
-	UseRecordDetailLayoutParams,
-	UseRecordDetailLayoutReturn,
-} from "./features/global-search/hooks/useRecordDetailLayout";
-
-// ---------------------------------------------------------------------------
-// Types + Zod schemas (runtime validation)
-// ---------------------------------------------------------------------------
-
-export {
-	ColumnArraySchema,
-	SearchResultRecordArraySchema,
-	KeywordSearchResultSchema,
-	SearchResultsResponseSchema,
-} from "./features/global-search/types/search/searchResults";
-export type {
-	Column,
-	SearchResultRecord,
-	KeywordSearchResult,
-	SearchResultsResponse,
-} from "./features/global-search/types/search/searchResults";
-
-export {
-	FilterArraySchema,
-	FilterCriteriaArraySchema,
-	FILTER_OPERATORS,
-} from "./features/global-search/types/filters/filters";
-export type {
-	Filter,
-	FilterCriteria,
-	FilterOperator,
-	FiltersResponse,
-} from "./features/global-search/types/filters/filters";
-
-export type { PicklistValue } from "./features/global-search/types/filters/picklist";
-
-export type {
-	ObjectInfoBatchResponse,
-	ObjectInfoResult,
-} from "./features/global-search/types/objectInfo/objectInfo";
-
-export { LayoutResponseSchema } from "./features/global-search/types/recordDetail/recordDetail";
-export type { LayoutResponse } from "./features/global-search/types/recordDetail/recordDetail";
-
-// ---------------------------------------------------------------------------
-// Utilities
-// ---------------------------------------------------------------------------
-
-export { fetchAndValidate, safeEncodePath } from "./features/global-search/utils/apiUtils";
-export { debounce } from "./features/global-search/utils/debounce";
-export { createFiltersKey } from "./features/global-search/utils/cacheUtils";
-export {
-	calculateFieldsToFetch,
-	getSafeKey,
-	isValidSalesforceId,
-} from "./features/global-search/utils/recordUtils";
-export { parseFilterValue } from "./features/global-search/utils/filterUtils";
-export { sanitizeFilterValue } from "./features/global-search/utils/sanitizationUtils";
-export {
-	getGraphQLNodeValue,
-	getDisplayValueForDetailFieldFromNode,
-	getDisplayValueForLayoutItemFromNode,
-	getGraphQLRecordDisplayName,
-} from "./features/global-search/utils/graphQLNodeFieldUtils";
-export { graphQLNodeToSearchResultRecordData } from "./features/global-search/utils/graphQLRecordAdapter";
+export { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+export type { AgentforceConversationClientProps, ResolvedEmbedOptions } from "./types/conversation";

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/pages/Home.tsx

@@ -1,13 +1,12 @@
-import { GlobalSearchInput } from "../features/global-search/components/search/GlobalSearchInput";
-
 export default function Home() {
-	return (
-		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-			<div className="text-center">
-				<h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
-				<p className="text-lg text-gray-600 mb-8">Welcome to your React application.</p>
-			</div>
-			<GlobalSearchInput />
-		</div>
-	);
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
 }

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/pages/TestAccPage.tsx

@@ -13,7 +13,7 @@ export default function TestAccPage() {
 				<h1 className="text-4xl font-bold text-gray-900 mb-4">ACC</h1>
 				<p className="text-lg text-gray-600 mb-8">Welcome to your ACC application.</p>
 			</div>
-			<AgentforceConversationClient />
+			<AgentforceConversationClient agentId="0Xx000000000000AAA" />
 		</div>
 	);
 }

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -1,12 +1,10 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
-import Home from './pages/Home';
+import Home from './features/object-search/__examples__/pages/Home';
 import NotFound from './pages/NotFound';
 import TestAccPage from "./pages/TestAccPage";
-import GlobalSearch from "./features/global-search/pages/GlobalSearch";
-import DetailPage from "./features/global-search/pages/DetailPage";
-import { Suspense } from "react";
-import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";
+import AccountSearch from "./features/object-search/__examples__/pages/AccountSearch";
+import AccountObjectDetail from "./features/object-search/__examples__/pages/AccountObjectDetailPage";
 
 export const routes: RouteObject[] = [
   {
@@ -16,7 +14,7 @@ export const routes: RouteObject[] = [
       {
         index: true,
         element: <Home />,
-        handle: { showInNavigation: true, label: 'Home' }
+        handle: { showInNavigation: true, label: "Home" }
       },
       {
         path: '*',
@@ -28,22 +26,12 @@ export const routes: RouteObject[] = [
         handle: { showInNavigation: true, label: "Test ACC" }
       },
       {
-        path: "global-search/:query",
-        element: (
-					<Suspense fallback={<LoadingFallback />}>
-						<GlobalSearch />
-					</Suspense>
-				),
-        handle: { showInNavigation: false }
+        path: "accounts/:recordId",
+        element: <AccountObjectDetail />
       },
       {
-        path: "object/:objectApiName/:recordId",
-        element: (
-					<Suspense fallback={<LoadingFallback />}>
-						<DetailPage />
-					</Suspense>
-				),
-        handle: { showInNavigation: false }
+        path: "accounts",
+        element: <AccountSearch />
       }
     ]
   }

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/src/types/conversation.ts

@@ -4,16 +4,26 @@
  * For full license text, see the LICENSE.txt file
  */
 
-import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
-
 export interface ResolvedEmbedOptions {
 	salesforceOrigin?: string;
 	frontdoorUrl?: string;
 }
 
+export type StyleTokens = Record<string, string>;
+
 export interface AgentforceConversationClientProps {
-	/** Optional config from consumer. Passed through to the embed client as-is. */
-	agentforceClientConfig?: AgentforceClientConfig;
+	/** Required in practice: id of the agent to load. */
+	agentId: string;
+	/** If true, renders inline. If omitted/false, renders floating. */
+	inline?: boolean;
+	/** Show/hide chat header. Defaults to true for floating; can only be set for inline mode. */
+	headerEnabled?: boolean;
+	/** Inline width. */
+	width?: string | number;
+	/** Inline height. */
+	height?: string | number;
+	/** Theme overrides for the chat UI. */
+	styleTokens?: StyleTokens;
 	/** Optional. If not provided, resolved internally (e.g. from /__lo/frontdoor in dev, window.location.origin in prod). */
 	salesforceOrigin?: string;
 	/** Optional. If not provided, resolved internally in dev via /__lo/frontdoor. */

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/tsconfig.json

@@ -31,6 +31,12 @@
       "@assets/*": ["./src/assets/*"]
     }
   },
-  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "include": [
+    "src",
+    "e2e",
+    "vite-env.d.ts",
+    "vitest-env.d.ts",
+    "vitest.setup.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/lib/templates/project/reactb2e/_p_/_m_/_w_/_a_/vite.config.ts

@@ -1,3 +1,4 @@
+import { existsSync } from 'node:fs';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
@@ -6,26 +7,29 @@ import tailwindcss from '@tailwindcss/vite';
 import salesforce from '@salesforce/vite-plugin-webapp-experimental';
 import codegen from 'vite-plugin-graphql-codegen';
 
+const schemaPath = resolve(__dirname, '../../../../../schema.graphql');
+const schemaExists = existsSync(schemaPath);
+
 export default defineConfig(({ mode }) => {
   return {
     base: './',
-    // Type assertion avoids Plugin type mismatch when dist has its own node_modules (vite/rollup)
     plugins: [
       tailwindcss(),
       react(),
       salesforce(),
-      codegen({
-        // Path to the codegen config file
-        configFilePathOverride: resolve(__dirname, 'codegen.yml'),
-        // Run codegen on dev server start
-        runOnStart: true,
-        // Don't run codegen on build for now
-        runOnBuild: false,
-        // Enable file watcher during development
-        enableWatcher: true,
-        // Fail build if codegen errors
-        throwOnBuild: true,
-      }),
+      // Only add codegen when schema exists (e.g. after `npm run graphql:schema`).
+      // In CI or when schema is not checked in, skip codegen so build succeeds.
+      ...(schemaExists
+        ? [
+            codegen({
+              configFilePathOverride: resolve(__dirname, 'codegen.yml'),
+              runOnStart: true,
+              runOnBuild: true,
+              enableWatcher: true,
+              throwOnBuild: true,
+            }),
+          ]
+        : []),
     ] as import('vite').PluginOption[],
 
     // Build configuration for MPA

package/lib/templates/project/reactb2e/_r_/skills/{webapp-react-data-visualization → building-data-visualization}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-data-visualization
+name: building-data-visualization
 description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
 ---
 
@@ -46,8 +46,8 @@ Recharts is built on D3 and provides declarative React components. No additional
 
 Read the corresponding guide:
 
-- **Bar chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
-- **Line / area chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
+- **Bar chart** — read `implementation/bar-line-chart.md` (categorical data)
+- **Line / area chart** — read `implementation/bar-line-chart.md` (time-series data)
 - **Donut / pie chart** — read `implementation/donut-chart.md`
 - **Stat card with trend** — read `implementation/stat-card.md`
 - **Dashboard layout** — read `implementation/dashboard-layout.md`