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

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/PromptHighlight.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import PromptHighlight from "./PromptHighlight";
+
+describe("PromptHighlight", () => {
+	const defaultProps = {
+		image: "/test-image.png",
+		imageAlt: "Test Image",
+	};
+
+	it("renders children and image", () => {
+		render(
+			<PromptHighlight {...defaultProps}>
+				<div>Test Content</div>
+			</PromptHighlight>,
+		);
+
+		expect(screen.getByText("Test Content")).toBeInTheDocument();
+		expect(screen.getByAltText("Test Image")).toBeInTheDocument();
+	});
+
+	it("positions image on the right by default", () => {
+		const { container } = render(
+			<PromptHighlight {...defaultProps}>
+				<div data-testid="content">Content</div>
+			</PromptHighlight>,
+		);
+
+		const layout = container.firstChild as HTMLElement;
+		const children = Array.from(layout.children);
+
+		expect(children[0]).toContainElement(screen.getByTestId("content"));
+		expect(children[1]).toContainElement(screen.getByAltText("Test Image"));
+	});
+
+	it("positions image on the left when specified", () => {
+		const { container } = render(
+			<PromptHighlight {...defaultProps} imagePosition="left">
+				<div data-testid="content">Content</div>
+			</PromptHighlight>,
+		);
+
+		const layout = container.firstChild as HTMLElement;
+		const children = Array.from(layout.children);
+
+		expect(children[0]).toContainElement(screen.getByAltText("Test Image"));
+		expect(children[1]).toContainElement(screen.getByTestId("content"));
+	});
+
+	it("supports landscape and square image sizes", () => {
+		const { rerender } = render(
+			<PromptHighlight {...defaultProps} imageSize="landscape">
+				<div>Content</div>
+			</PromptHighlight>,
+		);
+
+		let img = screen.getByAltText("Test Image");
+		expect(img.parentElement).toBeInTheDocument();
+
+		rerender(
+			<PromptHighlight {...defaultProps} imageSize="square">
+				<div>Content</div>
+			</PromptHighlight>,
+		);
+
+		img = screen.getByAltText("Test Image");
+		expect(img.parentElement).toBeInTheDocument();
+	});
+
+	it("renders complex children content", () => {
+		render(
+			<PromptHighlight {...defaultProps}>
+				<div>
+					<h2>Heading</h2>
+					<p>Paragraph</p>
+					<button type="button">Click me</button>
+				</div>
+			</PromptHighlight>,
+		);
+
+		expect(screen.getByText("Heading")).toBeInTheDocument();
+		expect(screen.getByText("Paragraph")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,73 @@
+import type React from "react";
+
+interface PromptHighlightProps {
+	children: React.ReactNode;
+	image: string | React.ReactNode;
+	imageAlt: string;
+	imagePosition?: "left" | "right";
+	imageSize?: "landscape" | "square";
+}
+
+export default function PromptHighlight({
+	children,
+	image,
+	imageAlt,
+	imagePosition = "right",
+	imageSize = "landscape",
+}: PromptHighlightProps) {
+	const imageContainerStyle =
+		imageSize === "square" ? styles.promptImageContainerSquare : styles.promptImageContainer;
+
+	const imageElement =
+		typeof image === "string" ? (
+			<div style={imageContainerStyle}>
+				<img src={image} alt={imageAlt} style={styles.promptImage} />
+			</div>
+		) : (
+			<div style={imageContainerStyle}>{image}</div>
+		);
+
+	return (
+		<div style={styles.layout}>
+			{imagePosition === "left" ? (
+				<>
+					{imageElement}
+					{children}
+				</>
+			) : (
+				<>
+					{children}
+					{imageElement}
+				</>
+			)}
+		</div>
+	);
+}
+
+const styles: Record<string, React.CSSProperties> = {
+	layout: {
+		display: "flex",
+		alignItems: "center",
+		gap: "20px",
+		width: "100%",
+	},
+	promptImageContainer: {
+		flexShrink: 0,
+		width: "480px",
+		height: "250px",
+		overflow: "hidden",
+		borderRadius: "8px",
+	},
+	promptImageContainerSquare: {
+		flexShrink: 0,
+		width: "371px",
+		height: "371px",
+		overflow: "hidden",
+		borderRadius: "8px",
+	},
+	promptImage: {
+		width: "100%",
+		height: "100%",
+		objectFit: "contain",
+	},
+};

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/alerts/status-alert.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
+import { Alert, AlertDescription } from "../ui/alert";
+import { useId } from "react";
+
+const statusAlertVariants = cva("", {
+	variants: {
+		variant: {
+			error: "",
+			success: "",
+		},
+	},
+	defaultVariants: {
+		variant: "error",
+	},
+});
+
+interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
+	children?: React.ReactNode;
+	/** Alert variant type. @default "error" */
+	variant?: "error" | "success";
+}
+
+/**
+ * Status alert component for displaying error or success messages.
+ * Returns null if no children are provided.
+ */
+export function StatusAlert({ children, variant = "error" }: StatusAlertProps) {
+	if (!children) return null;
+
+	const isError = variant === "error";
+	const descriptionId = useId();
+
+	return (
+		<Alert
+			variant={isError ? "destructive" : "default"}
+			className={statusAlertVariants({ variant })}
+			aria-describedby={descriptionId}
+			role={isError ? "alert" : "status"}
+		>
+			{isError ? <AlertCircleIcon aria-hidden="true" /> : <CheckCircle2Icon aria-hidden="true" />}
+			<AlertDescription id={descriptionId}>{children}</AlertDescription>
+		</Alert>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/auth/authentication-route.tsx

@@ -0,0 +1,21 @@
+import { Navigate, Outlet, useSearchParams } from "react-router";
+import { useAuth } from "../../context/AuthContext";
+import { getStartUrl } from "../../utils/helpers";
+import { LoadingPage } from "../layout/loading-page";
+
+/**
+ * [Dev Note] "Public Only" Route Guard:
+ * This component protects routes that should NOT be accessible if the user is already logged in
+ * (e.g., Login, Register, Forgot Password).
+ * If an authenticated user tries to access these pages, they are automatically redirected
+ * to the default authenticated view (e.g., Home or Profile) to prevent confusion.
+ */
+export default function AuthenticationRoute() {
+	const { isAuthenticated, loading } = useAuth();
+	const [searchParams] = useSearchParams();
+
+	if (loading) return <LoadingPage contentMaxWidth="md" />;
+	if (isAuthenticated) return <Navigate to={getStartUrl(searchParams)} replace />;
+
+	return <Outlet />;
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/auth/private-route.tsx

@@ -0,0 +1,36 @@
+import { Navigate, Outlet, useLocation } from "react-router";
+import { useAuth } from "../../context/AuthContext";
+import { AUTH_REDIRECT_PARAM, ROUTES } from "../../utils/authenticationConfig";
+import { LoadingPage } from "../layout/loading-page";
+
+/**
+ * [Dev Note] Route Guard:
+ * Renders the child route (Outlet) if the user is authenticated.
+ * Otherwise, redirects to Login with a 'startUrl' parameter so the user can be
+ * returned to this page after successful login.
+ */
+export default function PrivateRoute() {
+	const { isAuthenticated, loading } = useAuth();
+	const location = useLocation();
+
+	if (loading) return <LoadingPage contentMaxWidth="md" />;
+
+	if (!isAuthenticated) {
+		const searchParams = new URLSearchParams();
+
+		// [Dev Note] Capture current location to return after login
+		const destination = location.pathname + location.search;
+		searchParams.set(AUTH_REDIRECT_PARAM, destination);
+		return (
+			<Navigate // Navigate accepts an object to safely construct the URL
+				to={{
+					pathname: ROUTES.LOGIN.PATH,
+					search: searchParams.toString(),
+				}}
+				replace
+			/>
+		);
+	}
+
+	return <Outlet />;
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/footers/footer-link.tsx

@@ -0,0 +1,36 @@
+import { Link } from "react-router";
+import { cn } from "../../lib/utils";
+
+interface FooterLinkProps extends Omit<React.ComponentProps<typeof Link>, "children"> {
+	/** Link text prefix (e.g., "Don't have an account?") */
+	text?: string;
+	/** Link label (e.g., "Sign up") */
+	linkText: string;
+}
+
+/**
+ * Footer link component.
+ */
+export function FooterLink({ text, to, linkText, className, ...props }: FooterLinkProps) {
+	return (
+		<p className={cn("w-full text-center text-sm text-muted-foreground", className)}>
+			{text && (
+				<>
+					{text}
+					{/* Robustness: Explicit space ensures formatting tools don't strip it */}
+					{"\u00A0"}
+				</>
+			)}
+			<Link
+				to={to}
+				className={cn(
+					"font-medium underline hover:text-primary transition-colors",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				)}
+				{...props}
+			>
+				{linkText}
+			</Link>
+		</p>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/forms/auth-form.tsx

@@ -0,0 +1,79 @@
+import { FieldGroup } from "../ui/field";
+import { StatusAlert } from "../alerts/status-alert";
+import { FooterLink } from "../footers/footer-link";
+import { SubmitButton } from "./submit-button";
+import { CardLayout } from "../layout/card-layout";
+import { useFormContext } from "../../hooks/form";
+import { useId } from "react";
+
+/**
+ * [Dev Note] A wrapper component that enforces consistent layout (Card) and error/success alert positioning
+ * for all authentication forms.
+ */
+interface AuthFormProps extends Omit<React.ComponentProps<"form">, "onSubmit"> {
+	title: string;
+	description: string;
+	error?: React.ReactNode;
+	success?: React.ReactNode;
+	submit: {
+		text: string;
+		loadingText?: string;
+	};
+	footer?: {
+		text?: string;
+		link: string;
+		linkText: string;
+	};
+}
+
+/**
+ * [Dev Note] Standardized Authentication Layout:
+ * Wraps the specific logic of Login/Register forms with a consistent visual frame (Card),
+ * title, and error alert placement. Extends form element props for flexibility.
+ * This ensures all auth-related pages look and behave similarly.
+ */
+export function AuthForm({
+	id: providedId,
+	title,
+	description,
+	error,
+	success,
+	children,
+	submit,
+	footer,
+	...props
+}: AuthFormProps) {
+	const form = useFormContext();
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+
+	return (
+		<CardLayout title={title} description={description}>
+			<div className="space-y-6">
+				{/* [Dev Note] Global form error alert (e.g. "Invalid Credentials") */}
+				{error && <StatusAlert variant="error">{error}</StatusAlert>}
+				{success && <StatusAlert variant="success">{success}</StatusAlert>}
+
+				<form
+					id={id}
+					onSubmit={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						form.handleSubmit();
+					}}
+					{...props}
+				>
+					<FieldGroup>{children}</FieldGroup>
+					<SubmitButton
+						form={id}
+						label={submit.text}
+						loadingLabel={submit.loadingText}
+						className="mt-6"
+					/>
+				</form>
+				{/* [Dev Note] Navigation links (e.g. "Forgot Password?") */}
+				{footer && <FooterLink text={footer.text} to={footer.link} linkText={footer.linkText} />}
+			</div>
+		</CardLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/forms/submit-button.tsx

@@ -0,0 +1,49 @@
+import { Button } from "../ui/button";
+import { Spinner } from "../ui/spinner";
+import { cn } from "../../lib/utils";
+import { useFormContext } from "../../hooks/form";
+
+interface SubmitButtonProps extends Omit<React.ComponentProps<typeof Button>, "type" | "disabled"> {
+	/** Button text when not submitting */
+	label: string;
+	/** Button text while submitting */
+	loadingLabel?: string;
+	/** Form id to associate with (for buttons outside form element) */
+	form?: string;
+}
+
+const isSubmittingSelector = (state: { isSubmitting: boolean }) => state.isSubmitting;
+
+/**
+ * Submit button that subscribes to form submission state.
+ * UX Best Practice:
+ * 1. Disables interaction immediately upon click (via isLoading) to prevent
+ * accidental double-submissions which can cause race conditions in Auth APIs.
+ * 2. Provides immediate visual feedback (Spinner) because Auth calls (e.g. hashing passwords,
+ * generating sessions) can have variable latency.
+ */
+export function SubmitButton({
+	label,
+	loadingLabel = "Submitting…",
+	className,
+	form: formId,
+	...props
+}: SubmitButtonProps) {
+	const form = useFormContext();
+	return (
+		<form.Subscribe selector={isSubmittingSelector}>
+			{(isSubmitting: boolean) => (
+				<Button
+					type="submit"
+					form={formId}
+					className={cn("w-full", className)}
+					disabled={isSubmitting}
+					{...props}
+				>
+					{isSubmitting && <Spinner className="mr-2" aria-hidden="true" />}
+					{isSubmitting ? loadingLabel : label}
+				</Button>
+			)}
+		</form.Subscribe>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/layout/card-layout.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+interface CardLayoutProps {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="text-2xl">{title}</CardTitle>
+				{description && <CardDescription>{description}</CardDescription>}
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/layout/centered-page-layout.tsx

@@ -0,0 +1,73 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+/**
+ * Variant styles for the content container's maximum width.
+ * Controls the maximum width of the inner content area within the page layout.
+ */
+const contentContainerVariants = cva("w-full", {
+	variants: {
+		contentMaxWidth: {
+			sm: "max-w-sm",
+			md: "max-w-md",
+			lg: "max-w-lg",
+		},
+	},
+	defaultVariants: {
+		contentMaxWidth: "sm",
+	},
+});
+
+/**
+ * Props for the CenteredPageLayout component.
+ */
+interface CenteredPageLayoutProps
+	extends React.ComponentProps<"div">,
+		VariantProps<typeof contentContainerVariants> {
+	/** The content to be displayed within the page layout */
+	children: React.ReactNode;
+	/**
+	 * Maximum width of the content container.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Optional page title. If provided, will render a <title> component that React will place in the document head.
+	 */
+	title?: string;
+}
+
+/**
+ * CenteredPageLayout component that provides consistent page structure and spacing.
+ *
+ * This component creates a full-viewport-height container that centers its content
+ * both horizontally and vertically. The inner content area has a configurable maximum width
+ * to prevent content from becoming too wide on large screens.
+ *
+ * @example
+ * ```tsx
+ * <CenteredPageLayout contentMaxWidth="md">
+ *   <YourPageContent />
+ * </CenteredPageLayout>
+ * ```
+ */
+export function CenteredPageLayout({
+	contentMaxWidth,
+	className,
+	children,
+	title,
+	...props
+}: CenteredPageLayoutProps) {
+	return (
+		<>
+			{title && <title>{title}</title>}
+			<main
+				className={cn("flex min-h-svh w-full items-center justify-center p-6 md:p-10", className)}
+				data-slot="page-layout"
+				{...props}
+			>
+				<div className={contentContainerVariants({ contentMaxWidth })}>{children}</div>
+			</main>
+		</>
+	);
+}

package/dist/force-app/main/default/webapplications/appreactvibecodingstarter/src/components/layout/loading-page.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { CenteredPageLayout } from "./centered-page-layout";
+import { Spinner } from "../ui/spinner";
+
+/**
+ * Spinner size variants based on content width.
+ */
+const spinnerVariants = cva("", {
+	variants: {
+		contentMaxWidth: {
+			sm: "size-6",
+			md: "size-8",
+			lg: "size-10",
+		},
+	},
+	defaultVariants: {
+		contentMaxWidth: "sm",
+	},
+});
+
+interface LoadingPageProps extends VariantProps<typeof spinnerVariants> {
+	/**
+	 * Maximum width of the content container. Also scales the spinner size.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Accessible label for screen readers.
+	 * @default "Loading…"
+	 */
+	loadingText?: string;
+}
+
+/**
+ * Full-page loading indicator with centered spinner.
+ */
+export function LoadingPage({ contentMaxWidth, loadingText = "Loading…" }: LoadingPageProps) {
+	return (
+		<CenteredPageLayout contentMaxWidth={contentMaxWidth}>
+			<div className="flex justify-center" role="status" aria-live="polite">
+				<Spinner className={spinnerVariants({ contentMaxWidth })} aria-hidden="true" />
+				<span className="sr-only">{loadingText}</span>
+			</div>
+		</CenteredPageLayout>
+	);
+}

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

@@ -0,0 +1,65 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	role,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role={role ?? (variant === "destructive" ? "alert" : "status")}
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+// Maintenance/A11y: Added 'asChild' pattern or a simple 'as' prop
+// to allow rendering semantic headings (h1-h6).
+interface AlertTitleProps extends React.ComponentProps<"div"> {
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p";
+}
+function AlertTitle({ className, as: Component = "div", ...props }: AlertTitleProps) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };