@salesforce/webapp-template-app-react-vibe-coding-starter-experimental 1.3.3

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Shadcn-style Table components
+ * These components follow shadcn/ui patterns for consistent styling
+ */
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+	({ className, ...props }, ref) => (
+		<div className="relative w-full overflow-auto">
+			<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<thead
+		ref={ref}
+		className={cn(
+			// 1. Existing border style
+			"[&_tr]:border-b",
+
+			// 2. Make headers sticky
+			// We apply this to the 'th' children using the [&_th] selector
+			// This is often more robust across browsers than applying sticky to the <thead> itself
+			"[&_th]:sticky [&_th]:top-0 [&_th]:z-10",
+			// 3. CRITICAL: Add background color
+			// Without this, content scrolls "under" the transparent text
+			"[&_th]:bg-background",
+
+			// 4. Optional: Add a subtle shadow for better visual separation when scrolling
+			"[&_th]:shadow-[0_1px_0_0_theme(colors.border)]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tfoot
+		ref={ref}
+		className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+	({ className, ...props }, ref) => (
+		<tr
+			ref={ref}
+			className={cn(
+				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/ui/tabs.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+interface TabsContextValue {
+	value: string;
+	onValueChange: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
+
+interface TabsProps extends React.ComponentProps<"div"> {
+	value?: string;
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+}
+
+function Tabs({ value, defaultValue, onValueChange, className, children, ...props }: TabsProps) {
+	const [internalValue, setInternalValue] = React.useState(defaultValue || "");
+	const controlled = value !== undefined;
+	const currentValue = controlled ? value : internalValue;
+
+	const handleValueChange = React.useCallback(
+		(newValue: string) => {
+			if (!controlled) {
+				setInternalValue(newValue);
+			}
+			onValueChange?.(newValue);
+		},
+		[controlled, onValueChange],
+	);
+
+	return (
+		<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+			<div data-slot="tabs" className={cn("w-full", className)} {...props}>
+				{children}
+			</div>
+		</TabsContext.Provider>
+	);
+}
+
+function useTabsContext() {
+	const context = React.useContext(TabsContext);
+	if (!context) {
+		throw new Error("Tabs components must be used within a Tabs component");
+	}
+	return context;
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="tabs-list"
+			className={cn(
+				"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+interface TabsTriggerProps extends React.ComponentProps<"button"> {
+	value: string;
+}
+
+function TabsTrigger({ className, value, ...props }: TabsTriggerProps) {
+	const { value: selectedValue, onValueChange } = useTabsContext();
+	const isSelected = selectedValue === value;
+
+	return (
+		<button
+			data-slot="tabs-trigger"
+			data-selected={isSelected}
+			type="button"
+			role="tab"
+			aria-selected={isSelected}
+			className={cn(
+				"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+				isSelected
+					? "bg-background text-foreground shadow-sm"
+					: "text-muted-foreground hover:bg-background/50",
+				className,
+			)}
+			onClick={() => onValueChange(value)}
+			{...props}
+		/>
+	);
+}
+
+interface TabsContentProps extends React.ComponentProps<"div"> {
+	value: string;
+}
+
+function TabsContent({ className, value, children, ...props }: TabsContentProps) {
+	const { value: selectedValue } = useTabsContext();
+	if (selectedValue !== value) {
+		return null;
+	}
+
+	return (
+		<div
+			data-slot="tabs-content"
+			role="tabpanel"
+			className={cn(
+				"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/context/AuthContext.tsx

@@ -0,0 +1,83 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { getCurrentUser } from "@salesforce/webapp-experimental/api";
+
+interface User {
+	readonly id: string;
+	readonly name: string;
+}
+
+interface AuthContextType {
+	user: User | null;
+	isAuthenticated: boolean;
+	loading: boolean;
+	error: string | null;
+	checkAuth: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+	children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+	const [user, setUser] = useState<User | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const checkAuth = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+
+		try {
+			const userData = await getCurrentUser();
+			setUser(userData);
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : "Authentication failed";
+			setError(errorMessage);
+			setUser(null);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		checkAuth();
+	}, [checkAuth]);
+
+	const value: AuthContextType = {
+		user,
+		isAuthenticated: user !== null,
+		loading,
+		error,
+		checkAuth,
+	};
+
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Hook to access the authentication context.
+ * @returns {AuthContextType} Authentication state (user, isAuthenticated, loading, error, checkAuth)
+ * @throws {Error} If used outside of an AuthProvider
+ */
+export function useAuth(): AuthContextType {
+	const context = useContext(AuthContext);
+	if (context === undefined) {
+		throw new Error("useAuth must be used within an AuthProvider");
+	}
+	return context;
+}
+
+/**
+ * Returns the current authenticated user.
+ * @returns {User} The authenticated user object
+ * @throws {Error} If not used within AuthProvider or user is not authenticated
+ */
+export function getUser(): User {
+	const context = useAuth();
+	if (!context.user) {
+		throw new Error("Authenticated context not established");
+	}
+	return context.user;
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/hooks/form.tsx

@@ -0,0 +1,116 @@
+import { useId } from "react";
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../components/ui/field";
+import { Input } from "../components/ui/input";
+import { cn } from "../lib/utils";
+import { AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
+
+// Create form hook contexts
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+	createFormHookContexts();
+
+// ============================================================================
+// Field Components
+// ============================================================================
+
+interface TextFieldProps
+	extends Omit<
+		React.ComponentProps<typeof Input>,
+		"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+	> {
+	label: string;
+	labelAction?: React.ReactNode;
+	description?: React.ReactNode;
+}
+
+function TextField({
+	label,
+	id: providedId,
+	labelAction,
+	description,
+	type = "text",
+	...props
+}: TextFieldProps) {
+	const field = useFieldContext<string>();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = field.state.meta.isTouched && field.state.meta.errors.length > 0;
+
+	// Deduplicate errors by message
+	const errors = field.state.meta.errors;
+	const uniqueErrors = [...new Map(errors.map((item: any) => [item["message"], item])).values()];
+
+	return (
+		<Field data-invalid={isInvalid}>
+			<div className="flex items-center">
+				<FieldLabel htmlFor={id}>{label}</FieldLabel>
+				{labelAction && <div className="ml-auto">{labelAction}</div>}
+			</div>
+			{description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}
+			<Input
+				id={id}
+				name={field.name as string}
+				type={type}
+				value={field.state.value ?? ""}
+				onBlur={field.handleBlur}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
+				aria-invalid={isInvalid}
+				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
+				{...props}
+			/>
+			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+		</Field>
+	);
+}
+
+/** Password field with preset type and autocomplete */
+function PasswordField({
+	label,
+	autoComplete = "current-password",
+	placeholder = AUTH_PLACEHOLDERS.PASSWORD,
+	...props
+}: Omit<TextFieldProps, "type">) {
+	return (
+		<TextField
+			label={label}
+			type="password"
+			autoComplete={autoComplete}
+			placeholder={placeholder}
+			{...props}
+		/>
+	);
+}
+
+/** Email field with preset type and autocomplete */
+function EmailField({
+	label,
+	placeholder = AUTH_PLACEHOLDERS.EMAIL,
+	...props
+}: Omit<TextFieldProps, "type">) {
+	return (
+		<TextField
+			label={label}
+			type="email"
+			autoComplete="username"
+			placeholder={placeholder}
+			{...props}
+		/>
+	);
+}
+
+// ============================================================================
+// Create Form Hook
+// ============================================================================
+
+export const { useAppForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		TextField,
+		PasswordField,
+		EmailField,
+	},
+	formComponents: {},
+});

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/index.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from "react";
+import codey1 from "@assets/images/codey-1.png";
+import codey3 from "@assets/images/codey-3.png";
+import AccountsTable from "@components/AccountsTable";
+// import Footer from '@components/Footer';
+import Hero from "@components/Hero";
+import PromptCard from "@components/PromptCard";
+import PromptHighlight from "@components/PromptHighlight";
+import { getHighRevenueAccounts } from "@salesforce/webapp-experimental/api";
+
+const styles: Record<string, React.CSSProperties> = {
+	container: {
+		position: "relative",
+		width: "100%",
+		minHeight: "100vh",
+		overflow: "hidden",
+		background: "linear-gradient(180deg, #EDF4FF 0%, #F6F2FB 50%, #E5B9FE 100%)",
+	},
+	content: {
+		position: "relative",
+		zIndex: 1,
+		width: "100%",
+		maxWidth: "1100px",
+		margin: "0 auto",
+		padding: "0 2rem",
+	},
+	agentforceText: {
+		background: "linear-gradient(135deg, #5867E8 0%, #E5B9FE 100%)",
+		WebkitBackgroundClip: "text",
+		WebkitTextFillColor: "transparent",
+		backgroundClip: "text",
+	},
+	newProjectLink: {
+		color: "var(--on-surface-3)",
+		textDecoration: "underline",
+		fontWeight: 500,
+	},
+	promptsSection: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "100px",
+		paddingBottom: "4rem",
+	},
+	toast: {
+		position: "fixed" as const,
+		bottom: "2rem",
+		left: "50%",
+		transform: "translateX(-50%)",
+		background: "#c62828",
+		color: "white",
+		padding: "1rem 2rem",
+		borderRadius: "8px",
+		boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+		zIndex: 1000,
+		display: "flex",
+		alignItems: "center",
+		gap: "0.75rem",
+		animation: "slideUp 0.3s ease",
+	},
+	toastCloseButton: {
+		background: "transparent",
+		border: "none",
+		color: "white",
+		cursor: "pointer",
+		fontSize: "1.25rem",
+		padding: "0",
+		lineHeight: 1,
+	},
+};
+
+export default function Home(): React.ReactElement {
+	const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+	useEffect(() => {
+		async function fetchAccounts(): Promise<void> {
+			try {
+				await getHighRevenueAccounts({ minRevenue: 100000 });
+			} catch (error) {
+				setToastMessage("Data fetching failed.");
+			}
+		}
+		void fetchAccounts();
+	}, []);
+
+	const dismissToast = (): void => {
+		setToastMessage(null);
+	};
+
+	return (
+		<div style={styles.container}>
+			<div style={styles.content}>
+				<Hero
+					heading={
+						<>
+							Try Building React with <span style={styles.agentforceText}>Agentforce</span>
+						</>
+					}
+					subtext={
+						<>
+							Get started with the example prompts below or start fresh with a{" "}
+							<a href="#new-project" style={styles.newProjectLink}>
+								new project
+							</a>
+						</>
+					}
+				/>
+
+				<section style={styles.promptsSection}>
+					<PromptHighlight
+						image={codey1}
+						imageAlt="Dark Mode Example"
+						imagePosition="right"
+						imageSize="landscape"
+					>
+						<PromptCard
+							title="Create a Dark Mode"
+							description="Instantly add a Dark Mode switch that updates your app's background, text, and accent colors."
+							promptText="Add a Dark Mode to my app that updates background, text, and accent colors when toggled, with a smooth, polished animation for the transition.
+
+### Dark Mode Toggle
+
+A sliding switch should be placed in the top right of the index page. The switch should slide between sun and moon icons. When the moon icon is selected, Dark Mode should be displayed, and when the sun icon is selected, Light Mode (the current color scheme) should be selected.
+
+### Colors
+
+The word **Agentforce** in the heading is a gradient. The app's background is also a gradient. In Dark Mode these two gradients should complement each other, as they do in light mode. Also keep in mind the colors of the various SVG images on the page. These images need to look good in Dark mode.
+
+Be sure to also change the footer background. Remember to change every component's foreground and background color to appropriately contrast with the Dark mode background."
+						/>
+					</PromptHighlight>
+
+					<PromptHighlight
+						image={
+							<div
+								style={{
+									background: "#c9cffd",
+									borderRadius: "20px",
+									padding: "20px",
+									width: "100%",
+									height: "100%",
+									display: "flex",
+									flexDirection: "column",
+									gap: "10px",
+								}}
+							>
+								<div
+									style={{
+										background: "rgba(255, 255, 255, 0.2)",
+										border: "1px dashed #f8f8f8",
+										borderRadius: "10px",
+										height: "277px",
+										width: "100%",
+										position: "relative",
+										overflow: "hidden",
+										boxShadow: "0px 4px 14px 0px rgba(0, 0, 0, 0.1)",
+									}}
+								>
+									<AccountsTable />
+								</div>
+							</div>
+						}
+						imageAlt="Table with Salesforce data Example"
+						imagePosition="left"
+						imageSize="landscape"
+					>
+						<PromptCard
+							title="Create a table with real Salesforce data"
+							description="Pulling data into your React app from your org is seamless when using GraphQL. Send the prompt to the agent to see the magic happen."
+							promptText="Update the AccountsTable component to fetch and display all Account records from my Salesforce org using GraphQL.
+
+### Requirements
+
+1. Query the following fields for all Account records:
+   - Account Name
+   - Billing City
+   - Industry
+   - Annual Revenue
+
+2. Display the data in a table with three columns matching those fields.
+
+3. The table should use the existing table structure with:
+   - Purple header cells (#e5e3ff background)
+   - White data cells
+   - 1px borders between cells
+   - Proper styling to match the current design
+
+4. Include loading, error, and empty states with appropriate messages.
+
+5. Format the Annual Revenue as USD currency with no decimal places.
+
+6. Limit the query to the first 20 accounts for performance.
+
+7. Use the existing executeGraphQL utility function from @/api/graphql for the GraphQL query."
+						/>
+					</PromptHighlight>
+
+					<PromptHighlight
+						image={codey3}
+						imageAlt="Animations Example"
+						imagePosition="right"
+						imageSize="square"
+					>
+						<PromptCard
+							title="Add animations to give personality"
+							description="Bring your UI to life and give it personality with animations. Send the prompt to the agent to see the magic happen."
+							promptText="Animate the sections of this page to fly in from the sides on load. when you finish reload the page to show the animations"
+						/>
+					</PromptHighlight>
+				</section>
+
+				{/* <Footer /> */}
+			</div>
+
+			{/* Toast notification */}
+			{toastMessage && (
+				<div style={styles.toast}>
+					<span>{toastMessage}</span>
+					<button
+						style={styles.toastCloseButton}
+						onClick={dismissToast}
+						aria-label="Dismiss notification"
+					>
+						×
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}