@salesforce/templates 66.5.5 → 66.6.0

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/ui/datePicker.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import * as React from 'react';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+
+import type { DateRange, DayPickerProps } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+function DatePicker({ ...props }: React.ComponentProps<typeof Popover>) {
+  return <Popover data-slot="date-picker" {...props} />;
+}
+
+function DatePickerTrigger({
+  className,
+  children,
+  date,
+  placeholder = 'Pick a date',
+  dateFormat = 'PPP',
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  date?: Date;
+  placeholder?: string;
+  dateFormat?: string;
+}) {
+  return (
+    <PopoverTrigger asChild>
+      <Button
+        variant="outline"
+        data-slot="date-picker-trigger"
+        data-empty={!date}
+        className={cn(
+          'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <CalendarIcon />
+            {date ? format(date, dateFormat) : <span>{placeholder}</span>}
+          </>
+        )}
+      </Button>
+    </PopoverTrigger>
+  );
+}
+
+function DatePickerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof PopoverContent>) {
+  return (
+    <PopoverContent
+      data-slot="date-picker-content"
+      className={cn('w-auto p-0', className)}
+      {...props}
+    />
+  );
+}
+
+function DatePickerRangeTrigger({
+  className,
+  children,
+  dateRange,
+  placeholder = 'Pick a date',
+  dateFormat = 'LLL dd, y',
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  dateRange?: DateRange;
+  placeholder?: string;
+  dateFormat?: string;
+}) {
+  const hasDate = dateRange?.from != null;
+  return (
+    <PopoverTrigger asChild>
+      <Button
+        variant="outline"
+        data-slot="date-picker-range-trigger"
+        data-empty={!hasDate}
+        className={cn(
+          'justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <CalendarIcon />
+            {dateRange?.from ? (
+              dateRange.to ? (
+                <>
+                  {format(dateRange.from, dateFormat)} –{' '}
+                  {format(dateRange.to, dateFormat)}
+                </>
+              ) : (
+                format(dateRange.from, dateFormat)
+              )
+            ) : (
+              <span>{placeholder}</span>
+            )}
+          </>
+        )}
+      </Button>
+    </PopoverTrigger>
+  );
+}
+
+function DatePickerCalendar(props: DayPickerProps) {
+  return <Calendar data-slot="date-picker-calendar" {...props} />;
+}
+
+export {
+  DatePicker,
+  DatePickerTrigger,
+  DatePickerRangeTrigger,
+  DatePickerContent,
+  DatePickerCalendar,
+};

package/lib/templates/project/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_p_/_m_/_w_/_a_/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * feature-react-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { AgentforceConversationClient } from "./components/AgentforceConversationClient";
+export type { AgentforceConversationClientProps, ResolvedEmbedOptions } from "./types/conversation";

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

@@ -0,0 +1,12 @@
+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>
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from './features/object-search/__examples__/pages/Home';
+import NotFound from './pages/NotFound';
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      }
+    ]
+  }
+];

package/lib/templates/project/{reactb2e → reactinternalapp}/_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 → reactinternalapp}/_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 → reactinternalapp}/_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