@salesforce/webapp-template-app-react-template-b2e-experimental 1.43.0 → 1.43.1

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

@@ -1,115 +0,0 @@
-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/appreacttemplateb2e/src/context/AuthContext.tsx

@@ -1,83 +0,0 @@
-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/appreacttemplateb2e/src/hooks/form.tsx

@@ -1,116 +0,0 @@
-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/appreacttemplateb2e/src/lib/utils.ts

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

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/About.tsx

@@ -1,12 +0,0 @@
-function About() {
-  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">About</h1>
-        <p className="text-lg text-gray-600">This is the about page.</p>
-      </div>
-    </div>
-  );
-}
-
-export default About;

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/ChangePassword.tsx

@@ -1,98 +0,0 @@
-import { useState } from "react";
-import { Link } from "react-router";
-import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
-import { useAppForm } from "../hooks/form";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
-import { newPasswordSchema, handleApiResponse, getErrorMessage } from "../utils/helpers";
-
-const changePasswordSchema = z
-	.object({
-		currentPassword: z.string().min(1, "Current password is required"),
-	})
-	.and(newPasswordSchema);
-
-export default function ChangePassword() {
-	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
-
-	const form = useAppForm({
-		defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "" },
-		validators: { onChange: changePasswordSchema, onSubmit: changePasswordSchema },
-		onSubmit: async ({ value: formFieldValues }) => {
-			setSubmitError(null);
-			setSuccess(false);
-			try {
-				// [Dev Note] Custom Apex Endpoint: /auth/change-password
-				// You must ensure this Apex class exists in your org
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/change-password", {
-					currentPassword: formFieldValues.currentPassword,
-					newPassword: formFieldValues.newPassword,
-				});
-				await handleApiResponse(response, "Password change failed");
-				setSuccess(true);
-				form.reset();
-			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Password change failed"));
-			}
-		},
-		onSubmitInvalid: () => {},
-	});
-
-	return (
-		<CenteredPageLayout title={ROUTES.CHANGE_PASSWORD.TITLE}>
-			<form.AppForm>
-				<AuthForm
-					title="Change Password"
-					description="Enter your current and new password below"
-					error={submitError}
-					success={
-						success && (
-							<>
-								Password changed successfully!{" "}
-								<Link to={ROUTES.PROFILE.PATH} className="underline">
-									Back to Profile
-								</Link>
-							</>
-						)
-					}
-					submit={{ text: "Change Password", loadingText: "Changing…", disabled: success }}
-					footer={{ link: ROUTES.PROFILE.PATH, linkText: "Back to Profile" }}
-				>
-					<form.AppField name="currentPassword">
-						{(field) => (
-							<field.PasswordField
-								label="Current Password"
-								placeholder={AUTH_PLACEHOLDERS.PASSWORD}
-								autoComplete="current-password"
-								disabled={success}
-							/>
-						)}
-					</form.AppField>
-					<form.AppField name="newPassword">
-						{(field) => (
-							<field.PasswordField
-								label="New Password"
-								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW}
-								autoComplete="new-password"
-								disabled={success}
-							/>
-						)}
-					</form.AppField>
-					<form.AppField name="confirmPassword">
-						{(field) => (
-							<field.PasswordField
-								label="Confirm Password"
-								placeholder={AUTH_PLACEHOLDERS.PASSWORD_NEW_CONFIRM}
-								autoComplete="new-password"
-								disabled={success}
-							/>
-						)}
-					</form.AppField>
-				</AuthForm>
-			</form.AppForm>
-		</CenteredPageLayout>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/ForgotPassword.tsx

