@salesforce/templates 66.3.0 → 66.3.2

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/components/ui/spinner.tsx

@@ -1,15 +1,16 @@
-import { cn } from "../../lib/utils";
-import { Loader2Icon } from "lucide-react";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Loader2Icon } from 'lucide-react';
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-	return (
-		<Loader2Icon
-			role="status"
-			aria-label="Loading"
-			className={cn("size-4 animate-spin", className)}
-			{...props}
-		/>
-	);
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4 animate-spin', className)}
+      {...(props as any)}
+    />
+  );
 }
 
 export { Spinner };

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/components/ui/table.tsx

@@ -1,87 +1,114 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "../../lib/utils";
+import { cn } from '../../lib/utils';
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-	return (
-		<div data-slot="table-container" className="relative w-full overflow-x-auto">
-			<table
-				data-slot="table"
-				className={cn("w-full caption-bottom text-sm", className)}
-				{...props}
-			/>
-		</div>
-	);
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-	return (
-		<tbody
-			data-slot="table-body"
-			className={cn("[&_tr:last-child]:border-0", className)}
-			{...props}
-		/>
-	);
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-	return (
-		<tfoot
-			data-slot="table-footer"
-			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
-			{...props}
-		/>
-	);
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-	return (
-		<tr
-			data-slot="table-row"
-			className={cn(
-				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-	return (
-		<th
-			data-slot="table-head"
-			className={cn(
-				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-	return (
-		<td
-			data-slot="table-cell"
-			className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
-			{...props}
-		/>
-	);
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
-	return (
-		<caption
-			data-slot="table-caption"
-			className={cn("text-muted-foreground mt-4 text-sm", className)}
-			{...props}
-		/>
-	);
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
 }
 
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/components/ui/tabs.tsx

@@ -1,78 +1,88 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 
-import { cn } from "../../lib/utils";
+import { cn } from '../../lib/utils';
 
 function Tabs({
-	className,
-	orientation = "horizontal",
-	...props
+  className,
+  orientation = 'horizontal',
+  ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-	return (
-		<TabsPrimitive.Root
-			data-slot="tabs"
-			data-orientation={orientation}
-			className={cn("gap-2 group/tabs flex data-horizontal:flex-col", className)}
-			{...props}
-		/>
-	);
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        'gap-2 group/tabs flex data-horizontal:flex-col',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
 const tabsListVariants = cva(
-	"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
-	{
-		variants: {
-			variant: {
-				default: "bg-muted",
-				line: "gap-1 bg-transparent",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
 );
 
 function TabsList({
-	className,
-	variant = "default",
-	...props
-}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
-	return (
-		<TabsPrimitive.List
-			data-slot="tabs-list"
-			data-variant={variant}
-			className={cn(tabsListVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-	return (
-		<TabsPrimitive.Trigger
-			data-slot="tabs-trigger"
-			className={cn(
-				"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-				"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-				"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-				className,
-			)}
-			{...props}
-		/>
-	);
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-	return (
-		<TabsPrimitive.Content
-			data-slot="tabs-content"
-			className={cn("text-sm flex-1 outline-none", className)}
-			{...props}
-		/>
-	);
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('text-sm flex-1 outline-none', className)}
+      {...props}
+    />
+  );
 }
 
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/components.json

@@ -3,7 +3,7 @@
   "rsc": true,
   "tailwind": {
     "config": "",
-    "css": "styles/globals.css",
+    "css": "styles/global.css",
     "baseColor": "neutral",
     "cssVariables": true
   },

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/constants.ts

@@ -0,0 +1,39 @@
+/**
+ * Application-wide Constants
+ *
+ * Defines constants used throughout the global search feature.
+ */
+
+/**
+ * Object API names to search across in the global search feature.
+ * Currently supports single object search.
+ *
+ * @remarks
+ * - Array of Salesforce object API names
+ * - First element is used as the primary search object
+ * - Can be extended to support multiple objects in the future
+ *
+ * @example
+ * ```tsx
+ * const objectApiName = OBJECT_API_NAMES[0]; // 'Account'
+ * ```
+ */
+export const OBJECT_API_NAMES = ["Account"] as const;
+
+/** Fallback title when record display name cannot be resolved (e.g. before load or no name field). */
+export const DEFAULT_DETAIL_PAGE_TITLE = "Untitled";
+
+/**
+ * Default page size for search results pagination.
+ * This should match one of the values in PAGE_SIZE_OPTIONS from paginationUtils.
+ *
+ * @remarks
+ * - Default value is 20 (second option in PAGE_SIZE_OPTIONS)
+ * - Can be changed by user via pagination controls
+ *
+ * @example
+ * ```tsx
+ * const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+ * ```
+ */
+export const DEFAULT_PAGE_SIZE = 20;

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{context → features/authentication/context}/AuthContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
 import { getCurrentUser } from "@salesforce/webapp-experimental/api";
-import { API_ROUTES } from "../components/auth/authenticationConfig";
+import { API_ROUTES } from "../authenticationConfig";
 
 interface User {
 	readonly id: string;

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components → features/authentication}/footers/footer-link.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils";
 
 interface FooterLinkProps extends Omit<React.ComponentProps<typeof Link>, "children"> {
 	/** Link text prefix (e.g., "Don't have an account?") */

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components → features/authentication}/forms/auth-form.tsx

@@ -1,9 +1,9 @@
-import { FieldGroup } from "../ui/field";
-import { StatusAlert } from "../alerts/status-alert";
+import { FieldGroup } from "../../../components/ui/field";
+import { StatusAlert } from "../../../components/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 { CardLayout } from "../../../components/layouts/card-layout";
+import { useFormContext } from "../hooks/form";
 import { useId } from "react";
 
 /**

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components → features/authentication}/forms/submit-button.tsx

@@ -1,7 +1,7 @@
-import { Button } from "../ui/button";
-import { Spinner } from "../ui/spinner";
-import { cn } from "../../lib/utils";
-import { useFormContext } from "../../hooks/form";
+import { Button } from "../../../components/ui/button";
+import { Spinner } from "../../../components/ui/spinner";
+import { cn } from "../../../lib/utils";
+import { useFormContext } from "../hooks/form";
 
 interface SubmitButtonProps extends Omit<React.ComponentProps<typeof Button>, "type"> {
 	/** Button text when not submitting */

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{hooks → features/authentication/hooks}/form.tsx

@@ -1,9 +1,14 @@
 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 "../components/auth/authenticationConfig";
+import {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldLabel,
+} from "../../../components/ui/field";
+import { Input } from "../../../components/ui/input";
+import { cn } from "../../../lib/utils";
+import { AUTH_PLACEHOLDERS } from "../authenticationConfig";
 
 // Create form hook contexts
 export const { fieldContext, formContext, useFieldContext, useFormContext } =
@@ -13,11 +18,10 @@ export const { fieldContext, formContext, useFieldContext, useFormContext } =
 // Field Components
 // ============================================================================
 
-interface TextFieldProps
-	extends Omit<
-		React.ComponentProps<typeof Input>,
-		"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
-	> {
+interface TextFieldProps extends Omit<
+	React.ComponentProps<typeof Input>,
+	"name" | "value" | "onBlur" | "onChange" | "aria-invalid"
+> {
 	label: string;
 	labelAction?: React.ReactNode;
 	description?: React.ReactNode;

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components → features/authentication}/layout/card-skeleton.tsx

@@ -1,6 +1,6 @@
 import { CenteredPageLayout } from "./centered-page-layout";
-import { Card, CardContent, CardHeader } from "../ui/card";
-import { Skeleton } from "../ui/skeleton";
+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
+import { Skeleton } from "../../../components/ui/skeleton";
 
 interface CardSkeletonProps {
 	/**

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components → features/authentication}/layout/centered-page-layout.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils";
 
 /**
  * Variant styles for the content container's maximum width.
@@ -22,8 +22,7 @@ const contentContainerVariants = cva("w-full", {
  * Props for the CenteredPageLayout component.
  */
 interface CenteredPageLayoutProps
-	extends React.ComponentProps<"div">,
-		VariantProps<typeof contentContainerVariants> {
+	extends React.ComponentProps<"div">, VariantProps<typeof contentContainerVariants> {
 	/** The content to be displayed within the page layout */
 	children: React.ReactNode;
 	/**

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{layouts → features/authentication/layouts}/AuthAppLayout.tsx

@@ -1,6 +1,6 @@
-import SessionTimeoutValidator from "../components/auth/sessionTimeout/SessionTimeoutValidator";
+import SessionTimeoutValidator from "../sessionTimeout/SessionTimeoutValidator";
 import { AuthProvider } from "../context/AuthContext";
-import AppLayout from "../appLayout";
+import AppLayout from "../../../appLayout";
 
 export default function AuthAppLayout() {
 	return (

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components/auth → features/authentication/layouts}/authenticationRouteLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet, useSearchParams } from "react-router";
-import { useAuth } from "../../context/AuthContext";
-import { getStartUrl } from "./authHelpers";
+import { useAuth } from "../context/AuthContext";
+import { getStartUrl } from "../authHelpers";
 import { CardSkeleton } from "../layout/card-skeleton";
 
 /**

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{components/auth → features/authentication/layouts}/privateRouteLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet, useLocation } from "react-router";
-import { useAuth } from "../../context/AuthContext";
-import { AUTH_REDIRECT_PARAM, ROUTES } from "./authenticationConfig";
+import { useAuth } from "../context/AuthContext";
+import { AUTH_REDIRECT_PARAM, ROUTES } from "../authenticationConfig";
 import { CardSkeleton } from "../layout/card-skeleton";
 
 /**

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{pages → features/authentication/pages}/ChangePassword.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { Link } from "react-router";
 import { z } from "zod";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "../lib/data-sdk";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
-import { newPasswordSchema } from "../components/auth/authHelpers";
+import { getDataSDK } from "@salesforce/sdk-data";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
+import { newPasswordSchema } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const changePasswordSchema = z
@@ -29,7 +29,7 @@ export default function ChangePassword() {
 				// [Dev Note] Custom Apex Endpoint: /auth/change-password
 				// You must ensure this Apex class exists in your org
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch("/sfdcapi/services/apexrest/auth/change-password", {
+				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/change-password", {
 					method: "POST",
 					body: JSON.stringify({
 						currentPassword: formFieldValues.currentPassword,

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{pages → features/authentication/pages}/ForgotPassword.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { z } from "zod";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "../lib/data-sdk";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../components/auth/authenticationConfig";
+import { getDataSDK } from "@salesforce/sdk-data";
+import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const forgotPasswordSchema = z.object({
@@ -25,7 +25,7 @@ export default function ForgotPassword() {
 				// [Dev Note] Custom Apex Endpoint: /auth/forgot-password
 				// You must ensure this Apex class exists in your org
 				const sdk = await getDataSDK();
-				const response = await sdk.fetch("/sfdcapi/services/apexrest/auth/forgot-password", {
+				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/forgot-password", {
 					method: "POST",
 					body: JSON.stringify({ username: value.username.trim() }),
 					headers: {

package/lib/templates/project/reactb2x/force-app/main/default/webapplications/appreacttemplateb2x/src/{pages → features/authentication/pages}/Login.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router";
 import { z } from "zod";
-import { CenteredPageLayout } from "../components/layout/centered-page-layout";
-import { AuthForm } from "../components/forms/auth-form";
+import { CenteredPageLayout } from "../layout/centered-page-layout";
+import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
-import { getDataSDK } from "../lib/data-sdk";
-import { ROUTES } from "../components/auth/authenticationConfig";
-import { emailSchema, getStartUrl, type AuthResponse } from "../components/auth/authHelpers";
+import { getDataSDK } from "@salesforce/sdk-data";
+import { ROUTES } from "../authenticationConfig";
+import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
 import { handleApiResponse, getErrorMessage } from "../utils/helpers";
 
 const loginSchema = z.object({
@@ -31,7 +31,7 @@ export default function Login() {
 				// 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 sdk = await getDataSDK();
-				const response = await sdk.fetch("/sfdcapi/services/apexrest/auth/login", {
+				const response = await sdk.fetch!("/sfdcapi/services/apexrest/auth/login", {
 					method: "POST",
 					body: JSON.stringify({
 						email: value.email.trim().toLowerCase(),