@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
-import { useAppForm } from "../hooks/form";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../utils/authenticationConfig";
-import { handleApiResponse, getErrorMessage } from "../utils/helpers";
-
-const forgotPasswordSchema = z.object({
-	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
-});
-
-export default function ForgotPassword() {
-	const [success, setSuccess] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
-
-	const form = useAppForm({
-		defaultValues: { username: "" },
-		validators: { onChange: forgotPasswordSchema, onSubmit: forgotPasswordSchema },
-		onSubmit: async ({ value }) => {
-			setSubmitError(null);
-			setSuccess(false);
-			try {
-				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
-				// You must ensure this Apex class exists in your org
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/forgot-password", {
-					username: value.username.trim(),
-				});
-				await handleApiResponse(response, "Failed to send reset link");
-				setSuccess(true);
-			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Failed to send reset link"));
-			}
-		},
-		onSubmitInvalid: () => {},
-	});
-
-	return (
-		<CenteredPageLayout title={ROUTES.FORGOT_PASSWORD.TITLE}>
-			<form.AppForm>
-				<AuthForm
-					title="Forgot Password"
-					description="Enter your username and we'll send you a reset link"
-					error={submitError}
-					success={
-						success &&
-						"If that username exists in our system, you will receive a reset link shortly."
-					}
-					submit={{ text: "Send Reset Link", loadingText: "Sending…", disabled: success }}
-					footer={{ text: "Remember your password?", link: ROUTES.LOGIN.PATH, linkText: "Sign in" }}
-				>
-					<form.AppField name="username">
-						{(field) => (
-							<field.TextField
-								label="Username"
-								placeholder={AUTH_PLACEHOLDERS.USERNAME}
-								autoComplete="username"
-								disabled={success}
-							/>
-						)}
-					</form.AppField>
-				</AuthForm>
-			</form.AppForm>
-		</CenteredPageLayout>
-	);
-}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/Login.tsx

@@ -1,89 +0,0 @@
-import { useState } from "react";
-import { useNavigate, useSearchParams, Link } from "react-router";
-import { z } from "zod";
-import { baseClient } from "@salesforce/webapp-experimental/api";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
-import { useAppForm } from "../hooks/form";
-import { ROUTES } from "../utils/authenticationConfig";
-import { emailSchema, getStartUrl, handleApiResponse, getErrorMessage } from "../utils/helpers";
-import type { AuthResponse } from "../utils/helpers";
-
-const loginSchema = z.object({
-	email: emailSchema,
-	password: z.string().min(1, "Password is required"),
-});
-
-export default function Login() {
-	const navigate = useNavigate();
-	const [searchParams] = useSearchParams();
-	const [submitError, setSubmitError] = useState<string | null>(null);
-
-	const form = useAppForm({
-		defaultValues: { email: "", password: "" },
-		validators: { onChange: loginSchema, onSubmit: loginSchema },
-		onSubmit: async ({ value }) => {
-			setSubmitError(null);
-			try {
-				// [Dev Note] Salesforce Integration:
-				// We use 'baseClient.post' to make an authenticated (or guest) call to Salesforce.
-				// "/sfciapi/services/apexrest/auth/login" refers to a custom Apex Class exposed as a REST resource.
-				// You must ensure this Apex class exists in your org and handles the login logic
-				// (e.g., creating a session or returning a token).
-				const response = await baseClient.post("/sfdcapi/services/apexrest/auth/login", {
-					email: value.email.trim().toLowerCase(),
-					password: value.password,
-					startUrl: getStartUrl(searchParams),
-				});
-				const result = await handleApiResponse<AuthResponse>(response, "Login failed");
-				if (result?.redirectUrl) {
-					// Hard navigate to the URL which establishes the server session cookie
-					window.location.replace(result.redirectUrl);
-				} else {
-					// In case redirectUrl is null, navigate to home
-					navigate("/", { replace: true });
-				}
-			} catch (err) {
-				setSubmitError(getErrorMessage(err, "Login failed"));
-			}
-		},
-		onSubmitInvalid: () => {},
-	});
-
-	return (
-		<CenteredPageLayout title={ROUTES.LOGIN.TITLE}>
-			<form.AppForm>
-				<AuthForm
-					title="Login"
-					description="Enter your email below to login to your account"
-					error={submitError}
-					submit={{ text: "Login", loadingText: "Logging in…" }}
-					footer={{
-						text: "Don't have an account?",
-						link: ROUTES.REGISTER.PATH,
-						linkText: "Sign up",
-					}}
-				>
-					<form.AppField name="email">
-						{(field) => <field.EmailField label="Email" />}
-					</form.AppField>
-					<form.AppField name="password">
-						{(field) => (
-							<field.PasswordField
-								label="Password"
-								labelAction={
-									<Link
-										to={ROUTES.FORGOT_PASSWORD.PATH}
-										className="text-sm underline-offset-4 hover:underline"
-									>
-										Forgot your password?
-									</Link>
-								}
-							/>
-						)}
-					</form.AppField>
-				</AuthForm>
-			</form.AppForm>
-		</CenteredPageLayout>
-	);
-}